FLASH ACTIONSCRIPT TUTORIAL

Making a Dynamic Image Gallery 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: o a white background, just to make it nicer, and to be able to add a drop shadow effect to it later, o an empty MovieClip inside which the external JPEG thumbnail will be loaded and o 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: o a white background, o an empty MovieClip inside which the big external JPEG image will be loaded and o 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: o 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. o 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! 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. NOTE Just a little bit about the dimensions of your document here: The document's size (width and height) is just a suggestion, like all of the dimensions and element positioning (menu, main images, thumbnails, etc) involved in this lesson. I recommend that you use my dimensions until the end of the tutorial, so that you can more easily follow my instructions. Later, once that you grasp the way the gallery works, you can change the dimensions and the general layout of the gallery to suit your needs. 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. 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 Shiftclicking 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. 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. 2. 3. 4.

Unlock the gallery menu layer. Click on the layer's first frame to select it. The Property inspector tells you that a frame has been selected. 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 counterclockwise. 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 gradientfilled 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 counterclockwise. 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.

TIP Always think about the user who is the least web-savvy. Creating a user-friendly site with the lowest common denominator in mind will enable you to have a much bigger public and also, the users will want to return to your site because they found it easy to use. 4.24. Lock the gallery menu layer.

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 88x61 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 88x61 pixels, I decided to make my thumbnails 81x54 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 475x317 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. 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. 2. 3. 4. 5.

6. 7. 8.

Dynamic text, of course. Choose a font that is readable. Avoid exotic fonts. Choose a size that is suitable for reading. Font sizes 11 or 12 work just fine. 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. 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. Select Anti-alias for readability (you will have to embed the characters because of this later). 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. 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 475x100 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. NOTE I didn't make separate layers for the background rectangle and the text inside the logo movie clip, but just selected the whole thing and made a movie clip symbol out of it. It is usually recommended to make separate layers for different elements inside a symbol, but logos aren't supposed to change much, so I guess a single layer should pose no problems at all. Of course, if you are going to animate an element inside your logo or are planning to make changes later, you should place each element on its own layer. 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): Dallas.

Tresnjevka. I love the atmosphere on this one. Motovun. New York. Paris. Color mayhem! The sleeping monster. Let me out! A barrel on the side of the trail. Subterranean passage. A train in snow. 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. ... 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. ... 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. 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. A barrel on the side of the trail. 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. IMPORTANT You may have as many galleries as you like, as long as each one is referenced in the XML file, and the corresponding folder exists. This is possible because in this tutorial you will see how to create a menu that can contain a basically limitless number of buttons (each button corresponds to a gallery). 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. TIP Using only lowercase letters for folder names will prevent a lot of possible mistakes. I recommend that you use them only, because you can change them into uppercase letters once these names are loaded in Flash, which you will do later in this lesson. 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.

IMPORTANT In this project, the number of thumbnails for each section is limited to 20. It was my choice to make it this way, based on the gallery's overall layout and concept. You can increase this number if you want, but then you'll need to rearrange your gallery elements' position and dimensions to accomodate a higher number of thumbnails. I recommend that you stick with my concept until the end of this tutorial and then experiment later. Of you do need more thumbnails for a particular gallery section, I suggest that you split it into two or more sections. For example, if you have tons of photos from a summer vacation, split them into different sections, like summer vacation 1, summer vacation 2, etc. 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 469x311 pixels. The thumbnails should be made to be 81x54 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. Before you start working with your photos, here is a hint: If you need a smart, intuitive and easy to use application for managing your photos, I highly recommend Picasa from Google. It is completely free. With Picasa, you can search for and organize your photos on your computer, add many effects to them and edit them, then share and publish them on the Web. And for free! There are a lot of applications out there who do the same thing, but none of them is free and so easy to use as Picasa. 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. 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.

TIP If possible, always place all of your ActionScript code into one layer, and also, into as few keyframes as you can. The layer which contains your ActionScript code should be made exclusively for that purpose. There is just no sense in placing any graphics or symbols inside it. Also, place the layer with ActionScript either on top of all layers or below all the other layers so that you can find it very quick when you need it. This is a time-tested and a very convenient practice! 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