Slide Transition

View DEMO

How to use:

import binhpro.SlideTransition; import binhpro.ClickPageEvent; var mcs: Array = [mc_1, mc_2,mc_3,mc_4]; //width of the mask in NORMAL, MAX, MIN width var options: Object = new Object(); options["normal_width"] = 150; options["max_width"] = 317; options["min_width"] = 94; var slideTran: SlideTransition = new SlideTransition(this, mcs, options, 0, true); slideTran.addEventListener(ClickPageEvent.CLICK_PAGE_EVENT, onPageClicked);      function onPageClicked(event: ClickPageEvent) {     var page: MovieClip = event.mc;     trace("page is clicked: " + page.name); }

SlideTransition.as

package binhpro { //binhpro.SlideTransition     import binhpro.utils.ImageUtils;     import flash.display.MovieClip;     import flash.events.EventDispatcher;     import flash.events.MouseEvent;     import gs.TweenMax;          /**      * ...      * @author binhdocco          Event:  ClickPageEvent, type: ClickPageEvent.CLICK_PAGE_EVENT     Usage:          var options: Object = new Object();     options["normal_width"] = 348;     options["max_width"] = 792;     options["min_width"] = 200;     var slideTransition: SlideTransition = new SlideTransition(this,                              [page1, page2, page3, page4],                              options);     slideTransition.addEventListener(ClickPageEvent.CLICK_PAGE_EVENT, onPageClicked);          function onPageClicked(event: ClickPageEvent) {         var page: MovieClip = event.mc;         trace("page is clicked: " + page.name);     }      */     public class SlideTransition extends EventDispatcher {                  private var mainmc: MovieClip;         private var mcs: Array;         private var verGap: Number;         private var useBW: Boolean;                  private var NORMAL_WIDTH: Number = 210;// 212;         private var MAX_WIDTH: Number = 650;// 353.3;         private var MIN_WIDTH: Number = 122;                      private var activeMC: MovieClip;                  public function SlideTransition(mmc: MovieClip, mcs: Array,                                          options: Object = null, vergap: Number = 4,                                         useBlackAndWhiteAsNormal: Boolean = true) {             this.mcs = mcs;             this.mainmc = mmc;             this.verGap = vergap;                     this.useBW = useBlackAndWhiteAsNormal;             if (options) {                 NORMAL_WIDTH = options['normal_width'];                 MAX_WIDTH = options['max_width'];                 MIN_WIDTH = options['min_width'];             }             reArrange();                     }                  private function reArrange():void {             var xpos: Number = NORMAL_WIDTH/2;                         for (var i:int = 0; i < mcs.length; i++) {                 var mc: MovieClip = mcs[i] as MovieClip;                 mc.x = xpos;                 xpos += NORMAL_WIDTH + verGap;                                      mc.buttonMode = true;                 mc.pos = i;                 mc.active = false;                 if (mc.text_mc) {                     mc.textX = mc.text_mc.x;                     mc.text_mc.mouseEnabled = false;                 }                 if (useBW) {                     ImageUtils.blackAndWhite(mc, true);                     mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);                     mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);                 }                                  if (mc.img) mc.img.addEventListener(MouseEvent.CLICK, onClick);                 if (mc.close_btn) mc.close_btn.addEventListener(MouseEvent.CLICK, onClose);             }         }                      private function onOut(e:MouseEvent):void {             if (activeMC != e.currentTarget) {                 ImageUtils.blackAndWhite(e.currentTarget as MovieClip, true);             }         }                  private function onOver(e:MouseEvent):void {             if (activeMC != e.currentTarget) {                 ImageUtils.blackAndWhite(e.currentTarget as MovieClip, false);             }         }                  private function onClose(e:MouseEvent):void {             //trace("onClose: " + e.eventPhase);             if (useBW && activeMC) ImageUtils.blackAndWhite(activeMC, true);             activeMC = null;             doArrange();         }                  private function onClick(e:MouseEvent):void {             //trace("onClick: " + e.eventPhase);             var clickedMC: MovieClip = e.currentTarget.parent as MovieClip;             if (activeMC) {                 if (useBW) ImageUtils.blackAndWhite(activeMC, true);                 if (activeMC.name != clickedMC.name) {                                         activeMC = clickedMC;                                                         } else {                                         if (useBW && activeMC) ImageUtils.blackAndWhite(activeMC, false);                     //activeMC = null;                     //jump page event                     var jumpEvent: ClickPageEvent = new ClickPageEvent();                     jumpEvent.mc = activeMC;                     this.dispatchEvent(jumpEvent);                     return;                 }             } else {                 activeMC = clickedMC;                             }                                 if (useBW && activeMC) ImageUtils.blackAndWhite(activeMC, false);             doArrange();                     }                  private function doArrange():void {             //trace("doArrange");             TweenMax.killAllTweens();             var xpos: Number = NORMAL_WIDTH / 2;                 for (var i:int = 0; i < mcs.length; i++) {                 var mc: MovieClip = mcs[i] as MovieClip;                 if (activeMC) {                             if (activeMC.name == mc.name) {                         if (i == 0) xpos = 0;                         xpos += MAX_WIDTH / 2;                     } else {                         if (i == 0) xpos = 0;                         xpos += MIN_WIDTH / 2;                     }                                     }                                  TweenMax.to(mc, 0.4, { x: xpos } );                 if (activeMC) {                                         if (activeMC.name == mc.name) {                         xpos += MAX_WIDTH/2 + verGap;                         TweenMax.to(activeMC.mask_mc, 0.4, { width: MAX_WIDTH } );                         if (mc.text_mc)                             TweenMax.to(mc.text_mc, 0.4, { x: MAX_WIDTH/2 } );                     } else {                         xpos += MIN_WIDTH/2 + verGap;                         TweenMax.to(mc.mask_mc, 0.4, { width: MIN_WIDTH } );                         if (mc.text_mc)                             TweenMax.to(mc.text_mc, 0.4, { x: MIN_WIDTH/2 } );                     }                 } else {                     xpos += NORMAL_WIDTH + verGap;                     TweenMax.to(mc.mask_mc, 0.4, { width: NORMAL_WIDTH } );                     if (mc.text_mc)                         TweenMax.to(mc.text_mc, 0.4, { x: mc.textX } );                 }             }         }              }      }

ClickPageEvent.as

package binhpro { //binhpro.ClickPageEvent     import flash.display.MovieClip;     import flash.events.Event;          /**      * ...      * @author binhdocco      */     public class ClickPageEvent extends Event {                  public static const CLICK_PAGE_EVENT: String = "CLICK_PAGE_EVENT";                  public var mc: MovieClip;                  public function ClickPageEvent(type: String = CLICK_PAGE_EVENT) {             super(type);         }              }      }

ImageUtils.as

package binhpro.utils { // binhpro.utils.ImageUtils     import flash.display.DisplayObject;     import flash.filters.ColorMatrixFilter;     /**      * ...      * @author binhdocco      */     public class ImageUtils{                      // from http://snipplr.com         public static function blackAndWhite($target:DisplayObject, $enabled:Boolean):void {             if ($enabled) {                 var rc:Number = 1/3;                 var gc:Number = 1/3;                 var bc:Number = 1/3;                 var cmf:ColorMatrixFilter = new ColorMatrixFilter(                             [rc, gc, bc,                              0, 0, rc, gc, bc,                              0, 0, rc, gc, bc,                              0, 0, 0, 0, 0, 1, 0]);                             $target.filters = [cmf];             } else {                 $target.filters = [];             }         }              } }