Tutorial 4 - Revision+Some New Concepts (More on Events and Imported Image)
As stated in the title, I will integrate stuff in the past tutorials into a small example and meanwhile introduce you some new concepts. I believe this will be an useful exercise for you.
What are we gonna do?
So I am going to put a little car on the left side of the stage. The car will be imported into Flash. When user double click on it, it will start to move to the right. When the user click on it again, it will stop.
We are going to talk about:
- how to use an imported image with AS 3 (when there is no more things like attachMovie)
- how to use double click on an object
- how to remove an event
Download files for this tutorial
Let's get started
1. Start a new file and name it tut_4.fla. In the Document class of the Properties panel, enter Car. This will be the class associated with the main timeline and we will define it later.
2. Choose a car image, import it into Flash and place it on the stage (File -> Import -> Import to Stage). Make it into a movie clip and name it FunnyCar. Remove everything from the stage.
3. Open the library, right click our movie clip FunnyCar, and choose Linkage. Choose Export for Actionscript and name the class FunnyCar. You should see something like this:
Class can be regarded as an abstract representation of an object. Here, class FunnyCar will be representing our movie clip image in the code we typed later.
4. Press OK and you are done with the fla. There maybe a popup saying there is no class definition but you can ignore it. Let's go to our main class Car.
Our main class
1. Open a new as file and name it Car.as. Save it in the same location as tut_4.fla.
2. Type in the following code:
| Line | Description |
| 10-17 | Define the main elements of our class Car. |
| 11 | As mentioned above, FunnyCar is the class representing the our car image movie clip. In other words, mc here represents a copy of that movie clip. Note: There are no more things like attachMovie, createEmptyMovieClip, etc. |
| 12 | Add the movie clip mc to the display list of the current "root" movie clip, i.e. the main timeline of tut_4.fla (since our class Car is in association with it, or in other words it is an instance of our class Car). |
| 13 | The original coordinate of mc will be (0,0). I will now relocate it with reference to the height of the stage. Note: |
| 14 | In order to use the double click event, we need to set doubleClickEnabled to true. Know more about it here. |
| 15-16 | Make mc respond to 2 mouse events: doubleClick and click. Read more about MouseEvents here. Note: |
| 19-21 | Define function to be carried out after double click. Event.target contains the reference to the object which is the target of the event i.e. the object that will be responding to the event, and in our case of course our car movie clip mc. Read more about it here. After the use double click on the car image, it will start moving to the right with the EnterFrame event. |
| 22-24 | Define function to be carried out for the EnterFrame event. Make it move to the right side. |
| 25-27 | Define function to be carried out after clicking mc. We want it to stop moving after clicking, and the best way is to stop the EnterFrame event. This can be done by removeEventListener and you can read more abou it here. The parameters are just similar to addEventListener. |
So this is it. Switch back to tut_4.fla and output swf. When double click on the car, it will move to the right. When click on it again it will stop.
So remember:
- how to use an imported image with AS 3. Assign a class to it and in the code the object will be represented by the class.
- differentiate between
stage.stageHeight and stage.height
- set doubleClickEnabled to true before using double click
- removeEventListener
Back to the Tutorial index page