Movieclip attraction/repulsion to mouse - actionscript-3

I'm really new to flash and as3...
I'm trying to create 2 scenes in flash - one where my movieclip moves away from the mouse whenever it goes near it, and the other where the movie clip is attracted to the mouse. I have found an answer on actionscript 2 but i cannot use this in my as3 file...
Any help or ideas?
Cheers!

Here is an example I made of a display object being "pushed" and "pulled" in relation to the mouse's position.
Main.as(Document class):
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
public class Main extends Sprite
{
public static var PULL:String = "pull";
public static var PUSH:String = "push";
private var _circle:Circle;
private var _force:String;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
_circle = new Circle();
addChild(_circle);
_force = PULL;
stage.addEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown);
}// end function
private function onStageMouseDown(e:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
stage.addEventListener(Event.ENTER_FRAME, onStageEnterFrame);
}// end function
private function onStageMouseUp(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
stage.removeEventListener(Event.ENTER_FRAME, onStageEnterFrame);
_force = (_force == PULL) ? PUSH : PULL;
}// end function
private function onStageEnterFrame(e:Event):void
{
var point1:Point = new Point(_circle.x, _circle.y);
var point2:Point = new Point(stage.mouseX, stage.mouseY);
var point3:Point = point2.subtract(point1);
point3.normalize(10);
if (_force == PULL) {
_circle.x += point3.x;
_circle.y += point3.y;
} else if (_force == PUSH) {
_circle.x -= point3.x;
_circle.y -= point3.y;
}// end else if
}// end function
}// end class
}// end package
import flash.display.Sprite;
import flash.events.Event;
class Circle extends Sprite {
public function Circle() {
draw();
}// end function
private function draw():void {
this.graphics.lineStyle(1);
this.graphics.beginFill(0xFFFFFF);
this.graphics.drawCircle( 0, 0, 20);
this.graphics.endFill();
}// end function
}// end class
In the init() method we add a new display object to the stage, this is the display object we will be "pulling" and "pushing" in relation to the mouse's position.
_circle = new Circle();
addChild(_circle);
Then we set the _force property to our PULL constant. The _force property will determine whether the display object is "pulled" or "pushed".
_force = PULL;
Next we add our mouse event listeners to the stage. On MouseEvent.MOUSE_DOWN we call the onStageMouseDown() event handler. When the handler is called, we add an Event.ENTER_FRAME and MouseEvent.MOUSE_UP event listeners to the stage.
private function onStageMouseDown(e:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
stage.addEventListener(Event.ENTER_FRAME, onStageEnterFrame);
}// end function
When the MouseEvent.MOUSE_UP event handler is called, the previous Event.ENTER_FRAME and MouseEvent.MOUSE_UP event listeners are removed from the stage. Then depending on the _force property's value, its value is alternated between PUSH and PULL.
private function onStageMouseUp(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
stage.removeEventListener(Event.ENTER_FRAME, onStageEnterFrame);
_force = (_force == PULL) ? PUSH : PULL;
}// end function
Lastly, the onStageEnterFrame event handler. This is where we calculate the new position of the display object in relation to the mouse.
There are different ways to go about this, but I decided to use the Point class to simplify things. First we have to get a Point object for the display object's position and another Point object for mouse's position.
var point1:Point = new Point(_circle.x, _circle.y);
var point2:Point = new Point(stage.mouseX, stage.mouseY);
Next we have to get the difference between the points using the Point object's subtract() method.
var point3:Point = point2.subtract(point1);
With this new point, we can use the Point object's normalize() method to scale the line segment between the display object's position and the mouse's position to a set length.
point3.normalize(10);
Finally depending on the _force property's value we either subtract or add the point's x and y properties from the display object's x and y properties.

Related

AS3 - Move MovieClip across screen

I've 3 different MovieClips that I need to move at the same time across the screen. (From bottom to top)
What is the best way of doing this without using a tweening class like Caurina?
Thank you for tips.
You could add an event listener to the parent container of the display objects which listens for the Event.ENTER_FRAME event. On each Event.ENTER_FRAME event you simply decrement the y property of the display objects like in the following example.
package
{
import flash.display.Sprite;
import flash.events.Event;
[SWF(width="600", height="500")]
public class Main extends Sprite
{
private var _squares:Vector.<Square>;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
_squares = new Vector.<Square>();
var redSquare:Square = new Square(0xFF0000, 100);
redSquare.x = 0;
redSquare.y = 400;
addChild(redSquare);
var greenSquare:Square = new Square(0x00FF00, 100);
greenSquare.x = 300;
greenSquare.y = 300;
addChild(greenSquare);
var blueSquare:Square = new Square(0x0000FF, 100);
blueSquare.x = 500;
blueSquare.y = 100;
addChild(blueSquare);
_squares.push(redSquare, greenSquare, blueSquare);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}// end function
private function onEnterFrame(e:Event):void
{
for each(var square:Square in _squares)
{
if (square.y > 0) square.y -= 5;
}// end for
}// end function
}// end class
}// end package
import flash.display.Sprite;
internal class Square extends Sprite
{
public function Square(color:uint, size:Number)
{
graphics.beginFill(color);
graphics.drawRect(0, 0, size, size);
graphics.endFill();
}// end function
}// end function
I think you'd be making life easier for yourself though if you simply used Greensock's Tweening platform instead.
You can animate them in Flash IDE with frames and tweenings.
Also you can animate them programmatically yourself. Place every movie clip at the bottom of the screen, write some code that moves your movieClips a little to the top of the screen and gets called periodically (using Timer, EnterFrame event listener or setInterval), stop calling this code when all movieClips reached the top (using Timer.stop(), removeEventListener or clearInterval).
I don't see why you might need to do that because there are many tweening libraries that do all this for you.

create one addEventListener for all array elements in actionscript

I have an array of movie clips that represent buttons the user can click on, and so I need to use addEventListener function so the click can be handled.
I can use a loop and create an addEventListener for each element, I have 26 elements in the array, but I want to try another solution by using only one addEventListener and apply it on the array instead of the elements.
I want to know how to recognize which button was clicked, I mean what's its index in the array.
Thanks.
This is probably a good time to learn about event bubbling. You could just add one listener to the common parent of all your buttons
buttonContainer.addEventListener(MouseEvent.CLICK, buttonContainerClickHandler);
Then try and work out what was clicked
private function buttonContainerClickHandler(e:MouseEvent):void
{
var targetButton:Sprite = e.target as Sprite;
//do something with targetButton.
}
To find out what button was clicked, you could use the indexOf method of your array, and pass it the targetButton.
One thing you will have to do is make sure each of your buttons has mouseChildren set to false, or e.target will return the child assets of the buttons.
Add it to the movieclip. Adding an event listener to an array doesn't make a whole lot of sense. You are basically saying "Hey array, let me know when something about you changes" and Array isn't a subclass of EventDispatcher so that is a no-go. But in any case you don't want to know about the array, you want to know about the movieclip so the logical thing to do is to make the loop and add it to the movieclip.
You can't assign an event listener to an array.
What I think you're doing is applying a different event listener function to each clip in the array.
For each of the clips you can add the same event listener:
clips[i].addEventListener(MouseEvent.CLICK, handleClick);
and the handleClick function looks something like:
function handleClick(e:MouseEvent):void {
trace(clips.indexOf(e.target)) // outputs index the movieclip that was clicked on
}
Create a class for your buttons and add the event listener to the class. This way you don't even have to loop through your movie clips as the method will be part of the class
You can't get out of looping directly -- some loop will have to apply somewhere, but you can get out of looping indirectly -- you can let the VM loop for you. You should look at Array.forEach.
A simple application might be:
// assuming myArr is your array.
myArr.forEach( function(item:*, index:int, array:Array):void
{
item.addEventListener( MouseEvent.CLICK, myClickHandler );
} );
To get the item's index, you might make something more complicated:
myArr.forEach( function(item:*, index:int, array:Array):void
{
item.addEventListener( MouseEvent.CLICK, function( event:Event ):void
{
trace( "my index is", index );
} );
} );
I do have to recommend that you simply cache the array someplace accessible to your listener function and then use Array.indexOf along with event.currentTarget, but if you don't find that acceptable, you can use forEach this way:
myArr.forEach( function(item:*, index:int, array:Array):void
{
item.addEventListener( MouseEvent.CLICK, function( event:Event ):void
{
trace( "my index is", array.indexOf( item ) );
} );
} );
Depending on how often you call those methods, it might not be faster to simply us this:
// probably not best to have this public
protected var myArr:Array = [/* whatever goes in here */]
public function register():void
{
myArr.forEach( addHandler );
}
protected function addHandler( item:IEventListener, index:int, arr:Array ):void
{
item.addEventListener( MouseEvent.CLICK, myClickHandler );
}
protected function myClickHandler( event:MouseEvent ):void
{
trace( event.currentTarget, "is at", myArr.indexOf( event.currentTarget ) );
}
But, I can't be sure without knowing more about your particular use case.
You could create your own custom vector class for IEventDispatcher objects that has a custom method that adds an event listener to all its elements. The best way to do this is to create a proxy class that acts as a wrapper for a Vector.<IEventDispatcher> object. I've created an example to demonstrate this:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IEventDispatcher;
public class Main extends Sprite
{
private var _eventDispatcherVector:EventDispatcherVector;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
var redCustomButton:CustomButton = new CustomButton("RED", 0xFF0000);
addChild(redCustomButton);
var blueCustomButton:CustomButton = new CustomButton("BLUE", 0x00FF00);
blueCustomButton.x = 100;
addChild(blueCustomButton);
var greenCustomButton:CustomButton = new CustomButton("GREEN", 0x0000FF);
greenCustomButton.x = 200;
addChild(greenCustomButton);
_eventDispatcherVector = new EventDispatcherVector(Vector.<IEventDispatcher>([redCustomButton,
blueCustomButton,
greenCustomButton]));
_eventDispatcherVector.addEventListener(MouseEvent.CLICK, onCustomButtonClick);
}// end function
private function onCustomButtonClick(e:Event):void
{
var customButton:CustomButton = e.target as CustomButton;
trace("You clicked: " + customButton.name + "\n" +
"Its index is: " + _eventDispatcherVector.indexOf(customButton));
}// end function
}// end class
}// end package
import flash.utils.Proxy;
import flash.utils.flash_proxy;
import flash.events.IEventDispatcher;
use namespace flash_proxy;
dynamic internal class EventDispatcherVector extends Proxy
{
private var _eventDispatcherVector:Vector.<IEventDispatcher>;
public function EventDispatcherVector(eventDispatcherVector:Vector.<IEventDispatcher>)
{
_eventDispatcherVector = eventDispatcherVector;
}// end function
override flash_proxy function getProperty(name:*):*
{
return _eventDispatcherVector[name];
}
override flash_proxy function setProperty(name:*, value:*):void
{
_eventDispatcherVector[name] = value;
}// end function
public function indexOf(searchElement:*, fromIndex:*= 0):int
{
return _eventDispatcherVector.indexOf(searchElement, fromIndex);
}// end function
public function addEventListener(type:String,
listener:Function,
useCapture:Boolean = false,
priority:int = 0,
useWeakReference:Boolean = false):void
{
for each(var eventDispatcher:IEventDispatcher in _eventDispatcherVector)
{
eventDispatcher.addEventListener(type, listener, useCapture, priority, useWeakReference);
}// end for each
}// end function
}// end class
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
internal class CustomButton extends Sprite
{
public function CustomButton(name:String, color:uint)
{
graphics.beginFill(color);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();
var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.text = name;
textField.mouseEnabled = false;
textField.x = (100 / 2) - (textField.width / 2);
textField.y = (100 / 2) - (textField.height / 2);
addChild(textField);
this.name = name;
}// end function
}// end class
The output from clicking on the CustomButton objects is the following:
You clicked: RED
Its index is: 0
You clicked: BLUE
Its index is: 1
You clicked: GREEN
Its index is: 2
You can check out Stigglers answer for the question Actionscript 3.0 Best Option for Subclassing Vector Class (Flash Player 10) for more detail.

MOUSE_DOWN trigger every frame, ActionScript 3

as I am new to as3, I want to implement a MachineGun, that fires while has ammo, and the trigger is pulled, In my case, the MouseEvent.MOUSE_DOWN.
The problem is that this event fires only once.
The closest I get is to this is MouseEvent.MOUSE_MOVE, but it fails my purpose when the mouse position is sustained
EDIT:
I need the updated mouse cursor every frame
When your MouseEvent.MOUSE_DOWN event handler you can create an event listener that listens for the Event.ENTER_FRAME event to be dispatched. Using the Event.ENTER_FRAME event handler you can repeatedly call a method that handles shooting the bullet. The following is an example I modeled after an example at http://www.benoitfreslon.com/actionscript-throw-bullets-to-mouse-direction:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
[SWF(width="500", height="500", frameRate="24", backgroundColor="0xFFFFFF")]
public class Main extends Sprite
{
private var _gun:Gun;
private var _interval:int;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
_gun = new Gun();
_gun.x = stage.stageWidth / 2 - _gun.width / 2;
_gun.y = stage.stageHeight / 2 - _gun.height / 2;
addChild(_gun);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown);
}// end function
private function onStageMouseDown(e:MouseEvent):void
{
stage.addEventListener(Event.ENTER_FRAME, onStageEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
}// end function
private function onStageEnterFrame(e:Event):void
{
shootBullet();
}// end function
private function shootBullet():void
{
if (_interval > 5)
{
var bullet:Bullet = new Bullet();
bullet.addEventListener(Event.ENTER_FRAME, onBulletEnterFrame);
bullet.x = _gun.x;
bullet.y = _gun.y;
bullet.angleRadian = Math.atan2(stage.mouseY - _gun.y, stage.mouseX - _gun.x);
bullet.addEventListener(Event.ENTER_FRAME, onBulletEnterFrame);
addChild(bullet);
_interval = 0; // reset
}// end if
_interval++;
}// end function
private function onBulletEnterFrame(e:Event):void
{
var bullet:Bullet = Bullet(e.target);
bullet.x += Math.cos(bullet.angleRadian) * bullet.SPEED;
bullet.y += Math.sin(bullet.angleRadian) * bullet.SPEED;
if ( bullet.x < 0 || bullet.x > 500 || bullet.y < 0 || bullet.y > 500)
{
removeChild(bullet);
bullet.removeEventListener(Event.ENTER_FRAME, onBulletEnterFrame);
}// end if
}// end function
private function onStageMouseUp(e:MouseEvent):void
{
stage.removeEventListener(Event.ENTER_FRAME, onStageEnterFrame);
stage.removeEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
_interval = 0;
}// end function
}// end class
}// end package
import flash.display.Sprite;
internal class Gun extends Sprite
{
public function Gun()
{
graphics.beginFill(0x000000);
graphics.drawCircle(0, 0, 10);
graphics.endFill();
}// end function
}// end class
internal class Bullet extends Sprite
{
public var angleRadian:Number;
public const SPEED:Number = 10;
public function Bullet()
{
graphics.lineStyle(1, 0x000000);
graphics.drawCircle(0, 0, 10);
graphics.endFill();
}// end function
}// end class
The point of interest is in the onStageEnterFrame() method. There's an if statement that checks whether the _interval property's value is greater than 5, if so, a new bullet is created and shot otherwise the _interval property's value is incremented. The purpose of the _interval property is to space out the bullets being shot.
[UPDATE]
Here is an image of the example flash application running:
The mouse button is being held down in the top right corner hence the bullets being shot in that direction.
On receiving a MouseEvent.MOUSE_DOWN event, run a while loop making the machine gun fire. The loop breaks on receiving a MouseEvent.MOUSE_UP event. Something like this
private function handleMouseDown( event:Event ):void
{
this.addEventListener( MouseEvent.MOUSE_UP , handleMouseUp );
startFiring();
}
private function handleMouseUp( event:Event ):void
{
this.removeEventListener( MouseEvent.MOUSE_UP , handleMouseUp );
this.addEventListener( MouseEvent.MOUSE_DOWN , handleMouseDown);
stopFiring();
}
EDIT: For clarification, the stop and start firing functions are functions that run a loop to keep the machine gun firing animation going however that may be.
add firing action to ENTER_FRAME event when mouse is pressed and remove when mouse is up
this.addEventListener( MouseEvent.MOUSE_DOWN, this.handler_down );
this.addEventListener( MouseEvent.MOUSE_UP, this.handler_up );
private function handler_down(event:Event):void {
super.addEventListener( Event.ENTER_FRAME, this.handler_frame );
}
private function handler_up(event:Event):void {
super.removeEventListener( Event.ENTER_FRAME, this.handler_frame );
}
private function handler_frame(event:Event):void {
this.fire();
}
I have to do this regularly, and instead of using an enter_frame listener, I opt for a Timer() and TimerEvent.Timer listener. That way I have more control over how often the repeat is fired without accounting for frame rate and what not.
private var fireRepeat:Timer;
private function triggerDown(e:MouseEvent):void {
if (!this.fireRepeat) { // create the repeater
this.fireRepeat = new Timer(500, 0);
this.fireRepeat.addEventListener(TimerEvent.TIMER, this.fire);
}
fire(); // fire the first bullet
this.fireRepeat.reset(); // reset the repeater
this.fireRepeat.start(); // start the repeater
}
private function triggerUp(e:MouseEvent):void {
if (this.fireRepeat) { this.fireRepeat.stop(); }
}
public function fire(e:* = null):void {
trace('fire!');
}

AS3: Custom event propagation

I'm trying to put together a projector of a sequence of externally loaded swfs and my general question will be as short as it can be.
If an external swf loaded into ctrl (an instance of MovieClip placed on stage during authoring) has in its first and last frames:
dispatchEvent(new Event("FIRST_FRAME")); // in the first frame, and:
dispatchEvent(new Event("LAST_FRAME")); // in the last frame
then - should those events be "heard" within the ctrl container?
At present I only seem to be able to listen to those events within the loaded content, not "higher", I mean - if I say in the loader complete listener:
mc:MovieClip = MovieClip(e.currentTarget.content);
mc.addEventListener("LAST_FRAME", function(){ // something });
then the events are heard, but not when I say:
ctrl.addEventListener("LAST_FRAME", function(){ // something });
The latter seems to be more robust, therefore I'm struggling to have it work, but I guess I've been missing out some lessons ;-)
Has anyone been through this? Is my approach correct or should I take another path?
Cheers everyone.
You can get your crtl display object to recieve the event dispatched from your external swf by setting the bubbles option to true when dispatching your event. Look at the following example where SWFB.swf is loaded into SWFA.swf:
SWFB:
package swfb
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
const SECOND:int = 1000;
var timer:Timer = new Timer(5 * SECOND, 1);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
timer.start();
}// end function
private function onTimerComplete(e:TimerEvent):void
{
dispatchEvent(new TimerEvent(TimerEvent.TIMER_COMPLETE, true, true));
}// end function
}// end class
}// end package
SWFA:
package swfa
{
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.net.URLRequest;
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
loader.load(new URLRequest("swf/SWFB.swf"));
}// end function
private function onLoaderComplete(e:Event):void
{
var loaderInfo:LoaderInfo = LoaderInfo(e.target);
var container:Sprite = new Sprite();
container.addChild(loaderInfo.content);
container.addEventListener(TimerEvent.TIMER_COMPLETE, onContainerTimerComplete);
addChild(container);
}// end function
private function onContainerTimerComplete(e:TimerEvent):void
{
trace("TIMER COMPLETE!");
e.stopPropagation();
}// end function
}// end class
}// end package
SWFB.swf dispatches a Timer event 5 seconds after it's added to the stage. When it dispatches the event the bubbles and cancelable options are set to true.
In SWFA.swf the SWFB.swf is loaded into it and then added to a display object container called container. Then an event listener is added to container that listens for the Timer event from SWFB.swf to be dispatched. When it's dispatched the onContainerTimerComplete() event handler invokes the Timer event's stopPropagation() method to(as its name suggests) stop the propagation of the event.

Specifying a transition in separate class

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.
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 );
}
}
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 :)