Design storytelling web experiences in Flash CS3

Flash’s tools have been used for a long time to create some fabulous stories. Now Let’s add some interaction

Click here to download all the source files for this tutorial http://www.webdesignermag.co.uk/?page_id=85

In this tutorial, we will show you how to create an interactive storytelling experience in Flash from the designer and animator’s point of view.
We will show you how some simple extra steps can help your audience be more participatory in the story’s development. In this case, you are going to guide the user to step into the story and become the personal advisor of the main character, making all the important decisions for them.
You will create the interface and the animation for the main scene, which is going to be the container for the ‘pick your own adventure’ style. You will go on to integrate your SWF movies into that scenario, and learn how to apply some simple coding techniques to take your work to a more interactive level. The objective of the final project is to transform your user from a passive viewer to become an active part of the story’s plot development.

01 The basic structure

To start off, the first things you may want to do are design the basic look and the interaction. After you have those, you may like to start by creating a flow chart of interaction. Here, you will decide what’s going to happen when the user chooses an option.

02 Setting up the main scene

Open up main.fla from the CD. On the timeline, make layers for the following images: ‘title’, ‘frame’, ‘curtains,’ ‘reflection’ and ‘instructions’. Drag-and-drop the images for each layer from the library. Align the frame to the centre of the stage and position the other elements.

03 Converting to symbol

Select the title image from the stage and go to Modify>Convert To Symbol. Make it a graphic and do the same for each one of the curtains. For the instructions, make a Movie Clip symbol. Insert frames until frame 28, and then make folders for your elements in the library.

04 Animating the title

In the title layer, insert a Keyframe (F6) on frame 5. On frame 1, move the image up until it’s above the frame border, then select frame 1. Go to the Properties window and create a Motion Tween. Set Ease to 100 to ease out the title (slow it down as it comes to the end of its motion).

05 Animating the instructions

On the instructions layer, insert Keyframes on frames 1, 5 and 10. We are going to do the same as we did with the title, but on frame 5 move the image below its final position. This will be on frame 10 to add some bouncing illusion. Adding a Drop Shadow would be a nice detail, too.

06 Animating the curtains

On the curtains layers, insert Keyframes on frames 17 (create a Motion Tween and set Ease to 100) and 27 (slide them out). On the button layer, make a Keyframe on frame 14. Select the button on the stage. Under Properties and Color, set Alpha to 0 per cent. Reverse the animation.

Pages: 1 2 3 4