 |
| Creating Sprites |
| Return to the Tutorials page |
| |
|
<Goal: To understand what a Sprite is, place dynamic content inside a Sprite, and place a pre-made Sprite (located in the library) onto the stage using
ActionScript 3.0.
Imported classes: flash.display.Sprite and flash.events.MouseEvent
Methods: drawCircle(), beginFill(), endFill(),
addChild(), removeChild(), clear(),
addEventListener() and custom class OrangeShoe()
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In this tutorial we will create two Sprites: the first contains a dynamically drawn shape, the second is an object found in the movie's library.
|
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it Sprites and save it inside the FlasherAS3_PartI
folder. In the Document Class box of the Properties panel, type Sprites and then save the changes.
Open a new ActionScript file, name it Sprites and then save it inside the Code folder.
You now have ten separate files on your computer:
In the FlasherAS3_PartI folder - LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla,
CircleEllipse.fla and Sprites.fla.
In the Code subfolder - LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as and Sprites.as.
Keep both Sprites files open as we will be working with both of them simultaneously.
|
|
Return to Sprites.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your
changes.
|
|
Return to Sprites.as and type in the following code:
Line 01: package
Line 02: {
Line 03: public class Sprites extends Sprite
Line 04: {
Line 05: public function Sprites()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save the changes.
|
|
This tutorial will require the Sprite and MouseEvent classes so let's import them
now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.Sprite;
Press Return/Enter.
On line 4 type: import flash.events.MouseEvent;
Press Return/Enter to add a blank line on line 5.
Place your cursor at the end of line 9 and press Return/Enter.
All of our Sprite code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's create some Sprites!
|
|
(Definition from Adobe Flash Specs)
"The Sprite class is a basic display list building block: a display list node that can display graphics and can also contain children.
A Sprite object is similar to a movie clip, but does not have a timeline. Sprite is an appropriate base class for objects that do not
require timelines. For example, Sprite would be a logical base class for user interface (UI) components that typically do not use the
timeline.
The Sprite class is new in ActionScript 3.0. It provides an alternative to the functionality of the MovieClip class, which retains all
the functionality of previous ActionScript releases to provide backward compatibility."
|
|
Placing graphics on the stage is good fun but not terribly exciting. Want to animate a shape or turn it into an interactive button?
This is easy enough to do using functions and methods. For example, we could create a brief script that would give our shape button
capabilities. A Shape can not accept this script, but a Sprite can. Sprites serve as containers that can be filled with shapes,
images or text.
Let's try that example. First we will create a circle on the stage. The only thing that is different to the previous tutorial's example, is that the
circle will be placed inside a Sprite. This is done by setting the data type to Sprite and instantiating a new
Sprite object.
Beginning on line 10, create the following code:
-
Declare the variable (circle), set the data type to Sprite and instantiate a new Sprite object. (Line 10)
Press Return/Enter.
-
Then create a circle using the drawCircle() method. (Line 11)
Press Return/Enter.
-
Set the fill color to red (#FF0000). (Line 12)
Press Return/Enter.
-
Set the x coordinate to 100, the y coordinate to 150, the radius to 45. (Line 13)
Press Return/Enter.
-
Finally, place the circle on the stage using the addChild() method. (Line 14)
Your code should look like this: [ view code ]
Save the changes and test the movie to sees our circle on the stage.
Funny, it looks just like a Shape doesn't it? Yes it does; however the difference is that this circle is inside a Sprite container and
that container can be manipulated!
|
|
In the Interactive Buttons tutorial you will learn how to give Sprites button capabilities. For
now this code will simply serve as an example that will show you how our circle Sprite can be manipulated. In this example, all you need to do is
copy and paste the code below.
Place your cursor at the end of line 14 and press Return/Enter twice. Then add the following code:
Line 16: circle.addEventListener(MouseEvent.CLICK, removeCircle);
Line 17: function removeCircle(event:MouseEvent):void
Line 18: {
Line 19: circle.graphics.clear();
Line 20: }
Your code should look like this: [ view code ]
Save the changes and test the movie. Click on the red circle and it will disappear completely!
Try the example: [ Sample Movie ]
Being able to add interactivity to objects on the stage is an integral part of good Flash movie making and Sprites are the
most frequent recipients of that type of code. As a general rule, if an object consists of one keyframe and will be used for animation
or interactive elements, then it should be a Sprite.
|
|
Not all Sprites are created programmatically; some are pre-made and stored in the movie's library. To begin with, let's create a display object and
place it in the library.
Inside the FlasherAS3_PartI folder, create a new subfolder named Images.
Right-click over the image below and save it inside the Images folder.
Return to Sprites.fla. Import the shoesOrange.jpg image into the library (File > Import > Import to Library).
The shoesOrange image is now a bitmap, located in the movie's library (Command/Ctrl + L).
Click and drag the image from the library, onto the stage.
With the image selected on the stage, press F8 to convert the image into a movie clip. Set the name to orange, the
type to Movie Clip and then press the Advanced button to view more options.
Under Linkage select the Export for ActionScript box. This will automatically include the Export in First Frame option as well.
This ensures that all the appropriate elements will be included when the movie is published.
Under Class change the name to OrangeShoe, and change the Base class to flash.display.Sprite. Press the OK button.
An 'ActionScript Warning message' will pop up. Click OK. (What this achieves will be discussed shortly.)
On the stage, delete the object and then save the changes.
|
|
Return to Sprites.as. In this section we will call the orange shoe image from the library and
place it on the stage.
This is done in three steps:
- Import the OrangeShoe class.
- Declare the variable (_orange), set the data type to OrangeShoe and instantiate a new OrangeShoe.
- Using the addChild() method, place _orange on the stage.
Step 1: Import the OrangeShoe class
We already did. When? Remember what happened when the bitmap was converted into an object and we set the Linkage settings?
An 'ActionScript Warning' flashed on the screen that stated:
"A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file on export."
This means that the OrangeShoe class is included in the movie.
Step 2: Declare the variable (_orange), set the data type to OrangeShoe and instantiate a new OrangeShoe.
Place your cursor at the end of line 20 and press Return/Enter twice.
On line 22 type: var _orange = new OrangeShoe();
The variable name is _orange, the data type is the image in the library which is represented by the
OrangeShoe class. A new orange shoe is instantiated when new OrangeShoe()
is placed in the code.
Step 3: Using the addChild() method, place _orange on the stage.
Press Return/Enter.
On line 23 type: addChild(_orange);
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see the orange shoe in the upper left corner of the stage. Placing a library
Sprite on the stage is essentially no different from creating one with dynamic content as in the previous example (circle).
Let's move _orange further down the stage so it no longer overlaps the red circle.
Place your cursor at the end of line 23, press Return/Enter and then type the following:
Line 24: _orange.x = 250;
Press Return/Enter.
Line 25: _orange.y = 220;
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see that the orange shoe has moved to a new location on the stage. Excellent!
|
|
|
Now just for fun, let's add the same functionality to _orange as we did to circle.
What do we want to accomplish?
When the shoe is clicked, it disappears.
Remember this is sample code that will be explained in later tutorials. Simply copy and paste the code.
Place your cursor at the end of line 25 and press Return/Enter twice. Beginning on line 27, type the following:
Line 27: _orange.addEventListener(MouseEvent.CLICK, removePic);
Line 28: function removePic(event:MouseEvent):void
Line 29: {
Line 30: removeChild(_orange);
Line 31: }
Your code should look like this: [ view code ]
Save the changes, test the movie and then click on the shoe image. Poof! It disappears...
Try the example: [ Sample Movie ]
|
|
This tutorial included some more advanced elements that were not fully explained. This is to help you gain familiarity with the language in
general and to help you see some of the actions that can be triggered using ActionScript code. The main point to walk away with is that Sprites
are powerful objects that can be used to enhance the functionality of your Flash movies.
Adding animation and interactivity is possible through event listeners and custom functions. These are explained in the
Load External Text tutorial. We'll get there soon!
Next let's take a look at Movie clips! [ Creating & Understanding Movie Clips tutorial ]
|
|
| |
|
 |
 |
