Archive for July, 2008

ActionScript 3 Full Browser Background Content

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

/* AS3
*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);
      }
    }

  }

}

ActionScript 3 Accordion Content

ActionScript 3 Vertical & Horizontal Accordion Menu with support for columns of content.

This example extends and supersedes an earlier version of this file I wrote about a year ago. I always wanted to make a horizontal version and extend the class, making it more flexible and useful to people.

As was the previous menu, this menu is a Class based ActionScript 3 Accordion Menu, with either a rollOver/RollOff activation scheme for a onRelease activation scheme. I also added in a better extended event class which allows you to control, or respond to all menu activity via events.

Class Features

  • Vertical or Horizontal Menu Orientation
  • Visible or invisible Menu Bar
  • Supports parsing functions passed to each menu item
  • Custom Menu Bar Assets
  • Option for persistent Menu Panels
  • Menu Spacing
  • Menu text position
  • MenuBar colour / RollOver/Off colour
  • Menu text format
  • Menu tween speed
  • Menu easing type
  • MenuBar width, height, visibility
  • Menu Click behaviour
  • Disable / Enable Menu
  • Open Particular Panels
  • Menu attributes are applicable on a per menu item basis
  • etc, etc.

View Example
http://noponies.com/dev/as3_accordion/

Source Files
Donator only file!
If you want a less capable version of this file, you can download this; http://www.blog.noponies.com/archives/39

Dependencies
TweenLite - http://www.tweenlite.com

Class ActionScript
This is just the “manager class”, and not the entire NpAccordion Class Package.

/* AS3
* Copyright 2008 noponies.
*/


package noponies.ui{
  import flash.display.Sprite;
  import flash.display.DisplayObject;
  import flash.display.Shape;
  import flash.display.Stage;
  import flash.events.MouseEvent;
  import flash.events.Event;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFieldType;
  import flash.text.TextFormat;
  import flash.text.AntiAliasType;
  import fl.motion.easing.*;
  //non internal imports
  import gs.TweenLite;
  import noponies.ui.events.NpAccordionEvent;
  import noponies.ui.NpAccordionPaneV;
  import noponies.ui.NpAccordionPaneH;
 
    /**
    *   <strong>NpAccordion</strong>
    *   <p>This menu system was written as a means to display content in a condensed manner. Menus can be either vertical or horizontal. Supports mulitple columns.</p>
    *   <p>Simple XML based accordion menu. Menu acts as a content space minimiser, with content hidden behind menu bar items. Content
    * slides into view when the menu item is clicked on. However, you can pass it any display objects, derived how you like. </p>
    * <p>Menu supports parsing function calls passed as a string value , along with parameter support for these functions. This is useful for perhaps
    * calling a function on the parent timeline of the menu. Menu also supports a standard URL call passed to it.</p>
    * <p>Menu supports any DisplayObject. Loaded swfs can contain their own interactivity. </p>
    * <p>Menu supports using either the whole menu or just the menu bar as the mechansim for sliding the menu up and down. Generally it is better to only use
    * the bar if you want to include interactivity in the menu items.</p>
    * <p>Positioning menu:To create a column, or otherwise change menu item positions, set either the menuPosX or menuPosY values, like so, menuInstanceVarName.menuPosX = newValue</p>
    * <p>Menu supports custom events, so that individual menu instances can be targetted. Doing so relies on the <code>NpAccordionEvent</code> Class, which allows for the passing
    * of parameters to each menu item. This param is checked against the ID var of each menu, if they match, then the menu acts on the event.</p>
    * <p>Class requires TweenLite <a href="http://blog.greensock.com/tweenliteas3" target="_blank">http://blog.greensock.com/tweenliteas3</a><p>
    * <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<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 for Flash Components or for Flash Template sites.<br />
    *   <br />
    *   <b>Date:</b> 17 July 2008<br />
    */


  public class NpAccordion extends Sprite {
   
    private var menuOrientation:String = "horizontal"
    private var clickMode:Boolean = true
    private var counter:int
    private var menuItems:Array
    private var menuPosY:int = 0;
    private var menuPosX:int = 0;
   
    private var menuPadding:int = 5;//space between menu items
    private var barHeight:int = 10//default
    private var barWidth:int = 10
    private var menuTxtFormat:TextFormat
    private var menuEnabled:Boolean =true//defaut, is the menu as a whole disable from mouse interactivity
    private var speed:Number = .5;//menu transition speed - in seconds
    private var useWholeMenu:Boolean = false;//default
    private var menuColour:uint = 0x000000;//menu bars colour
    private var menuAlpha:Number = 1//default
    private var useHighLighting:Boolean = true;//change colours of bar on rollOver?
    private var menuHighlightColour:int = 0xCCCCCC;//menu rollover colour
    private var easeType:Function = fl.motion.easing.Linear.easeNone //default ease type
   
    //action handling
    private var contentHasAction:Boolean = true//default
    private var contentActionScope:Object //scope that actions run within when applying actions internally
    private var handleActionsExternally:Boolean = true//default

   
    /**
     *  Get / Set whether or not to change the colour of the menu bar with a rollOver. A value of <code>true</code> enables this feature.
     *  @param Boolean
     *  @default true
     *  @return Boolean
     */

    public function get setMenuX():int {
      return menuPosX;
    }
    /**
    * @private
    */

    public function set setMenuX(newMenuPosX:int):void {
      menuPosX = newMenuPosX;
    }
    /**
     *  Get / Set whether or not to change the colour of the menu bar with a rollOver. A value of <code>true</code> enables this feature.
     *  @param Boolean
     *  @default true
     *  @return Boolean
     */

    public function get setMenuY():int {
      return menuPosY;
    }
    /**
    * @private
    */

    public function set setMenuY(newMenuPosY:int):void {
      menuPosY = newMenuPosY;
    }
    /**
     *  Get / Set the padding between each menu item.
     *  @param int
     *  @default 5
     *  @return int
     */

    public function get menuSpacing():int {
      return menuPadding;
    }
    /**
    * @private
    */

    public function set menuSpacing(newMenuPadding:int):void {
      menuPadding = newMenuPadding;
    }  
    /**
     *  Get / Set if the menus respond to interactivity. Use this property when loading a menu set and you want to disable a user clicking on menu items until all
     *  content has loaded, or some other event occurs. If you set this property, dispatch a <code>NpAccordionEvent.ENABLE_MENU</code> event to enable menu interactivity globally.
     *  @param Boolean
     *  @default true
     *  @return Boolean
     *  @see noponies.accordion.events.NpAccordionEvent#DISABLE_MENU
     *  @see noponies.accordion.events.NpAccordionEvent#ENABLE_MENU
     */

    public function get menusEnabled():Boolean {
      return menuEnabled;
    }
    /**
    * @private
    */

    public function set menusEnabled( newMenuEnabled:Boolean):void {
      menuEnabled = newMenuEnabled;
    }
    /**
     *  Get / Set whether or not to change the colour of the menu bar with a rollOver. A value of <code>true</code> enables this feature.
     *  @param Boolean
     *  @default true
     *  @return Boolean
     */

    public function get highLightMenuBar():Boolean {
      return useHighLighting;
    }
    /**
    * @private
    */

    public function set highLightMenuBar(newHigh:Boolean):void {
      useHighLighting = newHigh;
    }
    /**
     *  Get / Set the colour to use when you have enabled the <code>highLightMenu<code> property.
     *  @param uint
     *  @default 0xCCCCCC (light grey)
     *  @return uint
     */

    public function get highLightColour():uint {
      return menuHighlightColour;
    }
    /**
    * @private
    */

    public function set highLightColour(newCol:uint):void {
      menuHighlightColour = newCol;
    }
    /**
     *  Get / Set the tween speed of the menus opening and closing.
     *  @param Number representing the speed in seconds for menu opening and closing tweens.
     *  @default .5
     *  @return Number
     */

    public function get tweenSpeed():Number {
      return speed;
    }
    /**
    * @private
    */

    public function set tweenSpeed(newSpeed:Number):void {
      speed = newSpeed;
    }
    /**
     *  Get / Set the height of the menu bar in pixels.
      * <p>The impact of this setting depends on how you are displaying your menus. If you have chosen to display a <em>horizontal</em> (menu slides across x axis)
     *  menu, then this setting controls how far across the side of your content the menuBar displays.
     *  If you want it to match the height of your content, set it to <code>0</code>. If you are displaying your menu as a  <em>vertical</em> menu, then this setting controls the visible height
     *  of the menuBar. Setting the menuBarAlpha to <code>0</code> will make your menuBar invisible.
     *  @param int
     *  @default 10
     *  @return int
     *  @see #menuBarAlpha
     *  @see #menuBarWidth
     */

    public function get menuBarHeight():int {
      return barHeight;
    }
    /**
    * @private
    */

   
    public function set menuBarHeight(newBarHeight:int):void {
      barHeight = newBarHeight;
    }
    /**
     *  Get / Set the width of the menu bar in pixels.
     *  <p>The impact of this setting depends on how you are displaying your menus. If you have chosen to display a <em>horizontal</em> (menu slides across x axis)
     *  menu, then this setting controls the visible width of the menuBar. If you are displaying your menu as a  <em>vertical</em> menu, then this setting
     *  controls how far across the top of your content the menuBar displays. If you want it to match the width of your content, set it to <code>0</code>.
     *  Setting the menuBarAlpha to <code>0</code> will make your menuBar invisible.
     *  @param int
     *  @default 10
     *  @return int
     *  @see #menuBarHeight
     *  @see #menuBarAlpha
     */

    public function get menuBarWidth():int {
      return barWidth;
    }
    /**
    * @private
    */

    public function set menuBarWidth(newBarWidth:int):void {
      barWidth = newBarWidth;
    }
    /**
     *  Get / Set the colour of the menu bar.
     *  @param uint
     *  @default 0x000000 (black)
     *  @return uint
     */

    public function get menuBarColour():uint {
      return menuColour;
    }
    /**
    * @private
    */

    public function set menuBarColour(newMenuColour:uint):void {
      menuColour = newMenuColour;
    }
    /**
     *  Get / Set the alpha levels of the menu bar.
     *  <p>A technique you can employ here is to set the menu bars alpha to 0, so that your content will be visible. You may also wish to adjust the <code>menuBarHeight</code> property, as this will
     *  control how much of your content is visible.</p>
     *  @param Number
     *  @default 1
     *  @return Number
     *  @see #menuBarWidth
     *  @see #menuBarHeight
     */

    public function get menuBarAlpha():Number {
      return menuAlpha;
    }
    /**
    * @private
    */

    public function set menuBarAlpha(newMenuAlpha:Number):void {
      menuAlpha = newMenuAlpha;
    }
   
    /**
     *  Get / Set how a the menu item and menu content respond to clicks. A value of <code>false</code> enables mouseEvent.CLICK interactivity on the menu bar alone. This is the setting you would use if your content
     *  itself had interactivity. A value of <code>true</code> enables mouseEvent.CLICK interactivity on the entire menu item.
     *  @param Boolean
     *  @default false
     *  @return Boolean
     */

    public function get globalMenuClick():Boolean {
      return useWholeMenu;
    }
    /**
    * @private
    */

    public function set globalMenuClick(newUseWholeMenu:Boolean):void {
      useWholeMenu = newUseWholeMenu;
    }
    /**
     *  Get / Set how a the menu will handle any actions passed to it. A value of <code>true</code> will dispatch all actions via the <code>NpAccordionEvent.PRESS</code> event. You can access this events
     *  <code>menuAction</code> property to parse what action the menu item contained. This property is sent in String form. A value of <code>false</code> will make the menu run the actions internally.
     *  @param Boolean
     *  @default true
     *  @return Boolean
     *  @see #actionScope
     */

    public function get delegateActions():Boolean {
      return handleActionsExternally;
    }
    /**
    * @private
    */

    public function set delegateActions(newDispatchMenuActions:Boolean):void {
      handleActionsExternally = newDispatchMenuActions;
    }
    /**
     *  Change the way actions are fired off a menu item. Setting this value to <code>true</code> will make the contentItem itself, rather than the menu bar fire any actions you may have set.
     *  A value of <code>false</code> will make menu actions fire from a CLICK on the menu bar. This means that a user has to first click on the bar to open the menu item, then click on any content it may have.
     *  @param Boolean
     *  @default true
     *  @return Boolean
     *  @see #actionScope
     *  @see #delegateActions
     */

    public function get contentActions():Boolean {
      return contentHasAction;
    }
    /**
    * @private
    */

    public function set contentActions(newContentAction:Boolean):void {
      contentHasAction = newContentAction;
    }
    /**
     *  Set the scope that internally applied actions run within. By default this is set to the parent object of each menu item. Set this property of you want actions to run internally in another scope.
     *  @param Object
     *  @default menuItem.parent
     *  @return Object
     *  @see #delegateActions
     */

    public function get actionScope():Object {
      return contentActionScope;
    }
    /**
    * @private
    */

    public function set actionScope(newActionScope:Object):void {
      contentActionScope = newActionScope;
    }
    /**
     *  Set the textformat that the menu items will use for their text display. If you do not pass in a TextFormat Object the class defaults to using 10 pt, white _sans for any menu text. By default the menu
     *  textField is set to use embedded fonts. This setting affects the defaultTextFormat property of the menus textField. So, once this is set, future text assignments will inherit that text format.
     *  @param Textformat
     *  @default null
     *  @return
     */

    public function set menuTextFormat(newFormat:TextFormat):void {
      menuTxtFormat = newFormat;
    }
    /**
     *  Set the ease type that the menus use when moving. This parameter is in the form of a <code>fl.motion.easing.Elastic.easeInOut</code>. The default is a <code>fl.motion.easing.Linear.easeNone</code>, or no easing.
     *  @param Function
     *  @default fl.motion.easing.Linear.easeNone
     *  @return
     */

    public function set menuEaseType(newEaseType:Function):void {
      easeType = newEaseType;
    }
    /**
     *  Get the current menu items as an array of Class Objects representing each menu item created by this Class.
     *  @return Array
     */

    public function get currentMenuArray():Array {
      return menuItems
    }
   
    //--------------------------------------
    // CONSTRUCTOR
    //--------------------------------------
    /**
     *  Please review the various Getter / Setter Methods for controlling the look, feel and behaviour of the Accordion Menu.
     *  <p>To control the properties of individual menu items, set the menu items properties before you call the <code>addPanel()</code> method!</p>
     *  <p>Make sure you pay attention to the <code>menuBarHeight</code> and the <code>menuBarWidth</code> properties when switching between vertical or horizontally displaying menus.</p>
     *  <p>Should you need access to the current active menu items ID, or its menuBar Sprite or menuBar textField please review the various events and event parameters that allow for this access</p>
     *  @param mouseMode String. <strong>Optional (Default: click)</strong> Controls the click or rollOver action of the menu. A value of <code>click</code> makes the menu open in response to Mouse Clicks. A value of <code>rollover</code> makes the menu open and close in reponse to
     *  a user rolling over and off individual menu items.
     *  @param menuOrientation String. <strong>Optional (Default: vertical)</strong> String representing the click action of the menu item. This can be either a http URL or a function with parameters. In this format <code>Function Name, param, param</code>
     *  @see #globalMenuClick
     *  @see #menusEnabled
     *  @see #menuColour
     *  @see #menuBarAlpha
     *  @see #menuBarHeight
     *  @see #menuBarWidth
     *  @see #menuSpacing
     *  @see #tweenSpeed
     *  @see #actionScope
     *  @see #delegateActions
     *  @see #contentActions
     *  @see #menuTextFormat
     *  @see #menuEaseType
     */

    public function NpAccordion(mouseMode:String ="click", menuOrientation:String ="vertical") {
      //validate menu mode
      switch (mouseMode) {
        case "click" :
          clickMode = true
          break;
        case  "rollover" :
          clickMode = false
          break
        default:
          throw new Error("Problem :The mouseMode parameter passed is incorrect. It must be either 'click' or 'rollover'!"+ " You passed '"+mouseMode+"'");
      }
      //validate menuOrientation
      switch (menuOrientation) {
        case "horizontal" :
          this.menuOrientation = menuOrientation
          break;
        case  "vertical" :
          this.menuOrientation = menuOrientation
          break
        default:
          throw new Error("Problem :The menuOrientation parameter passed is incorrect. It must be either 'horizontal' or 'vertical'!"+ " You passed '"+menuOrientation+"'");
      }
      menuItems = []
      addEventListener(Event.REMOVED_FROM_STAGE, handleStageRemoval)
    }
    //--------------------------------------
    // ADDPANEL METHOD - ADD A MENU PANEL TO THE ACCORDION MENU
    //-------------------------------------- 
    /**
     *  The addPanel Method adds an accordion panel (via an instance of the NpAccordionPane Class) to an instance of the NpAccordion Class.
     *  <p>To control the properties of individual menu items, set the menu items properties before you call the <code>addPanel()</code> method!</p>
     *  @param loadedContent DisplayObject. The content you want to place within an NpAccordion Menu item.
     *  @param titleText String. <strong>Optional</strong> String representing the text of the menu bar.
     *  @param action String. <strong>Optional</strong> String representing the click action of the menu item. This can be either a http URL or a function with parameters. In this format <code>Function Name, param, param</code>
     *  @see #globalMenuClick
     *  @see #menusEnabled
     *  @see #menuColour
     *  @see #menuBarAlpha
     *  @see #menuBarHeight
     *  @see #menuBarWidth
     *  @see #menuSpacing
     *  @see #tweenSpeed
     *  @see #actionScope
     *  @see #delegateActions
     *  @see #contentActions
     *  @see #menuTextFormat
     *  @see #menuEaseType
     */

    public function addPanel(loadedContent:DisplayObject, titleText:String="", action:String=""):void {

      var ClassSwitch:Class
      if(menuOrientation=="vertical"){
        ClassSwitch = NpAccordionPaneV
      }else{
        ClassSwitch = NpAccordionPaneH
      }
      var menuItem:Object = new ClassSwitch(loadedContent, counter, titleText, action);

      //set menu properties before it draws itself to stage
      menuItem._clickMode = clickMode
      menuItem.x = menuPosX
      menuItem.y = menuPosY
      menuItem._barHeight = barHeight
      menuItem._barWidth = barWidth
      menuItem._menuTxtFormat = menuTxtFormat
      menuItem._menuEnabled = menuEnabled
      menuItem._speed = speed
      menuItem._useWholeMenu = useWholeMenu
      menuItem._menuColour = menuColour
      menuItem._menuAlpha = menuAlpha
      menuItem._useHighLighting = useHighLighting
      menuItem._menuHighlightColour = menuHighlightColour
      menuItem._easeType = easeType
      //action handling
      menuItem._contentHasAction = contentHasAction
      menuItem._contentActionScope = contentActionScope
      menuItem._handleActionsExternally = handleActionsExternally
     
      if(menuOrientation=="vertical"){
        menuPosY += (barHeight+menuPadding);//positioning of menu, vertically = barheight + menu padding
      }else{
        menuPosX += (barWidth+menuPadding);//positioning of menu, horizontally = barwidth + menu padding
      }
     
      addChild(DisplayObject(menuItem))
      //push menu instances into array
      menuItems.push(menuItem)
      //increment counter
      counter++

    }
   
    //--------------------------------------
    // OPENPANEL METHOD - OPEN A PANEL IN THE ACCORDION MENU
    //--------------------------------------     
    /**
    *   This public method will open a particular menu panel.
    * @param int Representing the menu panel you would like to open. Menus are stored as a zero based array. Some error checking is conducted to test if the menu requested is within the range of available menu items.
    * <p>The same effect can be achieved by dispatching a <code>NpAccordionEvent.EXPAND_MENU</code> event at the Accordion Class instance.</p>
    * @see noponies.accordion.events.NpAccordionEvent#EXPAND_MENU
    * @return
    */

    public function openPanel(menuToOpen:int):void {
      if(menuToOpen>menuItems.length || menuToOpen<0){
        throw new Error("Passed menu index is out of bounds!");
      }else{
        menuItems[menuToOpen].openPane()
      }
    }
   
    //--------------------------------------
    // CLOSEPANEL METHOD - CLOSE ANY OPEN PANEL IN THE ACCORDION MENU
    //-------------------------------------- 
    /**
    *   This public method will close any open menu panels.
    * <p>The same effect can be achieved by dispatching a <code>NpAccordionEvent.RESETALL</code> event at the Accordion Class instance.</p>
    * @see noponies.accordion.events.NpAccordionEvent#RESETALL
    * @return
    */

    public function closePanel():void {
      dispatchEvent(new NpAccordionEvent(NpAccordionEvent.RESETALL,true, false));
    }
   
    //--------------------------------------
    // REMOVED FROM STAGE HANDLER
    //-------------------------------------- 
    private function handleStageRemoval(event:Event):void {
      menuItems = []
      counter=0
    }
  }
}

ActionScript 3 FullScreen Object Resize Class

The NpFSObjectResize Class is a fairly simple ActionScript 3 class for displaying any DisplayObject at fullScreen (fullBrowser) screen dimensions. The class gives you the options of resizing to full the entire screen, or to resize to either width or height. You are also able to align your objects anywhere within the stages dimensions. This allows for you control where your objects scale from (via positioning) them. So, you can center your objects, or align them bottom right and so on.

Updates 1 August 2008: Updated with new stage alignment properties, adjustments to constructor.

Class Features

  • Min Stage Width - point at which scaling will turn off
  • Min Stage Height - point at which scaling will turn off
  • Use Stage Min - Controls whether or not objects scale or clip at a the MIN stage points
  • Scale Modes - “full”, “height”, “width”
  • Align Objects within stage dimensions
  • Position Objects within stage dimensions

View Example
http://www.noponies.com/dev/as3_fsresize/

Source Files
http://www.blog.noponies.com/wp-content/uploads/npfsobjectresize.zip

Dependencies
None

p style=”text-align: left;”>Updates
03 October, 2008: Updated main resize code, as there was a slight bug when resizing

Class ActionScript

/* AS3
*Copyright 2008 noponies.
*/


package noponies.display {

  import flash.display.Sprite;
  import flash.display.Stage;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.display.DisplayObject;
  import flash.events.Event;
  /**
  *  The NpFSObjectResize class is a Utility class for resizing a given object to fullscreen dimensions. Note, that the object must be part of the displaylist. The class checks for this and will throw an error if the passed in object
  * is not part of the display list. Using this class you are able to resize an object proportionally to fullscreen dimensions, or you can set it to scale either just its width or height to the corresponding
  *   stage width and height.</p>
  *   <p>You are also able position (align) scaled objects within the stages dimensions, a typical use would be to center a width scaled image within the stages height. This allows you to position
  *  your scaled objects so that they appear to scale from a particular point on the stage. This feature is based off a numerical alignment setting, which represents the percentage of the stage you
  *   would like to position your object on. This approach gives you absolute flexibility for aligning your objects!<p>
  * <p>The class does not enforce smoothing of Bitmap or Video objects. Rather, you should set those object properties on each of your respective objects before
  *   passing them to this class.</p>
  * @langversion ActionScript 3.0
  * @Flash Player 9.0.28.0
  * @author noponies - 2008
  *   @version 1.0
  */


  public class NpFSObjectResize extends Sprite {
    private var resizeTarget:DisplayObject;
    private var stageRef:Stage;
    private var useMinStageSize:Boolean = false;
    private var XminSize:int = 400;
    private var YminSize:int = 400;
    private var stageWidth:int;
    private var stageHeight: int;
    private var resizeMode:String"full"
    private var xPos:Number = 0
    private var yPos:Number = 0
    private var img_prop:Number = 0
   
    //--------------------------------------
    // GETTERS/SETTERS
    //--------------------------------------
    /**
    * @langversion ActionScript 3.0
    * @playerversion Flash 9
     *  Get / Set the minStageScaleX, which is an int. Used to control at what X point the scaling of the object should stop and it should be clipped.
     *  @default 400
     *  @return int representing the <code>x</code> value at which point clipping rather than scaling should occur.
     */

    public function get minStageScaleX():int{
      return XminSize
    }
    /**
    * @private
    */

    public function set minStageScaleX(newMinScaleX:int):void{
      XminSize = newMinScaleX
    }
    /**
    * @langversion ActionScript 3.0
    * @playerversion Flash 9
     *  Get / Set the minStageScaleY, which is an int. Used to control at what Y point the scaling of the object should stop and it should be clipped.
     *  @default 400
     *  @return int representing the <code>y</code> value at which point clipping rather than scaling should occur.
     */

    public function get minStageScaleY():int{
      return YminSize;
    }
    /**
    * @private
    */


    public function set minStageScaleY(newMinScaleY:int):void{
      YminSize = newMinScaleY;
    }
   
    /**
     *  Get / Set the position relative to the browsers size <em>(as a percentage of the browsers width)</em> where you would like your object to scale from on the <code>x</code> axis.
     *  This parameter is designed to allow for you to align your objects within the stage.
     *  For instance, a value of <code>0.5</code> will cause your object to be centered on the x axis. A value of <code>0</code> will place your object hard left.
     *  @see #alignY
     *  @see #scaleMode  
     *  @default 0
     *  @return Number
     */

    public function get alignX():Number{
      return xPos;
    }
    /**
    * @private
    */

    public function set alignX(newxPos:Number):void{
      xPos = newxPos
    }
    /**
     *  Get / Set the position relative to the browsers size <em>(as a percentage of the browsers height)</em> where you would like your object to scale from on the <code>y</code> axis.
     *  This parameter is designed to allow for you to align your objects within the stage.
     *  For instance, a value of <code>0.5</code> will cause your object to be centered on the y axis. A value of <code>0</code> will place your object hard top.
     *  @see #alignX   
     *  @see #scaleMode 
     *  @default 0
     *  @return Number
     */

    public function get alignY():Number{
      return yPos;
    }
    /**
    * @private
    */

    public function set alignY(newyPos:Number):void{
      yPos = newyPos
    }
    /**
     *  Get / Set a string representing the scale mode for your target object. Possible values are <code>full</code> which will scale your object to match the screen dimensions, at all screen sizes.
     *  A value of <code>height</code> will scale the object to the stages height, and scale its width by the same scale factor. This can result in your object not always fully filling the browser window. A value of
     * <code>width</code> will scale your object to the stages width, scaling its height by the same scale factor. This can result in your object not always fully filling the browser window.
     *  @see #alignX
     *  @see #alignY      
     *  @return String
     *  @default "full"
     */

    public function get scaleMode():String{
      return resizeMode;
    }
    /**
    * @private
    */

    public function set scaleMode(newScaleMode:String):void{
      validateScaleMode(newScaleMode)
    }
   
    /**
    *   @langversion ActionScript 3.0
    * @playerversion Flash 9
     *  Get / Set whether or not to use clipping of the display object at a certain stage size. This property overrides the minStageScale setters, which have no
     *  effect if  this Boolean is false. Default
     *  @default false
     *  @return Boolean representing whether or not to enable clipping. A value of <code>true</code> enables clipping. A value of <code>false</code> disables clipping.
     */

     public function get useStageScaleMin():Boolean{
      return useMinStageSize
    }

    /**
    * @private
    */

    public function set useStageScaleMin(scaleOrClip:Boolean):void{
      useMinStageSize = scaleOrClip
    }

    //--------------------------------------
    // CONSTRUCTOR
    //--------------------------------------
    /**
     *  The NpFSObjectResize class is a Utility class for resizing a given object to fullscreen dimensions.
     *  <p>Please review classes public methods for adding content to the class!</p>
     *  @see #addResizeTarget()
     *  @example Demo Constructor and setter arguments.
     * <listing version="3.0">
     *  //Instantiate class first
     *  var fs:NpFSObjectResize = new NpFSObjectResize()
     *  fs.addResizeTarget(someDisplayObject)
     *  //Set properties via setters
     *  fs.minStageScaleX = 500
     *  fs.minStageScaleY = 500
     *  fs.useStageScaleMin = true
     * </listing>
     *  @example Demo Constructor setting an object to scale its width, and center it within the stages height
     * <listing version="3.0">
     *  //Instantiate class first
     *  var fs:NpFSObjectResize = new NpFSObjectResize()
     *  fs.addResizeTarget(monkey, 0,.5,"width")
     * </listing>
     */

    public function NpFSObjectResize() {
    }
    //-----------------------------------------------------------------------------
    // PROTECTED INSTANCE METHODS
    //-----------------------------------------------------------------------------
    //internal method
     /**
     *  @langversion ActionScript 3.0
     *  @playerversion  Flash 9
     *  @param String containing the scale mode you are attempting to use.
   &nbs