Portal website design for StomperNet. Created to give digital access of subscription content: including video, pdf versions of print material (journal). I was responsible for the design of the front end of the site with valid html and css. I also designed the site logo and the graphics on the site. Was able to include some small customized flash elements. Visit public my.stompernet.com site and purchase instant access to StomperNet content inside the my.stompernet.com portal.
Sucks when you seem to have a bug in your code somewhere so you dissect your code over and over and are convinced that according to your code, everything should be fine, so you come back later thinking fresher eyes will see it, and still can’t find the cause, and then resort to debugging with various trace statements…
I’ve been developing a custom flash player in as3. Fullscreen and all those bells and whistles… I could test locally and eveything was beautiful… but then upload and test in the browser and when I would go into fullscreen mode, the video would pause. Pretty annoying bug! So I’d go through my code and examine anywhere a call to pause the video (there are only two): pressing the play/pause button and pressing the spacebar (keyboard shortcut). I couldn’t find any correalation. I was thinking adobe must be doing some crazy security things when going into fullscreen… but no, no other video player I’ve seen does this!
After commenting out my keyboard events, the bug is fixed! But I still can’t use the spacebar to pause/play. I love this functionality for usability. Isn’t that pretty standard for video? space to pause, it’s like second nature to me.
Does entering fullscreen really trigger a keyboard event equivalent to pressing my spacebar!? Sure enough. how much sense does that make, but it gets better! I had a friend test this swf and it worked fine for him. No pause on fullscreen! Wha!? Using good ole IE7… So yes, it’s a browser specific actionscript bug, firefox even! That was one of the things I liked about flash initially, not too much to mess with as far as cross browser issues once you get the swf embedded in the html, or so I thought.
So after playing with booleans to try to control when the keyboard events will be working.
Has anyone experienced this or another issue that just left you baffled, even after you figured out the bug?!
Well, I’ve done the right thing, I’ve posted about it to hopefully help anyone else having this issue. I created a test case file to rule out anything else in my code and make sure I’m not crazy.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle); ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle); stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange); fsb.buttonMode = true; ssb.buttonMode = true; onFullscreenChange(); function fullscreenToggle(e:MouseEvent = null):void { //normal mode, enter fullscreen mode if (stage.displayState == StageDisplayState.NORMAL){ //set stage display state stage.displayState = StageDisplayState.FULL_SCREEN; } //fullscreen mode, enter normal mode else if (stage.displayState == StageDisplayState.FULL_SCREEN){ //set stage display state stage.displayState = StageDisplayState.NORMAL; } onFullscreenChange(); } function onFullscreenChange(e:FullScreenEvent = null):void { if (stage.displayState == StageDisplayState.FULL_SCREEN) { tracer("full screen"); fsb.visible = false; ssb.visible = true; } else { tracer("small screen"); fsb.visible = true; ssb.visible = false; } tracer("toggle to "+stage.displayState); } stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener); function keyDownListener(e:KeyboardEvent) { tracer("keyboard: keyCode: "+ e.keyCode.toString()); } var tracerwindow:TextField; function tracer( ...args){ if (tracerwindow == null){ tracerwindow = new TextField(); tracerwindow.width = stage.stageWidth/2; tracerwindow.height = stage.stageHeight; tracerwindow.multiline = true; addChild(tracerwindow); } for (var i:uint = 0; i < args.length; i++) { tracerwindow.appendText(args[i].toString() + " "); } tracerwindow.appendText("\n"); trace(args); } |
other places that I’ve found this mentioned that helped me understand what was going on:
http://dreamweaverforum.info/actionscript-3/123202-keyboard-event-full-screen.html
http://bugs.adobe.com/jira/browse/FP-814
After Andy’s ‘Mea Culpa‘ why wouldn’t it be…
But this is so much better and bigger, learning many lessons from the last launch – StomperNet strikes again!
Teamed up with Paul Lemberg a new product called FormulaFIVE (F5 for short).
Just launched a video to excite the industry!
So check out stomperf5.com now!
I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to FlashDen. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!
This is mainly an image viewer, stay tuned for any updates, like video support etc.
Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).
It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.
Each work is loaded into the “bay�? as a round thumbnail or “pog�?. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).
The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!
Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50×50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.
Site easily integrates with Google Analytics to track user interactions within this flash portfolio!
All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- Name or Title of work --> Random Gear <!-- Description of work --> Random gear photograph from FlashDen assets. <!-- Image paths (thumb and focus) are both constructed with the directory names above, or you can use an absolute path (http://flashden.net/new/images/pictures/icon_newsroom.gif) --> <!-- Image thumbnial, this is brought in and masked to a circle (width:50px x height:50px) --> random_gear.jpg <!-- Focus thumbnail, loaded into the Focus Box when pog is clicked (max width:375px x height:270px) --> random_gear.jpg <!-- If a link exsists place it here the Text goes in the title node and the url in the url, if no link leave empty --> http://flashden.net <!-- Tags for this work. Tags are parsed and displayed across the bottom of the bay (seperated by a pipe '|') --> Photo|Industrial |
Enjoy, and let me know what you think!
My interactive design tutorials, critiques, techniques,
technologies, rambling and especially playground.
from Twitter shared from reader from delicious from last.fm
