
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.



Posts Tagged ‘html’

One of the best features of the flash player if you’re doing video is the fullscreen functionality. It has been a question I’ve heard repeatedly. There are limits to what you can do in fullscreen. Such as minimal keyboard support while in fullscreen. But it is perfect for a video player! Who doesn’t want to see a video expanded to full screen mode?
There are a couple things to consider when coding fullscreen into your flash. Remember the hard coded “Press Esc to exit full screen mode.” that Adobe has placed into the flash player. This is untouchable by developers, and the function returns to normal stage display state. So we call the function to go fullscreen, but the exit fullscreen has already been written for us. This can pose a problem though, when we need the player to do something when we exit fullscreen, that is when we want it to do something more than the generic black box function adobe includes.
Steps
- specify stage properties
- full screen button and listeners
- stage fullscreenEvent listener
- (functions for each)
- allowfullscreen = true
Example
1. Stage properties exist that allow us to specify what type of fullscreen we want. We can have the swf scale to fit the fullscreen area (StageScaleMode.SHOW_ALL), not scale at all (StageScaleMode.NO_SCALE), skew to fit fullscreen (StageScaleMode.EXACT_FIT), and scale to fill fullscreen area (Stage.ScaleMode.NO_BORDER). We may also edit the alignment of the stage in the fullscreen area; in this example I’m using TOP, but refer to documentation for more options
2. Adobe has placed restrictions on when a swf can enter fullscreen, and has deemed that it must result from a user interaction, a mouse click or keystroke. So create your buttons (or keyListeners). I prefer to have one button to enter fullscreen and another to exit, and have them both call the same function to toggle fullscreen. It gives a clearer communication to the user. I then control the visibility of these buttons depending on the current display state of the stage.
3. Another listener to watch the stage dispaly state. stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange); This will fire every time the stage display state changes. We need this because as I mentioned earlier, when entering fullscreen we use our own function, but the ‘hit esc to exit fullscreen’ functionality is built into the flash player, we can’t update our stage layout or button visibility without watching to catch when the display state is changed. Using this method we can update our stage layout any and every time.
4. Of course flesh out the fullscreenToggle function to include anything else you need.
5. Lastly, for a SWF file embedded in an HTML page, the HTML code to embed Flash Player must include a ‘param’ tag and ‘embed’ attribute with the name ‘allowFullScreen’ and value ‘true’, like this:
<object>
...
<param name="allowFullScreen" value="true" />
<embed ... allowfullscreen="true" />
</object>
The allowFullScreen tag enables full-screen mode in the player. If you do everything else right and don’t include this in your embed codes, fullscreen will not work. The default value is false if this attribute is omitted. Note the viewer must at least have Flash Player version 9,0,28,0 installed to use full-screen mode. Also note that the simple (ctrl + enter) testing your movie in flash will not allow fullscreen either, you must use the debug tester (ctrl + shift + enter) … or go open the published swf in flash player.
Actionscript
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 | stage.scaleMode = StageScaleMode.SHOW_ALL; stage.align = StageAlign.TOP; var stageDisplayAdjustCounter:uint = 0; fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle); ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle); stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange); fsb.buttonMode = true; ssb.buttonMode = true; //fullscreen buttons need this to adjust the stage display state. //pressing escape to exit fullscreen bypasses this function function fullscreenToggle(e:MouseEvent = null):void { status.appendText(stageDisplayAdjustCounter+". fullscreenToggle from "+stage.displayState+"\n"); //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; } //here we subtract 1 from the counter because it has already incremented (in onFullscreenChange) when we set the display state above status.appendText((stageDisplayAdjustCounter-1)+". fullscreenToggle to "+stage.displayState+"\n"); status.scrollV = status.maxScrollV; } //this function is called every and anytime the stage display state is adjusted //either by pressing our buttons or function onFullscreenChange(e:FullScreenEvent = null):void { status.appendText(stageDisplayAdjustCounter+". onFullscreenChange\n"); status.scrollV = status.maxScrollV; if (stage.displayState == StageDisplayState.FULL_SCREEN) { fsb.visible = false; ssb.visible = true; } else { fsb.visible = true; ssb.visible = false; } stageDisplayAdjustCounter++; } onFullscreenChange(); |
Source
Download fullscreen_tut.fla file
How to use fullscreen in AS3 | Stage Display State Tutorial
Author: Evan Mullins | Filed under: tutorialOverview
Earlier I wrote a tutorial article about asfunction in as2. Now that I’ m into as3, surprise surprise asfunction has been depreciated and now to replace it is the LINK TextEvent. Dispatched when a user clicks a hyperlink in an HTML-enabled text field, where the URL begins with “event:”. The remainder of the URL after “event:” will be placed in the text property of the LINK event.
This differs from the asfunction method in that we must add an event listener (addEventListener) to the textField object, the event listener specifies which function will be called in the event of a link click and there is no way to send arguments along with the event (AFAIK). But it’s easy enought to use one link event function for all your link events and put in a simple switch statement to coordinate the desired results…
Steps
- Use event in the href attribute. (href=”event:eventText”)
- Listen to the textField (theTextField.addEventListener(TextEvent.LINK, linkHandler);)
- Handle the link event (function linkHandler(linkEvent:TextEvent):void {…)
Example
Actionscript
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 58 59 60 61 62 63 | var myHTMLText:String = "Sample text in an html enabled text box.\n"+ "Here's a normal link to <a href='http://bloc.circlecube.com'>circlecube</a> putting the link into the href attribute like normal!\n"+ "<a href='event:clickLink'>Click this circlecube</a>, to see the text event link in action! \n"+ "And some more links that don't go anywhere, but they do call functions in actionscript. "+ "Click this to move <a href='event:moveUp'>UP</a>, click me move back "+ "<a href='event:moveDown'>DOWN</a>.\n"+ "Also, one last example <a href='event:testing'>click for a trace test</a>"; //create and initialize css var myCSS:StyleSheet = new StyleSheet(); myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'}); myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'}); myHTML.styleSheet = myCSS; myHTML.htmlText = myHTMLText; myHTML.addEventListener(TextEvent.LINK, linkHandler); function linkHandler(linkEvent:TextEvent):void { switch (linkEvent.text) { case "clickLink": clickLink(); break; case "moveUp": moveUp(); break; case "moveDown": moveDown(); break; default: giveFeedback(linkEvent.text); } } //function to be called from html text function clickLink():void { giveFeedback("Hyperlink clicked!"); var myURL:String = "http://blog.circlecube.com"; var myRequest:URLRequest = new URLRequest(myURL); try { navigateToURL(myRequest); } catch (e:Error) { // handle error here giveFeedback(e); } } //another function to be called from html text, recieves one argument function moveUp():void { feedback.y -= 10; giveFeedback("Up"); } //a simple trick to allow passing of multiple arguments function moveDown():void { feedback.y += 10; giveFeedback("Down"); } function giveFeedback(str):void { trace(str); feedback.appendText(str +"\n"); feedback.scrollV = feedback.maxScrollV; } |
Source
Download the fla here: textlinkevent_as3.fla
asfunction (TextEvent.LINK) Tutorial for AS3 | Flash HTML Link to call actionscript function | Tutorial
Author: Evan Mullins | Filed under: tutorialStomperNet has been a ‘buzz’.
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!























