ZoomController

// Adobe classes
//import flash.geom.*;
// Still support Flash 7:
import mx.transitions.easing.Strong;

import org.asapframework.events.EventDelegate;
import org.asapframework.management.movie.LocalController;
import org.asapframework.ui.buttons.EventButton;
import org.asapframework.ui.buttons.EventButtonEvent;
import org.asapframework.ui.slider.Slider;
import org.asapframework.ui.slider.SliderEvent;
import org.asapframework.util.actionqueue.ActionQueue;
import org.asapframework.util.actionqueue.AQZoom;
import org.asapframework.util.MovieClipUtils;
import org.asapframework.util.RectangleUtils;
import org.asapframework.util.types.Point;
import org.asapframework.util.types.Rectangle;

import events.ZoomEvent;

import ui.AnimatingIndicator;
import ui.AnimatingSlider;
import ui.ClickBackground;
import controllers.DebugController;

/**
This demo shows how to use a Slider to control the zooming of an object, and illustrates the use of the classes AQZoom and Slider.

Actually there are 2 sliders in the demo. The vertical slider is a straightforward slider with draggable knob and clickable bar, spiced up with an animation effect (progressive movement along the axis).

The horizonal slider adds a zooming indicator that is updated while the animation progresses.

A slider debugging panel can be switched to visible on the main mTimeline.
@author Arthur Clemens
*/

class controllers.ZoomController extends LocalController {

    private var mViewPort:Rectangle;
    private var mViewPortCenter:Point;
    private var mZoomQueue:ActionQueue;
    
    /**
    Point from where zoomable contents is zoomed. In this demo always the center of the zoomable rectangle.
    */
    private var mZoomPoint:Point;
    
    /**
    Point to restore the content to at a reset.
    */
    private var mZoomContentsResetLoc:Point;
    
    /**
    The zoomable area, contains zoomable content ({@link #zoom_contents_mc}).
    */
    private var zoomable_mc:MovieClip;
    
    /**
    Zoomable contents; in this example colored dots.
    */
    private var zoom_contents_mc:MovieClip;
    
    /**
    A small red square to show the zoom dynamic center.
    */
    private var dynamic_centerdot_mc:MovieClip;
    
    /**
    A small black square to show the fixed zoom center.
    */
    private var fixed_centerdot_mc:MovieClip;
    
    /**
    The borders of the view port.
    */
    private var viewport_mc:MovieClip;
    
    /**
    The vertical slider.
    */
    private var mSlider:AnimatingSlider;
    
    /**
    The bar of the vertical slider.
    */
    private var mSliderBar:MovieClip;
    
    /**
    The horizontal slider.
    */
    private var mIndicator:AnimatingIndicator;
    
    /**
    The bar of the horizontal slider.
    */
    private var mIndicatorBar:EventButton;
    
    /**
    Button to reset all zooming.
    */
    private var reset_btn:EventButton;
    
    /**
    Background clip that catches clicks to enable dragging.
    */
    private var zoomableBackground:ClickBackground;
    
    /**
    Clip to temporary hide the stage while initalization is going on.
    */
    private var overlay_mc:MovieClip; 

    /**
    Called from the Flash main mTimeline.
    */
    public static function main (inTimeline:MovieClip, inDebug:Boolean) : Void {
        // create new controller
        var controller:ZoomController = new ZoomController(inTimeline, inDebug);
        // store controller on mTimeline
        inTimeline.localController = controller;
    }
    
    // PRIVATE METHODS
    
    /**
    
    */
    private function ZoomController (inTimeline:MovieClip, inDebug:Boolean) {
        super(inTimeline);
        
        // create debug controller
        var ctrl:DebugController = new DebugController(mTimeline.debugging_mc, mTimeline, inDebug);
        
        zoomable_mc = inTimeline.zoomable_mc;
        
        mViewPort = RectangleUtils.boundsOfMovieClip(zoomable_mc);
        mViewPortCenter = RectangleUtils.getCenter(mViewPort);

        createUI();

        // zoom point is relative to zoomable_mc
        var rectangle:Rectangle = new Rectangle(0, 0, mViewPort.width, mViewPort.height);
        mZoomPoint = RectangleUtils.getCenter(rectangle);

        // react on zoom events
        addEventListener(ZoomEvent.EVENT_ZOOM, EventDelegate.create(this, handleZoom));

        updateIndicator();
        updateDynamicDot();
        
        overlay_mc._visible = false;
    }
        
    /**
    Creates and initializes all movieclips on the stage.
    */
    private function createUI () : Void {
            
        zoom_contents_mc = zoomable_mc.createEmptyMovieClip("zoom_contents_mc", zoomable_mc.getNextHighestDepth());
        mZoomContentsResetLoc = new Point(zoom_contents_mc._x, zoom_contents_mc._y);
        
        overlay_mc = mTimeline.overlay_mc;
        
        createViewPortBorders();
        createFixedDot();
        createDynamicDot();
        fillZoomContents();
        
        setupSlider();
        setupIndicator();
        
        reset_btn = mTimeline.reset_btn;
        reset_btn.addEventListener(EventButtonEvent.ON_RELEASE, EventDelegate.create(this, reset));

        zoomableBackground = zoomable_mc.bg_mc;
        zoomableBackground.addEventListener(EventButtonEvent.ON_PRESS, EventDelegate.create(this, startZoomableDrag));
        zoomableBackground.addEventListener(EventButtonEvent.ON_RELEASE, EventDelegate.create(this, stopZoomableDrag));
    }
    
    /**
    
    */
    private function createViewPortBorders () : Void {
        viewport_mc = mTimeline.createEmptyMovieClip("viewport", mTimeline.getNextHighestDepth());
        MovieClipUtils.drawBox(viewport_mc, mViewPort.left, mViewPort.top, mViewPort.right, mViewPort.bottom, [0, 0x0000ff,20]);
    }
    
    /**
    
    */
    private function createFixedDot () : Void {
        var viewportCenter:Point = RectangleUtils.getCenter(mViewPort);
        fixed_centerdot_mc = mTimeline.createEmptyMovieClip("fixed_dot", mTimeline.getNextHighestDepth());
        var size:Number = 4;
        var edge:Number = size/2;
        MovieClipUtils.drawBox(fixed_centerdot_mc,
                               viewportCenter.x-edge,
                               viewportCenter.y-edge,
                               viewportCenter.x+edge,
                               viewportCenter.y+edge,
                               [0, 0x000000,100]);
    }
    
    /**
    Creates the dynamic_centerdot_mc clip (red square).
    */
    private function createDynamicDot () : Void {
        dynamic_centerdot_mc = zoom_contents_mc.createEmptyMovieClip("dynamic_dot", mTimeline.getNextHighestDepth());
    }
    
    /**
    Draws the red square.
    */
    private function drawDynamicDot (inPoint:Point) : Void {
        // remove previous drawing
        dynamic_centerdot_mc.clear();
        var size:Number = 10;
        var edge:Number = size/2;
        MovieClipUtils.drawBox(dynamic_centerdot_mc,
                               inPoint.x-edge,
                               inPoint.y-edge,
                               inPoint.x+edge,
                               inPoint.y+edge,
                               [0, 0xff0000,100]);
    }
    
    /**
    Calculates the new center point and updates the red square to draw at the center.
    */
    private function updateDynamicDot () : Void {
        var myPoint:Object = {x:mViewPortCenter.x, y:mViewPortCenter.y};
        zoom_contents_mc.globalToLocal(myPoint);
        var center:Point = new Point(myPoint.x, myPoint.y);
        drawDynamicDot(center);
    }
    
    /**
    Fills zoom contents with colored dots.
    */
    private function fillZoomContents () : Void {
        // colored dots
        var hCount:Number = 5;
        var vCount:Number = 5;
        var d_h:Number = mViewPort.width/hCount;
        var d_v:Number = mViewPort.height/vCount;
        var size:Number = 6;
        var edge:Number = size/2;
        var i, ii, x, y;
        for (i=0; i<(hCount + 1); ++i) {
            for (ii=0; ii<(vCount + 1); ++ii) {
                x = i * d_h;
                y = ii * d_v;
                var color:Number = Math.random() * 256 * 256 * 256;
                var alpha:Number = (i==0 && ii == 0) ? 100 : 80;
                MovieClipUtils.drawBox(zoom_contents_mc, x-edge, y-edge, x+edge, y+edge, [0, color,alpha], [color, alpha]);
            }
        }
    }
    
    /**
    Sets up the vertical slider.
    */
    private function setupSlider () : Void {

        // slider bar
        mSliderBar = mTimeline.slider_bar_vertical_mc;
        // react on clicks in the bar
        mSliderBar.addEventListener(EventButtonEvent.ON_RELEASE, EventDelegate.create(this, handleBarClick));
        
        // slider
        mSlider = mTimeline.slider_knob_vertical_mc;
        mSlider.setDirection(Slider.DESCENDING);
        // set the knob bounds to the slider bar bounds
        var bounds:Rectangle = RectangleUtils.boundsOfMovieClip(mSliderBar);
        // lock to the center of the bar
        RectangleUtils.flattenWidth(bounds);
        mSlider.setBounds(bounds);        
        // update zoom only on slide end
        mSlider.addEventListener(SliderEvent.ON_SLIDE_DONE, EventDelegate.create(this, handleSliderSlideDone));
    }
    
    /**
    Sets up the horizontal slider.
    */
    private function setupIndicator () : Void {
    
        // indicator bar
        mIndicatorBar = mTimeline.slider_bar_horizontal_mc;
        // react on clicks in the bar
        mIndicatorBar.addEventListener(EventButtonEvent.ON_RELEASE, EventDelegate.create(this, handleBarClick));
        
        // indicator
        mIndicator = mTimeline.indicator_mc;
        mIndicator.setDirection(Slider.ASCENDING);
        // set the knob bounds to the slider bar bounds
        var bounds:Rectangle = RectangleUtils.boundsOfMovieClip(mIndicatorBar);
        // lock to top of bar
        bounds.height = 0;
        mIndicator.setBounds(bounds);
        // update label on slide dragging
        mIndicator.addEventListener(SliderEvent.ON_SLIDE, EventDelegate.create(this, handleIndicatorChange));
        // update zoom only on slide end
        mIndicator.addEventListener(SliderEvent.ON_SLIDE_DONE, EventDelegate.create(this, handleIndicatorSlideDone));
    }
    
    /**
    Calculates the amount of scaling with the given percentage.
    */
    private function calculateZoomAmount (inPercentage:Number) : Number {
        var percentage:Number = (inPercentage != undefined) ? 1 + inPercentage : 1;
        var base:Number = .2;
        return 100 + (base * Math.exp(inPercentage / 10));
    }
    
    /**
    Zooms in or out the zoomable_mc clip.
    */
    private function zoom (inPercentage:Number) : Void {

        var zoomAmount:Number = calculateZoomAmount(inPercentage);

        mZoomQueue.quit();
        mZoomQueue = new ActionQueue();
        
        var duration:Number = 0.4;
        mZoomQueue.addPause(.1); // to prevent zooming while slider is being dragged
        mZoomQueue.addAction( this, "updateUI", inPercentage );

        mZoomQueue.addAQMethod( AQZoom.zoomAndPan,
                                zoomable_mc,
                                duration,
                                null,
                                zoomAmount,
                                mViewPort,
                                null,
                                mZoomPoint,
                                Strong.easeOut );
        mZoomQueue.run();
    }

    /**
    Resets zooming to the initial position.
    */
    private function reset () : Void {
        zoom(0);
        updateUI();
        
        // anyone who want to make this a nice animation?
        // perhaps use AQZoom.zoomRect
        zoom_contents_mc._x = mZoomContentsResetLoc.x;
        zoom_contents_mc._y = mZoomContentsResetLoc.y;
        
        updateDynamicDot();
    }
    
    // EVENTS
    
    /**
    Starts dragging the zoomable content.
    */
    private function startZoomableDrag () : Void {
        zoom_contents_mc.startDrag();
    }
    
    /**
    Stops dragging the zoomable content.
    */
    private function stopZoomableDrag () : Void {
        zoom_contents_mc.stopDrag();
        updateDynamicDot();
    }
    
    /**
    Called at vertical slider release.
    @sends ZoomEvent
    */
    private function handleSliderSlideDone (e:SliderEvent) : Void {
        dispatchEvent(new ZoomEvent(e.percentage));
    }
    
    /**
    Called while sliding the horizontal slider knob.
    */
    private function handleIndicatorChange (e:SliderEvent) : Void {
        mIndicator.updateText(e.percentage);
    }
    
    /**
    Called at horizontal slider release.
    @sends ZoomEvent
    */
    private function handleIndicatorSlideDone (e:SliderEvent) : Void {
        mIndicator.updateText();
        dispatchEvent(new ZoomEvent(e.percentage));
    }

    /**
    Updates UI elements. Called from {@link #zoom} and {@link #reset}.
    */
    private function updateUI (inPercentage:Number) : Void {
        updateSlider(inPercentage);
        updateIndicator(inPercentage);
    }
    
    /**
    Updates the vertical slider.
    */
    private function updateSlider (inPercentage:Number) : Void {
        mSlider.setValue(inPercentage);
    }
    
    /**
    Updates the horizontal slider.
    */
    private function updateIndicator (inPercentage:Number) : Void {
        mIndicator.setValue(inPercentage);
        mIndicator.updateText(inPercentage);
    }
    
    /**
    Called whenever a ZoomEvent is dispatched (by the controller itself).
    */
    private function handleZoom (e:ZoomEvent) : Void {
        zoom(e.percentage);
    }
    
    /**
    Called when either slider bar is clicked.
    */
    private function handleBarClick (e:EventButtonEvent) : Void {
        if (e.target == mSliderBar) {
            var mouseY:Number = mSliderBar._ymouse;
            mSlider.setPosition(mouseY);
        }

        if (e.target == mIndicatorBar) {
            var mouseX:Number = mIndicatorBar._xmouse;
            mIndicator.setPosition(mouseX);
        }
    }
    
}