Flash Week Day #3 – Gesture-based navigation

19 Add the drawZone

You should now be working on the main stage, but if for some reason you’re not, make sure you head back there. Next you will need to add a new layer and from the library drag in the symbol ‘drawZone’. Position this at 0 pixels in both the x and y axis and name the instance ‘drawZone_ mc’. Now add another layer and select the Rectangle tool from the toolbar.

20 Add a rectangle

Make sure the object drawing icon is selected in the toolbar, then copy the corner settings from the screenshot and add a rectangle. Add a gradient to it as shown and add another rectangle with a highlight gradient. Select these rectangles and choose Modify> Convert to Symbol. Name the symbol ‘badge’ and make it a Movie Clip.

21 Finishing touches

In the Properties panel add a drop shadow filter to the rectangle and change the colour style to ‘alpha’ with a value of 90%. Switch to the Text tool and add an icon using the font Webdings, then add a name for your project next to this. Now save your project before you add the ActionScript.

22 Copy the ActionScript

Minimise Flash and with your operating system, browse the cover CD to the tutorial folder and in the start folder drag the file ‘GestureNav.AS’ into the folder that you unzipped in step one. Once you have done this you can return to Flash again so that you can point the Flash file to read the ActionScript file.

23 Publish and test

Make sure that nothing is selected on the stage, then look over to the Properties panel. Click inside the class field and add the class ‘GestureNav’. Notice that you do not need to have the ‘.AS’ on the end. Now press Ctrl/Cmd+Enter to test the project. You should be able to draw arrows to navigate around the photo gallery.

Pages: 1 2 3