Specifying a transition in separate class - actionscript-3

Question

I have a question but its a bit hard to explain so feel free to comment if its not clear.
i have a function that looks as following:
private function createContent(slideData:Object):void
{
if (slide){
removeChild(slide);
}
slide = new Slide(slideData);
addChild(slide);
}
Now when i remove or add a slide I would like it to appear with a transition, I would like to create a separate class to put the different transitions in using tweenlite. How would I approach this the best way? So to sum up, when I add or remove a child, the transitions class gets called, it returns a transition and the slide gets animated when its added or removed.

Answer 1

One way to handle this could be to implement methods that you could call when adding or removing a slide. I'm not sure if using a specific class for transitions would help but in any case , you can pass the transition Object as a parameter to the function.
You could also add conditionals in case the transition Object is null, the slide would be simply added or removed and the call to Tweenlite not made...
public function displaySlide(container:DisplayObjectContainer ,
transition:Object , show:Boolean):void
{
//The show Boolean indicates if you add
//or remove the slide. If removing the slide
//you'll need the value in the transitionComplete method
this.show = show;
if( show )
container.addChild( this );
//The duration value as a property of your transition Object
TweenLite.to( this , transition.duration , transition );
}
public transitionComplete():void
{
if( !show )
this.parent.removeChild( this );
dispatch( new Event ("Transition complete") );
}
You could then use it like this:
private function createContent(slideData:Object):void
{
if (this.contains( slide )){
slide.addEventListener( "Transition Complete" , completeHandler );
slide.displaySlide( this , slideData , false );
}
}

Answer 2

The way you coud approach it could be like the following example:
You would create the classes Main(document class), com.vincent.Slides and com.vincent.Slide.
package
{
import com.vincent.Slides;
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main():void
{
init();
}// end function
private function init():void
{
var slides:Slides = new Slides(550, 400, [0xFF0000, 0x00FF00, 0x0000FF]);
addChild(slides);
}// end function
}// end class
}// end package
In the Main class, you would import the Slides class and create an instance of it. The arguments for the Slides Class are the width, the height, and the color of the slides. For this example I'm using colors instead of loading in content to keep the flash app/movie simple. Lastly you would add the Slides instance to the stage.
package com.vincent
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Slides extends Sprite
{
private var _width:Number;
private var _height:Number;
private var _slideColors:Array;
private var _slides:Array;
private var _currentSlide:int = 1;
private var _leftControl:Sprite;
private var _rightControl:Sprite;
private var _isSliding:Boolean;
public function Slides(p_width:Number, p_height:Number, p_slideColors:Array):void
{
_width = p_width;
_height = p_height;
_slideColors = p_slideColors;
init();
}// end function
private function init():void
{
addSlides();
addControls();
addMask();
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}// end function
private function addSlides():void
{
_slides = new Array();
for(var i:uint = 0; i < _slideColors.length; i++)
{
var slide:Slide = new Slide(_width, _height, _slideColors[i]);
slide.x = _width * i;
addChild(slide);
_slides.push(slide);
}// end for
}// end function
private function addControls():void
{
_leftControl = new Sprite();
_leftControl.graphics.beginFill(0x000000, 0);
_leftControl.graphics.drawRect(0, 0, 50, _height);
_leftControl.graphics.endFill();
addChild(_leftControl);
var _rightControl:Sprite = new Sprite();
_rightControl.graphics.beginFill(0x000000, 0);
_rightControl.graphics.drawRect(0, 0, 50, _width);
_rightControl.graphics.endFill();
_rightControl.x = _width - _rightControl.width;
addChild(_rightControl);
_leftControl.addEventListener(MouseEvent.CLICK, mouseClickHandler);
_rightControl.addEventListener(MouseEvent.CLICK, mouseClickHandler);
}// end function
private function mouseClickHandler(e:MouseEvent):void
{
if(!_isSliding)
{
if(e.currentTarget == _leftControl)
{
slideLeft();
}
else
{
slideRight();
}// end if
}// end if
}// end function
private function slideLeft():void
{
if(!(_currentSlide <= 1))
{
for(var i:uint = 0; i < _slides.length; i++)
{
_slides[i].tweenLeft();
}// end for
_currentSlide--;
}// end if
}// end function
private function slideRight():void
{
if(!(_currentSlide >= _slides.length))
{
for(var i:uint = 0; i < _slides.length; i++)
{
_slides[i].tweenRight();
}// end for
_currentSlide++;
}// end if
}// end function
private function addMask():void
{
var maskSprite:Sprite = new Sprite();
maskSprite.graphics.beginFill(0x000000);
maskSprite.graphics.drawRect(0, 0, _width, _height);
maskSprite.graphics.endFill();
addChild(maskSprite);
this.mask = maskSprite;
}// end function
private function enterFrameHandler(e:Event):void
{
if(_slides[0].isSliding)
{
_isSliding = true;
}
else
{
_isSliding = false;
}// end if else
}// end function
}// end class
}// end package
In the Slides class, you would import the Sprite, Event and MouseEvent classes. Note that I don't need to import the Slide class as it is an internal class. An internal class is accessible by all classes within the same package. Next you would extend the Sprite class for the Slides class.
After, you would declare the private properties: _width and _height that holds the width and height of the display object; _slideColors that holds an array of each slide's color; _currentSlide that represents the current slide number; _leftControl and _rightControl which are the controls for sliding the slides left and right upon clicking; and lastly the _isSliding that is set to true if the slides are sliding or false if they are not.
For the initialization of the Slide class, you would assign the Slides properties with the corresponding Slides arguments. Then in the first method called, init(), a call to the addSlides() method is called.
In the addSlides() method, the _slides property is instantialized. Next a for loop is used to loop through all the slide colors in the _slideColors array and create an instance of Slide that is added to the stage and add it to the _slides array. Upon creating each Slide instance, the width, height, and slide color is parsed to it and each slide is positioned to the right of the previous slide.
After the addSlides() method is invoked, the next method called in the init() method is addControls(). In the addControls() method, the _leftControl and _rightControl sprites are drawn and added to the Slides display object. They are invisble and positioned to the left and right edges (respectively) of Slides display object. Next you would add event listeners to the controls that would listen for when the user clicked on it. When the user clicks on it, the mouseClickHandler() method is called.
In the mouseClickHandler() method, there is a conditional statement that checks to see if the slides are sliding. If they are not, another conditonal statement checks to see which control was clicked and calls the corresponding slideLeft() or slideRight() method.
In the slideLeft() and slideRight() methods there is a conditional statement that checks to see if the current slide isn't the first or last slide. If it isn't, the method tweenLeft() or tweenRight() is called for all the slides in the _slides array. After that the _currentSlide property is incremented or decremented by 1.
After the addControls() method is invoked, the next method called in the init() method is addMask(). This simply adds a mask to the Sprites display object so you can only see one slide at a time.
After the addMask() method is invoked, the next method called in the init() method is addMask(). This simply adds a mask to the Sprites display object so you can only see one slide at a time.
Lastly, after the addMask() method is invoked, you add an enter frame event listener that repeatedly fires the method enterFrameHandler().
In the enterFrameHandler() method, you have a conditional statement that checks whether a slide is sliding and assigns either true or false to the _isSliding property.
package com.vincent
{
import com.greensock.TweenLite;
import flash.display.Sprite;
internal class Slide extends Sprite
{
private var _width:Number;
private var _height:Number;
private var _slideColor:uint;
private var _isSliding:Boolean;
public function get isSliding():Boolean
{
return _isSliding;
}// end function
public function Slide(p_width:Number, p_height:Number, p_slideColor:uint):void
{
_width = p_width;
_height = p_height;
_slideColor = p_slideColor;
init();
}// end function
private function init():void
{
var slideContent:Sprite = new Sprite();
slideContent.graphics.beginFill(_slideColor);
slideContent.graphics.drawRect(0, 0, _width, _height);
slideContent.graphics.endFill();
addChild(slideContent);
}// end function
public function tweenLeft():void
{
_isSliding = true;
TweenLite.to(this, 1, {x: this.x + _width, onComplete: onTweenComplete});
}// end function
public function tweenRight():void
{
_isSliding = true;
TweenLite.to(this, 1, {x: this.x - _width, onComplete: onTweenComplete});
}// end function
private function onTweenComplete():void
{
_isSliding = false;
}// end function
}// end class
}// end package
This is the code that you would use for the Slide class.
With that, the example is complete and working. To be honest the question was a bit hard to understand so I gave a very general example of using slides with the TweenLite in hopes that you could take something away from it. By using this approach you can change the tween effect for each slide by editing the TweenLite.to() method in the Slide class. If you could put up more code from your flash app/movie or a link to it, it could help you get a better answer. I know it would certainly help me give you a better one. If you have questions about the example, leave a comment or contact me(my contact info is on my profile).
I hope this helped :)