It’s been long since I posted anything new. Well, rejoice, for new tutorials are in the works! Also, I’ll be changing the host for flashexplained.com because I need something more powerful to handle my 100K+ monthly visits. So don’t sweat it if the site goes down for 1-2 days. It will be back - faster, better and with new features, too. I am planning to add a download section. It will come in handy, you’ll see why.

So, keep on working in Flash and expect new, fresh tutorials coming your way! Thanks for all the e-mails and cool comments. Sorry if I don’t reply to your comments, but I have way too much work to do to be able to handle these.

See you soon in new tuts,

Luka Maras

• How to create a motion guide (inside a guide layer),
• How to make a movieclip follow the motion guide you made,
• How to make the guided animation more realistic and more.

You will be creating a motion tween animation which will then be linked to a motion guide. You can see the kind of animation you are going to make below.

1. Making a simple motion tween animation that will follow the motion guide later

1.1 Open a new document by selecting File > New. Select Flash File (ActionScript 3.0), click OK.

1.2 Save your document right away. Later, you’ll be able to save it just by pressing Ctrl+S. Remember to do this whenever you pass a certain number of steps or make significant changes to your document. It is better to save often then to lose your work because of your computer crashing, power shortages, etc.

OK. You’ll start by making a movieclip. You need it to make a motion tween animation which will be made to follow a motion guide later. A paper airplane will be fine for this kind of animation.

1.3 Select the Line tool (N). Select a darker grey hue for the Stroke color (I picked #646464), turn on the Snap to Objects option and make sure that Object Drawing is turned off. The screenshot below shows you these three options clearly.

1.4 Click and start dragging with the Line tool downwards. Make a line that is approximately 60-65 pixels long.

Since you have turned on the Snap to Objects option, drawing a straight line should pose no problem at all.

1.5 Select the Zoom tool (Z) and zoom in on the line that you just drew. Click and drag to zoom in on the desired area.

You’ll be able to work more easily now.

1.6 Use the Line tool (N) again. The Snap to Objects option should be turned on from before (that’s the small magnet icon found at the bottom of the Tools panel). Bring the cursor near the top of the line, click and start dragging left and down. You will automatically start drawing from the top end of the existing line, thanks to the Snap to Objects option.

1.7 Add three more lines to complete one side of your paper airplane, as shown on the image below.

1.8 Select the whole drawing using the Selection tool (V).

1.9 Copy the selected items by pressing Ctrl+C or selecting Edit > Copy.

1.10 You will now paste in place a copy of these lines either by pressing Ctrl+Shift+V or selecting Edit > Paste in Place. Now, there won’t be any apparent change. But you have just pasted a smae, exact copy of your drawing over the original one. To see it, use the left or right arrow keys on your keyboard to move the new copy.

1.11 With the freshly pasted copy still selected, select Modify > Transform > Flip Horizontal.

1.12 Move the mirrored half so that it joins the original drawing perfectly. You can do that with the arrow keys, but I recommend doing it with the Selection tool (V), because thanks to it, the drawing will perfectly snap into place, as shown in the picture below.

1.13 If you wish to make your paper airplane more realistic, you can apply some linear gradient color fills to it. Use the Paint Bucket tool (K) to do it.

1.14 Turn back the zoom to 100% (no zoom at all).

1.15 Select your completed drawing, both the lines and fills, using the Selection tool (V). To create a movieclip out of your selected vector drawing, select Modify > Convert to Symbol.

Call your new symbol paper airplane, select Movie clip as type and also select the central square for the registration point This last choice isn’t exactly a must, but it will make creating the guided animation a little bit easier. Click OK.

…as soon as you do that, an azure outline will appear around your newly made symbol and the Properties inspector will also show you that you are dealing with a movieclip symbol now and not a simple drawing anymore.

You will create a simple motion tween animation now.

1.16 Right-click on frame 50 and select Insert Keyframe.

1.17 Use the Selection tool (V) to move the movieclip. Just click and drag it to a new position. You can place it anywhere, because what’s important is that you make a motion tween animation, the direction of the movement isn’t important now.

1.18 Right-click between the two keyframes and select the Create Motion Tween animation.

If you have done everything properly, an unbroken arrow over a purple background should appear.

If you didn’t obtain a good motion tween (your arrow is dashed-broken), please check my motion tween animation tutorial which explaines in detail how to make such an animation, and where possible errors may lurk.

1.19 Call the current layer airplane and lock it.

Fine. Now you have the prerequisite for creating a guided animation — a simple motion tween. Let me show you how to add a guide to it.

Top of page

2. Creating a motion guide

2.1 Click the Add Motion Guide icon beneath the layers to add a new motion guide.

As you can immediately see, a new motion guide layer has been added to your document. The layer benath it (airplane) has instantly become linked to this layer, become the guided layer. The airplane layer is now guided by the Guide: airplane layer. This can clearly be seen by the layer’s icon which has become slightly indented — it has moved to the right.

Also, the duration of the guide layer is the same as that of the guided layer (50 frames in this particular example).

2.2 Select the Pencil tool (Y). In the Tools panel, go to the end of it and choose the Smooth option for drawing with your pencil.

In the Properties inspector, select hairline as line type and enter 100 as the value for the Smoothing option. Choose any color you like, since the guide won’t be visible. I chose hairline to be able to work more easily and adjust the animation in more detail.

2.3 Click and start dragging with the Pencil tool (Y) to draw a guide (in the Guide: airplane layer, of course). Make a curve — it will come in handy for simulating the flight of your paper airplane. I started and finished drawing the curve outside the stage on purpose — to make it appear as if the airplane flew inside the scene and then disappeared outside of it.

Top of page

3. Creating a guided motion tween animation

3.1 Now lock the Guide: airplane layer and unlock the airplane layer. Click on the first keyframe of the airplane layer to select it.

3.2 Click on the paper airplane movieclip once to select it - do this with the Selection tool (V).

3.3 You will move the movieclip to the guide’s starting point. Use the Selection tool (V) again. Click on the movieclip’s registration point (that’s the small circle with a little cross inside) and drag it over to the beginning of the guide. Once the movieclip is ready to snap into place, you will see a bold, black circle appear near your cursor, as shown below.

If the snapping does not occur, check if it is turned on.

3.4 Click on the second keyframe in the airplane layer to select it.

3.5 Now do the same thing for the movieclip in this keyframe: Place it over the other end of the guide using the Selection tool (V). It should also snap into place, just like before.

3.6 Speed up the animation a little bit (before testing it), by increasing the frame rate of your Flash movie. Double-click the frame rate (below the layers) to open the Document Properties window.

Set the Frame rate to 24 fps and click OK.

3.7 Select Control > Test Movie. You should see an animation similar to the one shown below.

Wow! The movieclip is moving along the guide! You did it. But, there is one obvious flaw here: the paper airplane isn’t moving around as in the real world. It should be moving with its nose pointing forward. So let me show you now how you can easily do that (you must, because animation is about simulating the real-world)!

3.8 Select the first keyframe again.

3.9 Select the Free Transform tool (Q). Also, turn off the Snap to Objects option to be able to adjust your movieclip’s position freely, without any snapping.

3.10 Bring the cursor near one of the movieclip’s corners (if the movieclip isn’t selected, select it now). Click and start rotating until the paper airplane’s nose is aligned with the direction of your motion guide (the curve in the layer above it).

3.11 Select the second keyframe of your animation again.

3.12 Adjust the movieclip with the Free Transform tool here too. The important thing is that the movieclip should be oriented as if it was following the guide all along — aligned with its direction.

3.13 There is one last thing to be done to have a proper guided motion tween: Select the first keyframe again (like you did in step 3.8) and go to the Properties inspector. Once there, turn on the option called Orient to path. Make sure that it is selected, as seen below.

3.14 Test your SWF again by selecting Control > Test Movie and you should see your airplane moving realistically, as shown at the beginning of this lesson.

Now that was easy, wasn’t it? Guided animations are fun, because they help simulate real-world movements of various objects. In one of the upcoming animation tutorials, I will also explain to you how to create a circular animation and how to display the path. In the meantime, Subscribe to FlashExplained and you’ll be notified of any new Flash lessons coming your way! Download the source FLA file for this lesson below.

Download the source file

Luka Maras

Take a peek at what you are going to learn to create below:

1. Creating a simple movieclip

1.1 Open a new document: choose File > New. Select Flash File (ActionScript 3.0). Click OK.

1.2 Double-click the fps field below the layers (you can see it in the screenshot below) to access the Document Properties.

Change the speed of your movie (to make your animation more smooth) by typing 24 in the Frame rate field. Click OK. This will speed up your movie to a decent level for a nice animation.

1.3 Select the Oval tool (O).

Set the options for it as follows:

• Turn off the stroke (outline) color.
• Choose some shade of red for the fill color (you will make something similar to a red alarm light).
• Check that the Object Drawing option is turned off and let it stay that way (it’s next to the litle magnet icon).

1.4 Hold down Shift on your keyboard, click and start dragging with the Oval tool to make a circle. Make it about 100 by 100 pixels. Remember that holding down Shift enables you to make a circle right away, and not an oval.

1.5 You’ll now use the Oval tool (O) again, but to draw an outline of a circle only. With the tool still selected, go to the Properites Inspector below the stage and block the fill color. Select white for the outline color, with a thickness of 4.

1.6 Draw a circle smaller than the previous one. Do it outside the stage, because you are using white - to see what you are doing.

1.7 Choose the Selection tool (V). You will cut out 3/4 of the outline circle now. Select the lower half of it by clicking outside it with the Selection tool, dragging and releasing once you’ve encompassed the desired area. Press Delete or Backspace to erase the selected part.

1.8 Repeat the same thing for the right quarter of the circle.

1.9 Select the remaining line by clicking on it with the Selection tool (V). Move it over the red circle so that it appears as a sort of shine on it. You can move it by pressing and holding down Shift on your keyboard and using the arrow keys to move it around. For more precise movement, release Shift and use the arrows only.

1.10 Select the whole drawing now.

1.11 Select Modify > Convert to Symbol. Name your new movieclip bulb. Select movieclip as type, of course. Click OK.

And now - save your work before proceeding to the second part (File > Save)!

Top of page

2. Applying effects to a movieclip and animating them

To be able to animate effects like blur, glow and others in Flash, you have to use the motion tween animation technique - one of the basic ways to set things in motion in Flash. So, before actually using the effects, you have to create an animation first, by adding a new keyframe and making some modifications. Let me show you how - it is easy!

2.1 Right-click on frame 20 of the first and only layer and select Insert Keyframe.

You will see that the new keyframe you have just inserted is displayed in the Properties Inspector.

This is because when you insert a new keyframe in a layer, it becomes selected automatically. But you need to have your movieclip selected. So…

2.2 Select your bulb movieclip by clicking on it once with the Selection tool (V). The change will be reflected in the Properties Inspector instantly - your movieclip is selected now.

2.3 Click on the Filters tab. Then click on the small blue cross to access the effects at your disposal.

2.4 Select the Glow effect from the menu. Select the following values for it:

• Blur X and Blur Y: 31
• Strength: 230
• Quality: Low
• Color: red (#FF0000)
• Leave the Konckout and Inner glow options unchecked.

This is the result you should see – a nice, red glow appearing around your movieclip.

2.5 You should create the animation now — to animate the glowing effect. Just right-click on the grey area between the two keyframes and select Create Motion Tween.

A continuous, unbroken arrow should appear on a magenta background. I won’t delve into details here, because I already explained in exhaustive detail the proper procedures to create a motion tween animation. Check it out if you have any questions. Also check the shape tween animation lesson.

2.6 Select Control > Test Movie. You should see your glow appear, from nothing, to full bright red that you have applied to your movieclip in the second keyframe, like this:

2.7 Now that’s fine, but there is that abrupt jump at the end of your animation. There is no smooth transition between the glowing effect at its most visible and the first keyframe where there is no glow visible at all. You are going to change this now, easily.

Right-click on the first keyframe and select the option Copy Frames from the menu that shows up.

2.8 You will paste this keyframe onto frame 40. Right-click there and select Paste Frames.

2.9 Do the same thing as you did before - right-click between the two keyframes and create a motion tween animation.

2.10 Test your Flash movie again by selecting Control > Test Movie.

You should see now an animation similar to the one demonstrated at the beginning of this tutorial. The rythmical glowing of your bulb movieclip. Yes, it is as easy as that. There is no effect applied in the first keyframe, and there is the glow applied in the second one. Make the motion tween and there you have animated effects in Flash!

You can do the same with the Color and Blend options. With filter effects thrown in too. Play and experiment to see what you can achieve!

I will make a lesson which will explain how to use what you have just learned, together with motion tweens and shape tweens to create professional animations. So stay tuned! Subscribe to FlashExplained to keep track of every new tutorial!

Download the source file for this lesson

• How to animate a drawn line,
• How to animate a shape and morph it into something different,
• You will also learn some really simple drawing and shape manipulation techniques along the way.

The first simple shape tween that you are going to learn to create is shown right below. The second one will follow right after it, in this same lesson.

1. Drawing the smiley shape

1.1 Open a new document by selecting File > New. Select Flash File (ActionScript 3.0) and click OK.

1.2 Go to the Property inspector (below the working area) and find the Frame rate option. Change it to 24 fps. This is a nice speed, for a smooth animation in your SWF.

1.3 Select the Oval tool (O)…

…and go to the lower portion of the Tools panel. Click the colored square near the pencil icon, that’s the outline color. When the palette opens up, select the No color option. You can see it in the palette’s upper right corner in the image below. Then…

…select a nice yellow fill color for your smiley.

1.4 Deselect the Object drawing option.

1.5 Now, draw a circle on the stage. Make it 150 by 150 pixels.

1.6 Call the current layer head. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name. Now, press the small dot beneath the padlock icon to lock this layer. Since you finished all the work here, it makes sense to lock it. This will prevent you from accidentaly placing any drawings or objects inside it.

1.7 Create a fresh layer by clicking on the Insert Layer icon. Call the new layer eyes.

1.8 Select the Oval tool (O) again. Change the fill color to black.

1.9 Now, click and drag with the Oval tool to draw an ellipse. It should be elongated (on its vertical axis), so that its dimensions are approximately 20 px by 40 px.

If you want to get these dimensions right, just click on the eye with the Selection tool (V) and go to the left side of the Property Inspector. You will find the W and H options there, which serve to adjust the width and height of your ellipse.

1.10 Click on the eye with the Selection tool (V) to select it. Press Ctrl+C (PC) or Cmd+C (Mac) to copy the eye shape.

1.12 Select Edit > Paste in Place.

Now, do not click anywhere or touch anything! Just read the following step.

1.13 Hold Shift on your keyboard and press the right arrow key repeadetly until the second eye has been positioned well. If you want to position it more precisely, release Shift and just use the arrow keys to move it by 1 pixel at a time.

1.14 Lock the eyes layer.

1.15 Make a new layer and call it mouth.

1.16 Select the Line tool (N). In the Property Inspector, choose black as color, Solid as line type and a thickness of 3.

1.17 Draw a horizontal line using the Line tool. Do this by holding Shift, clicking and dragging your mouse horizontally.

Well, your smiley is done! You will now see how to make it smile! Save your work before proceeding (File > Save)!

Top of page

2. Making a simple shape tween animation

2.1 Right-click on frame 15 of the mouth layer and select Insert Keyframe from the menu that pops up.

You have just inserted a new keyframe in the mouth layer. This is necessary for any kind of animation in Flash, because a keyframe makes change possible. Whenever you want to animate something, be it movement, color or shape change, you must use a keyframe.

…but you have certainly noticed that only the line representing the smiley’s mouth is visible on the stage.

…and this is perfectly normal! Once you have inserted a new keyframe in the mouth layer, you have made it last longer inside the timeline. All the while the first two layers have remained the same. The contents of the head and eyes layers are visible in the first frame only. Until you make them last longer, they won’t be visible in other frames.

2.2 To update the other layers, do the following (you don’t have to unlock them!): Right-click on frame 15 of the eyes layer and select Insert Frame (not keyframe!) from the menu. A frame is used when you just want to prolong the duration of a keyframe in the timeline, without any changes.

And now, the eyes layer has the same lifespan as the mouth layer. As you can see, a simple, plain frame is represented by a small rectangle, unlike a keyframe, which has a solid black dot.

2.3 Repeat the above step for the head layer.

Everything is visible now, in the same time span.

2.4 Fine! Let me show you how to make the shape tween now. Click the second keyframe in the mouth layer to select it.

This automatically selects every single object in this keyframe. You will see that the mouth (the line) has become highlighted. To unselect it (to be able to change its shape)…

2.5 Click anywhere outside it using the Selection tool (V), on an empty part of the stage.

2.6 Here is how you can easily make a nice smile:

1. Use the Selection tool (V). Bring it over the line, so that a small curve appears near your cursor.
2. Click and start dragging your mouse downwards.
3. Once you are satisfied with your curve, release the mouse button. There! The line became a curve!

2.7 Now, to create a shape tween, right-click anywhere between the two keyframes (or on the first one) and select the Create Shape Tween option from the menu.

If you have done everything as I explained to you up to this point, you should see an arrow between the two keyframes appear, on a light green background.

2.8 To see your first shape tween animation, select Control > Test Movie. The testing window will appear, with your smiley!

You should see an animation like this:

There! The shape tween has been successfuly made! But after the smile appears, it returns abruptly to the straight line. Why? Because you made it that way! Flash cannot know what’s going on - it’s just executing what you told him to do. So, if you want to make that smile return to its initial position more smoothly, you should add another shape tween animation segment. And that’s really easy to do, because you can just copy the first keyframe, instead of having to re-create it manually.

2.9 Right-click on the first keyframe in the mouth layer and select Copy Frames.

2.10 Right-click on frame 30 of the mouth layer and select Paste Frames.

Your timeline should look like this:

2.11 Let me show you now a different way of making a shape tween. Click anywhere between the second and third keyframes in the current, mouth, layer.

2.12 Jump over to the Property Inspector and find the Tween drop-down menu. Select the Shape option.

The second shape tween should appear in the mouth layer, just as before, represented by a continuous arrow on green background.

2.13 What is apparent immediately, is that you should add a frame in both the eyes and head layer, to make them last as long as the mouth layer. You already know how to do it - for a reminder take a look at step 2.2 again. This is the result you should obtain:

2.14 Select Control > Test Movie to see your smiley change its expression, this time without any abrupt changes in animation.

Save your document and close it. I will show you now how to create a shape morph with the shape tween animation technique and also how to change the color of your drawing.

Top of page

3. How to create a morphing effect with shape tweens

3.1 Open a new document by selecting File > New > Flash File (ActionScript 3.0) and clicking OK.

3.2 Select the Oval tool (O). It should have similar settings as before: block the outline color by selecting the No color option for it. Choose blue for the fill color. Also, exactly like in the previous exercice, the Object Drawing option should be turned off. Just like you did in step 1.3 and 1.4.

3.3 Draw a circle on the stage. I made it a little bit bigger than 100 by 100 pixels.

3.4 Insert a keyframe in frame 40 on the first layer.

Do not make any changes to your circle here. Because, as you have seen in the previous exercice, this last frame will serve to make a nice loop. So that your animation will run smoothly, without any sudden jumps.

3.5 Right-click between the two keyframes and select the Create Shape Tween option.

3.6 Next, insert a keyframe at frame 20.

3.7 Fine. Now, use the Selection tool (V) to deselect the circle by clicking anywhere outside it.

3.8 Bring the Selection tool (V) next to the top of your circle, until a curve appears. Now, press and hold Ctrl on your keyboard (I don’t know if it’s Ctrl or Cmd on a Mac, sorry, my old one is too slow for Flash CS3 and I haven’t bought a new one yet ). Still holding the Ctrl key, click and drag your mouse downwards.

You should see a pointed deformation start to appear, like a wedge has been driven into the circle.

3.9 Repeat this operation at the remaining three sides of your circle, until you get a flower-like shape.

3.10 Test your SWF movie by selecting Control > Test Movie or pressing Ctrl+Enter (Cmd+Return on a Mac). Your animation should resemble this one:

Now, if you want to change the color, just select the shape in the middle keyframe (where it is resembling a flower) and change its fill color in the Tools panel.

Conclusion

You have just learned how to make shape tweens. For anything more complicated, for example - a character that moves and speaks, you can’t rely on Flash to do that for you. Any complex animation requires drawing the changes that happen, frame by frame. Flash cannot replace the human hand, while it is excellent for smooth transitions used in many websites that you see around. If you want to create complex animations, arm yourself with patience. Check out the excellent animated wings tutorial to see how it is done.

Download the source file for this lesson

• It will be dynamic, meaning that the image-related data (the location of images — the file paths, and the descriptions) will be loaded from an external XML file.
• The dynamic nature of the gallery will allow you to update it just by changing the external XML file and re-upload it to the server along with the new images, without having to modify the SWF movie at all. Once the SWF is finished and ready, you don’t have to touch it any more.
• The gallery can feature an unlimited number of images.
• The image gallery will feature a menu which will enable the users to select a particular section and have the related thumbnails displayed.
• The menu will be created dynamically (on the fly) via ActionScript, making it expandable. It can store as many sections as you like.
• The menu will be scrollable, with a nice easing effect added to it.
• Every thumbnail section and every individual image will have its own textual description.
• Every thumbnail will have its own preloader, as well as every image.
• Once a user clicks on a thumbnail, the external JPEG image will be loaded (a percentage preloader will be used to show the downloading progress), and once it is fully loaded, it will show up with an alpha fade-in effect.
• By clicking on the loaded image, the user will go back to the thumbnail section.
• The image gallery is extremely small in filesize (the SWF itself weighs less than 30 KB), because all the JPEG images will be stored externally.
• Last but not least, the gallery works in all major browsers.

View the image gallery in action. You can also click on the screenshot below to see it.

Overview

Before starting to buid your image gallery, there is a little planning to be done, because this is in fact a small application. Let’s see the elements that make up this gallery:

I. The elements of the SWF movie

1. The gallery menu. This is the interface which will enable the user to browse through the galleries. It will be made of buttons dynamically pulled out from the Library and then nested inside an empty movie clip. The menu will have two buttons, which will make possible for the user to scroll through the menu, up and down. A mask will be made inside this menu, to limit its visible area. You must do this because if you are going to have many galleries (let’s say 40, 50 or even more), their respective buttons cannot be all over your movie — that would look bad.
2. The thumbnail MovieClip. This is a movieclip symbol stored inside the Library, into which a single thumbnail (small image) will be loaded. It contains:
   • a white background, just to make it nicer, and to be able to add a drop shadow effect to it later,
   • an empty MovieClip inside which the external JPEG thumbnail will be loaded and
   • a dynamic text field which will serve to show the preloader (a simple percentage preloader).
3. The big image holder MovieClip. This MovieClip symbol will also be stored in the Library and will be pulled out of it dynamically, via ActionScript. It is nearly the same as the thumbnail MovieClip, except bigger in size. It contains the same three elements as the one above:
   • a white background,
   • an empty MovieClip inside which the big external JPEG image will be loaded and
   • a dynamic text field for the preloader.
4. A placeholder for thumbnails and big images. This is an empty MovieClip, placed directly on the stage, which will have two empty MovieClips created inside it at runtime (meaning while your SWF is running), like this:
   • When the user clicks on a gallery in the menu, an empty MovieClip will be created inside the placeholder. This MovieClip is going to receive several copies of the thumbnail MovieClip attached to it, depending on the number of images in the gallery that the user has selected.
   • When the user clicks on a thumbnail, a new empty MovieClip will be created inside the placeholder, which will have the big image holder MovieClip attached to it. The preloading of the big JPEG image will start, and when it reaches 100%, the image will fade in nicely and hide the thumbnails. When the user click on the image, it will disappear and the thumbnails will appear again.
5. A dynamic text field. This is where the descriptions for all the galleries and images will appear.
6. Your website logo. This is just a graphic element, which will appear above the gallery.

II. The XML file

The XML file will store all the data related to the images:

• The name of each gallery. This name will appear as the label on each gallery button in the menu. Also, this same name is the name of the folder (directory, file folder, as it is also called) inside which that particular gallery will be stored on your web server.
• The description of each gallery. This is the text that will appear in the dynamic text field when the user clicks on a gallery button and the thumbnails for it are shown.
• The description of each image. This is the text that will show up in the same dynamic field mentioned above when a big image has been loaded.

III. The images and the thumbnails

All the images will have to be stored according to an exact hierarchy and precise naming rules. Each gallery will be placed in a folder which will have the same name as the title of the gallery as it appears in the XML file. Inside each folder, the images will have to be named as 1.jpg, 2.jpg, 3.jpg and so on. Furthermore, each gallery folder will have a subfolder inside it, called thumbs, where the thumbnails for the gallery will be stored. The thumbnails will have the same file names as their bigger counterparts (1.jpg, 2.jpg, etc). All the galleries will be placed in a single folder, named gallery.

You have to abide by this naming/folder hierarchy system if you want your dynamic image gallery to function properly. Once you want to insert new images inside the gallery, the only thing you will have to do is to update the XML file, create new folders according to the gallery names inside this XML file, and place the images and their respective thumbs inside them. You will then upload the new images and the XML file to your web server and they will automatically appear inside the menu.

Sounds great — a fully automated image gallery system. I will start by showing you how to create the SWF movie, after that you will download the XML file and modify it according to your needs, make all the necessary folders and place the images and thumbnails inside them, and last but not least (in fact, the most important) you will create the ActionScript code that runs the whole thing. Let’s get started!

Top of page

1. Setting up your document

1.1 Open a new Flash document (File > New > Flash Document).

1.2 Select Modify > Document. Set the dimensions of your Flash movie to 760 by 540 pixels and set the speed (frame rate) to 30 fps. Click OK.

1.3 Save your document in a separate folder — make a new folder just for this lesson. A lot of files are going to be needed for the creation of the image gallery, so it is a wise thing to keep them all in one place, instead of putting them together with any other Flash files that you may be working on.

Top of page

2. Creating the gallery menu

2.1 Call the first layer in your document gallery menu.

2.2 Select Insert > New Symbol. In the window that appears, do the following:

• Select Movie clip as type,
• enter empty movie clip as the name of the new symbol
• click OK.

2.3 You will now find yourself working inside the new MovieClip symbol. Since you need an empty MovieClip, don’t draw anything here, just click the Scene 1 link above the timeline.

Your newly made empty movie clip symbol is now stored inside the Library. You can access the Library by selecting Window > Library. Keep the Library window open, because you are going to need it frequently, especially to place instances of the empty movie clip symbol on the stage at various points during this lesson.

Now you are going to create the main MovieClip for the image gallery menu. The first thing that you’re going to make is a mask for the menu buttons.

2.4 Select the Rectangle tool (R). In the Colors section of the Tools panel, block the stroke color, because you won’t need it. Do this by selecting the stroke color first — click on the little pencil icon to do it (see 1 in the image below). Next, click on the No color button (see 2 in the image below). You can choose any fill color that you like.

Also, turn off the Object Drawing and Snap to Objects options (both icons are shown below — you can find them at the bottom of the Tools panel while the Rectangle tool is still selected).

2.5 Click and start dragging your mouse to draw a rectangle. Make it any size you want.

2.6 Select the rectangle by clicking on it with the Selection tool (V). Go to the left side of the Property inspector and find the width and height options (W and H, respectively) for the shape. Enter 200 pixels for the width and 390 pixels for height.

2.7 While the rectangle is still selected, select Modify > Convert to Symbol. Make the following choices:

• Select Movie clip as type of symbol.
• Name the symbol menu holder.
• Select the upper left registration point for the new symbol (see image below).
• Click OK.

This last point is very important. You will do the same thing for every single symbol that you are going to create in this lesson. This is done in order to facilitate the positioning and resizing of elements on the stage via ActionScript (dynamically) later.

If you had made some other choice for the registration point, you would have had to know and use the width and height for each symbol to be able to position them properly. By selecting the upper left corner for the registration point, the positioning is pretty straightforward and there is no fuss at all.

2.8 Double-click on the newly made menu holder MovieClip on the stage (using the Selection tool) to enter inside it. If you take a look above the stage, you’ll see that Flash nicely informs you that you are working inside the menu holder MovieClip now.

2.9 The rectangle vector shape inside the movie clip should be selected by default. If this isn’t the case, click on it with the Selection tool (V) to select it.

2.10 Select Modify > Convert to Symbol. Once again, select Movie clip as type, choose the upper left corner for the registration point, call it menu mask and click OK.

2.11 The new MovieClip will be selected by default immediately after you have clicked the OK button in the previous step. Now go to the Property inspector and give an Instance name to this MovieClip: call it galleryMask_mc.

2.12 Lock the current layer and call it mask. Create a new layer and call it placeholder. Remember that all of this is done inside the menu holder movie clip — you are still inside it.

2.13 Go to the Library (Window > Library), click and drag an instance of the empty movie clip symbol onto the stage, inside the placeholder layer that you created a moment ago.

This movie clip has no graphical content, and so it is represented by its registration point only. This is the small circle with the cross inside it that showed up once you dragged the movie clip from the Library onto the stage. If ever in doubt which movie clip you are tinkering with, just look at the Property inspector while it is selected. You can see this in the screenshot below.

2.14 With the instance of the empty movie clip on the stage still selected, open the Align panel by selecting Window > Align. Do this:

• Turn on the Align/Distribute to Stage button (see 1 below).
• Click the Align left edge button (see 2 below).
• Click the Align upper edge button (see 3 below).

The empty movie clip will now be perfectly aligned with the menu holder movie clip’s registration point, as you can see.

This is just what you need, since this empty movie clip which you have just positioned will be the placeholder for all the menu buttons. That being said, you must prepare it properly to be able to load the buttons inside it later. Follow the next step to see how :-).

2.15 The empty movie clip must still be selected. Go to the Property inspector and enter the Instance name for this movie clip: call it buttonsHolder_mc.

2.16 Lock the placeholder layer and drag it under the mask layer.

2.17 Right-click on the mask layer and select the Mask option from the menu that pops up (also called the contextual menu). The mask layer will instantly turn into a mask, masking the placeholder layer beneath it.

2.18 Click on the Scene 1 link above the layers to go back to the main timeline.

2.19 The menu holder movie clip will be selected by default, which you can see in the Property inspector. Go right there and give at an Instance name: call it galleryMenu_mc.

You have probably noticed that this movie clip is almost invisible — it is represented by its registration point (see1 in the screenshot below) and central point (see 2) only. This is because the mask inside it isn’t visible, which is normal.

Fine — the menu is pretty much ready now, it can receive the buttons. But you have to actually make a button that is going to be pulled out of the Library at runtime (while the Flash SWF movie is running, that is) and placed inside the menu, as many times as there will be sections inside your gallery.

Top of page

3. Creating the menu button and setting it up for use at runtime

3.1 You should be on the main timeline now. Lock the gallery menu layer and create a new layer. You don’t have to gave any specific name to this new layer at all, because it will serve as a temporary layer only, to create the menu button specimen, after which you will remove it.

3.2 Select the Rectangle tool (R). The settings for this tool should have remained unchanged from the previous use of it: the stroke color (outline) should be blocked, the Object Drawing and Snap to Object options turned off.

You can select any color you like for the fill. I chose a nice hue of blue, #00789F. Now draw a 200 by 20 pixel rectangle anywhere on the stage. You can draw any rectangle at first and then set these exact dimensions in the Property inspector after.

These exact dimensions are important, especially the width, because the mask that you made in the previous section is also 200 pixels wide. They have to match (or the mask can eventually be a little wider than the button) if you want your menu to look professionally designed — clean and sharp.

3.3 Select the rectangle and choose Modify > Convert to Symbol. Select Movie clip as type, call it gallery section button and click OK.

A small note here: the movie clip that you just made is called gallery section button, although it is a movie clip. Don’t let that confuse you. I chose to give it such a name because it will in fact serve as a button. Why a movie clip then? Because a movie clip symbol is far more versatile and usable than a button — its possibilities of creation and manipulation are far greater than those of a button symbol. And even if in this particular project a button symbol would maybe serve as well as a movie clip for all purposes, I have just acquired a habit of making movie clips instead of buttons :-).

3.4 Choose the Selection tool (V) and double-click on the gallery section button movie clip on the stage, to enter inside it.

3.5 Call the movie clip’s first layer bkg (because this will be the button’s background).

3.6 Right-click on frame 2 in this layer and select Insert Keyframe from the contextual menu.

3.7 In the newly made keyframe, the rectangle will automatically be selected. Just change its color to some other of your choice — I used #7C3F52. Do this by clicking on the fill color square in the Colors section of the Tools panel, all the while the rectangle is selected.

Why was this done? Because you need to have a rollover effect for your menu to make it more user-friendly and easier to navigate. So that’s why you have to have two keyframes, with the same rectangle inside, but differently colored. You will enable this rollover visual change via ActionScript later.

3.8 Lock the bkg layer and make a new layer above it and call it label.

This new layer will automatically have the same timeline duration as the one below it (2 frames long), which is fine, because the label (the text that will appear on the button) must be visible in both states — the initial one as well as the rollover.

3.9 Select the Text tool (T). In the Property inspector, do the following choices and tweaks:

1. Select Dynamic Text.
2. Select a font that you like.
3. Select 14 as font size, or bigger if necessary. The important thing is that the text field’s height should approximately match the height of the rectangular background. You’ll see that once you make the actual text field, so you may need to re-adjust this value as necessary.
4. Select white for the text color — this choice will make the button labels visible in both states — initial and rollover.
5. Select the left alignment for the text field. It looks well, unlike the central alignment which would look awkward on this kind of menu and would also make things more difficult to read.
6. Select Anti-alias for readability in the rendering menu.
7. Make sure that the Selectable option stays turned off. If you turn it on, your menu buttons will suck royally and possibly won’t be clickable at all.
8. Make sure that Single line is selected. Multiline doesn’t make any sense for a text field inside a menu button, right?

3.10 Click and drag on the stage with the Text tool to create a dynamic text field. Create it over the button’s backround rectangle, so that the dimensions of the two approximately match. Hit Esc when finished and you’ll exit the text field and see a blue border appear around it.

3.11 Now go over to the Property inspector and type in the Instance name for your dynamic text field: call it sectionTitle_txt.

3.12 On the right side of the same panel, click the Embed button.

The Character Embedding window will open up. Select multiple character groups by Shift-clicking them: choose the Uppercase, Lowercase, Numerals and Punctuation options. Click OK.

Embedding the characters in the dynamic text field will ensure the continuity of design accross different platforms and operating systems. No matter if a user has your menu font of choice installed or not, he/she will see the exact same font, thanks to the embed option.

The four groups of characters that you have embedded in your dynamic text field will cover 99% percent of possible gallery names. Of course, you may choose to add any additional special and exotic characters if you wish so. Bear in mind that the embedding of these characters will add about 20-30 KB to your final SWF file.

3.13 Lock the label layer. Make a new layer and call it actions. You can lock this layer also, since ActionScript code can be placed inside it while it is locked too.

Click on the actions layer’s first frame to select it.

3.14 Open up the Actions panel by selecting Window > Actions. Enter the following code inside it:

stop();

This simple action prevents the playhead from going forward, as any animation in Flash naturally does. You will create programming code later that will move the playhead to the next frame while the user is over a particular button with his/her mouse, to create the rollover effect I told you about just a few steps before.

3.15 Fine! The button is finished now! Click on the Scene 1 link to go back to the main scene.

3.16 Delete the temporary layer inside which the button was created (Layer 2). This will delete the button from the stage too. You should have only the gallery menu layer on the main scene now. However, the gallery section button is stored inside the Library.

3.17 Go to the Library (Window > Library). Right-click on the gallery section button movie clip inside the Library and select the Linkage option from the contextual menu.

3.18 In the Linkage Properties window that appears, check the Export for ActionScript option. The Export in first frame option will automatically become checked too. You can leave it like that, it’s fine.

As for the Identifier option, you can also leave it at the default value, which is the name of the movie clip symbol itself — gallery section button in this case. Click OK.

The Identifier name will serve to pull the button dynamically from the Library and place it inside the menu that you have created on the previous page. This is very, very practical, because you will change just the images and the XML file once the SWF is finished.

This makes possible for dynamic menu creation, also thanks to the dynamic text field inside the button — each button will have its label match the section of the gallery it represents. Why create every single button manually, re-open the FLA, re-export it as a SWF when you can solve this with ActionScript and have the menu created in a split second!

You will now make the remaining elements, so that your photo galleries menu is complete. Namely, you will make two buttons for scrolling through the menu and a title that tells the users what’s the menu about. Before that, you’ll just position the galleryMenu_mc movie clip.

Save your document before proceeding to the next section of this lesson, where the creation of menu navigation buttons is explained.

Top of page

4. Making the menu navigation buttons

4.1 You have to select the galleryMenu_mc movie clip to be able to position it. Since this movie clip is almost invisible, it isn’t as easily selectable as any othe movie clip might be. Here’s how you do it (follow the pictures below the list):

1. Unlock the gallery menu layer.
2. Click on the layer’s first frame to select it.
3. The Property inspector tells you that a frame has been selected.
4. Once you select a frame, all the content inside it is selected too. Because of this, the movie clip you are looking for will appear. Click on the movie clip once with the Selection tool (V) to select it (you must click on its registration point since no other content of this symbol is visible).
5. The movie clip is selected, which is indicated in the Property inspector.

4.2 Enter the following values for the movie clip’s coordinates (inside the Property inspector): 10 for X and 99 for Y.

Fine. Let me show you now how to create a couple of sleek navigational buttons.

4.3 First, make a line that will separate the menu buttons from the menu navigation. Select the Line tool (N). In the Property inspector, select black for the line color and hairline for the line thickness.

4.4 Hold down Shift on your keyboard, click with your mouse somewhere above the galleryMenu_mc movie clip and draw a horizontal line. Holding Shift will enable you to make a perfect horizontal line. You can select the line later and position it via the Property inspector. Also, make it as wide as the menu, to have a more coherent and professional design.

4.5 Select the Rectangle tool (R). Go to the Options part of the Tools panel and make sure that both the Object Drawing and Snap to Objects options are turned off (see 1 and 2 on the screenshot below).

Next, click on the Set Corner Radius button (see 3 above). In the Rectangle settings window that will show up, enter 7 as the corner radius value, then click OK. This will enable you to draw rectangles with smooth, rounded corners.

4.6 Go over to the Color Mixer panel (to access it, select Window > Color Mixer, although it is probably open already, by default). Block the stroke color and make a nice bluish-turquoise linear gradient for the fill color, like this:

1. Click the small pencil icon.
2. Click the little square next to it and select the No Color option (the white square with the red diagonal line).
3. Click the paint bucket icon to select the fill color.
4. Select the Linear option in the Type menu.
5. Click on the left color (the small square) in the gradient stripe to select it.
6. Enter the hexadecimal code for this color: I chose #00789F.
7. Repeat the two previous steps for the right-side color: select it and enter #81E6FE as its code.

4.7 Hold Shift (to draw a square and not a rectangle), click on the stage and draw a 29 by 29 pixel square.

This square looks nice, but since it is a navigational element, I think that it would look much better if the gradient spreads from top to bottom instead from left to right. Follow the next step to see how to do this simple modification.

4.8 Select the Gradient Transform Tool (F). Turn on the Snap to Objects option in the Tools panel. Now, rotate the graident like this:

1. Click on the square that you drew in the previous step to select it. The controls for gradient modification will appear.
2. Click the circle with the small black arrow in it and start dragging your mouse counter-clockwise.
3. Once you reach a 90-degree turn, release your mouse button. There!

4.9 Select the Selection tool (V) and turn off the Snap to Objects option. Click on the gradient-filled square to select it.

4.10 Select Modify > Convert to Symbol to make a symbol out of this square. This time, select Button as type (not Movie clip), call it scroll menu down and click OK.

4.11 Double-click on the newly made scroll menu down button on the stage to enter inside it. Once inside the button’s timeline, lock the first layer and call it bkg. Make a new layer above it and call it arrow.

4.12 Draw a white arrow that is pointing downwards, inside the arrow layer.

You can do it easily like this (see the sequence of images below):

1. Using the Rectangle tool (R), draw a square (I made a 19 by 19 pixel square).
2. Choose the Selection tool (V) and bring your cursor near the square’s upper right corner. A small right angle will appear near your cursor.
3. Click and drag your mouse toward the square’s center. Once your cursor is near the center, a circle will appear, indicating that it is ready to snap into place.
4. Release your mouse button and you’ve got yourself a nice triangle.
5. Select the Free Transform Tool (Q) and rotate the triangle by 45 degrees counter-clockwise. There! You have the arrow for your button now.

Note that I have used the blue color just to show you how it’s done. You can use any color you want while making the triangle — once you move it over the button’s background, change its color to white.

4.13 Add a third layer inside the button and call it label.

4.14 Select the Text tool (T) and change the type of text field to Static Text in the Property inspector. Click somewhere over the button’s background area and type DOWN.

As you can see above, I chose a pixel font for the label (it looks cool). If you do the same, be sure to set the rendering option to Bitmap text, which is the best for pixel and bitmap fonts. Also, most pixel fonts have to be typed with a font size of 8, to render properly and sharply.

4.15 Click the Scene 1 link to go back to the main scene, because the button is complete now.

4.16 Assign an Instance name to this button because you’ll need to manipulate it via Actioncript later. Name it menuDown_btn.

Place this button above the thin line, on the right.

Now you need to make the second button, for scrolling the menu upwards. This one is going to be easy to do, because you’ll just clone the existing button and make a few modifications.

4.17 Go to the Library. Find the scroll menu down button symbol, right-click on it and select Duplicate from the contextual menu.

In the Duplicate Symbol dialog that appears, enter scroll menu up as the new symbol’s name, leave the other options as they are and click OK.

4.18 Double-click on the newly made scroll menu up button symbol inside the Library to acces its timeline. Once inside, unlock the arrow layer.

4.19 Select the triangular arrow shape in this layer. Now select Modify > Transform > Flip Vertical. The arrow will now point upwards, thanks to the flipping you did. Also, Change the static text from DOWN to UP. Remember, these changes will not affect the first button you made, because the duplicated scroll menu up button is an independent symbol, not linked to any other one in any way.

4.20 Click on the Scene 1 link above the timeline to exit the button’s timeline and to return to the main one.

4.21 Click on the scroll menu up button inside the Library once, hold your mouse button and drag out an instance of it out onto the scene. Place it next to the scroll menu down button, like shown below.

4.22 Select the “UP” button and assign it an Instance name: call it menuUp_btn.

4.23 Add some text near the buttons, so that the users actually know what’s the menu about — don’t leave anyone guessing. Do this with the Text tool (T) set to Static text.

4.24 Lock the gallery menu layer.

That’s it for the menu! You have completed it.

Top of page

5. Creating the image placeholders

5.1 Create a new layer and call it images holder.

5.2 Drag out an instance of the empty movie clip symbol from the Library into this new layer. As this movie clip is completely devoid of any graphical content, it is shown as a registration point only.

Assign an Instance name for this important movie clip into which all images will be loaded: name it imagesHolder_mc. Position it like this: set its X to 260 and Y to 100.

This will place the imagesHolder_mc movie clip close to the menu, on its right, like shown below.

When the overal dimensions of the movie are taken, this is a good position. I had a general idea about the gallery’s layout, but I arrived at this final dimensions and positions through the creation process itself. As I said, you can change these dimensions to suit you as you please later, just stick with them now, until you complete this lesson. The same goes for the placement of the elements: the menu doesn’t necessarily have to be on the left, vertically positioned, etc. I just made these choices for this tutorial.

5.3 Make a third layer. You will create two movie clips here that will be present inside the Library only (for dynamic use, like the menu section button that you have made earlier). After they are complete, you will erase them from the stage and assign them identifiers in the Library to be able to use them via ActionScript later.

5.4 Select the Rectangle tool (R), use white for the fill color and black for the stroke color. Select hairline for the line type. Make sure that Stroke hinting is turned on.

5.5 Draw a 88×61 pixel rectangle on the stage. This will be the background for gallery thumbnails that will be loaded later.

Again, I chose these dimensions because they suit me for this tutorial. You may chose other dimensions. What is important is that you should create thumbnails with appropriate dimensions in Photoshop (or Fireworks) later. To obtain a nice appearance for your thumbnails, I suggest that you make them a little bit smaller than the rectangular backgound that you have just created. The white background being 88×61 pixels, I decided to make my thumbnails 81×54 pixels.

5.6 Select the rectangle that you just drew (both the outline and the fill). Then select Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type (be careful not to choose the Button type, as it may have stayed from before), call it thumbnail holder and click OK.

5.7 Double-click on the newly made movie clip to enter it. Lock the first layer and call it bkg. Make a new layer and call it image holder.

5.8 Click and drag out and instance of the empty movie clip from the Library and into the image holder layer. In the Property inspector, give it the Instance name thumbImage_mc and position it so that both its X and Y coordinates are 4. You can see the movie clip below (its registration point), over the rectangle’s upper left corner.

5.9 Lock the image holder layer and make a new layer above it and name it text.

This is the layer where you’ll be placing a dynamic text field, so that a numerical (percentage) preloader can be displayed while the thumbnail is loading. Making a preloader for thumbnails is a nice thing: you give your users all the information about loading, even for such small images. This also covers the slow-speed modem users, by telling them how much they must wait before everything is loaded.

5.10 Select the Text tool (T). Set its properties like this:

1. Use Dynamic Text, which is understandable, since this text field will show the preloading process via some ActionScript code.
2. Select the same font type that you did before, to have a coherent design for your gallery.
3. Select an appropriate font size — I chose 14 for the button labels before so I did the same here.
4. Select black as the color, to be highly visible against the thumbnail holder’s white background.
5. Select left text alignment.
6. Choose Anti-alias for readability.
7. Like in most cases in this tutorial, make sure that the Selectable option stays turned off.
8. The Single line option should be used for this text field.

5.11 Click and drag your mouse to make a text field. Press Esc on your keyboard to exit the text field edit mode. Go to the Property inspector and give your text field an Instance name: call it percent_txt. Position it in the middle of your thumbnail holder movie clip.

Now, click the Embed button (it’s on the right side of the Property inspector when the text field is selected). Do the following:

1. Select the Numeral option (you need all the numbers, since this is a percentage preloader). See 1 in the scrrenshot below.
2. Click inside the input field below the Include these characters text and type the percentage sign (%) inside it (see 2 in the screenshot below).
3. Click OK.

Having the characters of the specific font you selected embedded inside your text field assures the coherence of your design and makes sure that all users will see the same thing.

5.12 Lock the text layer and click on the Scene 1 link to return to the main scene.

5.13 Erase the thumbnail holder movie clip from the scene.

5.14 Go over to the Library and find the thumbnail holder movie clip inside it. Right-click on it and select the Linkage option. Check the Export for ActionScript option (this is what enables you to pull out the movie clip from the Library dynamically). The Export in first frame option will automatically become checked. Leave the Identifier as it is: thumbnail holder. Click OK.

There! Your thumbnail holder movie clip symbol is now ready to be used by ActionScript. Specifically, you will use the attachMovie() method in your code later to pull this symbol from the Library and place it on the stage.

Now that the thumbnail holder is complete, you will create a similar but slightly different holder for the images — the big ones that will be loaded as a user clicks on a thumbnail. You will follow the same procedure as you did for the thumbnail holder movie clip.

5.15 Select the Rectangle tool (R). Draw a 475×317 pixel rectangle using the same options that you did in step 5.4.

5.16 Select the rectangle (both its fill and outline) and press F8 (or select Modify > Convert to Symbol) to convert it into a symbol. Select Movie clip as type, call it big image holder and click OK.

5.17 Double-click on the big image holder movie clip on the stage to enter inside it. Call the first layer bkg and lock it. Make a new layer above it and call it image holder.

5.18 Click and drag out an instance of the empty movie clip symbol out of the Library and into the new layer (image holder) that you made in the previous step. Make the following adjustements:

1. Give the movie clip an Instance name: call it imageHolder_mc.
2. Make both the X and Y coordinates of the movie clip equal 4.

The empty movie clip is represented by its registration point, since it contains no graphics at all (which is normal, because it will be used to load external JPEG images). I have marked it with a red arrow in the screenshot below so that you can more easily see it.

This movie clip is placed near the background rectangle’s upper left corner. This is a fine position for the JPEG image that will be loaded — its upper left corner will cooincide with the registration point of empty movie clip. You could reposition it later with ActionScript if you want, but I think there is no need to do that. This position is just fine.

5.19 Lock the image holder layer and make a new one and call it text. You will place a dynamic text field for the preloader here, just like you did for the thumbnail holder.

5.20 Select the Text tool (T) and choose the same options as you did with it in step 5.10., change only the font size — increase it more than twice. I chose 30.

5.21 Click and drag to create a text field. Place it over the middle of the big rectangle. It should be large enough for three numbers and the percentage sign to show inside it. Press Esc to exit the text field. The Instance name for this text field can be the same as it was for the thumbnail holder (percent_txt), since these are two different movie clips and there will be no conflicts.

You need to embed the appropriate characters in this text field too:

1. Click the Embed button in Property inspector.
2. Select the Numerals option and insert the % character where appropriate, just like you did in step 5.11.
3. Click OK.

5.22 Lock the text layer and click on the Scene 1 link inside this movie clip to exit it. Once on the main stage, erase this movie clip from it.

5.23 Find the big image holder movie clip inside the Library and right-click on it, then select Linkage from the context menu. Click the Export for ActionScript option to check it, leave the Identifier as big image holder and click OK.

Save your work now if you haven’t already done so! Make this a habit, but especially in long projects like this one. Proceed to the next section to see how to create a text field where gallery and image descriptions will appear.

Top of page

6. Creating a text field for gallery and image descriptions

6.1 You should be on the main scene (timeline) now. Call the current layer (the one which you used to create the image placeholders) description text.

6.2 Select the Text tool (T). This time, you will select different options than you did for the percentage preloaders inside the image placeholders. Select:

1. Dynamic text, of course.
2. Choose a font that is readable. Avoid exotic fonts.
3. Choose a size that is suitable for reading. Font sizes 11 or 12 work just fine.
4. I suggest that you select black for the color of your text, to have a good contrast with the white background and make the text easy to read.
5. Select left alignment. You may also select the Justify option. Avoid right or central alignment - this is never used in a “normal” text — that is, text that isn’t a title or a link, but a standard paragraph.
6. Select Anti-alias for readability (you will have to embed the characters because of this later).
7. You can either turn on or off the Selectable option — this is entirely up to you, whether you’ll enable your users to select the description text or not.
8. Make sure to choose the Multiline option, as your descriptions may be several lines long, you never know, right? Better to make sure :-).

6.3 Click on the stage and drag your mouse to create a text field. Hit Esc to exit the text field editing mode. Your text field’s dimensions should be about 475×100 pixels. Also, pay attention to its position: try to align it with the image placeholder and think about how much space will take an image once it’s loaded. In the screenshot below you can see the position and dimensions of the text field.

6.4 Assign an Instance name to the text field to be able to manipulate it later via ActionScript: call it desc_txt.

6.5 Click the Embed button while the text field is selected to include the necessary characters in it and have nice, readable descriptions which are going to be nicely rendered: select the Basic Latin category and click OK.

The last (yes, the last one, indeed thing that you need to create in this document is your logo. After that, the things that remain to be done are the external XML file, the folders with their respective photos and thumbnails and lastly, the magnificent ActionScript code that will make possible for the whole thing to work.

Top of page

7. Making the logo

7.1 Lock the description text layer and make a new layer and call it logo.

7.2 Now, this is just a suggestion fo the logo. You can make any kind of logo/header that you like, but I recommend that you follow my proposals here, just to be able to follow this tutorial more easily.

Select the Rectangle tool (R) and draw a 700 by 40 pixels rectangle. Place it above the gallery menu. I have also drawn a thin white line through the lower part of the rectangle and changed the fill color of the lower part.

7.3 Select the Text tool (T) and switch the type of the text field to Static text. Click and type anything you want over the rectangle.

7.4 Select the whole logo — both the rectangle and the text — and then choose Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type, call it logo and click OK.

7.5 While the newly made logo movie clip symbol is selected on the stage, go over to the Property inspector and assign it an Instance name: call it logo_mc. Also, you can set both of its coordinates to 10.

You could have left the logo as it is without having to convert it into a movie clip symbol. But having a movie clip enables you to position it via ActionScript later if needed — you won’t need to do that manually, which is much more practical.

7.6 Lock the logo layer and make a new layer and call it actions.

You won’t be entering any ActionScript code here right now. First you have to have an XML file where all the gallery data will be stored, some images and an exact folder hierarchy. So let me show you how to do all that before the coding part comes up. Before that, save your document!

Top of page

8. Creating the XML file with image galleries data

8.1 First, download the XML file that I created for this tutorial.

Before I tell you how this XML file will relate to your image galleries, the folders they are in, etc, I just want to say that I won’t explain the principles of XML and its interaction with Flash here, because I already made a detailed explanation of XML in my Hangman game tutorial, and there is no sense repeating it if it’s already written, right?

If you’re not familiar with XML, I heartily recommend that you go and read the rules of XML and how Flash loads and parses XML data, before proceeding.

So, the XML file that you have just downloaded looks something like this (I haven’t displayed the whole file here for the sake of brevity and screen real estate):

<?xml version="1.0"?>
<galleries>
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
<image>Dallas.</image>
<image>Tresnjevka. I love the atmosphere on this one.</image>
<image>Motovun.</image>
<image>New York.</image>
<image>Paris.</image>
</gallery>
<gallery title="essays" intro="A collection of various photos which either do not fit any other category - experiments and such.">
<image>Color mayhem!</image>
<image>The sleeping monster.</image>
<image>Let me out!</image>
<image>A barrel on the side of the trail.</image>
<image>Subterranean passage.</image>
<image>A train in snow.</image>
</gallery>
</galleries>

After the XML declaration comes the root node, of course. I chose to call it galleries. Within this, root node, every other bit of data is contained.

<galleries>
…
</galleries>

Every child node of the root node is called gallery. I chose to give each of these child nodes the same name (gallery) on purpose. You will see later why (when I’ll explain the ActionScript code) — this is related to parsing the XML data.

<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
…
</gallery>

Each gallery node has two attributes inside it: title and intro. I chose these names because I think they are logical: the first one refers to the title of each gallery and the second one tells the user what’s the gallery about. Remember, you may call your attributes any way you like, as long as you stick to the rules of XML.

The title attribute is very important: its value (between the quotation marks: title="architecture“) has a special functionality:

• It will appear on this particular gallery’s button in the gallery menu — it will become a button label.
• This value is also the name of the folder inside which the images belonging to this particular gallery will be stored.

So, as you’ll see a little bit later, the values of these attributes will have to be followed strictly, because the application will be made as a case-sensitive one. This means that the name of a folder must be exactly the same as the value of the title attribute for a particular gallery. If, as in the above example, the value of the title attribute for a gallery is essays, the name of the folder must be essays too. It cannot be Essays or ESSAYS.

The value of the attribute intro will be displayed inside the big dynamic text field below the thumbnails when the user clicks on any of the gallery buttons inside the menu. Once he chooses a gallery, the thumbnails will be loaded and displayed and the description text will be shown beneath them.

<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">

So, the intro text can be anything you want. And it has no relation with the naming of the folders and galleries. It just describes a particular gallery.

Now, each gallery node has many child nodes, each of which is called image. Again, I chose to give them all the same name on purpose, because this will enable Flash to parse the XML data much more efficiently, and will save you a lot of trouble.

<image>A barrel on the side of the trail.</image>

Between the opening and closing tags of each image node, there is a child node, which is in fact the description of the image. This description will appear in the big text field when the user clicks on a thumbnail and the big image starts to load.

And that would be it concerning the XML file.

Top of page

9. Creating the folder structure for the image gallery

9.1 As the first thing, you should have a separate folder (directory) inside which all the files that make up your gallery will be stored (SWF, HTML, XML, images). For the sake of simplicity, I chose to call this folder root.

As you can see in the screenshot below, both the SWF file (the one you are learning to create in this lesson) and the HTML page inside which it will be embedded should be placed inside this main (root) folder.

9.2 Also, create a new folder inside the root folder and call it gallery.

I chose to call the page mypage.html and the SWF file imagegallery.swf. You can call them as you like. It is the gallery folder that must have that exact name, because you will be using it in ActionScript later.

Of course, you can choose other file/folder placements, but I strongly recommend that you follow the one explained here, not only because you need it to complete this lesson, but also because I think that this folder hierarchy and structure is really one of the simplest and most easiest to use. Thanks to it, you will be able to modify or update your image gallery in a snap!

9.3 The XML file that you have downloaded earlier must be placed inside the gallery folder. This file should be named gallery.xml.

Also, the gallery folder will contain all the sub-galleries: different sections of your image gallery, which will correspond to the menu buttons.

What’s very important, I repeat it again, is that these subfolders must have the same names as they are defined inside the XML file. Otherwise, Flash won’t be able to find the folders if there are differences between them. They must match perfectly, including uppercase and lowercase letters.

9.4 Each gallery subfolder (like architecture, essays, etc in the above example) will contain the big images, the ones that are loaded and show up once a user clicks on a thumbnail.

These images should be named 1.jpg, 2.jpg, 3.jpg… In short, each image name is a number.

The numbers must follow the natural order, i.e. if you happen to dislike an image and want to remove it from the gallery, you should rename the other ones so that the order remains unbroken. For example, look at the screenshot above. If you want to remove the image 3.jpg, you should rename 4.jpg to 3.jpg and 5.jpg to 4.jpg. This is important because of two things:

1. Flash will load the exact number of images as there are inside the XML file.
2. The images will be looked for and once found, loaded in a sequential order — the thumbnails, and after that, the corresponding big image, for each thumbnail.

9.5 Here is what you should do to have the thumbnails load and display properly for each gallery:

1. The thumbnails for each image gallery section must be placed in a folder called thumbs. Each gallery section must have such a folder inside itself.
2. The number of thumbnail images must match the number of big images.
3. The thumbnails must have the same file names as their bigger counterparts. So, for example, the thumbnail, for say, image 14.jpg should also be called 14.jpg.

The screenshot below shows the maximum number of thumbnails for a single gallery section.

A small reminder: for this project, the big images should be resized/cropped to 469×311 pixels. The thumbnails should be made to be 81×54 pixels. Again, I repeat, this suits this particular project you are learning to create right now. Once you get hold of how things function, make any other Flash image gallery system. And post a comment with a link to it, I’d love to see it!

And this wraps it up for the file/folder hierarchy. The last, and probably one of the most important things, is the ActionScript programming code that powers up the gallery.

Top of page

10. Inserting the ActionScript code

10.1 Go back to your document. Lock the actions layer and click on its first keyframe to select it. As you may already know, a layer does not have to be unlocked for you to be able to insert ActionScript code inside it. In fact, I always lock the layer where my code is contained, to minimize errors — not to insert any graphics in it by mistake.

10.2 Select Window > Actions to open the Actions panel.

10.3 Insert the following ActionScript code inside the panel:

var menuSpeed:Number = 6;
var menuDown:Button = menuDown_btn;
var menuUp:Button = menuUp_btn;
menuUp._alpha = 0;
menuUp.enabled = false;
var firstLook:Boolean = true;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
galleryMask._height = 391;
var imagesHolder:MovieClip = imagesHolder_mc;
var descText:TextField = desc_txt;
var imagesInGallery:Array = new Array();
var galleryNames:Array = new Array();
var galleryIntros:Array = new Array();
var descriptions:Array = new Array();
var tracker:Number = new Number();
var whatIsLoading:String = new String();
var galleryBtnLeftMargin:Number = 10;
var galleryBtnUpperMargin:Number = 60;
var galleryBtnVSpace:Number = 23;
var thumbMarginX:Number = 96;
var thumbMarginY:Number = 68;
imagesHolder._x = 243;
imagesHolder._y = galleryBtnUpperMargin;
logo_mc._x = logo_mc._y=galleryBtnLeftMargin;
desc_txt._x = 243;
desc_txt._y = 400;
descText.text = "Click on a gallery name on the left to load its thumbnails. Remember, you can click on a thumbnail only when all the thumbnails in a gallery have been loaded. When you click on a thumbnail to see the big image, clicking on the big image will close it and you will return to the gallery. Use the button(s) above the galleries to scroll through them.";
import flash.filters.DropShadowFilter;
var shadowEffect:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 100, 3, 3, 1, 3);
var thumbsFilter:Array = [shadowEffect];
var loader:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
loader.addListener(myListener);
myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}
};
myListener.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number) {
percent = Math.floor(loaded/total*100);
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";
} else if (whatIsLoading == "big") {
displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";
}
};
var imageGallery:XML = new XML();
imageGallery.ignoreWhite = true;
imageGallery.onLoad = function(success) {
if (success) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn’t load.";
}
};
imageGallery.load("gallery/gallery.xml");
function parseGalleries():Void {
if (imageGallery.firstChild.nodeName == "galleries") {
var rootNode:XMLNode = imageGallery.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "gallery") {
currentGallery = rootNode.childNodes[i];
imagesInGallery.push(currentGallery.childNodes.length);
galleryNames.push(currentGallery.attributes.title);
galleryIntros.push(currentGallery.attributes.intro);
currentGalleryTitle = rootNode.childNodes[i].attributes.title;
currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.attachMovie("gallery section button", "galleryButton"+i, galleryMenu_mc.buttonsHolder_mc.getNextHighestDepth());
currentGalleryButton._x = 0;
currentGalleryButton._y = galleryBtnVSpace*i;
currentGalleryButton.sectionTitle_txt.text = "0"+(i+1)+" "+currentGalleryTitle.toUpperCase();
for (j=0; j<currentGallery.childNodes.length; j++) {
if (currentGallery.childNodes[j].nodeName == "image") {
currentDescription = currentGallery.childNodes[j].firstChild.toString();
descriptions.push(currentDescription);
}
}
}
}
}
numberOfGalleries = i;
enableButtons(numberOfGalleries);
}
function enableButtons(numberOfGalleries:Number):Void {
for (i=0; i<numberOfGalleries; i++) {
pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];
pressedButton.onRollOver = function():Void {
this.gotoAndStop(2);
};
pressedButton.onRollOut = function():Void {
this.gotoAndStop(1);
};
pressedButton.onPress = function():Void {
removeMovieClip(thumbsDisplayer);
removeMovieClip(displayBigImage);
tracker = 0;
thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());
clickedGallery = Number(this._name.substr(13));
howManyImages = imagesInGallery[clickedGallery];
whichGallery = galleryNames[clickedGallery];
descText.text = galleryIntros[clickedGallery];
currentRow = 0;
currentColumn = 0;
loadThumbnail();
};
}
enableGalleryNavigation();
}
function loadThumbnail() {
currentThumbnail = thumbsDisplayer.attachMovie("thumbnail holder", "thumbnail"+(tracker+1), thumbsDisplayer.getNextHighestDepth());
target = currentThumbnail.thumbImage_mc;
if ((tracker%5) == 0 && tracker != 0) {
currentRow += 1;
}
if (currentColumn>3) {
currentColumn = 0;
} else if (tracker == 0) {
currentColumn = 0;
} else {
currentColumn += 1;
}
currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;
currentThumbnail.percent_txt._visible = true;
thumbNumber = currentThumbnail._name.substr(9);
thumbPath = "gallery/"+whichGallery+"/thumbs/"+thumbNumber+".jpg";
whatIsLoading = "thumb";
loader.loadClip(thumbPath, target);
}
function thumbClickable():Void {
currentThumbnail.onPress = function() {
bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());
target = displayBigImage.imageHolder_mc;
bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
whatIsLoading = "big";
disableThumbs();
loader.loadClip(bigImagePath, target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i<clickedGallery; i++) {
descPosition += imagesInGallery[i];
}
descPosition = descPosition+Number(bigNumber)-1;
imageDesc = descriptions[descPosition];
} else {
imageDesc = descriptions[Number(bigNumber)-1];
}
descText.text = imageDesc;
};
currentThumbnail.enabled = false;
}
function disableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
}
}
function enableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = true;
}
}
function bigClickable():Void {
displayBigImage.onPress = function() {
removeMovieClip(this);
enableThumbs();
descText.text = galleryIntros[clickedGallery];
};
}
function fadeIn():Void {
target.onEnterFrame = function():Void {
this._alpha += 10;
if (this._alpha>=100) {
delete this.onEnterFrame;
this._alpha = 100;
}
};
}
function enableGalleryNavigation():Void {
menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
}
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
}

Yep, this a really big piece of ActionScript code! More than 230 lines of it! Now save your work and go onto the next section to see how to test your SWF movie and to understand all this programming code.

Top of page

11. Testing the image gallery

11.1 Before testing your gallery, check if all the elements are in place:

• The images, along with their thumbnails, placed in appropriate folders.
• The XML file, with all the elements, some of which must match gallery folders’ names.
• The Flash document (.fla file) your currently working on, must be saved in the appropriate place.

11.2 Select Control > Test Movie. The gallery menu should appear, with each of the sections buttons having its label. Click on them and see if everything loads properly: the thumbnails, and then the big images as you click on each thumbnail.

11.3 You should check now if the preloader works: still in the SWF preview window, select View > Download Settings > 56K and after that View > Simulate Download.

You will see a blank screen for a short period of time, because you have just made Flash simulate downloading from the Web, to see the preloader in action. When I say preloader, I mean the one for the images, because this gallery hasn’t got its own, main preloader — it’s easy to create one, if you want to know how, just check out my preloader tutorials. I won’t delve into that here, because I want to concentrate on the image gallery.

So, once the gallery has appeared, try clicking on a section button — you should see the preloader for each thumbnail appear, and if you click on a thumbnail, the big image should begin preloading. Each image may take a bit to load, because you have chosen the simulated download setting for one of the slowest connections — a plain 56K modem.

Fine. Let me explain you now the almighty ActionScript routines that are responsible for this image gallery working so nicely.

Top of page

12. The ActionScript code behind the image gallery explained

I will explain you the ActionScript programming code by section, for easier understanding. The code consists of the following parts:

1. Defining variables and positioning the main gallery elements
2. Importing the DropShadow filter
3. Creation of the MovieClipLoader and Listener objects and the functions that enable preloading
4. Loading XML
5. Parsing XML
   • Retrieving gallery data (titles and descriptions)
   • Creating menu section buttons dynamically
6. Defining the functionality of the menu section buttons
   • Enabling the display of the roll over and roll out states
   • Defining which thumbnails shall be loaded
7. Thumbnail positioning and thumbnail preloading
8. Defining the functionality of the thumbnails
   • Big image preloading
   • Disabling the thumbnails while the big image is preloading
   • Selecting the right description for the chosen image
9. Making the big image clickable
10. Fading in the loaded big image
11. Creating the scrolling functionality for the gallery sections menu

Let’s start!

12.1 Defining variables and positioning the main gallery elements

As you can see, some of the variables here are created to serve as shortcuts to various movie clips, buttons and text fields:

var menuDown:Button = menuDown_btn;
var menuUp:Button = menuUp_btn;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
var imagesHolder:MovieClip = imagesHolder_mc;
var descText:TextField = desc_txt;

This is done in order to reference them more easily and to do it a lot more faster. For example, imagine if you wanted to point to the menuDown_btn button from a galleryMask_mc movie clip’s event handler. Without the shortcut, you would have to do it like this:

this._parent._parent.menuDown_btn

But when you have defined the variables as you did above, so that they serve as references to various objects in your SWF movie, all you have to do is write them and Flash instantly knows what movie clip or button you’re talking about, no matter where you reference it. So, instead of writing the above path, all you do is write menuDown and that’s it!

And of course, when you are referencing a Movie clip symbol, you have to define the variable which serves as its shortcut as a Movie clip type of variable:

var imagesHolder:MovieClip = imagesHolder_mc;

In a similar way, variables that reference buttons must of the Button type, and of the TextField type for text fields.

Next, the speed at which the menu will scroll is defined, in the variable menuSpeed. This value will be used later, when the scrolling of the menu is going to be defined.

var menuSpeed:Number = 6;
menuUp._alpha = 0;
menuUp.enabled = false;

As you can see above, the menuUp button, which is used to scroll the menu upwards is first made invisible by turning its _alpha (transparency) property to 0 (zero) and then disabled by setting its enabled property to false.

Why is this done? To simply turn off and make invisible the button, not to confuse your users. I have done a little bit of testing and people told me that they don’t know which button to press in the beginning. Since the menu can only be scrolled downwards at first, it makes sense to remove the menuUp button. This also removes any confusion. So, later you’ll see the explanation for the code that makes the button in question appear, but only once a user has clicked on the menuDown button.

The variable firstLook is of the Boolean type, which means that its value can equal only true or false. This variable will help Flash determine if the user is using the gallery section menu for the first time. You’ll see it later: If the user is indeed using the menu for the first time — by pressing the menuDown button, the menuUp button will appear and become enabled (clickable). After that, the firstLook variable’s value will be set to false, because once the button for scrolling the menu up appears, there is no need and sense to do it again.

var firstLook:Boolean = true;

After that, the height of the galleryMask movie clip is set via the _height property of the Movie clip class. This value is expressed in pixels. I have set it to 391 pixels, because I have found that this value is fine for showing up a certain number of gallery section buttons. It just looked good to me, after some experimentation.

galleryMask._height = 391;

See now why it’s fine to make a movie clip out of a mask? You can easily readjust its dimensions via ActionScript — there is no need for you to go back inside the gallery menu movie clip each time that you want to change it, select the mask, resize it manually, etc. With ActionScript, the change is done in a snap!

Now come four variables of the Array type. An array is like a big variable: it can store many values, be those values of the Number type, String (text) type or something else. Think of them as of filing cabinets, where each drawer contains a value. They are perfect for storing many values, which will be used later at different points in your code.

var imagesInGallery:Array = new Array();
var galleryNames:Array = new Array();
var galleryIntros:Array = new Array();
var descriptions:Array = new Array();

They serve to contain the following values:

• The imagesInGallery array will store the information on the number of images in each gallery section.
• The galleryNames array will keep the names (titles) of the sections of your image gallery. If you recall, these are the names of the folders of different gallery sections, which are exactly the same as the values of the title attributes of gallery nodes inside your XML file.
• The galleryIntros array will store the descriptions for each gallery section. These are the values of the intro attributes belonging to each gallery node in your XML file.
• The descriptions array will store inside itself the textual description for each image in your gallery, which is going to be pulled out from the XML file too.

All of these arrays will be populated (filled with data) during the XML parsing process, which is explained later.

The tracker variable is of the Number type (which means it stores numerical values) and it will serve to keep track of the number of thumbnails when user has clicked on a gallery section and will also serve to place the thumbnails correctly and evenly into rows.

var tracker:Number = new Number();

The whatIsLoading variable is of the String type (meaning it will contain text values). This variable’s value will serve to tell Flash if the image that is being loaded is a thumbnail or a big image and to react appropriately in each case.

var whatIsLoading:String = new String();

The variables that follow serve to position different elements of your gallery on the stage:

var galleryBtnLeftMargin:Number = 10;
var galleryBtnUpperMargin:Number = 60;
var galleryBtnVSpace:Number = 23;
var thumbMarginX:Number = 96;
var thumbMarginY:Number = 68;
imagesHolder._x = 243;
imagesHolder._y = galleryBtnUpperMargin;
logo_mc._x = logo_mc._y = galleryBtnLeftMargin;

The galleryBtnLeftMargin and galleryBtnUpperMargin variables hold the values that serve to position the imagesHolder movie clip (which will contain all the thumbnails and big images, once they load) and also to position the logo. The variable called galleryBtnVSpace determines the vertical space between each of the section buttons inside the gallery menu. If you remember, the height of this button was made to be 20 pixels, so adding three more pixels should be just fine. The thumbMarginX and thumbMarginY variables’ values determine the spacing between thumbnails of each gallery section.

Next comes the positioning of the big dynamic text field, referred to as desc_txt…

desc_txt._x = 243;
desc_txt._y = 400;

…or using the shortcut (see above), descText. Below is the text that will appear when the gallery loads and there hasn’t been any interaction with it yet from the user. You must give your users some guidelines for them to be able to use your image gallery more easily.

descText.text = "Click on a gallery name on the left to load its thumbnails. Remember, you can click on a thumbnail only when all the thumbnails in a gallery have been loaded. When you click on a thumbnail to see the big image, clicking on the big image will close it and you will return to the gallery. Use the button(s) above the galleries to scroll through them.";

Of course, you could have devised a graphical element to do this: for example, to give a hint that the big image will close once clicked upon, a “close” button with a small x inside it could be made to show up. There are always many ways to improve your user’s experience. Choose what works best and what you think goes well with your gallery’s overall design.

Top of page

12.2 Importing the DropShadow filter

I decided to apply the DropShadow filter to the thumbnails to make them even nicer. The first thing that you must do before applying a filter to an object inside Flash is to import it. When you do this, Flash reads from your disk (specifically, from a folder within the Flash installation) and inserts all the needed code for a particular filter into your SWF movie. Then it can be used and applied, once the importation has been made.

import flash.filters.DropShadowFilter;

After that, a variable of the DropShadowFilter type is created.

var shadowEffect:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 100, 3, 3, 1, 3);

The values between the parenthesis are as follows: distance, angle, color, alpha, blurX, blurY, strength and quality. They are pretty much self-explanatory. After that, you add the shadowEffect variable which contains the filter to the thumbsFilter array, which will then be applied to the thumbnails.

var thumbsFilter:Array = [shadowEffect];

For a more detailed explanation of how a filter in Flash works and why you need to create an array that will contain it, check out my tutorial on the use of the blur filter in Flash.

12.3 Creation of the MovieClipLoader and Listener objects and the functions that enable preloading

If you wish to preload external JPEG images into Flash across all browsers, the best method available is the one that uses the MovieClipLoader object. This particular object is specifically made for external content loading. It is great and you will use it to load and preload both the thumbnails and the big images! Here’s how it works:

1. The first thing that you must do is create an instance of the MovieClipLoader object. I chose to call the variable which will contain it loader.

var loader:MovieClipLoader = new MovieClipLoader();

1. Then, you need to make a listener object, which can be a movie clip or an Object object (a generic object, let’s say so). It will listen to what the MovieClipLoader object is doing and will react when things start happening: for example, when the loading is started by the MovieClipLoader or is in progress, the listener is aware of that and reacts by running specific functions (which will, for example, tell Flash how much has been loaded, etc). I called the listener object myListener.

var myListener:Object = new Object();

1. And to have the MovieClipLoader and the listener work together nicely, you must associate the listener object to the MovieClipLoader, like this, using the addListener method:

loader.addListener(myListener);

Fine. But, before any loading/preloading is going to be done, you must first and foremost write two important functions:

• One that will tell Flash what to do while an image is being loaded (called onLoadProgress),
• And the other that will tell it what to do once the loading is complete (called onLoadInit).

I repeat, these functions must be created before any loading begins. Flash must know what to do in advance! On a sideline note, this method of preloading is also explained extensively in my menu preloader system tutorial. Let me show you now how have I set up the listener object’s onLoadInit() function for the gallery.

myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}
};

Flash will automatically execute the onLoadInit() function once the external JPG image (or a SWF, or a GIF…) has been entirely downloaded to the user’s hard disk.

First, the function is defined with a parameter (the thing between the function’s parenthesis): the target variable which is a Movie clip. This is the empty movie clip into which the external image will be loaded.

myListener.onLoadInit = function(target:MovieClip) {

Inside the function (meaning between its curly braces: { and }), the first thing that shows up is an if/else if conditional statement:

if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}

As you can see, this conditional statement looks at the value of the whatIsLoading variable to decide what to do next. This value is of the string type (meaning it’s text) and can equal either “thumb” or “big”. These two values stand for thumbnail and big image. I defined them as such because it’s logical and I can instantly see what do they refer to.

As I said, this function is defined before the actual loading starts. So, as you will see later, once the loading of an external JPEG image has been triggered, the value of the whatIsLoading variable will be set to either “thumb” or “big”. It is set to “thumb” when the user clicks on a gallery section button — when the thumbnails of that section should be loaded and displayed. It is set to “big” when the user has clicked on a thumbnail to see the big image.

So, what happens when the value is set to “thumb”? The following:

currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker < howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}

Here is the above code, broken down line by line:

• The dynamic text field inside the thumbnail holder movie clip of the currently loaded thumbnail is hidden by setting its _visible property to false (remember, this is the text field that you created earlier in this tutorial, where the percentage preloader will show up during preloading).
• The drop shadow effect is applied to the thumbnail holder via the movie clip’s filters property.
• The thumbClickable() function is invoked (meaning it is called), which will define what will happen when the user clicks on a thumbnail: she or he will begin the loading of its bigger counterpart (the big image). This function comes later in the code, you’ll see it explained too.
• The tracker variable is incremented by one (1 is added to its current value) — that’s what the two plus signs (++) stand for. Remember, this variable is used to let Flash know which thumbnail is currently being loaded/has been loaded, where it should be placed, etc.
• Then, an if/else conditional statement shows up, which does the following:
• if the value of tracker variable is lesser than the value of howManyImages variable, the loadThumbnail() function will be invoked and the next thumbnail will be loaded.
• If that condition isn’t true (when tracker’s value is equal to or bigger than howManyImages‘ value), then the thumbnails will be enabled. This means that they will be clickable.

The above means the following: tracker keeps track of the number of thumbnails in the current gallery section (the one that the user chose to see). The variable howManyImages holds the number of images that exist in the chosen gallery section. So, if the current thumbnail isn’t the last one — meaning if there are more to be loaded — more will be loaded.

And when all the thumbnails have been loaded, they are all enabled. This means that the user isn’t able to click on any of the thumbnails until all of them have been completely loaded. I made this to be so because I like it like that and also because I don’t have to deal with additional interaction stuff which I’d have to, if I hadn’t done this.

And now, what happens when the value of the whatIsLoading variable has been set to “big”? A slightly different thing:

target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();

Here’s the breakdown of the above code:

• The _alpha property (transparency) of the target movie clip (the one into which the big image will be loaded) is set to zero, meaning that it will become invisible. I have chosen to do this to be able to apply the nice fade-in effect to the big image later :). Why make a simple instant appearance when you can create a cool fade-in effect?
• Then, as was the case with the thumbnails, the dynamic text field of the big image holder is made invisible (_visible = false), because the percentage preloader needs to disappear once the big image has been fully loaded.
• The drop shadow filter is applied to the big image, as it was for the thumbnails.
• The big image is made clickable by calling the bigClickable() function, which you’ll see later. This makes possible for the user to click the big image, and once that has been done, the image will be removed and the thumbnails will be visible again.
• And finally, the fadeIn() function is invoked to smoothly fade in the big image, from invisibility to complete opaqueness.

Cool! What comes next is the onLoadProgress() function which monitors the downloading of the image(s) to the user’s computer. This function is used to create the preloaders.

myListener.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number) {
percent = Math.floor(loaded/total*100);
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";
} else if (whatIsLoading == "big") {
displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";
}
};

This function comes with three parameters:

• target — the empty movie clip which into which the external JPEG is loaded,
• loaded — how much of the image has been loaded so far, in bytes and
• total — the total file size of the image that is being loaded.

Inside the function, the first line servers to calculate the percentage of the image that has been loaded so far (loaded/total*100) which is then rounded to the nearest lower value with the floor() method of the Math object.

percent = Math.floor(loaded/total*100);

Next comes a conditional if/else if statement, which, much like in the previous function, determines if the value of the whatIsLoading variable equals either “thumb” or “big”. Then, whether it is a thumbnail that is being loaded or a big image, what goes on is basically the same: the percent_txt dynamic text field inside the image holder becomes visible and inside it the information on how much of the image has been loaded so far is displayed, using the percent variable followed by the % character.

For the thumbnail:

currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";

…as well as for the big image:

displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";

The currentThumbnail and displayBigImage variables are defined later, you’ll see. There is a lot going on here in those two functions that hasn’t appeared or been defined in your code yet, but that is, I repeat, because these functions, which are connected to the MovieClipLoader object and its associated listener object have to be defined before you actually proceed to load the external JPEG images.

Great! Let’s move on to the XML loading part now.

Top of page

12.4 Loading XML

To load XML data from an external XML file into Flash, you must do the following:

1. Create a new XML object.
2. Create an onLoad() function which will tell Flash what to do after loading has been finished, whether it was performed successfully or not.
3. Tell Flash to load the XML data from the external XML file.

Here is the code that does exactly that:

var imageGallery:XML = new XML();
imageGallery.ignoreWhite = true;
imageGallery.onLoad = function(success) {
if (success) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn’t load.";
}
};
imageGallery.load(”gallery/gallery.xml”);

The first line creates a new XML object. I chose to call it imageGallery.

var imageGallery:XML = new XML();

The second one tells Flash to ignore the white space between the chunks of data inside the XML file:

imageGallery.ignoreWhite = true;

This must be done, yes, because blank spaces in an XML file are considered by Flash as data, too. That’s why you must tell Flash to skip it because otherwise you’ll have a mess to deal with.

Now comes the onLoad() function of your XML object. This function (similarly as the ones used for preloading with the MovieClipLoader and its listener) must be defined before the actual XML loading takes place. Flash must know in advance what to do once the XML data has been loaded.

imageGallery.onLoad = function(success) {
if (success) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn’t load.";
}
};

As you can see above, the onLoad() function has one parameter: success. This is a parameter that gets automatically passed to this function upon XML data loading. It holds a Boolean type of value, which means that it equals either true or false. It yields as true if the XML data loading was performed successfully and false if it was not.

Inisde the function, there is a simple if/else conditional logic used to help Flash decide what to do if the loading was successful or not. The line

if (success)

is the shorthand way of writing

if (success == true)

And the else part, of course, is activated only when success turns out to be false. So, when XML data loading has been successful, the parseGalleries() function is invoked (invoked means called in programmers’ jargon). I chose that name for the function, because it will literally parse the XML data to extract every bit of information that is needed for the creation of the image gallery.

parseGalleries();

If the loading of XML data fails, you have to inform your users about that.

descText.text = "Sorry the image data just didn’t load.";

The above text is what will appear in the big dynamic text field. Basically, I don’t know what else can be done if the loading process fails. The user can try to reload the page, but most likely he or she will just close the page with the image gallery and move. If you have created a good XML file and tested your SWF and seen that it works online with no problems, there is not much that you can do if now and then some user can’t see the gallery because the XML data failed to load. That is beyond your power: maybe the server where you host your image gallery went down for a moment or the user has a too strong firewall, router, etc. But it happens rarely. Most people should see your Flash image gallery with no problems at all.

And now, once you have defined what Flash should do upon loading the XML data, tell it to load it! LIke this:

imageGallery.load("gallery/gallery.xml");

Notice the path to the XML file: it is stored inside the gallery folder that you have created earlier in this tutorial, when you created the whole folder structure. This can be a source of problems too! If you change the folder inside which your XML file resides or the name of the XML file itself, you must change it in the above line of code too!

In the next step, I will show you how the parsing of XML data is done.

12.5 Parsing XML: Retrieving gallery data (titles and descriptions) and creating the menu section buttons dynamically

Below is the parseGalleries() function which serves to parse the XML data and store it in various variables. It looks big… scary… doesn’t it? No, it is not! It is just a little bit long, but everything inside it is perfectly logical and understandable and I will explain it to you in no time at all! So let’s get on with it.

function parseGalleries():Void {
if (imageGallery.firstChild.nodeName == "galleries") {
var rootNode:XMLNode = imageGallery.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "gallery") {
currentGallery = rootNode.childNodes[i];
imagesInGallery.push(currentGallery.childNodes.length);
galleryNames.push(currentGallery.attributes.title);
galleryIntros.push(currentGallery.attributes.intro);
currentGalleryTitle = rootNode.childNodes[i].attributes.title;
currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.attachMovie("gallery section button", "galleryButton"+i, galleryMenu_mc.buttonsHolder_mc.getNextHighestDepth());
currentGalleryButton._x = 0;
currentGalleryButton._y = galleryBtnVSpace*i;
currentGalleryButton.sectionTitle_txt.text = "0"+(i+1)+" "+currentGalleryTitle.toUpperCase();
for (j=0; j<currentGallery.childNodes.length; j++) {
if (currentGallery.childNodes[j].nodeName == "image") {
currentDescription = currentGallery.childNodes[j].firstChild.toString();
descriptions.push(currentDescription);
}
}
}
}
}
numberOfGalleries = i;
enableButtons(numberOfGalleries);
}

As you probably noticed, there is a semicolon (:) followed by the ActionScript keyword Void in the first line of function’s code.

function parseGalleries():Void {

This keyword tells Flash that the parseGalleries() function does not return a value. It is good to specify this, although it isn’t obligatory. When you have a function that does return a value to the caller, you have to specify this. For example, you may have a function which serves to perform a simple mathematical calculation and so instead of Void, you would write Number after the function’s name and the semicolon, because the function would return a numerical value.

Inside the function, almost all of the code (except two lines) is contained within an if conditional statement:

if (imageGallery.firstChild.nodeName == "galleries") {

Notice that I said an if conditional statement, not an if/else one. Why? Because there is no “else” situation here. The if conditional is used here as to say to Flash “When you find the root node with the name galleries, do the following”. Also, there is no else, because Flash will find the node named galleries because you created it in the XML file. This is a fail-safe procedure!

Remember, an XML file has only one root node. So when you say imageGallery.firstChild.nodeName, you tell Flash to look up the name of the root node — it is the first child of the XML file (which was converted to XML object when loaded into Flash) itself.

<?xml version="1.0"?>
<galleries>
…
</galleries>

After that, a shortcut variable called rootNode is created that points to this root node:

var rootNode:XMLNode = imageGallery.firstChild;

This is much like the variables that you have created at the very start of your ActionScript code to be able to reference movie clips and buttons in a shorthand and practical manner.

Next, you have a for loop that is used to loop through all the child nodes of the root node.

for (i=0; i<rootNode.childNodes.length; i++) {

To be sure that Flash really loops through all the child nodes of the root node, you set the condition of the loop as follows: i must be less than the total number of child nodes (rootNode.childNodes.length). Why less than and not equal to the number of child nodes? Because the loop starts with i set to zero. Like the position of elements in an array and the position of characters in a string, for example, the XML nodes are also counted starting from zero. It is just how it’s done in ActionScript and the majority of programming languages.

What follows is an if conditional statement, again. Exactly like for the root node, you tell Flash here to look for child nodes of the root node that are called gallery.

if (rootNode.childNodes[i].nodeName == "gallery") {

<?xml version="1.0"?>
<galleries>
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
…
</gallery>
<gallery title="essays" intro="A collection of various photos which either do not fit any other category - experiments and such.">
…
</gallery>
</galleries>

The variable i will be replaced by the number of the current loop, of course: 0, 1, 2, 3, etc… so all child nodes will be parsed.

The gallery that is currently being parsed is stored in the currentGallery variable:

currentGallery = rootNode.childNodes[i];

This si done to be able to reference it more easily in the next few lines of code.

Next, the construct currentGallery.childNodes.length is used to pull out the number of images in the current gallery section. This value is in turn stored inside the imagesInGallery array (which you created when you defined all the variables) via the push() method of the Array object.

imagesInGallery.push(currentGallery.childNodes.length);

The imagesInGallery array is very important because the values stored inside it (the number of images in each gallery section) will be used later to tell Flash how many thumbnails should be loaded for a given gallery section.

Next, the value of the title attribute for the current gallery node is extracted and stored inside the galleryNames array via its push() method. This value will be later used to tell Flash what gallery section the user has chosen and also to give Flash the proper path to the section’s folder.

galleryNames.push(currentGallery.attributes.title);

Using the same procedure as above, the value of the intro attribute is extracted and stored inside the galleryIntros array. These values will be used to show what’s the current gallery section about — this is the description text which will appear in the big dynamic text field once the user clicks on a gallery section button.

galleryIntros.push(currentGallery.attributes.intro);

Next, by using the procedure that you understand well by now, the value of the title attribute of the current gallery section is extracted and stored inside the currentGalleryTitle variable. There is an important distinction here: before, the same attribute’s value was extracted and placed inside an array along with its counterparts from other gallery nodes and now it is placed inside a simple, plain variable. This is done because this variable’s value will be used very soon.

currentGalleryTitle = rootNode.childNodes[i].attributes.title;

And now, the gallery section button movie clip is being extracted from the Library dynamically and placed inside the gallery menu:

currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.attachMovie("gallery section button", "galleryButton"+i, galleryMenu_mc.buttonsHolder_mc.getNextHighestDepth());

The gallery section button that you have created earlier is being attached inside the gallery menu, more specifically to the buttonsHolder_mc empty movie clip inside it: galleryMenu_mc.buttonsHolder_mc.attachMovie. As you remember, thsi is the empty clip beneath the mask in the gallery menu movie clip. The attachMovie() method has 3 parameters:

1. The Linkage identifier which is used to pull a movie clip dynamically out of the Library: “gallery section button” in this case.
2. The new instance name of the newly attached movie clip. This will be different for each gallery section of course, so it has to be created dynamically: "galleryButton"+i. So, as the loop goes on, this instance name will be galleryButton0, galleryButton1, galleryButton2, etc.
3. The depth level of the attached movie clip. This parameter must also be different for each attached movie clip, because if it stays the same, each subsequent movie clip will replace the previous one, because there cannot be two movie clips present on a same depth level. So, the convenient getNextHighestDepth() method is used to place each movie clip on a separate depth level. Think of the depth levels as invisible layers inside the empty movie clip where you are attaching your buttons.

And the currentGalleryButton variable is used as a shortcut for this newly attached movie clip — the current gallery section button. And now, you see why it is very practical to use such “variable shortcuts” — there are many things that you will now do with the attached movie clip. The first one is positioning:

currentGalleryButton._x = 0;
currentGalleryButton._y = galleryBtnVSpace*i;

The first line above serves to position each gallery section button horizontally, via the movie clip _x property, which defines its horizontal position in relation to the left edge of the stage, expressed in pixels. This value is 0 (zero) for each gallery section button, because they must be aligned flawlessly inside the menu.

On the other side, the vertical position of each section button inside the gallery menu is determined dynamically, because you have to put some space between them: galleryBtnVSpace*i. If you remember, when you defined all the variables, the galleryBtnVSpace was set to the value of 23. Like I said, I chose this value in relation to the height of the buttons, to be able to space them nicely. Since in every loop iteration this value is multiplied by i, the position of buttons will be: 0, 23, 46, 69, etc.

And now you must define the label for the current gallery section button:

currentGalleryButton.sectionTitle_txt.text = "0"+(i+1)+" "+currentGalleryTitle.toUpperCase();

As you can see above, this label is composed of a few things, all were my choice. I could have just slapped the plain gallery section title over each button, but I wanted to add numbers and also put all the letters into capitals:

• I added a zero ("0") in front of each number because it looks cool :-).
• After the zero comes the number, which is defined as i+1 because I didn’t want the first label to be preceded with "00", but "01". Remember, in the main loop, the variable i starts as zero.
• Then comes a blank space, to separate the number from the title: " ".
• Then I transformed the titles into uppercase: currentGalleryTitle.toUpperCase(). That’s why I advise to always write such elements inside your XML file in lowercase letters: it is easy to transform them any way you like with ActionScript later.

And now comes the for loop which passes through each image element inside each gallery node:

for (j=0; j<currentGallery.childNodes.length; j++) {
if (currentGallery.childNodes[j].nodeName == "image") {
currentDescription = currentGallery.childNodes[j].firstChild.toString();
descriptions.push(currentDescription);
}
}

Since this loop is contained within the main loop, you must naturally change the variable: it is j here. The condition for the loop to continue the iterations is that j, which starts at 0, must be lesser than the number of the child nodes of the current gallery node, i.e. the number of image nodes.

Again, you have an if which checks that the name of each node looked at is indeed "image" and not something else. Like before, this is a way of telling Flash to look at precisely these nodes.

<?xml version="1.0"?>
<galleries>
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
<image>Dallas.</image>
<image>Tresnjevka. I love the atmosphere on this one.</image>
<image>Motovun.</image>
<image>New York.</image>
<image>Paris.</image>
</gallery>
<gallery title="essays" intro="A collection of various photos which either do not fit any other category - experiments and such.">
<image>Color mayhem!</image>
<image>The sleeping monster.</image>
<image>Let me out!</image>
<image>A barrel on the side of the trail.</image>
<image>Subterranean passage.</image>
<image>A train in snow.</image>
</gallery>
</galleries>

Then, as each image node is found, its first child’s value is converted to a String (text) value.

currentDescription = currentGallery.childNodes[j].firstChild.toString();

For example, the value of the first child node of the fourth image node in the first gallery node above is New York. And since this is an XML node, it has to be converted to a String value, for Flash to be able to display in the dynamic text field later and not to spit out a type mismatch error. Yes, the text between the <image> opening and closing tag is considered the image node’s first child.

And the text (which is the description of each particular image) is then stored inside the descriptions array.

descriptions.push(currentDescription);

Finally, after the big for loop has ended after going through all the gallery nodes, the value of i, which matches the number of galleries (sections) is stored inside the numberOfGalleries variable.

numberOfGalleries = i;

This number will be used later to determine the number of gallery section buttons and loop through all of them.

And finally, the enableButtons() function is called and the variable numberOfGalleries is passed to it.

enableButtons(numberOfGalleries);

Whew! That was all about XML parsing and data extraction! Cool! Jump to the next step to see how the functionality of the gallery menu section buttons is created.

Top of page

12.6 Defining the functionality of the menu section buttons: Enabling the display of the roll over and roll out states and defining which thumbnails shall be loaded

Here’s the enableButtons() function which has numberOfGalleries passed as a parameter to it (which is of the Number type) and it does not return a value, hence the Void keyword:

function enableButtons(numberOfGalleries:Number):Void {
for (i=0; i<numberOfGalleries; i++) {
pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];
pressedButton.onRollOver = function():Void {
this.gotoAndStop(2);
};
pressedButton.onRollOut = function():Void {
this.gotoAndStop(1);
};
pressedButton.onPress = function():Void {
removeMovieClip(thumbsDisplayer);
removeMovieClip(displayBigImage);
tracker = 0;
thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());
clickedGallery = Number(this._name.substr(13));
howManyImages = imagesInGallery[clickedGallery];
whichGallery = galleryNames[clickedGallery];
descText.text = galleryIntros[clickedGallery];
currentRow = 0;
currentColumn = 0;
loadThumbnail();
};
}
enableGalleryNavigation();
}

Almost all the code of the enableButtons() function is wrapped in a for loop which serves to pass through all the gallery section buttons and define their onRollOver, OnRollOut and onPress event handler functions.

for (i=0; i<numberOfGalleries; i++) {

Now you see how important the numberOfGalleries variable is — without it, you wouldn’t be able to know the number of gallery section buttons.

The first thing that needs to be done is to set up another shorcut: a variable which will point to each button in your gallery menu as the loop progresses: pressedButton.

pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];

Of course, Flash will process the expression between the angled brackets: [ and ], which will result in galleryButton0, galleryButton1, galleryButton2, etc.

Now comes the definition of the onRollOver event handler function, which gets executed when the user rolls her mouse over a button in the gallery section menu:

pressedButton.onRollOver = function():Void {
this.gotoAndStop(2);
};

Basically, what happens is that the movie clip’s (which acts as a gallery section button) playhead gets sent to the second frame, where there is a different background color, to accentuate the rollover effect.

After that, the rollOut event handler function is defined, which gets run once the mouse has been pulled out of the button area. This returns the movie clip’s playhead to the first frame, putting it back to its primary state.

pressedButton.onRollOut = function():Void {
this.gotoAndStop(1);
};

The diagram below explains this functionality well. The gallery section button has a blue background in the first frame and a crimson one in the second frame, when the onRollOver event has been fired and its event handler function executed.

And now, a very important event handler function comes up: onPress, which governs what actions will be taken when the user has clicked a button. What will happen is the following:

1. Any previously existing thumbnails and big image will be removed.
2. The tracking of the number of thumbnails will be reset to zero.
3. A new empty movie clip which will hold all the section’s thumbnails will be created.
4. The following information will be retrieved and stored: what gallery section was selected, how many images are in it, the name (title) of the section and its description.
5. The variables which keep track of the rows and columns into which the thumbnails are placed will be reset to zero.
6. The function for loading the section’s thumbnails will be invoked.

pressedButton.onPress = function():Void {
removeMovieClip(thumbsDisplayer);
removeMovieClip(displayBigImage);
tracker = 0;
thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());
clickedGallery = Number(this._name.substr(13));
howManyImages = imagesInGallery[clickedGallery];
whichGallery = galleryNames[clickedGallery];
descText.text = galleryIntros[clickedGallery];
currentRow = 0;
currentColumn = 0;
loadThumbnail();
};

Any thumbnails or big images that may have been loaded before are removed with the removeMovieClip() method. If there weren’t any present, it doesn’t matter — nothing will happen. This is done by removing the placeholder movie clips that are created when the user clicks on a gallery section button or a thumbnail.

removeMovieClip(thumbsDisplayer);
removeMovieClip(displayBigImage);

Then, the tracker is reset to zero.

tracker = 0;

And the thumbsDisplayer empty movie clip is created from scratch, using the createEmptyMovieClip() method. It will hold all the thumbnails of the gallery section that was selected by the user. This movie clip is created inside the imagesHolder movie clip, the empty movie clip which you have created on the stage during the first stages of this tutorial. You could have created this latter one dynamically via ActionScript too, but I wanted things to be a little more diverse and simplified. Not everything needs to be done through coding.

thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());

There are two parameters used in the createEmptyMovieClip() method:

• The first is the instance name of the newly made empty movie clip.
• The second one is the depth level into which the new movie clip is placed. Again, the best thing to do is to use the getNextHighestDepth() method because with it, Flash automatically assigns the first free depth to the new movie clip. And of course, this depth level is the first free inside the imagesHolder movie clip, the one inside which the new empty movie clip is being created.

Now the clickedGallery variable gets its value assigned. This value will be the identification number of the gallery section movie clip which was clicked. Since it is being extracted from the movie clip’s instance name, you need to pass it through the Number() method to convert the character into a number.

clickedGallery = Number(this._name.substr(13));

The substr() method of the String object is used to do the extraction, since the instance name of the movie clip is a string (text) value. It goes on like this: suppose that the user clicked on the fourth gallery section button (which is the monochrome section in my gallery example). The instance name of the clicked movie clip will be galleryButton3. Yes, there is the number 3 at the end of the instance name, because, as you remember, in the for loop which is used to create these buttons, the starting value is always zero. The extraction would proceed like this (this is pseudo-code, not real one, just to show you how this process goes):

clickedGallery = Number(this._name.substr(13));
clickedGallery = Number("galleryButton3".substr(13));
clickedGallery = Number(3);
clickedGallery = 3;

The first parameter of the substr() method is the starting point of extraction. The first character in a string (a piece of text) has the position 0 (zero).

The second parameter is the number of characters to be extracted (the length of the new, extracted string). And if it is omitted (like above), then all the characters from that point until the end of the string will be extracted. So it doesn’t matter if your button has the name galleryButton3, galleryButton42 or galleryButton128, the number will always get extracted properly, because the extraction starts at position 13 and gets any remaining characters in the string from that point on.

After the extraction has been done, the result is converted to a mathematical value from a plain text character.

And this final value is used three times after that:

howManyImages = imagesInGallery[clickedGallery];
whichGallery = galleryNames[clickedGallery];
descText.text = galleryIntros[clickedGallery];

Specifically, It is used to:

1. See how many images are in the selected gallery section (howManyImages).
2. What is the name/title of the selected gallery section (whichGallery).
3. Get and display the description for the selected gallery section ( descText.text).

All three values are extracted from different arrays. In all three cases, this happens in the same manner, so I will explain it for the gallery title, for example. Let’s suppose again that the user clicked on the fourth (monochrome ) button, so the value of the clickedGallery variable is 3. Flash will proceed like this:

whichGallery = galleryNames[clickedGallery];
whichGallery = galleryNames[3];
whichGallery = "monochrome";

Why so? Because the number between the angled brackets: [ and ] points to the value at the position no. 3 inside the galleryNames array. You may already know it, but here it is: the first value inside an array in ActionScript has the position 0. The image below explains this nicely.

Now you see how the values for the other two variables were extracted from their respective arrays, too.

Next, the values of the variables which serve to place the thumbnails into rows of five are reset to zero:

currentRow = 0;
currentColumn = 0;

Then the loadThumbnail() function is invoked, which will load the thumbnails for the chosen gallery section. This functions comes in the code just after the current one. Remember that all of this happens when the user has clicked on a gallery section button.

loadThumbnail();

Once all of three event handler functions (onRollOver, onRollOut and onPress) for all the gallery section menu buttons have been properly defined, there is still one line of code (outside the for loop, so it is executed once the loop has reached its end) that is going to be run:

enableGalleryNavigation();

This calls the enableGalleryNaviagtion() function which sets up the scrollability of the menu via the two buttons (up and down). This function will be defined at the end of all the gallery’s code.

Let me explain you now what happens when a gallery section button has been clicked and the thumbnails begin to load via the loadThumbnail() function.

Top of page

12.7 Thumbnail positioning and thumbnail preloading

So, the user has clicked on a gallery section to see its images. Here is the function that will attach the thumbnail holders, place them in an orderly fashion and trigger the preloading, so that the user can see that something is actually happening!

function loadThumbnail() {
currentThumbnail = thumbsDisplayer.attachMovie("thumbnail holder", "thumbnail"+(tracker+1), thumbsDisplayer.getNextHighestDepth());
target = currentThumbnail.thumbImage_mc;
if ((tracker%5) == 0 && tracker != 0) {
currentRow += 1;
}
if (currentColumn>3) {
currentColumn = 0;
} else if (tracker == 0) {
currentColumn = 0;
} else {
currentColumn += 1;
}
currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;
currentThumbnail.percent_txt._visible = true;
thumbNumber = currentThumbnail._name.substr(9);
thumbPath = "gallery/"+whichGallery+"/thumbs/"+thumbNumber+".jpg";
whatIsLoading = "thumb";
loader.loadClip(thumbPath, target);
}

The first action inside the function is the process of attaching a thumbnail holder movie clip from the Library, to the thumbsDisplayer empty movie clip. This is done with the attachMovie() method which you have already encountered in this tutorial.

currentThumbnail = thumbsDisplayer.attachMovie("thumbnail holder", "thumbnail"+(tracker+1), thumbsDisplayer.getNextHighestDepth());

The parameters of the method are as follows:

1. The Linkage identifier, which serves to pull the movie clip out of the Library: “thumbnail holder”.
2. The new instance name of the attached movie clip: “thumbnail”+(tracker+1). So the Instance names will be thumbnail1, thumbnail2, thumbnail3… and so on, until thumbnail20. Remember, I created the gallery so that each section can have a maximum of 20 thumbnails. I have written (tracker + 1) here because I don’t want the name of the first thumbnails to be thumbnail0, but thumbnail1. Why? Because I will need to extract that number later to point to the thumbnail JPEG image, and the first thumbnail in each gallery section is name 1.jpg and not 0.jpg.
3. And of course, the depth level assignment via the getNextHighestDepth() method.

And the newly attached movie clip is referenced by the currentThumbnail variable.

Next, the target variable is defined, which will tell Flash where the external thumbnail will be loaded into. As you can see in the line of ActionScript code below, it is being loaded inside the thumbImage_mc empty movie clip of the current thumbnail holder.

target = currentThumbnail.thumbImage_mc;

And now come the chunks of code which serve to position the thumbnails into rows, 5 thumbnails per row. First, the counting of rows is done.

if ((tracker%5) == 0 && tracker != 0) {
currentRow += 1;
}

The important thing to be aware of here is that this line serves to place thumbnails in rows of 5, so the condition(s) will be fulfilled for thumbnail number 6, 11and 16 (when tracker equals 5, 10 or 15). This means that when those thumbnails’ turn comes, the value of the currentRow variable will be increased by 1 (currentRow += 1).

There are two conditions in the if conditional statement here and both must be fulfilled in order for the code inside the curly brackets to be executed:

• The remainder of tracker divided by 5 must be equal to zero. It is divided by 5 because I want 5 thumbnails to be inside a row. Check out my tutorial on the use of the modulo operator in ActionScript to see how it is done.
• The value of tracker variable must not equal zero. This one serves only not to increase the value of currentRow when tracker is still equal to zero. This is a safeguard that ensures the first 5 thumbnails are placed in the first row and not moved below it.

For example, what happens at the beginning, when tracker equals 0, or when it equals, say, 3 or 5? Let me show you how Flash makes the calculation in all three cases:

(tracker%5) == 0 && tracker != 0
(0%5) == 0 && 0 != 0

You don’t even have to look at the first condition in the example above, because the second condition is false. It says that zero does not equal (!=) zero, which is false. And when just one condition turns out as false, the whole thing is scrapped and the code inside the curly braces (currentRow += 1) is skipped altogether.

OK, let’s see now what happens when tracker equals 3.

(tracker%5) == 0 && tracker != 0
(3%5) == 0 && 3 != 0
3 == 0 && 3 != 0

This time, it is the first condition that yields as false (it says that 3 equals 0, which is false) and so the whole thing is again false.

And now, the case when the value of tracker reaches either 5, 10 or 15:

(tracker%5) == 0 && tracker != 0
(5%5) == 0 && 5 != 0
0 == 0 && 5 != 0

Both conditions are now true, because zero does equal zero and five does not equal zero. Here, the value of currentRow will be increased by 1 and this will be used later to place the subsequent five thumbnails into the next row.

Ok, you need now to see the code that will ensure that the thumbnails are set apart from each other:

if (currentColumn>3) {
currentColumn = 0;
} else if (tracker == 0) {
currentColumn = 0;
} else {
currentColumn += 1;
}

Translated into english, this if/else if/else conditional statement means this:

if (the value of currentColumn is greater then 3 — meaning it is not 0, 1, 2 or 3) {
reset the value of currentColumn to 0
} on the other hand, if (tracker equals zero) {
reset the value of currentColumn to 0
} and in all other cases, meaning when currentColumn is either 0, 1, 2 or 3 {
increase the value of currentColumn by 1
}

And finally, the code that actually positions the thumbnails on stage based on what I just explained to you.

currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;

The _x and _y properties, as you know by now, position a movie clip horizontally and vertically on the stage. The value of currentColumn is multiplied by thumbMarginX and that of currentRow is multiplied by thumbMarginY. These two values serve to put some space between the thumbnails. You defined them at the beginning of your code, remember? They are set to 96 and 68, respectively. This is the value of space between the thumbnails expressed in pixels.

And now the dynamic text field inside the thumbnail holder is made visible:

currentThumbnail.percent_txt._visible = true;

Using the substr() method of the String object (a text object, and the name of a movie clip is a piece of text), the number of the thumbnail is extracted:

thumbNumber = currentThumbnail._name.substr(9);

As I have told previously in this tutorial, the first parameter of the substr() method is the place where the extraction starts. And when the second parameter (length) is omitted, as above, all the characters from the exatraction point up to the end of the string will be extracted. Why do this? Because like that, you will be able to extract the number of the thumbnail, whether it is a one or two-digit number. No need to write any conditional statements at all here. The image below explains this clearly (the blue numbers are character positions inside the string):

And the value of the thumbNumber variable is used next to point to the right thumbnail which needs to be loaded:

thumbPath = "gallery/" + whichGallery + "/thumbs/" + thumbNumber + ".jpg";

The line above is using simple concatenation (the joining of two or more strings together) to create the path to the thumbnail. Again, remember well that this path is relative to the HTML page inside which your image gallery SWF is embedded.

For example, if the third thumbnail of the essays gallery section were to be loaded, Flash would create the path like this:

thumbPath = "gallery/" + whichGallery + "/thumbs/" + thumbNumber + ".jpg";
thumbPath = "gallery/" + "essays" + "/thumbs/" + "3" + ".jpg";
thumbPath = "gallery/essays/thumbs/3.jpg";

Subsequently, you have to tell Flash what is loading, the thumb or the big image:

whatIsLoading = "thumb";

And finally, the loadClip() method of the MovieClipLoader object (which is called loader, you created it earlier, remember) is used to tell Flash to start loading (and preloading) the current thumbnail:

loader.loadClip(thumbPath, target);

The first parameter inside the parenthesis is the external file that is going to be loaded (a JPEG thumbnail in this case). The second parameter is the target empty movie clip into which the external file will be loaded.

And now that the loadClip() method has been invoked, the MovieClipLoader and its associated listener will start working together and preload the image and display it, with the DropShadow filter applied to it. You can read again (I recommend it, it will be much more clear to you now) how this is done in the section which explains the use of the onLoadInit() and onLoadProgress() methods.

Now you know how the placement and preloading of thumbnails is done! What follows is the explanation of how the functionality of the thumbnails is defined.

Top of page

12.8 Defining the functionality of the thumbnails

I will show you now the following things that are part of the thumbnails’ functionality:

• Big image preloading
• Disabling the thumbnails while the big image is preloading
• Selecting the right description for the chosen image

function thumbClickable():Void {
currentThumbnail.onPress = function() {
bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());
target = displayBigImage.imageHolder_mc;
bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
whatIsLoading = "big";
disableThumbs();
loader.loadClip(bigImagePath, target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i<clickedGallery; i++) {
descPosition += imagesInGallery[i];
}
descPosition = descPosition+Number(bigNumber)-1;
imageDesc = descriptions[descPosition];
} else {
imageDesc = descriptions[Number(bigNumber)-1];
}
descText.text = imageDesc;
};
currentThumbnail.enabled = false;
}

The first thing that can be noticed is that nearly all the code inside the thumbClickable() function is stored inside the current thumbnail’s onPress event handler function definition. This is to be expected, because the onPress event handler tells Flash what to do when the user click on a thumbnail.

currentThumbnail.onPress = function() {

The first that you have to do is make Flash extract the number of the big image that is going to be preloaded once the user clicks on a thumbnail:

bigNumber = this._name.substr(9);

This is done in exactly the same manner as it was for the thumbnails (explained on the previous page), so I won’t repeat myself here.

Next, the big image holder movie clip is pulled out of from the Library and attached to the imagesHolder empty movie clip using the attachMovie() method which you now well by now:

displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());

Of course, once again, a variable is used as a shortcut to point to the newly attached movie clip: displayBigImage. As a reminder, this movie clip contains:

1. The white background with thin black outline,
2. The empty movie clip inside which the big JPEG image will be loaded and
3. The dynamic text field which will display the percentage-based preloader.

And so the empty movie clip (mentioned under no.2 above) is defined as the target for loading the external JPEG and will be passed as such to the MovieClipLoader later:

target = displayBigImage.imageHolder_mc;

The path to the big JPEG image is defined in a way similar to those of the thumbnails:

bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";

The variables whichGallery and bigNumber are used to guide Flash to the right folder and right image. And the path is stored inside the bigImagePath variable.

Just like for the thumbnails before, you have to tell Flash what you’re loading here too:

whatIsLoading = "big";

And the thumbnails have to be disabled — this will stay so throughout the preloading process and also while the big image is being displayed. They will be re-enabled only once the user has clicked on the big image and it has disappeared, showing the thumbnails again. This is done through the disableThumbs() function which I will explain to you later.

disableThumbs();

And now the actual command to load the big image is issued to Flash:

loader.loadClip(bigImagePath, target);

The above is done using the loadclip() method of the MovieClipLoader object, exactly in the same manner as was done for the thumbnails. Only the path and the target empty movie clip are different.

The next chunk of code is the one where the description for the selected big image is being searched for, found and displayed in the big text field below the image:

if (clickedGallery > 0) {
var descPosition:Number = 0;
for (i=0; i<clickedGallery; i++) {
descPosition += imagesInGallery[i];
}
descPosition = descPosition+Number(bigNumber)-1;
imageDesc = descriptions[descPosition];
} else {
imageDesc = descriptions[Number(bigNumber)-1];
}
descText.text = imageDesc;

The search for description is placed inside an if/else conditional statement. Basically, this conditional logic boils down to this: if the user has clicked any gallery section than the first one (clickedGallery > 0), a for loop will be initiated for calculating the precise position of the selected image’s description. If the first gallery section is selected by the user, a much simpler search is performed. I will explain the first case in more detail noe.

First there is the descPosition variable, whose initial value is 0. This variable will hold the number which will be the image’s description position inside the descriptions array.

var descPosition:Number = 0;

Then, the for loop is initiated. The condition for the loop to exist is that i, set to zero, must be lesser than the value of clickedGallery. Remember, clickedGallery is a variable that holds the number of the clicked gallery.

for (i=0; i <clickedGallery; i++) {
descPosition += imagesInGallery[i];
}

Every time a loop iteration is made, the value of descPosition is updated. The value on the equation’s right side is added to the descPosition’s current value, through the use of the addition assignment (+=) operator. What’s on the right side is a construct that is pulling values out of the imagesInGallery array. All this is done in order for Flash to be able to find and display the proper image description.

It will be best explained by an example. In my gallery example, suppose the user has clicked on the sixth thumbnail in the third gallery section (it is circled in red below, while the gallery section is in rollover state, just for the purpose of showing it here). The text for this image should be “Empty silos.”

Since the user has clicked the third gallery, the value of clickedGallery is 2, because they start from zero. The first iteration (when i equals 0) goes like this:

descPosition += imagesInGallery[i];
0 += imagesInGallery[0];
0 += 5;
5

So the value of descPosition is now 5. Why? Because the array imagesInGallery stores values which correspond to the number of images in each gallery section. In my example, they are as follows, from the first to last gallery section: 5,6,19,9,7 (corresponding to architecture, essays, factory, monochrome and nature sections, respectively). The point is that you have to arrive to the gallery section which the user has selected.

Ok, here comes the next loop iteration, when i equals 1.

descPosition += imagesInGallery[i];
5 += imagesInGallery[1];
5 += 6;
11

The value of descPosition is now 11. Why? Simple. Because the loop has come to en and. Once i has reached the value of 1, the next iteration won’t be performed because the condition won’t validate any more: when i equals 2, the condition i < clickedGallery is false, because clickedGallery equals 2, in this particular example.

And after that, the next line is executed, which updates the value of descPosition. Flash has arrived at the third gallery section, but now it must find the description inside this particular section. This boils down to adding a number until you reach the matching description.

descPosition = descPosition+Number(bigNumber)-1;

Still using the example above, the equation would be calculated like this:

descPosition = descPosition+Number(bigNumber)-1;
descPosition = 11+Number(6)-1;
descPosition = 11+6-1;
descPosition = 16;

First, bigNumber had to be converted into a numerical value (from a String type to a Number type), because it was a simple text character, not a numerical value, since it was pulled out of current big image’s name.

Then, one is substracted from it, since I chose to give the thumbnails (and subsequently, the big images too) the numbers starting from 1 and not 0.

And there you go! The right description is really chosen: it is the 17th description in the descriptions array, placed at number 16, because the counting inside an array starts from 0. In this case, it is “Empty silos.” And that’s what precisely the next line of code is about: pulling out this description from the descriptions array and putting it inside the imageDesc variable.

imageDesc = descriptions[descPosition];

And now for the else part of the conditional statement:

} else {
imageDesc = descriptions[Number(bigNumber)-1];
}

It is used when the user has clicked on the first gallery section. No looping is necessary here, because this section’s descriptions are right at the beginning of the descriptions array. And that’s why the image description is pulled out from the array in a single line of code.

The description of the big image is subsequently displayed in the big dynamic text field below it:

descText.text = imageDesc;

That’s it for the thumbnail’s onPress event handler. The one line of code that is executed outside this event handler function, but inside the thumbClickable() function is the following:

currentThumbnail.enabled = false;

…which disables the thumbnail until all of them are loaded for the current gallery section. And here come now the two functions that disable and enable the clickability of the thumbnails.

Top of page

The first one, disableThumbs() serves to turn off the clickability of the thumbnails. This function is invoked whenever the user clicks on a thumbnail and the big image starts to load.

function disableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
}
}

How does it work? It uses a for loop to loop through all the thumbnails. It will loop as many times as there are thumbnails in the selected gallery section (i < howManyImages). Then, they are disabled one by one via turning their enabled property to false. Each thumbnail is accessed through the expression thumbsDisplayer["thumbnail"+(i+1)]. Why i+1? Well, again, I repeat, I have named the thumbnails thumbnail1, thumbnail2, etc, while the starting value of i in the loop is 0.

The function that restores the clickability of the thumbnails, enableThumbs(), works in the exact same way, the only difference being the enabled property turned to true this time. This function is invoked either when the user clicks on a gallery section button in the menu and all the thumbnails have been successfully loaded or when the big image was clicked, closed and the thumbnails for the selected section have appeared again.

function enableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = true;
}
}

Allright, that’s it for the thumbnails. But what about the big image? It has to be made clickable, for the user to be able to close it once she or he wishes to return to the thumbnails. That’s what the bigClickable() function is here for.

Top of page

12.9 Making the big image clickable

Inside the bigClickable() function, the big image’s onPress event handler function is defined.

function bigClickable():Void {
displayBigImage.onPress = function() {
removeMovieClip(this);
enableThumbs();
descText.text = galleryIntros[clickedGallery];
};
}

The line

removeMovieClip(this);

removes the big image with the removeMovieClip() method, inside the parenthesis of which is the movie clip destined for removal. The keyword this points to the big image itself, since it is placed inside its onPress event handler function.

After that , the enableThumbs() function call is made. So, the thumbnails will be made clickable again, since the big image has been removed and they can be seen again. You probably noticed that I never made any code that would hide the thumbnails, because the big image effectively covers them all, even when there are twenty of them present. That’s just how I solved the problem, of course, if you wish, you may choose to hide them.

Lastly, the description text is reverted to the one that describes the selected gallery section.

descText.text = galleryIntros[clickedGallery];

OK! Let me show you now how that nice alpha fade-in effect was achieved.

Top of page

12.10 Fading in the loaded big image

Why go for a simple image appearance when there is eye-candy like the alpha fading in effect at your disposal?

function fadeIn():Void {
target.onEnterFrame = function():Void {
this._alpha += 10;
if (this._alpha>=100) {
delete this.onEnterFrame;
this._alpha = 100;
}
};
}

This function consists of an onEnterFrame movie clip event handler. This particular movie clip event is used very often because it makes possible for actions to be performed repeatedly. To be more exact, every line of code contained inside an onEnterFrame event handler will be executed as many times per second as your movie speed is set to. So, if your movie speed is set to 30 fps, the code inside the onEnterFrame event handler will be run 30 times in a second. Ideal for a fade-in effect!

What happens inside is that the _alpha property (transparency) of the target movie clip, into which the big image has been loaded, is increased by 10 each time the event fires.

this._alpha += 10;

Remember that the target movie clip’s _alpha property was set to 0 (total transparency, i.e. invisibility) once the onLoadInit() function (one of the two preloading functions) saw that the loaded file was the big image.

And once _alpha becomes equal to or greater than 100 (this._alpha >= 100), the onEnterFrame event handler is deleted and the alpha set to 100.

if (this._alpha >= 100) {
delete this.onEnterFrame;
this._alpha = 100;
}

The keyword this inside the onEnterFrame event handler function points to the target movie clip, because it is placed inside an event handler function associated with it (target.onEnterFrame). This function is invoked once the image has been fully loaded.

And now, the gallery menu scrolling functionality with easing effect is explained. Yes, you are nearing the end of this tutorial :-)!

Top of page

12.11 Creating the scrolling functionality for the gallery sections menu

I have made an example just for the purpose of showing you how the menu will look like when there are plenty of sections inside it. The section buttons in the example below are not clickable, but the menu is perfectly scrollable. Click on the down button to try it and then the up button when it appears!

The big function that follows, enableGalleryNavigation(), is made of two main parts: the definitions of onPress event handler functions for the two buttons that serve for scrolling the menu: menuDown and menuUp. Just as a reminder, here is a screenshot of these two buttons:

function enableGalleryNavigation():Void {
menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
var firstLook:Boolean = false;
}
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
}

Let’s see how the functionality of the menuDown button is set up. To understand what is going on inside the function, keep in mind the following facts:

1. In Flash coordinate system, the vertical direction (Y) is positive downwards. This means the further you go down from the origin point, the bigger the positive value of an object’s Y coordinate.
2. Each movie clip has its own independent coordinate system. The origin of this coordinate system is the movie clip’s registration point.

menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
}
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};

The first thing inside the event handler function is an if conditional statement which serves only to activate the menuUp button. If you remember, the menuUp button is invisible in the beginning, to avoid confusing the user. Once the menuDown button has been clicked, its counterpart will appear and the if statement will never be used again, because the condition will yield as false.

if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
}

The condition if (firstLook) translates as if (firstLook == true). And when the menuDown button has been clicked for the first time, this condition will yield as true, because the value of the variable firstLook has been set as true at the very beginning of your code (when all the variables were defined).

So, the code between the curly braces, { and }, will be run. It restores the button’s alpha (transparency) property to 100, meaning full opaqueness. After that, the button is enabled (it can be clicked).

menuUp._alpha = 100;
menuUp.enabled = true;

After that, the variable firstLook is set to false and that’s why the if statement will be ignored every subsequent time that the menuDown button is clicked: the other button has appeared and that’s it.

firstLook = false;

Next, the menuTop variable is defined. Keep in mind that the menuButtons variable is the shortcut for the buttonsHolder_mc movie clip, which is itself situated inside the galleryMenu_mc movie clip. So, the menuButtons movie clip is the one into which all the gallery section buttons were attached from the Library.

var menuTop:Number = menuButtons._height - Math.abs(menuButtons._y);

The value of the menuTop variable is the lowest point of your menu, all section buttons included. I called it menuTop because the Y coordinate values increase when going down, that’s why. This value is obtained by substracting the absolute value (meaning the number itself, whether positive or negative, it will be converted to a positive value) of the vertical position (_y) of the menuButtons movie clip from its height. This value will be used to scroll the menu (to move it) properly, without fear that it will disappear by going off the stage etc.

Next comes an if conditional statement that checks for two things:

• If the menuButtons vertical position is less than or equal to zero (menuButtons._y <= 0) and
• If the value of menuTop is greater than or equal to the height of the galleryMask movie clip, the one that serves as the mask for the menu buttons (menuTop >= galleryMask._height).

if (menuButtons._y <= 0 && menuTop >= galleryMask._height) {

These two conditions ensure that:

• The menu can only be scrolled down if its position is lesser than or equal to zero.
• The menu won’t be scrolled down if its lower (menuTop) edge’s coordinate is lesser than the lower edge of the mask.

So, if these conditions have been met, the menu will be scrolled down, thanks again to an onEnterFrame event handler function and a few variables defined before it is executed. The variable that gets defined is the following:

var targetPos:Number = menuButtons._y - galleryMask._height;

The targetPos variable is a reference point up to which the menu will be scrolled. Think of it as an anchor towards which the menu is pulled. Its value is obtained by substracting the height of the mask from the position of the menu buttons. It makes sense: you have to scroll your menu by the height of its mask, so that each time the buttons below the current ones appear.

Next, both buttons that serve for scrolling the menu (menuDown and menuUp) are disabled just before the scrolling begins. You don’t want your menu to be moved up and down without control — it is best to lock it until it has reached the targetPos coordinate.

menuDown.enabled = false;
menuUp.enabled = false;

And now comes the onEnterFrame event handler:

menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};

The code line that makes the menu move is the one that adds a value to the menuButtons’ Y coordinate each time the onEnterFrame event is fired:

menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;

Remember that the addition assignment operator (+=) adds the value on its right side to the cuurent value of the variable on its left side. And what’s added is the result of substracting the position of the menu section buttons from the target position point, divided by menu speed. As the menu approaches the target position, the distance is smaller each time and there you have the easing effect. Remember that the lower the value of menuSpeed, the quicker the menu will move. I found 6 to be an optimal value in combination with the speed of the SWF, which was set to 30 fps at the beginning.

And each time the menu approaches the target point, a check must be made to see if the point in question has actually been reached. This is done through an if conditional statement, of course.

if (menuButtons._y <= (targetPos+0.8)) {

The if conditional checks if the menuButtons movie clip’s vertical position is lesser than or equal to (<=) the target position plus 0.8 pixels (targetPos+0.8). You have to make this so as a safeguard against waiting too long for the menu to reach the target position. This easing method is described in more detail in my sliding image mask tutorial.

And, once that condition is fulfilled (meaning that the menu has reached the target position), its position is fixed in place by setting it definitely to the rounded targetPos value. I recommend that you always do that in cases like this, because objects placed on round pixels are rendered much better than in other cases. Well, Flash 8 renders graphics greatly, but ensuring this with round coordinates doesn’t hurt.

menuButtons._y = Math.round(targetPos);

Then, of course, you should delete the onEnterFrame event handler, because it has fulfilled its purpose and it is good to take load of the user’s computer processor.

delete menuButtons.onEnterFrame;

After that, the buttons for scrolling the menu up and down are enabled again.

menuDown.enabled = true;
menuUp.enabled = true;

As for the onPress event handler function that serves to enable scrolling the menu up, the differences are only in the conditions and some other details.

menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};

The main if conditional statement checks if the position of menu buttons movie clip is lesser than zero and if the lower edge point of the menu buttons movie clip is greater than zero. This time, the target position is determined by adding the height of the mask to the menuButtons’ current position.

Top of page

Conclusion

Congratulations on going through to the end of this tutorial and learning very much about ActionScript! I am glad that you have followed me until the end. There are some things I want to tell you.

First, this gallery is modular, expandable and pretty powerful. Of course, it could have been done in many other ways: having many thumbnails in each section instead of a maximum of 20, scrolling thorough thumbnails etc. But that would be another gallery.

The main purpose of my tutorial is to teach you to build a powerful dynamic image gallery by combining ActionScript and XML so that you can also build other galleries, which will have different interfaces and menus. I wanted you to show how to handle the main elements of such image galleries: XML, preloading, navigation, visual effects, etc. I hope that you have learned much and that you will use the knowledge in other galleries and create cool Flash websites.

Note also that if you are going to have many, many images (let’s say, about 100 sections), the XML file is going to be heavy. In that case, you will need to preload the XML too, using the XML object’s getBytesLoaded and getBytesTotal methods. Also, note that in this tutorial’s code I have limited the number of pictures to 1000. This is more than enough for any practical purposes. If you need even more than that, just change the if/else if/else statement inside the enableButtons function.

Top of page

Afterword

I have invested much time, energy and work into the creation of this tutorial, because I want you to learn to create cool an amazing stuff in Flash, for free, and with as clear and detailed explanations as possible! Were it printed inside a paper book, the tutorial would be more than 80 pages long! And it’s free.

If you find it useful, please spread the word about flashexplained.com, or better yet, link to flashexplained.com! I will appreciate it very much.

As for any questions considering this tutorial, please remember that I am not answering any such questions by e-mail.

You can download the source files for this lesson below, comprising the entire folder structure (without the images, of course). See you in other ActionScript tutorials!

Download all the source files here

I am back in Europe. My ISP sucks so you’ll have to wait a little bit. But, here is a little tease of the tutorials that I am going to create and post soon:

• Shape tweens in Flash CS3 explained (how to animate outlines, fills, colors)
• How to animate cool effects like blurring, glowing etc.
• How to create a powerful, dynamic image gallery

Stay tuned!

This is a flashexplained.com update: I am currently moving from Africa back to Europe. This being said, I won’t be able to reply to your comments and questions until somewehere after November 15th, once I settle down. I have so much things to do - moving from one continent to another is no small thing.

Also, there will be just one or two more tutorials for Flash 8, and after that, everything will be made freshly for Flash CS3. Expect new tutorials during the second half of November. In the meantime, enjoy the Flash tutorials and keep on learning.

Luka Maras

• How to draw a basketball using the great drawing tools available,
• How to create a movieclip symbol, which is a must for any motion tween animation,
• How to create keyframes,
• How to create easing effect for better realism and more.

You can see the example of the animation you are going to create below. It is the classic example: an animated, bouncing ball.

1. Creating the basketball movieclip

1.1 Open a new Flash document by selecting File > New. In the window that opens, select Flash File (ActionScript 3.0) and click OK.

1.2 Click on the Rectangle tool icon and hold your mouse until the menu appears. Select the Oval tool (O).

1.3 Go to the the bottom of the Tools panel and block the stroke color, because you won’t need it here. Just click on the small color square near the pencil icon and when the palette shows up, click the No color button (see it in the image below, on the right). For the fill, choose any color you like.

1.4 At the very bottom of the same panel, check if Object Drawing and Snap to Objects options are unselected (turned off).

1.5 Click anywhere on the stage with the Oval tool (O), start dragging your mouse and draw a circle.

1.6 Select the circle by clicking on it with the Selection tool (V). Go to the Property inspector and enter the new dimensions for the circle: 85 px.

1.7 Deselect the circle by clicking anywhere on the stage with the Selection tool (V).

1.8 Select the Paint bucket tool (K) and go over to the Color panel.

1.9 In the Colors panel, do the following:

• Click the paint bucket icon to select the fill color.
• Choose Radial in the Type drop-down menu.
• Add two more crayons (the little colored squares near the gradient bar). Do this by simply clicking anywhere between the two existing ones, the black and the white.

1.10 Now, click and drag the first crayon a little bit to the right and change its color to #EFA201.

1.11 Move the other crayons as well, so that they match the positions shown in the image below. Also, change their colors to (from left to right):

• #EFA201
• #FF5B15
• #FF5B15
• #000000

1.12 Using the still selected Paint bucket tool (K), click on the circle to fill it with your newly made radial fill.

1.13 Select the Oval tool (O). Go to the Property inspector and select a solid, black line with a thickness of 1 for the stroke. Then block the fill color by choosing the no color option for it, just like you did before for the stroke color.

1.14 Draw an ellipse on the stage, like the one shown below.

1.15 Select the Free transform tool (Q) and click on the ellipse with it to select it. Then rotate it. Do this by bringing your mouse over any of the corners, clicking and dragging.

1.16 Use the Selection tool (V) to:

• Select the ellipse and drag it over the circle.
• Click on an empty area to deselect the ellipse.
• Select the outer part of the ellipse, which is sticking out of the circle.
• Delete this part by pressing either Delete or Backspace on your keyboard.

1.17 Play around with the oval tool to get a few more curves, add them to the circle until you have a nice looking basketball:

1.18 Now, still using the Selection tool (V), select the whole basketball. Click and drag around it to select all the fills and strokes too.

1.19 Select Modify > Convert to Symbol (or press F8) to convert this drawing into a movieclip symbol.

• Select Movie clip as type.
• Call it basketball and click OK.

You’ll notice that a blue outline has appeared around your basketball. This is Flash telling you that this is a symbol and not a simple drawing.

1.20 Go to the timeline and click on the little dot beneath the padlock to lock this layer. Then double-click on its name and rename it to basketball.

1.21 Click on the Insert Layer button to make a new layer and call it floor.

1.22 Click and drag the floor layer downwards, until you see a thick dotted line appear. Release your mouse button then.

1.23 The floor layer will now be beneath the basketball layer.

This makes sense, because the basketball will bounce off the floor, so it has to be in a layer above it.

1.24 Creating the floor is easy. Just select the Rectangle tool (R) and draw a nice rectangle at the bottom of the stage. Make sure it spans the stage from side to side.

I used a linear gradient because I find it more real that way. I also removed the outline (stroke).

1.25 Lock the floor layer. You won’t be adding anything inside it anymore. And it’s better to have it locked so you don’t put anything in it by accident. I always work like that.

Also, unlock the basketball layer.

Top of page

2. Making your first motion tween animation

2.1 Select the ball by clicking on it once with the Selection tool (V). Move it upwards into the start position - somewhere near the top edge of the stage. You can move it either by clicking and dragging it with the Selection tool or by using the arrow keys on your keyboard.

2.2 Right-click in frame 11 of the basketball layer and select Insert Keyframe from the contextual menu.

…and a new keyframe will appear.

2.3 You should move the ball to a point where it will touch the floor. But you can’t see the floor now, because it exist only in the first frame of its layer. To change this, right-click on frame 11 of the floor layer and select Insert Frame.

…here’s the result:

As you can see, the frame is represented by a small rectangle in your timeline. This shows you that the first keyframe of the floor layer lasts until frame 11 without any change. It has been prolonged in duration by the addition of a simple frame. And that’s exactly what you need, because the floor needs to be seen at all times, together with the ball, but without any changes.

Also, notice that you have added a frame while this layer has been locked. That’s perfectly OK. You can add or remove frames and keyframes from a layer even while it’s locked. Since you won’t be making any modifications to the floor layer, it is best to keep it locked, thus preventing any possibility of accidentaly adding or removing something from it.

2.4 Click on the second keyframe of the basketball layer to select it and then select the ball on the stage by clicking on it once with the Selection tool (V).

2.5 Now that you have selected the basketball movieclip, move it towards the floor by using either the combination of Shift+down arrow on your keyboard (by far the easiest option) or with your mouse. I recommend using the keyboard, because you will move the ball straight down, while it is possible that you can accidentally move it left or right with your mouse. Since you need the ball to fall straight down, use your keyboard. Move it down to the floor.

2.6 OK. You will now animate this ball. Right-click either on the first keyframe of the basketball layer or anywhere between the two keyframes and select the Create Motion Tween option from the contextual menu.

If you have done everything as I’ve shown you up until now, you should see a continuous arrow appear between the two keyframes, on a magenta background.

The image above shows how a successful motion tween looks like in the timeline. If anything went wrong, the arrow would be discontinued (dashed). That’s how Flash tells you that something doesn’t click.

2.7 Test your Flash movie by selecting Control > Test Movie.

You will see your ball falling to the floor again and again. This is standard Flash behavior - an animation will loop endlessly unless you stop it via ActionScript, but that is not important right now. As you certainly noticed, the ball is somewhat slow. Let’s speed up the animation. Close the test window by pressing the close button in its upper right corner, to return to the Flash authoring environment.

2.8 Select Modify > Document to access the Document Properties window. Increase the Frame rate to 24 fps. Click OK.

2.9 Test your animation again by selecting Control > Test Movie. You should see your ball move much faster now. This is the result of the frame rate increase. The abbreviation fps means frames per second. It is the number of frames the playhead in your Flash movie passes through in 1 second.

Fine. Close the test movie window now.

Top of page

3. Making the ball bounce

Now, you are going to repeadetly insert new keyframes and change the position of the ball to be able to create the bouncing movement.

3.1 To avoid having to prolong the duration of the first keyframe in the floor layer each time you are moving your ball around, insert a Frame in frame 80 of the floor layer. Do like you did before: right-click on the frame and select Insert Frame.

You will easily remove any surplus frames later, don’t worry about it.

3.2 Right-click in frame 21 and insert a Keyframe there. If you are not sure where you are in the timeline, just look below the layers. There, you can clearly see where you are. The image below shows you the number of your current keyframe circled in red.

3.3 Select the ball with the Selection tool (V). You shoul place the ball upwards again, because it is supposed to rebound of the floor. But, this time, you should move it a little bit downwards. I moved it by 40 pixels downwards. Why is this so? Because you must simulate reality. And in the real world, the Earth’s gravity force pulls the ball so it never returns in its starting position, but always rebounds to a lower position than the last time.

3.4 After you have positioned the ball, right-click between the 2nd and 3rd keyframes in the basketball layer and select Create Motion Tween from the contextual menu, just like you did for the first segment of your animation.

Test your Flash movie again (Control > Test Movie) and see how the ball is going up and down. Don’t be surprised if it suddenly disappears. This is because the floor layer lasts longer than the basketball layer in the timeline.

3.5 You have to return the ball to the floor now, in a new keyframe. Instead of having to reposition it each time (on the floor, the ball will always land on the same spot) manually, you can accomplish this more easily.

Right-click on the second keyframe in the basketball layer and select Copy Frames from the contextual menu.

3.6 OK, now right-click in frame 28 and select Paste Frames.

In this new, 4th keyframe, the ball will be positioned exactly as it is in the 2nd keyframe. This is because when you copy a keyframe in Flash, all of its contents get copied too. Every single object inside it, with all of its properties (position, size, etc) gets copied.

3.7 Create the 3rd motion tween animation by clicking between the 3rd and 4th keyframes and selecting it from the menu.

You certainly noticed that this segment of the animation, the third motion tween, is a little bit shorter than the previous ones. This is also to make it all look more real: since the Earth’s gravity pull is acting on the ball, there is now a shorter distance for it to go from the highest point to the floor. The ball’s fall gets shorter, so you have to make your motion tween shorter accordingly.

3.8 Repeat the steps from 3.2 to 3.7, each time repositioning the ball in its upper position and just copying and pasting a keyframe for the ‘floor’ position. Also, make the motion tween segment smaller each time. You can see how I did it below. The numbers at the bottom of the image indicate the keyframes in the timeline.

3.9 Test your movie (Control > Test Movie) and see if you are satisfied with the result.

Top of page

4. Adding the easing effect to your motion tween animation

The motion tweens you made so far are fine, but still the animation doesn’t look realistic. Why? Because currently the ball isn’t accelerating and decelerating. And the gravity pull does just that: In real life, while the ball is falling, it should be gaining in speed because of the gravitational pull. Meaning its speed should increase as it is approaching the ground. This is called acceleration.

Also, when bouncing back up, its speed should decrease, again because of the gravitational pull. As it is moving up, its slowing down. This is called deceleration.

Luckily, Flash has just got an option in store for you - the easing option - which is made for simulating acceleration and deceleration. Let me show you how to apply it to your current animation.

Save your document before proceeding! Always remember to do that.

4.1 Select the first keyframe in the basketball layer.

4.2 Go to the Property Inspector. You will find the easing option on its left side. Click the little arrow next to it and a slider will appear. Drag it down until the value reaches -100. This is called easing in or accelerating.

4.3 Test your movie (Ctrl+Enter on a PC or Cmd+Return on a Mac) and watch how the ball accelerates towards the floor during the first segment of the animation.

4.4 Back to the authoring environment (Flash working space), select the second keyframe by clicking on it.

4.5 This time, set the Ease option to 100, which means easing out or decreasing speed (decelerating).

4.6 For each subsequent keyframe, you should set the easing option a value that’s smaller then the previous one, because the ball is losing power with each bounce. Here’s how you should set it to get a natural effect - a ball that slowly comes to a halt:

And that would be it. Test your movie to see the ball bouncing. You have just learned how to do a basic motion tween animation in Flash CS3, the difference between frames and keyframes, and how to achieve an easing effect. In next Flash CS3 animation lessons, I will explain to you how to animate shapes, morph them, how to animate effects and more.

Download the source file for this lesson

• How to use the basic shapes to create the ones you need,
• How to use the great blending filters in Flash 8 pro,
• How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: .

3 Make sure that both the Object drawing and Snap to objects options are turned off: .

4 Click the Set Corner Radius icon () and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

6 Select the Paint Bucket tool (K). Go to the Color Mixer panel (opened by default — you can always find it in the top right part of the Flash working space). Do the following (see numbers in the screenshot below):

1. Click on the paint bucket icon to select the fill color.
2. In the Type menu, select Linear.
3. Click once on the small colored square found on the bottom right.
4. In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
5. Set the Alpha property for this color to 34%.
6. Set the same color for the left square, but set its Alpha to 100%.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Top of page

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

9 Select the Oval tool (O). Go to the Property inspector and make the following selections: block the fill color, select any flat color for the stroke (outline) color, set the line type to Solid and choose 3 for line thickness.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

11 Select the ring by clicking on it with the Selection tool (V), if it isn’t already selected. Go to the Color Mixel panel and click on the pencil icon to select the Stroke color (). In the Type menu, choose Linear exactly like you did for the fill color previously. Add two more color squares to the gradient by simply clicking anywhere between the two existing ones. You should have four of them in total, with the following color values, positioned like this:

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

12 Select the Gradient Transform tool (F). Click on the ring to select it. Rotate the gradient by 90°. To successfully do this, make sure that Snapping to Objects is turned on (View > Snapping > Snap to Objects). Then, press and hold Shift, click on the white circle handle and start moving your mouse clockwise.

13 While the ring is selected, press F8 (or select Modify > Convert to Symbol) to make a symbol out of it. Name it outer ring. Select Movie clip as type and be sure to select the registration point in the middle (see screenshot below):

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

1. Blur X and Y: 8
2. Strength: 260%
3. Quality: High.
4. Color: #ADE2FC.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

Top of page

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

16 Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That’s where the ring that you have just created resides. Make a new layer above it and call it circle.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

19 Select the circle (both the outline and the fill). Open the Align panel by selecting Window > Align. Turn on the To stage button (1). Click the align horizontal center (2) and align vertical center (3) buttons.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

23 The copy of the circle fill will be selected by default after pasting. Go to the Color Mixer panel. Click on the paint bucket icon to select the fill color. In the Type menu, select Linear. Make the following gradient:

• You should have three color squares, one in the middle and one on each end of the gradient.
• Each square’s color should be white.
• The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

Top of page

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

1. Bring the cursor close to the square’s upper right corner.
2. Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
3. Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

28 Click on the triangle to select it. Go to the Property inspector and type 27 in the W (width) field. There! You have a good-looking play button now. The screenshots below show the difference in size before and after the width of the triangle was modified.

29 Center the triangle inside the button.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

37 The new play icon movie clip will be selected by default. Go to the Properties panel and click on the Filters tab to set the blending options for this symbol. Choose the Glow filter and tweak it like this:

1. Blur X and Y: 6
2. Strength: 240%
3. Quality: Medium
4. Color: #ACE0FD
5. Inner glow must be turned on.

And — ta-daa — here’s the final result, with the background:

Now ain’t it cool? This blue neon glow looks soooo good :-)! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Top of page

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

39 Open the Library by selecting Window > Library.

40 Right-click on the play button in the Library and select Duplicate from the pop-up menu. The Duplicate Symbol window ill appear. Just change the symbol’s name to stop button and click OK.

Repeat the same thing with the play icon symbol: duplicate it and call the new symbol stop icon. You will have fice symbols (all of them movie clips) in the Library now: the outer ring which is present in both the play button and stop button symbols, as well as play icon and stop icon for each respective symbol. Let me show you now how to make the modifications.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

44 The Swap Symbol window will show up. All the symbols that you made in your Flash document so far are displayed here — exactly as they appear in the Library. Select the stop icon symbol and click OK.

Although this movie clip symbol looks exactly the same as the play icon, you know that this is the stop icon in fact. Flash informs you of this by displaying the name of the currently selected symbol in the Properties panel:

45 Now, double-click the stop icon movie clip on the stage to enter inside it. Erase the triangle and draw a 28 by 28 pixel borderless square in its place. I have made the square smaller, because if it had the dimensions of the triangle, it would come too close to the circle’s border and that wouldn’t look so good. Oh, yes: the color of the square should be the same as triangle’s: #3A5274.

46 Click on the stop button link to go back to the movie clip’s timeline.

47 Align the icon in relation to the movie clip’s center.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

49 Draw a rectangle here, without a fill, and make it the same size as the icon above it: 28 by 28 pixels. the line should have the same thickness as before (4) and the same color (#3A5274). Align it like you did with the icon. It should look like this:

And finally, here are both the play and stop neon glow buttons, side by side:

They look awesome! And there was no need at all to use Photoshop! The pause, fast forward and rewind buttons can be made easily now — you know now the easy principle of duplicating symbols. Just make smaller triangles for the rewind button and make two rectangles for the pause button. Nothing easier than that.

A single button that you just made has a file size of only 439 bytes! The same button made in Photoshop would have a file size ten times bigger than the one made in Flash! Still, it is much easier to create a neon effect in Photoshop than it is in Flash.

Hope you liked this tutorial. Take a look at other Flash tutorials on menus, buttons and interfaces that I made — you will find a lot to learn. Besides the design, these tutorials also explain how to make complete website navigation systems, so don’t miss them!

Download the source file for this lesson