ZoomNav

Kind of class:	public class
Package:	ZoomNav
Inherits from:	EventDispatcher
Version:	1.0
Author:	Zevan Rosser
Classpath:	ZoomNav
File last modified:	Tuesday, 10 November 2009, 14:38:42

► View source

▼ Hide source

package {
    import gs.TweenLite;
    import gs.easing.*;

    import flash.display.*
    import flash.events.*;
    import flash.geom.*;
    
    /**
        ZoomNav adds zoom-style navigation to a group of MovieClips. It can be used
        for a wide variety of different cases... including website navigations, map applications, simple games
        and more. 
        
        <i>ZoomNav makes use of the depricated TweenLite version 10. It will not function properly
        without this library.</i>
        
        @sends Event#TARGET_SELECTED - dispatched when a ZoomNav is fully zoomed in on a specific clip and the ZoomNav.current property has been set to this clip.
        
        @sends Event#TARGET_DESLECTED - dispatched when a ZoomNav has been instructed to zoom in on another clip 
        and the previous clip is now the ZoomNav.previous property.
        
        @sends Event#ZOOMED_OUT - dispatched when ZoomNav has fully zoomed out.
        @sends Event#ANIMATING - dispatched when ZoomNav is animating.
        
        @author Zevan Rosser
        @version 1.0
    */
    public class ZoomNav extends EventDispatcher{
        
        
        /** Constant value for use with the ZoomNav "zoom out" event */
        public static const ZOOMED_OUT:String = "zoomedOut";
        
        /** Constant value for use with the ZoomNav "animating" event */
        public static const ANIMATING:String = "animating";
        
        /** Constant value for use with the ZoomNav "target selected" event */
        public static const TARGET_SELECTED:String = "targetSelected";
        
        /** Constant value for use with the ZoomNav "target deselected" event */
        public static const TARGET_DESELECTED:String = "targetDeselected";
        
        private var _zoomedOut:Event;
        private var _animating:Event;
        private var _targetSelected:Event;
        private var _targetDeselected:Event;
        
        private var _pages:MovieClip;
        private var _zoomOutBtn:MovieClip;
        private var _navContainer:MovieClip;
        private var _current:MovieClip;
        private var _previous:MovieClip;
        
        private var _stage:Stage;
        
        /** How long the zoom animation should last. The default is 1 (or 1 second) */
        public var zoomTime:Number;
        
        /** The TweenLite easing function that is used for position when zooming in */
        public var easePosition:Function = Quart.easeOut;
        
        /** The TweenLite easing function that is used for scaling when zooming in */
        public var easeScale:Function = Back.easeOut;
        
        /** The TweenLite easing function that is used for position when zooming all the way out */
        public var easeResetPosition:Function = Linear.easeOut;
        
        /** The TweenLite easing function that is used for scaling when zooming all the way out */
        public var easeResetScale:Function = Linear.easeOut;
        
        /** The current clip that the ZoomNav is zoomed in on */
        public function get current():MovieClip{
            return _current;
        }
        
        /** The previous clip that the ZoomNav was zoomed in on */
        public function get previous():MovieClip{
            return _previous;
        }
        
        /**
         * Creates a new ZoomNav instance
         *
         * @param pages  A container MovieClip containing MovieClips to zoom in on.
         * @param zoomOutBtn A reset button that zooms all the way out.
         */ 
        public function ZoomNav(pages:MovieClip, zoomOutBtn:MovieClip){
            _pages = pages;
            _zoomOutBtn = zoomOutBtn;
            
            // default zoomTime to 1 second
            zoomTime = 1;
            
            checkStage();
            setupZoomBtn();
            buildNav();
            
            // create all our events
            _zoomedOut = new Event(ZoomNav.ZOOMED_OUT);
            _animating = new Event(ZoomNav.ANIMATING);
            _targetSelected = new Event(ZoomNav.TARGET_SELECTED);
            _targetDeselected = new Event(ZoomNav.TARGET_DESELECTED);
        }
         
        private function checkStage():void{
            if (!_pages.stage){
                throw new Error("Your pages clip must be on the stage!");
            }
             
            if (!_zoomOutBtn.stage){
                throw new Error("Your zoomOutBtn clip must be on the stage!");
            }
        }

        private function buildNav():void{
            _stage = _pages.stage;
            
            _navContainer = new MovieClip();
            
            // add navContainer to the parent of pages
            _pages.parent.addChild(_navContainer);
            
            // nest _pages inside of the container
            _navContainer.addChild(_pages);
            
            // center the container and reposition pages
            _navContainer.x = _stage.stageWidth / 2;
            _navContainer.y = _stage.stageHeight / 2;
            _pages.x = 0;
            _pages.y = 0;
            
            // if the _zoomOutBtn has the same parent pop it to the top
            // so it doesn't get covered by pages
            if (_zoomOutBtn.parent == _navContainer.parent){
                _zoomOutBtn.parent.addChild(_zoomOutBtn);
            }
            
            // disable mouseChildren!
            for (var i:int = 0; i < _pages.numChildren; i++) {
                var p:MovieClip = _pages.getChildAt(i) as MovieClip;
                // ignore things that aren't MovieClip;
                if (p != null){
                  p.mouseChildren = false;
                }
            }
            _pages.addEventListener(MouseEvent.CLICK, onZoom);
        }
        
        private function setupZoomBtn():void{
            _zoomOutBtn.addEventListener(MouseEvent.CLICK, onZoomOut);
        }
        
        private function onZoomOut(evt:MouseEvent):void {
            zoomOut();
        }
        
        private function onZoom(evt:MouseEvent):void {
            if (_current){
                dispatchEvent(_targetDeselected);
                _current.mouseChildren = false;
            }
            
            if (evt.target.parent == _pages) {
                
                // no need for localToGlobal!
                var p:Point = new Point(evt.target.x, evt.target.y);
                 
                TweenLite.to(_pages, zoomTime, {x:-p.x, 
                                                y:-p.y, 
                                                ease: easePosition,
                                                onUpdate:onAnimate,
                                                onComplete:onActivate});
                
                var destScale:Number = 1 / evt.target.scaleX;
                
                TweenLite.to(_navContainer, zoomTime, {scaleX: destScale, 
                                               scaleY: destScale, 
                                               rotation: evt.target.rotation * -1,
                                               ease: easeScale});  
                
                _current = MovieClip(evt.target);
            }
        }
        
        private function onActivate():void{
            _current.mouseChildren = true;
            dispatchEvent(_targetSelected);
        }
        
        private function onZoomedOut():void {
            dispatchEvent(_zoomedOut);
        }
        
        private function onAnimate():void{
            dispatchEvent(_animating);
        }
        
        /** Forces ZoomNav to zoom all the way out */
        private function zoomOut():void {
            TweenLite.to(_pages, 1, {x:0, y:0, ease: easeResetPosition});
            TweenLite.to(_navContainer, zoomTime,  {scaleX: 1, 
                                                    scaleY: 1, 
                                                    rotation: 0, 
                                                    ease: easeResetScale,
                                                    onComplete:onZoomedOut});
            if (_current){
                // stupid mistake, I meant to use mouseChildren, not mouseEnabled!
                // that was why it didn't work in class...
                dispatchEvent(_targetDeselected);
                _current.mouseChildren = false;
            }
            
            _previous = _current;
            _current = null;
        }
        
        /** Removes all internal listeners within ZoomNav */
        public function destroy():void {
            _pages.removeEventListener(MouseEvent.CLICK, onZoom);
            _zoomOutBtn.removeEventListener(MouseEvent.CLICK, onZoomOut);
        }
    }
}

ZoomNav adds zoom-style navigation to a group of MovieClips. It can be used
for a wide variety of different cases... including website navigations, map applications, simple games
and more.

ZoomNav makes use of the depricated TweenLite version 10. It will not function properly
without this library.

Events broadcasted to listeners:

Event with type: TARGET_SELECTED - dispatched when a ZoomNav is fully zoomed in on a specific clip and the ZoomNav.current property has been set to this clip.
Event with type: TARGET_DESLECTED - dispatched when a ZoomNav has been instructed to zoom in on another clip
and the previous clip is now the ZoomNav.previous property.
Event with type: ZOOMED_OUT - dispatched when ZoomNav has fully zoomed out.
Event with type: ANIMATING - dispatched when ZoomNav is animating.

Summary

Constructor

ZoomNav (pages:MovieClip, zoomOutBtn:MovieClip)
- Creates a new ZoomNav instance

Constants

ZOOMED_OUT : String
- Constant value for use with the ZoomNav "zoom out" event
ANIMATING : String
- Constant value for use with the ZoomNav "animating" event
TARGET_SELECTED : String
- Constant value for use with the ZoomNav "target selected" event
TARGET_DESELECTED : String
- Constant value for use with the ZoomNav "target deselected" event

Instance properties

zoomTime : Number
- How long the zoom animation should last.
easePosition : Function
- The TweenLite easing function that is used for position when zooming in
easeScale : Function
- The TweenLite easing function that is used for scaling when zooming in
easeResetPosition : Function
- The TweenLite easing function that is used for position when zooming all the way out
easeResetScale : Function
- The TweenLite easing function that is used for scaling when zooming all the way out
current : MovieClip
- The current clip that the ZoomNav is zoomed in on
previous : MovieClip
- The previous clip that the ZoomNav was zoomed in on

Instance methods

destroy : void
- Removes all internal listeners within ZoomNav

Constructor

ZoomNav

public function ZoomNav (

pages:MovieClip, zoomOutBtn:MovieClip)

Creates a new ZoomNav instance

Parameters:

pages :

A container MovieClip containing MovieClips to zoom in on.

zoomOutBtn:

A reset button that zooms all the way out.

Constants

ANIMATING

public static const ANIMATING:String = "animating"

(read)

Constant value for use with the ZoomNav "animating" event

TARGET_DESELECTED

public static const TARGET_DESELECTED:String = "targetDeselected"

(read)

Constant value for use with the ZoomNav "target deselected" event

TARGET_SELECTED

public static const TARGET_SELECTED:String = "targetSelected"

(read)

Constant value for use with the ZoomNav "target selected" event

ZOOMED_OUT

public static const ZOOMED_OUT:String = "zoomedOut"

(read)

Constant value for use with the ZoomNav "zoom out" event

Instance properties

current

public current:MovieClip

(read)

The current clip that the ZoomNav is zoomed in on

easePosition

public easePosition:Function = Quart.easeOut

(read,write)

The TweenLite easing function that is used for position when zooming in

easeResetPosition

public easeResetPosition:Function = Linear.easeOut

(read,write)

The TweenLite easing function that is used for position when zooming all the way out

easeResetScale

public easeResetScale:Function = Linear.easeOut

(read,write)

The TweenLite easing function that is used for scaling when zooming all the way out

easeScale

public easeScale:Function = Back.easeOut

(read,write)

The TweenLite easing function that is used for scaling when zooming in

public previous:MovieClip

(read)

The previous clip that the ZoomNav was zoomed in on

zoomTime

public zoomTime:Number

(read,write)

How long the zoom animation should last. The default is 1 (or 1 second)

Instance methods

destroy

public function destroy (

) : void

Removes all internal listeners within ZoomNav