68 Technique
Flash CS3 and ActionScript 3 or later
Create your own draggable interface
Paul Wyatt shows you how to use Flash and caurina transitions to make a full-screen draggable interface for your design folio If you really want to show your work off online, big and bold is where it’s at. This tutorial will guide you through the creation of a folio site in Flash that uses a draggable interface for displaying large-format graphic work. We’ll walk you through how to animate your folio without even having to create a motion tween; all the movements are done with code and courtesy of the free caurina transitions tween class. This can be hooked up to your Flash file to produce animations that you can control by time rather than frames. You’ll find this tutorial easy to adapt for your own purposes. The key functions in the code will be explained, which could prompt you to customise this example and have a draggable interface. Using the same principle combined with the caurina transitions, you’ll be able to create a folio that’s perfect for you. See the full version of our featured site at www.lukewoodhouse.co.uk.
01
Paul Wyatt Paul Wyatt has created websites and both animated and broadcast creative for clients such as Talkback Thames, D&AD, Virgin Media and the BBC. To find out more, visit www. paulwyatt.co.uk
On the disc The files required for this tutorial can be found in DiscContents\ Resources\Flash
Computer Arts September 2009
ART166.tut_flash 68
Time needed 1 hour Skills Overview of using caurina transitions Learn basic Flash functions Introduction to ActionScript 3
Open up Flash and create a new ActionScript 3 document. In the Properties panel, hit the Edit button next to the Size option. Change the document properties to 1024x 768. Set the frame rate to 30fps.
www.computerarts.co.uk
10/8/09 12:56:3 pm
03
Each image requires a new MovieClip for it to be held in. Set these up by selecting Insert>New symbol. In the ‘Create New Symbol’ pop-up box, give the symbol the name ‘luke0’. Hit the Advanced button and check the ‘Export for ActionScript’ box. This will automatically give it the class name ‘luke0’. Hit OK.
69
04
Now to edit the MovieClip. Hitting OK automatically brings you into the editing mode for the ‘luke0’ MovieClip. From the library, drag over an instance of the ‘lukewoodhouse1.jpg’ onto the MovieClips stage. Use the Properties panel to position this at X: 0.0 and Y: 0.0.
05
Create MovieClips for each folio JPEG in the Flash library. Name them sequentially from ‘luke0’ upwards. Check the ‘Export for ActionScript’ box for each new symbol, and position each clip at X: 0.0 and Y:0.0 on their respective symbol stages. Exporting for ActionScript is key as it gives us control of the images in ActionScript later.
06
Create a brand new MovieClip symbol by selecting Insert>New symbol, and name it ‘shape_mc’. Hit [R] on your keyboard to select the Rectangle tool. Click-and-drag on the stage to create a rectangle. Select this with the Move tool and change its width value to 1024 pixels and its height value to 768 pixels in the Properties panel. Position this at X: 0.0 and Y: 0.0.
02
Import the files for the folio by selecting File>Import>Import to library and then by browsing to the ‘Folio work’ folder on your Computer Arts disc. Select the 10 JPEG files in this folder and hit Open. Select Window>Library to view the files in the library.
07
Create another MovieClip and name it ‘shape1&2’. Onto this blank stage, drag an instance of the ‘shape_mc’ MovieClip and position this at X: 0.0 and Y: 0.0. Drag another instance of ‘shape_mc’ and position this at X: 1024 and Y: 0.0.
www.computerarts.co.uk
ART166.tut_flash 69
Computer Arts September 2009
10/8/09 12:56:5 pm
70
08
We’re eventually going to load images into these two shapes. To do so we need to give each shape a unique instance name. In the Properties panel, select the ‘shape_mc’ instance on the right of the stage and give it the instance name ‘face1’. Give the left instance of ‘shape_mc’ the instance name ‘face2’.
09
Return to the main stage by selecting Scene 1 from the grey ‘bread crumb’ panel above the stage on the Flash interface. Double-click the default layer name in the timeline and change its name to ‘image loaders’. Right/Ctrl+click in Frame 2 and then, from the pop-up menu, select Insert Blank Keyframe.
10
Onto the blank keyframe you’ve just created; drag an instance of ‘shape1&2’ onto the stage. Position this at X: 0.0 and Y: 0.0. Select the MovieClip with the Move tool and, in the Properties panel, give it the instance name of ‘sliding_mc’.
11
Now to set the default image. Create a new layer and name it ‘Actionscript’. In Frame 1 of this layer, select Window>Actions. Enter the code pictured in the above screengrab (or paste it in from the completed example, folio_ complete.fla). This code sets the first MovieClip to be seen in the folio as ‘luke0’.
12
Create a blank keyframe in Frame 2, then copy and paste the code from folio_complete.fla into the Actions panel. Code lines 1-7 stop the movie motion and import the caurina transitions so we can animate ‘sliding_mc’. It’s important that the folder ‘Caurina’ (on the disc) is located in the same directory as your working FLA file.
14
13
We initiate the tweener animation with a ‘MOUSE_ DOWN’ MouseEvent, which kick-starts the function ‘beginDrag’. This causes the pull-back and release when the mouse is pressed down and moved to the right. When the mouse is released (‘MOUSE_UP’) the function ‘endDrag’ is initiated.
The ‘endDrag’ function uses the Tween function to move ‘sliding_mc’ by 1024 pixels on the X axis using the built-in caurina class transition ‘easeIn’. After ‘sliding_mc’ has moved 1024 pixels to the right, it then resets to X: 0.0 and Y: 0.0. Within ‘sliding_mc’, we load a separate image into ‘face1’ and ‘face2’.
16
Go to File>Publish Settings. From the Formats tab, select a location and name for the SWF and HTML file. Click the HTML tab and, in Dimensions, select ‘Percent’. In Scale, select ‘Exact fit’. Hit Publish to export your file.
15
When the position resets, the image that was in ‘face2’ swaps location and appears in ‘face1’. The next image is then loaded into ‘face2’. This gives the illusion of continual movement. Lines 69-75 transfers ‘previtem’ to ‘currentitem’ using the class reference names (which we set up earlier) to swap the clip’s location. Lines 31-32 show the current item by using ‘luke’+’count’ (which runs through our sequentially named clips), then loads that image dynamically in as ‘currentitem’.
Computer Arts September 2009
ART166.tut_flash 70
www.computerarts.co.uk
10/8/09 12:56:6 pm