Choose Your Own Adventure Flash Assignment

From Knowledge Kitchen
Jump to navigation Jump to search


Summary

In this assignment, you will create an interactive "choose your own adventure" narrative story using Flash. This Flash project will then be published online on a web page.

The concept:

  • You are to tell a narrative story consisting of three scenes.
  • There must be a main character of your choosing and there will be certain actions that this character performs (or are performed on or to him/her/it).


The structure of the narrative

The first scene:

  • The first scene is an animation where the character is involved in some kind of introductory action
  • This scene should have text that displays the title of the story and the author's name
  • Once the first scene is complete the story stops and the project continues to the interactive part.

The interactive part:

  • At this point, the Flash application pauses and asks the user to indicate what should happen next.
  • The user is presented with at least two choices. These choices can be in the form of buttons the user can click.
  • Depending on which button the user clicks, a different animation will play in the second scene.
  • Hint: read below about the stop() command in ActionScript to pause the movie
  • Hint: see the notes about buttons below to set them so that clicking them jumps to specific frames of the movie using the gotoAndPlay() function in ActionScript


The second scene:

  • Once the user has selected what should happen next, the second scene begins.
  • This scene is an animation that shows whichever event the user chose in the interactive part.


**optional** Ending frame:

  • The story should really end with a scene that shows the text, "The End".


Example Movies

  • Download a file with the original Flash .fla source file for the Winnie the Pooh example: File:Flash assignment pooh example fall 2013.zip
    • Notice that this example has all objects in separate layers, but that the ActionScript commands and sounds do not have their own layers, and are embedded in keyframes in the other layers, which makes them hard to find.
  • Download a file with the original Flash .fla source file for the Alice in Wonderland example: File:Flash assignment alice example fall 2013.zip
    • Notice that this example has all objects in separate layers, including a layer just for the ActionScript commands and a layer just for the sound files.

Requirements

  • When you working on the Flash file, make sure you create an "ActionScript 3" project.
  • Use at least one Shape Tween
  • Each object should live in its own layer - this makes it easier to animate them separately.
  • You should also include at least two sound files in your project
    • one of the sounds should have at least two sounds playing simultaneously (i.e. use two tracks in Audacity)
    • feel free to use as many sound effects as you see fit

Publishing your movie

  • Your Flash project should be published on a web page on i6
  • That web page should be linked to from the assignments.html page that you already have online.
  • You should submit the link to your assignment online.
  • You should also submit your original Flash .fla file and your original Audacity .aup file(s).

About ActionScript

Embedded in Flash is a very rich programming language called ActionScript. But with only a handful of commands, you can create very interesting interactive animations. Commands are typed (or dragged) into the Action window available under Windows->Action. There are two places we can attach our commands: On the Timeline within a Frame, and attached to a Button:

Timeline

It is highly suggested that any commands for the Timeline be placed in a layer by themselves. While it is technically possible to mix images and commands on the same layer, it becomes confusing to say the least!

To apply a command, first select the frame and layer, then type or drag the command into the Action window.


stop();


Normally, Flash plays one frame after the next in sequential order. This command quite literally stops the playback on the present frame. Probably there is a button on the frame that will allow the playback to jump elsewhere in your movie.


gotoAndPlay(NNN);


After playing the current frame, Flash jumps to frame number NNN and continues playing the animation.


gotoAndPlay("framelabel");


After playing the current frame, Flash jumps to the frame with name framelabel and continues playing the animation. (Frame labels are set in the timeline. Click on a keyframe, and then choose window:properties. Then, type in name in the box.)


gotoAndStop(NNN);


After playing the current frame, Flash jumps to frame number NNN and stops the playback, awaiting the press of a button.


gotoAndStop("framelabel");


After playing the current frame, Flash jumps to the frame with name framelabel and stops the playback, awaiting the press of a button.


Button -

To apply a command to a button, first select the button, select window:properties. Then, type in name in the box to name the button. Traditionally, button names have the extension "_btn".

Then, in an ActionScript window, type the following. In this example, the button is named "blue_btn":

function BlueplayMovie(event:MouseEvent):void {
   gotoAndPlay("mighty");
}

blue_btn.addEventListener(MouseEvent.CLICK, BlueplayMovie);


When the button is clicked, Flash jumps to frame named "mighty" and continues playing the animation. [Note that you have added an EVENT LISTENER that sits and waits for the button to be pressed. When it is pressed, the Listener invokes a function - in this example, called "BluePlayMovie". That function in turn does the actual jump to the label called "mighty". It is also possible to replace the gotoAndPlay within the function with a gotoAndStop.]


A Note on Importing

You will probably start your project by gathering your images, sounds and animated gifs and importing them into Flash using File->Import. You will import your images and sounds into your library using File->Import->Import to Library. That way, you can use them over and over again by dragging them from your library onto the stage or into the Timeline.

In particular, you will want to import any animated GIFs into your library before pulling them onto the stage. Using this method, all of the frames will be aligned around a common registration point, and you can place the entire animated sequence onto the stage without having to worry about aligning individual frames.


What links here