Phase 12:
Create transitions in ActionScript
This phase is fun - you'll learn how to make things move using ActionScript.
Step 1: Learn how tweens are written in AS
a. Download tweenInAS.fla
b. Run the file. The movement you see is made up of 4 simultaneous tweens. One causes movement in the x dimension, the second causes movement in the y dimension, the third changes the width of the circle and the fourth changes its height. The little recoil you see at the end is the result of an "easing" assigned to all of the tweens.
c. Look at the code to see how this works.
A tween is an object so you create it just the way you do any other object:
var myTween:Tween = new Tween();
It takes 7 parameters (in this order):
1. Name of a display object: Object which the Tween targets
2. Name of the property, in quotes: Name of the property that will be affected
3. Name of the easing function: Easing function that will be applied to the tween
4. A number representing the starting value of the property you're changing: Starting value of property
5. A number representing the ending value of the property you're changing: Ending value of property
6. The number of seconds or the number of frames the tween will last for: Length of time of the motion
7. Either true (to use seconds) or false (to use frames): Flag specifying whether the previous parameter refers to number of seconds or number of frames
As you can see from the comments in the code module, there are lots of things you can do with tweens.
Step 2: Remove extra frames & code
A major thing that's happening with this phase is that you're no longer using the timeline for animation. You're using code instead. So you need to remove the extra timeline frames or you'll have competing events.
a. Open Medals_11_XMLtoo.fla and save it as Medals_12_tweens.fla.
b. Select all of the frames (for all of the layers) except for frame 1 and delete them (right click and choose "Remove Frames" or Edit ->Timeline -> Remove Frames). Now your timeline looks like this:
You also have a significant amount of code that refers to the timeline. So you want to get rid of that:
c. Remove the stop(); line
d. In the switchViews function, remove the entire switch case plus the addEventListener line that listens for a change in frame. (Test your code after this to be sure it doesn't give you errors. If it does, you may have removed an extra curly bracket or left one behind).
e. Similarly, in the changeDates function, remove the switch case and addEvent listener.
f. Finally, remove the entire runTransition function.
Now your code is independent of the timeline.
Step 3: Identify the tweens you need to create
Now think through how to use tweens in the Medals application.
a. Look at the graphic you're emulating and answer these questions for yourself (write them down or type them somewhere on your computer - I'm not going to ask you to hand them in, but you'll learn more if you don't just do them quickly in your head):
When you've answered these...continue reading.
The answer to the first question is that the tweens happen when you either click on a tab to change the view or move the date slider. So...
b. Go to the two functions that are triggered by these actions: changeDate() and switchViews(), and add the following comment at the end of each function:
//Trigger tween here
Now look at your answer to the question 'What properties change?" I'm assuming your answers are the same as mine:
c. Add this info to the comments you just wrote as a reminder of what you need to do.
Step 4: Put the circles in an array
You want to be able to tween each circle so you'll want to create a loop that goes through all of the circles. To enable you to do that, you'll put them in an array.
a. Go to the top of your code and create an array variable called "medalArray" like this:
var medalArray:Array = new Array();
As each new sprite is created, you'll need to add it to the array. The syntax for adding to an array goes like this:
<name of array>.push(<name of object to be added to the array>)
b. Go to the end of the for each loop in the loadCompletedHandler function where you create the circles, and write a line that adds the just-created circle to the array ( following the above model).
c. Immediately after the line you just wrote, add a trace statement that will tell you how many items are in the array as a way of making sure your code is working properly:
trace(medalArray.length);
d. Test the code to be sure you don't get an error. You should see a '1' and a '2' in the output panel as a result of the trace statement.
Step 5: Create the Tweens for switching views
a. First you need to be sure you have access to the tween classes so include these two import statements at the beginning of your code pane:
import fl.transitions.*;
import fl.transitions.easing.*;
b. Go to the switchViews() function and type this line below your comment (I've made this line a comment for now, but you'll uncomment it later when the values are filled in and it becomes a valid line of code):
//var myTween:Tween = new Tween(<name of the display object>, <name of the property to tween>, <name of the easing function, if any>,<A number representing the starting value of the property you're changing>,<A number representing the ending value of the property you're changing>, <The number of seconds or the number of frames the tween will last for>,<true if you want to use seconds, false if you want to use frames>);
Warning, this next step is long:
c. Fill in the values for the tween parameters using the guidance below. Use values for your first tween of the first circle (i.e. the Japan circle moving from it's 2008 geographic position to its 2008 ranking position):
1. To fill in the first parameter which is: <name of the display object>, you'll use the array. To retrieve a value from an array, you type the name of the array followed by the number of the item in square brackets like this:
medalArray[0];
The first item in the array is at position 0, the second is at position 1, etc.
2. The name of the property to tween is "x" (be sure to put it in quotes)
3. Enter Regular.easeOut for the easing function. No quotes needed
3. The starting value will be the object's current x position:
medalArray[0].x
4. The ending value is in the XML file. It will be the "2008, by ranking" position. To figure out the reference to this element, use a trace statement and building it up slowly, i.e. start with a simple reference (e.g. to whole country element):
trace(medalXML.country);
Here is the first part of the XML file, as a reminder:
<countries>
<country id='Japan' color='0x979D6D'>
<year id='2008'>
<totalMedals>25</totalMedals>
<goldMedals>9</goldMedals>
<silverMedals>6</silverMedals>
<bronzeMedals>10</bronzeMedals>
<ranking>
<x>368.7</x>
<y>235.8</y>
</ranking>
<geographic>
<x>814.55</x>
<y>225.80</y>
</geographic>
<radius>31</radius>
</year>Test the code (remember to click on the tab to actually trigger the trace statement), and see what this prints in the output window. Then make it more specific, e.g:
trace(medalXML.country.(@id=="Japan"));
Keep going until you just see "368.7" in the output window. Then you'll know your reference is correct.
REMINDERS:
Use a period to go down one level:
country.year
Use a @ to get the value of an attribute
country.@id
Use a parenthetical statement to get an element that has a particular attribute value:
country.(@id=='Japan")
5. The length of time a tween will last is expressed in either seconds or frames. We'll use 1 second so just enter a 1 here
6. The units of time - enter true to indicate seconds - false would indicate frames
d. Now that the tween statement is complete, uncomment it (i.e. remove the '//' in front of it).
e. Run the movie and click on the tab. Japan should move to the left (along the x axis).
f. Make a copy of this tween and change the values in the copy to move the circle along the y axis. You'll need to change the name of the tween as well. Change the names to "tweenX" and "tweenY."
g. Test this (there isn't much motion in the y dimension so it's hard to see - you can temporarily comment out the x tween to make it more clear that your y tween is working).
Step 6: Generate tweens for each circle
Now that you have a tween that works for one of your circles, you want to make it so that it will work for all of your circles, no matter how many there are. This calls for a loop . You'll loop through all of the values in the array. This is how you loop through an array:
for each (var mySprite:Sprite in myArray){
}
a. Create a for each statement like the one above and put your tweens inside. Replace "mySprite" with a better name: "currentCircle." And replace "myArray" with the name of the array you've created "medalArray." Change all of the instances of "medalArray[0]" to "currentCircle"
b. Now replace the two hard-coded references ("Japan" and "2008"). Use the currentYear variable for the date and take advantage of the fact that the currentCircle name is the country name (i.e. currentCircle.name).
You have one hard-coded reference remaining. This is the reference to the "ranking" element of the XML file (which will sometimes need to change to be a reference to the geographic element). To achieve this, you'll create a variable which will hold the name of the element (either "ranking" or "geographic" depending upon which tab has been selected). Then use that variable in an XML reference.
c. At the top of the code pane, create a string variable called "currentView" and set its initial value to "geographic" (since the display is initially set to the geographic display).
d. You'll want to change the value of the variable every time you click on a tab so go to the switchViews function and add the following two lines in the appropriate places inside the if statement where you check to see which tab button has been clicked:
currentView = "ranking";
currentView = "geographic";
Now you can use this variable to create a reference to the appropriate location in the XML file following this model:
myXML.Element[myVariable]
(This reads "find the 'Element' element in the myXML object, then go to it's sub element with the name of the string stored in 'myVariable'")
This is what your first tween will now look like:
var tweenY:Tween = new Tween(currentCircle,"y",Regular.easeOut,currentCircle.y,medalXML.country.(@id==currentCircle.name).year.(@id==currentYear)[currentView].y, 1,true);
e. Modify your tweens to match this model then test and save your code. Your circles should now move properly when you click on the tabs (but not when you use the slider since you haven't written those tweens yet).
Step 7: Create the Tweens for changing dates
The tweens for changing dates are the same except you'll be changing the width and height as well as the position.
a. To create the tweens which run when you change the date, first copy the for each code that creates tweens in the switchViews function and paste it into the changeDate function after the if clause that updates the current year.
b. Run your code. You should now be able to move either the slider or the tabs in any order and have the circles move. (But they don't yet change size, that's next).
c. Now add 2 more tween statements (for a total of 4). Name the new tweens "tweenHeight" and "tweenWidth"
d. Change the parameters so that you're modifying the height and width properties of the circles and so the resulting height and width are both twice the size of the radius (use "* 2" to multiply by 2 because radius is only half the width or height). To help you figure out how to pull the radius value from the XML file, here's a reminder of what the XML file looks like:
<countries>
<country id='Japan' color='0x979D6D'>
<year id='2008'>
<totalMedals>25</totalMedals>
<goldMedals>9</goldMedals>
<silverMedals>6</silverMedals>
<bronzeMedals>10</bronzeMedals>
<ranking>
<x>368.7</x>
<y>235.8</y>
</ranking>
<geographic>
<x>814.55</x>
<y>225.80</y>
</geographic>
<radius>31</radius>
</year>
e. Test your movie. You should now be able to run any transition and see it move properly. You'll also find that you can switch your transition mid-movement by clicking a tab or moving the slider - something that caused problems in the timeline-based version.
FINAL PRODUCT: Medals_12_tweens.fla (we no longer need the xml file)
SUMMARY
Creating Tweens in ActionScript
var myTween:Tween = new Tween();
It takes 6 parameters (in this order):
1. Name of a display object: Object which the Tween targets
2. Name of the property, in quotes: Name of the property that will be affected
3. Name of the easing function: Easing function that will be applied to the tween
4. A number representing the starting value of the property you're changing: Starting value of prop; initial value of the property
5. The number of seconds or the number of frames the tween will last for: Length of time of the motion
6. true (to use seconds) or false (to use frames): Flag specifying whether to use seconds instead of frames
Working with arrays
creating an array
var myArray:Array = new Array();
adding to an array
myArray.push(<name of object to be added to the array>);
finding out the size of an array
myArray.length
looping through an array
for each (var mySprite:Sprite in myArray){
}
retrieving a value from an array
myArray[0];