Flash Animation
In this assignment, you will create an interactive “choose your own adventure” narrative story using Flash. Your narrative should be a unique story that you create that consists of at least three scenes of animation. Here’s a very simple example:
The structure of the narrative
‘Start’ scene:
Behind Door A…(resulting action):
An example story
For example, you can make a story about a rocket ship that is traveling the galaxy.
The first screen plays some audio that says “Space, the Final Frontier” as a rocketship flys into the scene.
The story then stops and the Flash application asks the user what the rocketship should do next… should it “go to the nebula” or “go to the comet”. The question is displayed using two buttons which the user can click. The animation stops at the end of this sequence to wait for the user to click.
Once the user clicks their button of choice, for example to “visit the nebula”, an animation shows the rocketship visiting a nebula with some creepy space music in the background. Likewise, if the user selects “visit the comet” a different animation sequence triggers.
After each of these choices the animation loops back to the beginning frame (though you could just put a “the end” title up on the screen and not loop back if you’d like)
Some Tips:
// stop playback on this frame stop();
// have each of our two buttons "listen" for mouse clicks
button1.addEventListener(MouseEvent.CLICK, dobutton1stuff);
button2.addEventListener(MouseEvent.CLICK, dobutton2stuff);
// when the user clicks on button1, this code will run function dobutton1stuff
(event:MouseEvent):void
{
gotoAndPlay(1, "Scene 1");
}
// when the user clicks on button2, this code will run function
dobutton2stuff(event:MouseEvent):void
{
gotoAndPlay(1, "Scene 2");
}
You will also need to add in code at the end of each of your “choice” scenes to take the user back to your start scene.
Create an actions layer for these scenes and place a keyframe on the last frame of this layer. Then click on this keyframe and add the following code:
gotoAndPlay(1, "Scene 1");
Note that if you wanted to end the movie here you could use this code instead:
stop();
Requirements wrap-up
The structure of the narrative
‘Start’ scene:
- Includes title of movie/story and a short introductory sequence (i.e. the character is involved in some kind of action; you create a shape tween to morph the first frame into a shape, etc.)
- Ask the user to indicate what should happen next via buttons in Flash
- Present at least two choices
- Those choices should lead to different animations than the one you created for the intro animation.
Behind Door A…(resulting action):
- If the user selects ‘A,’ (e.g., ‘Go to Nebula’) they’ll next see that action occur
- Similarly, if user selects choice ‘B’ (e.g.,’Go to Comet’), that action will follow the click
- Loop back to the ‘Start’ scene so they can select the other option if they like
- This user’s choice frame can work as your end, or optionally, you can create a last frame of the movie that reads ‘the end’ or otherwise offers some finish. If you choose to do this you need to prevent the user from looping back to the ‘Start’ scene.
An example story
For example, you can make a story about a rocket ship that is traveling the galaxy.
The first screen plays some audio that says “Space, the Final Frontier” as a rocketship flys into the scene.
The story then stops and the Flash application asks the user what the rocketship should do next… should it “go to the nebula” or “go to the comet”. The question is displayed using two buttons which the user can click. The animation stops at the end of this sequence to wait for the user to click.
Once the user clicks their button of choice, for example to “visit the nebula”, an animation shows the rocketship visiting a nebula with some creepy space music in the background. Likewise, if the user selects “visit the comet” a different animation sequence triggers.
After each of these choices the animation loops back to the beginning frame (though you could just put a “the end” title up on the screen and not loop back if you’d like)
Some Tips:
- You can create new Scenes in Flash by clicking Insert -> Scene. You can access your Scenes by clicking on the little “clapboard” button at the top right side of the Stage (see the image below)
- Once you have all of your scenes designed you will need to code in the interactivity that will allow the user to switch between your scenes. To do this you will need to create 2 buttons (Insert -> New Symbol, make sure you create a button type and not a movie clip type) – place these buttons on their own keyframe at the end of your Start Scene. Each of these buttons will need an “instance” name as well. You can do this by clicking on the button and opening up the Properties panel. In this panel you will see a little blank that says “Instance name” – give each button a unique name (call the first one “button1″ and the second one “button2″ — leave off the quotes)
- Finally you will need to add in some ActionScript to control the buttons. Create a layer called “actions” and insert a keyframe at the same position as your buttons. Next, click on this keyframe (the little white circle on the timeline) and open up the Actions panel (Window -> Actions). In the actions panel type or paste the following code. Note that the comments (lines the begin with “//”) aren’t necessary – they are just FYI.
// stop playback on this frame stop();
// have each of our two buttons "listen" for mouse clicks
button1.addEventListener(MouseEvent.CLICK, dobutton1stuff);
button2.addEventListener(MouseEvent.CLICK, dobutton2stuff);
// when the user clicks on button1, this code will run function dobutton1stuff
(event:MouseEvent):void
{
gotoAndPlay(1, "Scene 1");
}
// when the user clicks on button2, this code will run function
dobutton2stuff(event:MouseEvent):void
{
gotoAndPlay(1, "Scene 2");
}
You will also need to add in code at the end of each of your “choice” scenes to take the user back to your start scene.
Create an actions layer for these scenes and place a keyframe on the last frame of this layer. Then click on this keyframe and add the following code:
gotoAndPlay(1, "Scene 1");
Note that if you wanted to end the movie here you could use this code instead:
stop();
Requirements wrap-up
- Made using ActionScript 3
- Each object should live in its own layer… this makes it easier to animate them separately.
- Include at least two sound files in your project (these could be sound effects or homemade sounds made in Audacity and integrated into your project)
- Include at least 5 tweens – these can be motion tweens, shape tweens, IK (bone joint) tweens, etc.
- Inlclue at least 2 buttons to represent user choices
- You will need to include at least 3 “scenes”
- Start Scene
- Choice A Scene
- Choice B Scene
- You will need to include ActionScript code to do the following:
- Stop the “Start Scene” at the end of its animation and wait for the user to click a button
- Code each button to “listen” for a mouse event and play the selected scene
- Each Choice scene should also contain ActionScript to either take the user back to the Start scene or stop the movie alltogether.
- Publish your movie (default settings for a .swf and html wrapper) – File->Publish in Flash.
- Post a zip file of both the FLA and SWF files to your dropbox. Test them in browser before you attach.
- Place a copy of your animation on the web with a link on your assignments page.