OMGOMGOMG! Only 2 more classes before the final! Let’s use our time wisely. I’ll run through examples that might be helpful for your final. You ask me questions. Let’s go!

Files for today:

1. Tween and Transition Manager Classes
2. Pong

Buttons

1. Set up your button on the stage and name the instance “myButton_btn.”
2. In a new layer, add an event listener in your actions panel:
   myButton_btn.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);
3. Create a handler function that will be called up when the mouse is hovered over:
   function hoverButtonHandler(event:MouseEvent) {
trace("Hovered Over Button!");
}

Sound

1. In order to load an external sound file that plays and stops, we need to create 2 objects: a new Sound object and a new Sound Channel Object:
   var mySound:Sound = new Sound();//set up a sound object
/*Save your .mp3 file in a folder called sounds. Here you’re telling Flash where your sound file is located.*/
mySound.load(new URLRequest("sounds/Abort_Mission.mp3"));//load the .mp3
var myChannel:SoundChannel = new SoundChannel();
2. Here’s how you play the sound:
   myChannel=mySound.play();
3. And here’s how you stop the sound:
   myChannel.stop();

Programmed animation

Programming animation requires a different kind of event listener that listens for when the playhead enters each frame. The function below moves the circle one pixel to the right. Tying it to the event frame means that it will move one pixel for every frame.

addEventListener(Event.ENTER_FRAME, moveThatCircle);//this listens for every time Flash enters a new frame
function moveThatCircle(event:Event) { /*this is called an event handler function. it happens everytime the event ENTER_FRAME occurs*/
circle_mc.x+=1;
}

Pong: A game example

Pong utilizes startDrag() and stopDrag(), and hitTestObject(), 3 methods that might be very helpful for you in other applications.

startDrag()

To start dragging an object, all you need is this:

paddle_mc.startDrag();

However, we need to restrict our paddle to one line that goes from the left to the right of the stage. So, we create a rectangle object like so:

var rect:Rectangle=new Rectangle(0,350,450,0); //the numbers correspond to x, y, width, height

and then add a couple of parameters. The first one determines whether the shape centers itself on the mouse when you drag it, the second one registers the rectangle that we just made as the boundaries for dragging:

paddle_mc.startDrag(false, rect);

Try changing the boundaries of the rectangle to get a sense of what they correlate to.

stopDrag()

This is simple: paddle_mc.stopDrag();

hitObjectTest

The hitObjectTest is so much fun. It returns Boolean, so can be used in an If…Then statement. Make sure to put it in a function that is called upon by an ENTER_FRAME event, or it will only happen once.

if (circle_mc.hitTestObject(paddle_mc)) {
//trace("hit!");
circleVert="up";
score+=10;
score_txt.text=String(score);
} else {
}

Tween Class

The tween class allows us to create simple animations based on start, stop, and duration. You may be asking yourself, why so many ways to do the same thing? The tween class simplifies some things that are done very often-bouncing in, changing alpha, rolling around, that kind of thing. In the end, knowing when to use it can save you a lot of time! And, it’s fun.

Here’s an amazing tutorial on the Tween class

Click on the different types of tweening (around the middle of the tutorial) to get a sense for easing options available.

Here’s the basic setup:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent; //these are important. They import the class with all of the methods and properties that go along with it.
var myTween:Tween = new Tween(my_box, "x", Strong.easeOut, 40, 300, 5, true);

Let’s look at the different parts:

var myTween:Tween = new Tween(object, “property”, EasingType, begin, end, duration, useSeconds);

This is an instantiation of a object of the class tween. Here’s what all of the parameters mean:

1. object – This is the instance name of the object which will be animated. Example: my_box, gallery_mc, myTextField_txt.
2. property - This is the name of the property which will be animated, it must be specified as a string (between quotation marks). Example: “alpha”, “scaleX”, “scaleY”, “x”, “y”.
3. EasingType – The easing type will determine how the tween animation will flow. We are going to explain this more in the next section of the tutorial. Examples: Strong.EaseIn, Elastic.EaseOut, Back.EaseInOut.
4. begin – This is the position from which the animation will start, it must be specified as a number.
5. end – This is the position at which the animation will stop, it must be specified at as a number.
6. duration – This is the period for which the animation will run, the default unit for it is frames, however, the unit can be set in seconds if you set the next parameter as true.
7. useSeconds – Set this parameter to true if you want to the duration to be measured in seconds instead of frames.

READ MORE ABOUT THE TWEEN CLASS

TransitionManager Class

This is a friend of the tween class. Think of these like the Ken Burns Effect or transitions in iMovie! They are fascinating at first, but get old if you don’t give them a personal touch. Here’s the basic setup:

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start(my_mc,{type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})

The breakdown:

TransitionManager.start(target_movie_clip, transition_parameters);

READ MORE AND TRY OUT THE DIFFERENT TRANSITIONS HERE