Phase 14: Create a class
In your current code, you use the Sprite class to create the country circles and then you alter their attributes based on the XML data. In this phase, you'll create your own class- your own blueprint for each country circle with all of the properties and methods you need it to have.
You may be wondering...why would you want to do this?
The answer is that creating classes can make programming easier. It's a way of organizing the code and making it more modular so you can reuse pieces in other code. (From my limited point of view, it's more about making code tidy than about writing code differently).
Step 1: Create a class file
A class is defined in its own ActionScript file - which is a text file with an .as extension - which stands for actionScript.
THIS IS IMPORTANT: The name of the file needs to be the same as the name of the class:
a. In Flash create a new "ActionScript File":
This will be the only .as file you'll create for this project, but you can imagine that with a very complex project, you could end up with many classes and would want to organize them in separate folders to make it easier to keep track of them.
b. Create a subfolder in the folder where you've been storing your .fla files for this project. Name the folder "countryClass."
c. Save your .as file as "CountryCircle.as" in that countryClass subfolder.
Step 2 Write the class and package statements
a. In your .as file, write these 6 lines:
package countryClass
{
public class CountryCircle
{
}
}
Note that the class is inside the package. In ActionScript 3.0, every class must be inside a package.
THIS IS ALSO IMPORTANT: The package name must be the name of the folder where the class file is stored.
If the file was two folders deep, the name would include the names of both folders with a dot between (e.g. if it was in a subfolder called "thirdlayer" which was inside a subfolder called "secondlayer," the package name would be "secondlayer.thirdlayer").
The convention is for package names is to start with a lowercase letter.
The convention for class names is to start with an UPPERCASE letter.
Step 3: Define a class property
The properties of a class are just the variables defined in the class file. If you want to be able to access these properites from your code in your .fla file, they need to be public.
a. Type this line inside the class to create the first property:
public var countryName:String;
Step 4: Define a class constructor and other methods
The methods of a class are just the functions defined in the class file. If you want to be able to acces these methods from your code in your .fla file, they need to be public.
Classes typically have a special method called a constructor. It is special because, unlike all other methods, it runs automatically when an instance of the class is created. Usually it populates the basic properties of the class. To identify a method as the constructor method, just give it the same name as the class.
a. Inside the class, but after the variable statment, type this:
public function CountryCircle(theName:String){
countryName = theName;
}
Think about what this constructor does - it takes a parameter (theName) and populates the countryName property with that parameter.
b. Save the file.
Step 5: Reference the class from a .fla file
To use this class in a .fla file, you need to import it.
a. Make a copy of Medals_13_commented.fla, name it Medals_14_class.fla, and add this line at the top of the code:
import countryClass.CountryCircle;
b. To verify that this worked, write the following line just after the import statement (it creates an instance of the countryClass using its constructor method):
var newCircle:CountryCircle = new CountryCircle('Japan');
c. Now add this trace statement:
trace(newCircle.countryName);
d. Test the .fla file.
If all is well, you'll see "Japan" in the output panel. That means your .fla file has used the .as file successfully.
e. Delete those two lines of code - the trace statement and the line that creates a new CountryCircle or they'll give you an error later on.
Step 6: Determine what properties and methods this class should have
This is where you design your class. Designing classes elegantly is an art (meaning that there are many possible answers and no correct one, just more elegant or more efficient ones). Fortunately, this class is very simple so it won't take extreme skill to come up with a useful design.
a. First identify what properties each CountryCircle object should have. To do this, think about the medals application and think about ways in which the Canada circle is different from the Japan circle. Write those down and compare them to my list:
label ('Canada' versus 'Japan')
color
size (this varies from view to view)
number of medals that appear in the info box when you hover over it (this varies from view to view)
position on the stage
b. Next, identify what methods each CountryCircle object should have. To do this, think about the medals application and think about what actions actions are associated with each circle (this is a bit more complicated that identifying properties, and you might find that you need to figure it out as you go along, but for now try to just do it in your head). Write down your ideas, then compare them to my list:
Create the circle
Draw it on the stage
Tween it (move and/or resize it)
Step 7: Create those properties and methods
Rather than walk you through the steps of writing these, I'll have you use the technique for learning that I introduced in Phase 13 - which is to look at code others have written, figure out what the code is doing, and write comments to be sure you really understand it. This also sets you up to modify the code to suit your purposes.
a. Rename your .as file CountryCircleBU.as (BU for "Back-Up")
b. Download this .as file and save it in the same folder (countryClass)
c. Find the '// ? ' prompts in the code and replace them with comments that explain what the code is doing.
d. If you get stuck, here is my version of the .as file with comments included (try not to look at this - you'll learn more if you can figure it out yourself - but if you need it, try to only look at the bit you need to get unstuck).
Step 8: Modify your fla file to use the class
Now you need to modify your .fla file to utilize the class you've created. (The more you understand the class you've created, the easier this part will be, so take some time to look through it and be sure you understand it before continuing).
First you'll replace the code that draws the circles:
a. Open Medals_14_class.fla and go to the loadCompletedHandler function where the circles are being drawn.
Right now, you create a Sprite and modify its properties. Your new code will replace this - it will create a CountryCircle and then use its drawIt method:
b. Add the following three lines of code inside the "for each" loop that currently draws the circles:
1. One line that creates a variable called countryCircle which has the type CountryCircle and pass it the XML for the current country (which you've already placed in a variable called currentCountry). Use the old line that creates a Sprite called countryCircle as a model.
2. A second line that uses the drawIt method of the CountryCircle, which needs 2 parameters - the current date and the current view; there are already variables declared for you.
3. A line that adds this CountryCircle to the stage
c. Figure out which code you no longer need and comment it out. Then test your movie. (At this point, you'll get errors if you click on anything, but you shouldn't get errors just be opening it).
Next you'll replace the code that populates the infoBox. Right now, it pulls the data out of the XML file. But since you've added the information about number of medals etc. to the countryCircle, you can just pull it from that. Much cleaner and easier:
d. Go to the showInfoBox function. The parameter that has been passed, theEvent is the event triggered when the viewer clicked on a circle, so the target of that event (theEvent.target) is a CountryCircle object. You can access its properties with dot notation just like any other object (e.g. "theEvent.target.countryName"). You can go look at those public variables in the class to remind yourself of the property names. Replace all of the references that populate the infoBox.
e. Test your code. You should now be able to hover over the circles and see the correct text in the info box (but the tabs and slider won't work properly yet).
f. Next replace the code that generates the tween by using the transitionTween method of the class (look at the class to remind yourself what parameters the transitionTween method needs). Replace it in both the changeDate and the switchTabs functions. [Note that when you loop through the array, the objects are now CountryCircles rather than Sprites]. Comment out the lines you no longer need and test your code. Everything should work correctly now.
g. Finally, look through all of the code to find lines that you no longer need (e.g. you don't need "import fl.transitions.*" since that was for the tweens and this code no longer creates tweens). This is a great way to be sure you understand your code. If you're unsure about a line, just comment it out and run the code and see if you get an error.
HERE IS MY CODE (AND CLASS) I've provided it to help you if you're really stuck. Resist any temptation to use it without first trying hard to do it yourself - this is good stuff to learn and you're wasting an opportunity if you don't take advantage of that.
h. Zip all your files .fla and .as, for submissions (Medals_14_class.fla, CountryCircle.as)
FINAL PRODUCTS: Medals_14_class.zip (we no longer need your .xml file)
SUMMARY
I've created an ultra simple class file MyClass.as and an ultra simple Flash file that uses that class useMyClass.fla. You might want to download them as a model to work from in the future. They'll only work if you place 'MyClass.as' in a folder 'simpleClassSubfolder' which is inside another folder 'simpleClass' which is in the same location as 'useMyClass.fla'.
.as file
An ActionScript file is just a text file with an .as extension (which means you could create it with any software that lets you write plain text).
package
package <package name>
{
}
Every ActionScript 3.0 class must be inside a package. Package names start with lowercase letters.
class
class <class name> extends <name of ActionScript class that this is based on, if any>
{
}
A class is like a blueprint for an object. Often your classes will be extensions of existing ActionScript classes( like the Sprite class) which means they inherit all of the properties and methods of that class.
properties
The properties of a class are the variables defined in the class. They need to be identified as public or private. To access these properties, you use this notation:
className.propertyName
methods
The methods of a class are the functions defined in the class. They need to be identified as public or private. To access these methods, you use this notation:
className.methodName()
constructor
The constructor is a method which has the same name as the class. It is automatically called when an instance of the class is created:
var myObject = new className();
using class in .fla file
To use a class you've created in a .fla file, you must use an 'import' statement:
import folderName.className;
Resource:
Strategies for designing a class