Making the ultimate dynamic image gallery in Flash 8 — part 4

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.

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 page to see how to create a text field where gallery and image descriptions will appear.