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.
07 Testing the movie
Remember to save your file. Test what you have done so far (Cmd/Ctrl+Enter) and make sure everything looks good. Now we want some of our elements to look like they are coming from behind the frame border, so we need to create some masks.
08 Masking the elements
Insert a new layer and place it above the instructions. Make a rectangle 710 x 540px, and align it to the stage’s centre. Right-click on the layer’s name and select Mask. Drag-and-drop the layer name inside this to let it affect the curtains and instructions. Make a mask for the title using an oval.
09 Inside the instructions
Double-click instructions to edit the Movie Clip. Make two layers: paper and content. Bring the character Movie Clip for the content and the paper from the library. Add a title and welcome text, make a Layer Mask and include the new layers. On this, draw a rectangle bigger than the paper.
10 Instructions content
Make Keyframes on frames 5 and 8. On frames 1 and 8, move the square up. Add a Tween shape to Keyframe 5. In a new layer, draw strings to make it look like it’s hanging. On the Action layer, insert a Keyframe on frame 8. Open the Actions window and write the following code: stop();.
11 Creating the start button
In the main timeline, make a new Layer above the title mask. Name it ‘btn_start’. With the Rectangle tool selected, go to the Properties window and insert 30 for Rounded Corners and 15 for Stroke. Draw a shape and convert that to a button symbol. Now double-click this
12 Inside the button
Give the stroke a linear gradient and fill. Add text on a new layer. For the gloss effect, draw a shape with no stroke but with a linear gradient from white to transparent. You need to create the up/over/down/hit states. For down, reverse the fill’s gradient. For over, add an oval to fade in and out.
13 Instance names and labels
On the main timeline, select the button. In the Properties window, give the instance name ‘btn_start’. On the labels layer, insert a Keyframe on frame 10. On the Properties window, assign the frame label ‘start’. On frame 11, create another Keyframe and add the label ‘content_start’.
14 Making a container
We now need a Movie Clip to hold the external animations that we need to load. Make a new layer and place it below the curtain_top layer (inside the mask). Insert a Keyframe on frame 28. Place a new Movie Clip on the stage, aligned to the centre. Give it the instance name ‘content’.
15 Interaction
On the Action layer, insert a Keyframe on frame 10 and on 28. In the Action window, write the following code on Keyframe 10:
stop();
btn_start.onPress = function () {
gotoAndPlay(“content”);
}
On Keyframe 28 (this should be your last frame) write:
stop();
loadMovie (“scene1.swf”, “_root.content”);
btn_back.onPress = function () {
gotoAndPlay(1);
}
16 Back to main button
We need the viewer to go back to the start point at any time, so we’ll create a button for that. Create a new layer and insert a Keyframe on frame 28. Create a button and position it on the lower-right side of the frame-border. Place the layer above the start button layer and give it an instance name: ‘btn_back’
17 Preparing Scene 1
So far we have the main scene ready; now we need to create the actual content to be loaded. You’ll need to have a Flash document with the following specifications: ActionScript 2.0, sized to 710 x 540px at 15fps. For now, let’s use the animations we previously created, so open ‘scene1’ from the start folder.
18 Buttons and text
Above all the layers, create new layers for: labels, actions, text, button right, button left and instructions. Create the buttons and animate them coming from the sides until they reach the final position. Add instance names to the buttons.’ Left: btn2’. ‘Right: btn2’. Your text should be on its own layer on the last Keyframe.
19 Reusing elements
Copy and paste the frames from the animation in the main scene for the instructions (include the mask). A warning window will show – click Don’t Replace. In the instructions Movie Clip, change the descriptive text to something associated with the scene, and get rid of the character.
20 Loading the next scene
In the main timeline on the Action layer, insert a Keyframe on the last frame. For this, write code ‘a’. Insert two Keyframes after that. In the first one, write code ‘b’. For the second one, copy and paste the same code. If we have had another movie, we would have replaced the name scene1_a. swf to that.
(a)
stop();
btn1.onPress = function () {
gotoAndPlay(“content1”);
}
btn2.onPress = function () {
gotoAndPlay(“content2”);
}
(b)
stop();
loadMovie (“scene1_a.swf”, “_root.content”);
21 Creating the labels
On the labels layer, insert two Keyframes on the last two frames of the animation. Give the first one the frame label ‘content1’, and for the next ‘content2’. Now you can test your movie to make sure it’s working. Try the main.swf to see if everything connects, as it should.
22 Next and last scenes
For the next scenes, repeat steps 17-22. Change the file names to load as in step 21. For the last scene, the structure is a bit different. Copy and paste the start button on the main scene and give it the instance name ‘btn’. Make a layer for the action, insert a Keyframe on the last frame and add the code below:
stop();
btn.onPress = function () {
_level0.gotoAndPlay(“start”);
}
23 Final comments
For scene1_a and for the last scenes, you can use the scenes from the ‘final’ folder on the CD. This game contains only three scenes, but you can make it as long as you want; just add new ones and link them together. Remember, the idea is to create a nonlinear story.
No comments:
Post a Comment