Flash Week Day #3 – Gesture-based navigation

10 Add instructions

In the upper-left corner of the first image, simply add some instructions as shown above with the Text tool. With this text selected go to the Modify menu and choose Convert to symbol. Name the symbol ‘instructions’ and make it a Movie Clip. Press Ctrl+F8 to create a new symbol, naming this ‘arrow’ and again make it a Movie Clip.

11 Draw the arrow

Use the Paintbrush tool to draw an arrow as shown above. It just needs to be basic, nothing too fancy needed! Select frame 49 and press F5 to extend the timeline. Add a new layer and using a larger brush add a spot just above the arrow. Select frame 10 and press F6 then add two more spots with the Brush tool over the arrow.

12 Create a mask

Continue to add a keyframe every two frames and on each keyframe add two spots with the Brush tool. Eventually the arrow will be covered as shown in the screenshot above. Once this is done, Ctrl/Cmd-click on layer two and from the drop-down menu that appears, choose Mask. Hitting return on the keyboard will preview this animation.

13 Edit instructions

The mask gives the appearance that the arrow is actually being drawn on the screen as you watch. In the library double-click on the ‘Content’ Movie Clip and then double-click on the ‘instructions’ to edit that Movie Clip. Select frame 200 and press F5 to extend the timeline.

14 Glowing Arrow

Add a new layer from the library and drag the symbol ‘arrow’ onto the stage, positioning just below the text. The arrow symbol will appear invisible because there is nothing on frame 1. In the Properties panel under the Filters settings, add a glow filter with the settings as shown above.

15 Rotate arrow

Add a keyframe at frame 50 and rotate the ‘arrow’ symbol 90° clockwise. Do the same at frame 100 and at frame 150. Once done add a new layer and select frame 201. Add a keyframe and open the ActionScript editor. Add a ‘stop();’ command and then close the ActionScript editor.

16 Add an instance name

In the top left-hand corner of the interface, click on the icon for ‘Scene 1’. From the library drag the symbol ‘Content’ onto the stage and then position it at 0 pixels in both the x and y axis on the Properties panel. Also on the Properties panel, give this symbol the instance name of ‘content_mc’.

17 Empty symbol

Press Ctrl+F8 to create a new symbol, name it ‘zone’ and make it a Movie Clip. Don’t add anything to this but create another Movie Clip symbol and name it ‘drawZone’. Drag the ‘zone’ symbol from the library to the stage and position at 0 pixels on the x and y axis in the Properties panel.

18 Add a glow

The symbol will appear as a white spot on the screen, name the instance of this ‘zone_mc’ in the Properties panel. Under the filter section of the Properties panel, add a glow filter with the settings as shown in the screenshot above. Once done, click on the ‘Scene 1’ icon in the top-left of the interface.

Pages: 1 2 3