Flash, an animation
Pages:
Preparatory Work
video opens —with sound
(use headphones in labs).
You need to watch the screencast before you begin the tasks mentioned below in the workshop
Object Oriented Flash Animation: Screencast
This set of screencasts shows the development of a simple animation using an image in order to demonstrate some of the key programming concepts that you'll need for future workshops. If you watch all parts of the screencast set one after the other they'll take you about 1.5 hours in total.
Like all the screencasts I do it has sound so please, if you're in the university labs, make sure you're wearing headphones so as not to disturb other users.
Oh, and in case it's not obvious, click on the image to the right to open the screencast in a new window, then click on the play button that will appear underneath the screencast.
Reading
You should also be reading, or have read, chapters 1 (pp. 9-11), 3, 4, & 6 in Learning ActionScript 3.0, A Beginner's Guide by Rich Shupe with Zevan Rosser.
Tasks
Using the techniques & approaches used in the screencast create your own animation featuring two images (quickly draw your own), defined in sub-classes. Like in the screencast the image classes should have most of the controlling code in the parent or super-class. Create a new Flash Project called ShapeAnimation with its source folder named the same and inside your U:\Flash Projects folder. Make your animation images do the following:
- Rotate and change rotation direction when the spacebar is pressed.
- Move left, right, up & down when the appropriate arrow keys are pressed (hint: one way to move the image is to add and subtract from either this.x and/or this.y depending on the direction you want to move in)
Challenge Tasks
These tasks weren't covered in the screencasts and you'll have to figure out how to do them yourself, if you've followed the 'Elmo' code it'll help.
- When you move the image with the arrow keys what are you going to do when the image reaches the edges of the stage? How do you find out where the edges of the stage are? Try and implement one of the following:
- Simply make the image not move any further in that direction if it's at an edge.
- Let the image disappear off the screen to reappear at the opposite edge. In other words if the image disappears off stage left make it reappear from stage right.
Pages: