ActionScript 3 Full Browser Background Content.
This is the second iteration of this class. I decided to put the NpFSObjectResize Class to use within this demo, using that class as the superclass for here. As a result, this new version of this file is much more capable, supporting stage alignment modes along with a simple method for loading in new background images or swfs. You could use that feature to create a simple full browser slideshow, but be warned that I have not used the same bitmapData memory management techniques as I have within the Full Browser Cross Fading demo. So, your memory useage could get higher using this class as a slideshow (as you will be waiting on the garbage collector to do its thing).
Class Features
- Stage Alignment Modes
- Load New Bg Method
- Specify Cross Fading Time
- Specify Min Stage Scale points
View Example
Here is an example; http://www.noponies.com/dev/as3_fullbrowser_bg/
Updates
04 August, 2008: Added in ability to load in swfs as content
Source Files
Here are the relevant source file; http://www.blog.noponies.com/wp-content/uploads/npfullBrowserbg.zip
Dependencies
None.
Class ActionScript
*Copyright 2008 noponies.
*/
package noponies.display {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.events.TimerEvent;
import flash.net.URLRequest;
import flash.utils.Timer;
import noponies.display.NpFSObjectResize
/**
* Dispatched as a result of a an image completing its load operation.
*
* @eventType NpFullBrowserBg.BG_LOADED
*/
[Event(name="bgloaded",type="noponies.display.NpFullBrowserBg")]
/**
* Dispatched as a result of a an image completing its load operation and after it has completed fading into view. This event represents an image in is visible, scaled and displayed state.
*
* @eventType NpFullBrowserBg.BG_DISPLAYED
*/
[Event(name="bgdisplayed",type="noponies.display.NpFullBrowserBg")]
/**
* Dispatched as each slide loads in. Simply listen for this event as you would for a normal progress event.
*
* @eventType NpFullBrowserBg.PROGRESS
*/
[Event(name="progress",type="noponies.display.NpFullBrowserBg")]
/**
* Dispatch this event to the class, and it will unload itself, destroying all internal instances, timers etc, eg <code>classInstantiatorVarInstanceName.dispatchEvent(new Event(NpFullBrowserBg.UNLOAD_BG, true));</code>
*
* @eventType NpFullBrowserBg.UNLOAD_BG
*/
[Event(name="unloadbg",type="noponies.display.NpFullBrowserBg")]
/**
* <strong>NpFullBrowserBg</strong>
* <p>The NpFullBrowserBg Class is a simple class designed to display Full Web Browser Background Content, either Bitmaps or SWFS.</p>
* <p> Check the various methods and properties of the class to explore its functionality. As this Class extends the NpFLSObjectResize Class it has access to the full gamut of that
* classes methods. The result of which is that you can specify alignment properties and scaleModes of your content, along with minimimum stageX and stageY sizes. After which point, your content
* will clip rather than scale.</p>
* <p>The class supports various events, and will clean up after itself if it is removed from the stage.</p><br />
* <b>Author:</b> noponies - <a href="http://www.blog.noponies.com/" target="_blank">www.blog.noponies.com</a><br />
* <b>Class version:</b> 1<br />
* <b>Actionscript version:</b> 3.0 Player Version 9.0.28.0<br />
* <b>Copyright:</b>
* Creative Commons AttCreative Commons Attribution 3.0 New Zealand License<br />
* <a href="http://creativecommons.org/licenses/by/3.0/nz/" target="_blank">http://creativecommons.org/licenses/by/3.0/nz/</a><br />
* You can use this class how you like, except as a base or part of a Flash Component or as part of any Flash Template sold on Flash Template sites.<br />
* <br />
* <b>Date:</b> 31 July 2008<br />
* @langversion ActionScript 3.0
* @playerversion 9.0.28.0
*/
[Exclude(name="validateScaleMode", kind="method")]
[Exclude(name="addResizeTarget", kind="method")]
[Exclude(name="removeResizeTarget", kind="method")]
public class NpFullBrowserBg extends NpFSObjectResize {
//--------------------------------------
// PUBLIC CONSTANTS
//--------------------------------------
/**
* The <code>NpFullBrowserBg.BG_DISPLAYED</code> constant defines the value of the <code>type</code> property of the event object for a <code>bgdisplayed</code> event.
* <p>
* The properties of the event object have the following values:
* </p>
* <table class="innertable">
* <tr><th>Property</th> <th>Value</th></tr>
* <tr><td><code>type</code></td> <td><code>"bgdisplayed"</code></td></tr>
* <tr><td><code>bubbles</code></td> <td><code>true</code></td></tr>
* <tr><td><code>cancelable</code></td> <td><code>false</code></td></tr>
* </table>
*
* @eventType bgdisplayed
* @tiptext BG_DISPLAYED constant
*/
public static const BG_DISPLAYED:String = "bgdisplayed";
/**
* The <code>NpFullBrowserBg.BG_LOADED</code> constant defines the value of the <code>type</code> property of the event object for a <code>bgloaded</code> event.
* <p>
* The properties of the event object have the following values:
* </p>
* <table class="innertable">
* <tr><th>Property</th> <th>Value</th></tr>
* <tr><td><code>type</code></td> <td><code>"bgloaded"</code></td></tr>
* <tr><td><code>bubbles</code></td> <td><code>true</code></td></tr>
* <tr><td><code>cancelable</code></td> <td><code>false</code></td></tr>
* </table>
*
* @eventType bgloaded
* @tiptext BG_LOADED constant
*/
public static const BG_LOADED:String = "bgloaded";
/**
* The <code>NpFullBrowserBg.UNLOAD_BG</code> constant defines the value of the <code>type</code> property of the event object for a <code>unloadbg</code> event.
* <p>
* The properties of the event object have the following values:
* </p>
* <table class="innertable">
* <tr><th>Property</th> <th>Value</th></tr>
* <tr><td><code>type</code></td> <td><code>"unloadbg"</code></td></tr>
* <tr><td><code>bubbles</code></td> <td><code>true</code></td></tr>
* <tr><td><code>cancelable</code></td> <td><code>false</code></td></tr>
* </table>
*
* @eventType unloadbg
* @tiptext UNLOAD_BG constant
*/
public static const UNLOAD_BG:String = "unloadbg";
/**
* The <code>NpFullBrowserBg.PROGRESS</code> constant defines the value of the <code>type</code> property of the event object for a <code>progress</code> event.
* <p>
* The properties of the event object have the following values:
* </p>
* <table class="innertable">
* <tr><th>Property</th> <th>Value</th></tr>
* <tr><td><code>type</code></td> <td><code>"progress"</code></td></tr>
* <tr><td><code>bubbles</code></td> <td><code>true</code></td></tr>
* <tr><td><code>cancelable</code></td> <td><code>false</code></td></tr>
* <tr><td><code>bytesLoaded</code></td><td>The number of items or bytes loaded at the time the listener processes the event.</td></tr>
* <tr><td><code>bytesTotal</code></td><td>The total number of items or bytes that will be loaded if the loading process succeeds.</td></tr>
* </table>
*
* @eventType progress
* @tiptext PROGRESS constant
*/
public static const PROGRESS:String = "progress";
//--------------------------------------
// PRIVATE INSTANCE VARIABLES
//--------------------------------------
private var bgcontentURL:String;//array of images
private var loader:Loader;//loader for loading in images
private var slide:Sprite;//sprite that serves as a content holder for loaders content
private var bitMapBg:Bitmap;
private var fadeTimer:Timer
private var fadeInTime:int = 2;//SECONDS
private var yPos:Number = 0
private var xPos:Number = 0
private var resizeMode:String = "full"
//--------------------------------------
// GETTERS / SETTERS
//--------------------------------------
/**
* Get / Set the amount of time in <code>seconds</code> that it takes for a new background content to cross fade into the previous image. Set this property before you add this class to the display list.
* @default 2
* @return int
*/
public function get bgFadeInTime():int{
return fadeInTime;
}
/**
* @private
*/
public function set bgFadeInTime(newBgfadeInTime:int):void{
fadeInTime = newBgfadeInTime
}
/**
* @inheritDoc
*/
override public function get alignX():Number{
return xPos;
}
/**
* @private
*/
override public function set alignX(newxPos:Number):void{
xPos = newxPos
}
/**
* @inheritDoc
*/
override public function get alignY():Number{
return yPos;
}
/**
* @private
*/
override public function set alignY(newyPos:Number):void{
yPos = newyPos
}
/**
* @inheritDoc
*/
override public function get scaleMode():String{
return resizeMode;
}
/**
* @private
*/
override public function set scaleMode(newScaleMode:String):void{
super.validateScaleMode(newScaleMode)
resizeMode =newScaleMode
}
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
/**
* The NpFullBrowserBg Class constructor. Requires 1 parameter, which is a URL of the image or swf that you wish to display full browser.
* <p>Once you have initialised the class, you can use the <code>loadNewBg</code> method to load new background content as you like.</p>
* <p>Please review classes public methods and various properties for adding content to the class and changing the way the class behaves.</p>
*
* @param bgcontentURL String representing the URL of the image or swf you would like to display as a Full Browser Background Content
*
* @see #loadNewBg()
* @see #scaleMode
* @see #alignX
* @see #alignY
* @see #bgFadeInTime
*
* @example Flash CS3 Timeline based Demo of Constructor and Setter arguments.
* <listing version="3.0">
* import noponies.display.NpFullBrowserBg;
*
* //instantiate class and pass in required constructor argument.
* var newBrowserBg:NpFullBrowserBg = new NpFullBrowserBg("images/holdsteady.jpg");
*
* //set inherited properties from NpFSObjectResize Class
* newBrowserBg.minStageScaleY = 600
* newBrowserBg.minStageScaleX = 600
* newBrowserBg.useStageScaleMin = true
* addChildAt(newBrowserBg,0)
* newBrowserBg.addEventListener(NpFullBrowserBg.BG_LOADED, handleLoadedEvent);
*
* function handleLoadedEvent(event:Event):void{
* trace("Your image has loaded")
* //add a mouseEvent listener on the stage which will load in a new BG image
* stage.addEventListener(MouseEvent.CLICK, loadNewBg)
* }
*
* //load new Bg image, and change is alignment and scaleMode properties. The effect of these settings is to create a
* //landscape image, scaled to browser width, centered vertically.
* function loadNewBg(event:MouseEvent):void{
* newBrowserBg.alignX = 0
* newBrowserBg.alignY = .5
* newBrowserBg.scaleMode = "width"
* newBrowserBg.loadNewBg("images/these_dreams.jpg")
* }
*
* </listing>
*/
public function NpFullBrowserBg(bgcontentURL:String) {
this.bgcontentURL = bgcontentURL;
//Set up the listeners
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);//use stage as listener for custom events
addEventListener(Event.REMOVED_FROM_STAGE, unloadAll);//listener for removed from stage event
addEventListener(NpFullBrowserBg.UNLOAD_BG, unloadAll);//listener for unload all event
}
//--------------------------------------
// PUBLIC METHODS
//--------------------------------------
//--------------------------------------
// LOAD NEW BG IMAGE PUBLIC METHOD
//--------------------------------------
/**
* This public method will initiate the loading and display of a new background content.
* @param String representing the URL of the image or swf you would like to display.
* @return
* @tiptext loadNewBg method
*/
public function loadNewBg(bgcontentURL:String):void{
this.bgcontentURL = bgcontentURL;
loadBg()
}
//--------------------------------------
// KILL CLASS METHOD
//--------------------------------------
/**
* This public method will unload and dispose of this Class. This functionally equivalent to the Class recieving a REMOVED_FROM_STAGE event.
* @tiptext unLoadClass method
* @return
*/
public function unLoadClass():void{
unloadAll()
}
//--------------------------------------
// PRIVTE METHODS
//--------------------------------------
//--------------------------------------
// LOAD BG IMAGE METHOD
//--------------------------------------
//load the image
private function loadBg():void {
//kill any load operations in progress
if(loader!=null){
try {
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaded);
loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.close()
loader = null
} catch (e:Error) {
trace(e);
}
}
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
var request:URLRequest = new URLRequest(String(bgcontentURL));
loader.load(request);
}
//--------------------------------------
// HANDLE SUCCESSFUL BG CONTENT LOAD
//--------------------------------------
private function loaded(event:Event):void {
slide = new Sprite();//create a sprite to load content into
slide.alpha = 0;//set the slide content to have an alpha of 0
slide.x = 0;
slide.y = 0;
if(loader.content is Bitmap){
bitMapBg = Bitmap(loader.content);//get the loaders content as a bitmap
bitMapBg.smoothing = true;//turn on smoothing
slide.addChild(bitMapBg);//add the bitmap to the slide sprite
}else{
slide.addChild(loader.content)
}
addChild(slide);
//remove the eventListeners on the loader object and set it to null
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaded);
loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
loader = null;
//set initial scale of image via the addResizeTarget Method of the NpFSObjectResize Class
addResizeTarget(slide,xPos, yPos, resizeMode)
//alpha in the content
fadeTimer.addEventListener(TimerEvent.TIMER, fadeTimerListener);
fadeTimer.start();
//dispatch the loaded event
dispatchEvent(new Event(NpFullBrowserBg.BG_LOADED, true));
}
//--------------------------------------
// CROSS FADING METHODS
//--------------------------------------
//will run slower if the screen is being resized.
private function fadeTimerListener(event:TimerEvent):void {
slide.alpha += .01;
if (slide.alpha >= 1) {
fadeTimer.removeEventListener(TimerEvent.TIMER, fadeTimerListener);
fadeTimer.reset();
onFinishAlpha();
}
event.updateAfterEvent();
}
private function onFinishAlpha():void{
if (this.numChildren>1) {
//access the lowest (oldest) child of the Class Instance, and try to remove it
try {
removeChildAt(0);
slide=null;
} catch (e:Error) {
trace(e);//catch errors
}
}
dispatchEvent(new Event(NpFullBrowserBg.BG_DISPLAYED, true));
}
//--------------------------------------
// ADDED TO STAGE
//--------------------------------------
private function addedToStageHandler(event:Event):void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
fadeTimer = new Timer((fadeInTime*1000)*.01, 0);//timer
loadBg();
}
//--------------------------------------
// HANDLE IO ERRORS
//--------------------------------------
private function onIOErrorHandler(event:IOErrorEvent):void {
trace("There has been an ioErrorHandler: " + event);
}
//--------------------------------------
// HANLE PROGRESS EVENTS FROM SLIDE LOAD OPERATIONS
//--------------------------------------
private function progressHandler(event:ProgressEvent):void {
dispatchEvent(new ProgressEvent(NpFullBrowserBg.PROGRESS,false,true,event.bytesLoaded, event.bytesTotal));
}
//--------------------------------------
// HANDLE REMOVED FROM STAGE OR UNLOADBG OR KILLCLASS EVENTS AND METHOD CALLS
//--------------------------------------
private function unloadAll(event:Event = null):void {
try{
removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
removeEventListener(Event.REMOVED_FROM_STAGE, unloadAll);//listener for removed from stage event
removeEventListener(NpFullBrowserBg.UNLOAD_BG, unloadAll);//listener for unload all event
slide.removeChildAt(0)
if(bitMapBg!==null){
bitMapBg = null
}
removeChild(slide);
slide = null;
removeEventListener(NpFullBrowserBg.UNLOAD_BG, unloadAll);
fadeTimer.removeEventListener(TimerEvent.TIMER, fadeTimerListener);
fadeTimer.reset();
} catch (e:Error) {
trace("There was an error when attempting to delete all NpFullBrowserBg content: "+Error);
}
}
}
}