FLASH ACTIONSCRIPT LAB CODING CROWS
Using the crow silhouette images provided in the starter file, create a Movie Clip containing a two-cycle flapping animation (wings up, wings down). Associate this Movie Clip with a class definition that makes the flapping crow move to the edge of the screen until it encounters a barrier. Then it should flip around (changing image orientation 180 degrees) and move to the other side until encountering a barrier on that side, causing it to repeat the cycle.
Step 1: Basic timeline animation
1 Open the Crow_Starter.fla file and make a flapping Crow Movie clip
- Open the file called Crow_Starter.fla.
- Open the Library (Control-L) and create a new Movie Clip. Name this clip mc_Crow.
Remember that once you create a new Movie Clip, you will be viewing the timeline for that clip, not the main movie.
- Add keyframes to the Crow Movie clip
- There is already a keyframe in frame 1 of the mc_Crow timeline by default.
- Insert new keyframes (Insert > Keyframe) at frames 4, 8, and 10.
- Put the pictures in the keyframes
- Drag crow1 from the library into frame 1. Center it in the frame (X=-34, Y=-34).
- Drag the second crow image, crow2, into frame 4.
- Drag the first image into frame 8 and the second image into frame 10. Make sure all the images are centered like the one in frame 1.
- Press ENTER to see it play.
Return to the main timeline by clicking on the tab labeled Scene 1 at the top of the screen. Drag mc_Crow from the Library onto your stage in frame 1. You should now be able to test your movie (Press Control-Enter) and see the crow animation. Your crow won't go anywhere, but he'll flap like the dickens.
Step 2: Scripted animation
- Go to Notepad and create a new file. Save as Crow.as, which should be in the same directory as your starter file. Notice it includes a variable declaration for a Boolean variable called moveRight.
- Find the function called onEnterFrame(). Inside its curly braces, add the following line, typing exactly what you see here:
if(moveRight == true) this._x +=8;
- SAVE THE FILE. NotePad does not save changes automatically. ALWAYS SAVE after you have made changes to a class file. Once you have saved, go back to Flash, you can leave the script open in NotePad.
In the Library, right-click on mc_Crow and select Properties from the resulting pop-up.
In the Properties dialog, find the Linkage area. Fill in "Crow" in the Identifier box and "Crow" in the AS 2.0 Class box. Close the Properties dialog. You've just linked mc_Crow to an ActionScript class file called Crow.as.
Test your movie. You should now see your crow flying merrily away, stage right. Just don't wait for it to come back.
Step 3: Hit testing
We're going to set up another object (Movie Clip) and use it as a boundary marker, or barrier.
- Create a new layer in the timeline of Scene 1
- In the Library, find the pre-built Movie Clip called H-limit. Select the first frame of your new layer and drag the clip onstage. Set its X position to 540 and its Y position to 0.
- The H-limit clip should be selected. Click on it once to select it if not. In the Properties panel, find the window that currently contains the phrase "<Instance Name>". Replace this phrase with R_limit. You've just given the Movie Clip an instance name, which is a very important thing indeed.
- Switch back to Crow.as in NotePad. In the onEnterFrame() function, add this second line:
if(this.hitTest(_root.R_limit)) moveRight = false;
Type carefully, and yes, there are two nested pairs of parentheses in the line.
- SAVE your file, switch back to Crow_Starter.fla and test. The crow should fly to the red line at the right of the screen and stop there, though it will continue to flap its wings.
Congratulations: you've finished the guided part of the lab. To complete the rest of the basic lab, you need to figure out the following:
- How to make the crow move to the left once it's hit the right barrier.
- How to place a barrier on the left, make the crow clip test against it, then move to the right again.
- How to make the crow images flip horizontally before it starts to move leftward, and flip back the other way when it goes right again. (changing the _xscale to be negative will flip an object sideways)
- Hints: the first two problems can be solved by simple modifications of the code you've already written in Crow.as. To solve the third problem, you'll need to know where to multiply _xscale by -1 to flip it from positive to negative
Enhancing Lab 1
Here are several variations you might try on the basic, linear animation. The first can be extrapolated from what you have learned this week. The others might take some research on your part.
- Allow the crow to move up and down as well as left and right. Set barriers at top and bottom of screen.
- The crow currently moves by a constant amount in both X and Y axes. Introduce some random variation to these numbers, so that the crow follows an unpredictable line of flight.
- Introduce two crows, using the same ActionScript class file to control movement and behavior of both; set them up so that they will rebound off each other as well as the four barriers.
- Change the orientation (_rotation property) of the crow so that it points toward the upper right corner when flying up and right, toward the lower left when flying down and left, etc.
- Introduce a wind effect (a way of slowing down or accelerating the crow's speed); make this effect controllable through sliders or (harder) a dial.