MovieClip acting like ViewStack
For some weeks ago, I’m using MovieClips in Flash like I use ViewStack in Flex.
I made this tool because I was bored to work on FLA files with huge timeline animations where it’s almost impossible to find directly what you are looking for, especially when you work on a team and when it’s not your own source code.
In fact, I like the way to open a FLA file and see immediately all the states of an application.
The ViewStack Class and the ViewStackPanel Class manage your different states (frames of a MovieClip) using Event.ADDED_TO_STAGE and Event.REMOVED_FROM_STAGE events.
It becomes really easy to handle you IN and OUT transitions between states and kill all the listeners in a custom view linked to a Class.
In the following example, you’ll see a 2 states (2 frames) ViewStack.
On each frame, there is another MovieClip, linked to a Class that extends ViewStackPanel (here: ContactPanel and InfoPanel).
ContactPanel and InfoPanel inherits of the init(), kill() and disappear() methods… But let’s see in details, just for the ContactPanel:
ContactPanel Class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | package org.cornflex.examples.viewstack { import flash.display.MovieClip; import flash.events.MouseEvent; import org.cornflex.core.ViewStackPanel; import org.cornflex.transitions.TweenMax; public class ContactPanel extends ViewStackPanel { public var navigation:MovieClip; public var topBanner:MovieClip; public var pageContent:MovieClip; public var nextButton:MovieClip; public function ContactPanel() { navigation.alpha = 0; pageContent.alpha = 0; topBanner.alpha = 0; nextButton.alpha = 0; } override public function init():void { nextButton.addEventListener(MouseEvent.CLICK, changeFrame); TweenMax.to(navigation, .5, {alpha:1}); TweenMax.to(topBanner, .5, {alpha:1, delay:.2}); TweenMax.to(pageContent, .5, {alpha:1, delay:.4}); TweenMax.to(nextButton, .5, {alpha:1, delay:.6}); } override public function kill():void { //clear listeners and stuff... } override public function disappear():void { TweenMax.to(nextButton, .5, {alpha:0}); TweenMax.to(pageContent, .5, {alpha:0, delay:.2}); TweenMax.to(topBanner, .5, {alpha:0, delay:.4}); TweenMax.to(navigation, .5, {alpha:0, delay:.6, onComplete:finish}); } private function changeFrame(evt:MouseEvent):void { viewstack.goto(2); } } } |
The main Class of the FLA File, ViewStackExample:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | package org.cornflex.examples.viewstack { import flash.display.MovieClip; import flash.events.MouseEvent; import org.cornflex.core.ViewStack; public class ViewStackExample extends MovieClip { public var viewstack:ViewStack; public var jumpButton:MovieClip; public function ViewStackExample() { viewstack.debug = true; jumpButton.addEventListener(MouseEvent.CLICK, handleClick); } private function handleClick(event:MouseEvent):void { viewstack.goto(2); } } } |
As you can see in the Main Class, I put a jumpButton to show the possibility to call other states from outside the viewstack itself.
You can imagine to have a navigation working with indexes and telling the viewstack on which state it has to go…
And the SWF output :
To understand well the concept, I advice to take a look to my sources, here.
