Official website for Web Designer - defining the internet through beautiful design
Author: Steve Jenkins
3rd February 2010

Flash Week Day #3 – Gesture-based navigation

Discover how to create gesture-based navigation in Flash CS4

Discover how to create gesture-based navigation in Flash CS4

Flash Week Day #3 - Gesture-based navigation


ENGAGING YOUR AUDIENCE with exciting user experiences is what Flash is all about. As Flash designers we are constantly on the lookout for interesting ways to leave an impression on our audience and separate the content we make from that of our rivals. In this tutorial we’ll look at using mouse gesture recognition to create a quirky way to navigate an image-based gallery. You can see an example of what we mean at Red Issue (www. Instead of clicking on buttons to move around we will use the mouse to draw arrows. Flash will interpret the drawing and based on the direction of the arrow it will move the image gallery in the appropriate direction. Flash has to do an awful lot of work in order to decipher different individuals’ handwriting, but thanks to an open source mouse gesture class written by Didier Brun we can get on to the exciting job of creating a gallery to browse instead of trying to work out the algorithm. You will probably come up with your own exciting ways to use this, so don’t forget to let us know what you create.

01 Getting started
Open your browser and visit http://www.bytearray. org/?p=91 to download the mouse gesture recognition class. Once it has been downloaded and unzipped you can examine the demo files. Open a new ActionScript 3.0 Flash file and save it as a ‘GestureNav.FLA’ in the unzipped folder just downloaded. You are now ready to start building your project.

02 Set up the document
In the Properties panel, click the edit button next to the size setting. Change the dimensions to 800 pixels by 600 pixels and change the frame speed to 25fps then press OK. Go to File>Import>Import to Library menu and browse the cover CD to the project folder. Inside the start folder, highlight all of the images and then click the Import to Library button.

03 Create a new Movie Clip
Press Ctrl+F8 to add a new symbol. Name this symbol Content and make it a Movie Clip then press OK. From the library, you’ll need to drag the image ‘lands1.jpg’ to the stage and position it at 0 pixels on the x and y axis. Now simply drag the image ‘lands2.jpg’ to the stage and position it at 800 pixels on the y axis and 0 on the x axis.

04 Add remaining images
Now drag the image ‘lands3.jpg’ to the stage and position at 1600 pixels on the y axis and 0 on the x axis. Drag the three portrait images to the stage and position at 600 pixels on x axis and at the same y axis as previous. Then add the three abstract images and position at 1200 pixels on the y axis.

05 Add a new layer
Create a new layer and then select the Rectangle tool. Choose black as the foreground colour and take the alpha value down slightly to 60%. Choose ‘none’ as the stroke colour. Draw a rectangle on the stage and in the Properties panel change the width to 2400 pixels by 75 pixels.

06 Another rectangle
Position the rectangle at 0 pixels on the x axis and then at 525 pixels on the y axis. Copy and paste the rectangle, then position using the Properties panel at 800 pixels on the x axis and 1125 pixels on the y axis. Lastly you will need to change the width to 1600 pixels in the Properties panel.

07 Paste again
Hit Ctrl+V on the keyboard to paste the rectangle again, this time positioning at 0 pixels on the x axis and 1725 pixels on the y axis. In the toolbar switch to the Text tool and choose a font such as Arial Narrow or similar, making the text colour white. Move the document to the first image in the top-left.

08 Add the text
Add the text as shown in the screenshot above, we used two text fields. Switch to the Move tool and Shift-click each of the text fields then hold down the Alt key and drag to the right. This automatically creates a duplicate copy of the text; position this over the second image and change the text as shown.

09 Finish the text
Using the method described in the previous step, continue to duplicate the text until you have added titles to each of the images in this Movie Clip. We have split each row into a separate section of landscape, portrait and abstract images for clarity when being viewed by the user.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • henry

      How do you get the files for this tutorial (images, GestureNav.AS etc…) ?

    • henry

      I found them using your search, thanks

    • toM

      where can I find the source files?

    • Brent

      I’m getting a problem with the matchHandler function at runtime.

    • http://n/a Sarah

      where can I find the source files?