In this Flash 8 lesson explained in extreme detail, I will teach you how to make a powerful image gallery. Before proceeding, please note that this lesson is made for intermediate and advanced Flash users — the ActionScript code behind this image gallery is nearly 250 lines long. This image gallery will have the following characteristics:
- 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
- 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.
- 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).
- 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.
- 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.
- A dynamic text field. This is where the descriptions for all the galleries and images will appear.
- 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.
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:
- Select Dynamic Text.
- Select a font that you like.
- 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.
- Select white for the text color — this choice will make the button labels visible in both states — initial and rollover.
- 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.
- Select Anti-alias for readability in the rendering menu.
- 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.
- 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.
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):
- 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).
- 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:
- Click the small pencil icon.
- Click the little square next to it and select the No Color option (the white square with the red diagonal line).
- Click the paint bucket icon to select the fill color.
- Select the Linear option in the Type menu.
- Click on the left color (the small square) in the gradient stripe to select it.
- Enter the hexadecimal code for this color: I chose #00789F.
- 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:
- Click on the square that you drew in the previous step to select it. The controls for gradient modification will appear.
- Click the circle with the small black arrow in it and start dragging your mouse counter-clockwise.
- 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):
- Using the Rectangle tool (R), draw a square (I made a 19 by 19 pixel square).
- 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.
- 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.
- Release your mouse button and you’ve got yourself a nice triangle.
- 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.
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.
That’s it for the menu! You have completed it.
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:
- Use Dynamic Text, which is understandable, since this text field will show the preloading process via some ActionScript code.
- Select the same font type that you did before, to have a coherent design for your gallery.
- Select an appropriate font size — I chose 14 for the button labels before so I did the same here.
- Select black as the color, to be highly visible against the thumbnail holder’s white background.
- Select left text alignment.
- Choose Anti-alias for readability.
- Like in most cases in this tutorial, make sure that the Selectable option stays turned off.
- 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:
- Select the Numeral option (you need all the numbers, since this is a percentage preloader). See 1 in the scrrenshot below.
- Click inside the input field below the Include these characters text and type the percentage sign (%) inside it (see 2 in the screenshot below).
- 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:
- Give the movie clip an Instance name: call it imageHolder_mc.
- 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:
- Click the Embed button in Property inspector.
- Select the Numerals option and insert the % character where appropriate, just like you did in step 5.11.
- 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.
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:
- 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 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.
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.
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!
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.
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).
And that would be it concerning the XML file.
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.
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:
- Flash will load the exact number of images as there are inside the XML file.
- 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:
- 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.
- The number of thumbnail images must match the number of big images.
- 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.
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 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.
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.
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<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.
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. Please proceed to the explanation of the ActionScript code behind the dynamic XML image gallery.
Have you tried to put a scroll bar on the movieclip that displays the thumbnails as a way to handle more than 20 images?
Jeff Salter: A lot of people asked me how to do that. Frankly, after so much work and options explained I simply moved onto other lessons. Basically, if one wishes to have more photos, one should make more section, like, for example, “vacation photos 1″, “vacation photos 2″ etc.
This tutorial rocks! Thanks a lot.
I’ve just a question: i need a dynamic button to download a pdf for each gallery. I tried but wasn’t able to achieve it?
Maybe you can help me? Even if it’s not via xml would be great…
Thanks again.
can u plz help me to separate the thumbnails with the big image? i want to show them side by side not overlapping.
Love the tutorial, thanks!
I want to create a gallery that when I click on the thumbnails it brings up chapters of the video in dynamic text boxes, as well as the description and onRelease load a video instead of the big image.
I’ve just can’t get it to work, it’s driving me crazy!
I’d love your help!
Pleease see below for an example of my XML
Electric power control room.
Rusted tanks.
A room with a view.
Stalactites.
Enormous conductive pipes.
The big axle.
The factory seen from the top of an empty tank.
Flights of stairs.
Barren roof construction.
Made in Germany.
A stalagmite.
thanks!
This is great! I only have one question that maybe someone can answer, “How can you also include random portrait images in addition to the landscape images in the same gallery?”
Thanks!
Very good tutorial, but i will be much better if the picturelocations are located in the xml file like this:
<image name=’Tresnjevka. I love the atmosphere on this one.’ location=1.jpg’
You think it will be possible in that way?
It will make it much more dynamic, because it will increase the possibiliy of using a database.
Let me know
i’ve been able to associate a pdf every time i clicked a gallery button adding this line
geturl(“http://mysite.com/gallery” + (1+Number(this._name.substr(13))) + “.pdf”);
into “function enableButtons(numberOfGalleries:Number):Void {”
but if i create a custom button to click for download the result is “NaN”.
So i need to pass the data to this button (or mc)…
Who can help me? Please…
I did it!
Created a custom function for the button from the root framecode.
pls urgent put a scroll bar on the movieclip that displays the thumbnails as a way to handle more than 20 images.
thanking u
and also wish to link with images with title
Great tutorial. thanks very much. Everything works great except none of the dynamic text shows up. I’m guessing it’s something simple I just am not doing right. I did check text color to make sure I didn’t have white text on white background
Any ideas what it might be?
Thanks,
Brian
definetly great. I’m very(sic!) impressed. A beautiful and easy to use image gallery. Still working on the customizing….
thanx
mirkokosmos
Awesome tutorial. I just have one problem. My gallery works fine when testing it through Flash, but when I place it into the web page, the images never load and I get the error message (images did not load). Am I missing something? I’m using CS4 – could that be causing problems?
Check that with your hosting provider – I had the same problem because on my hosting account loading resources was blocked by default. Images, SWFs and such. Also, check the path if it is correct.
Thanx for your great tutorials
Gallery is customized an works well …. a scrollbar for the thumb area would be nice
Regards from a desperate flash noob
Great Tutorial! Is there anyway you can add a next / back button to the large images to scroll through them?
Regards
Jen
Awesome! Thanks a lot dude
Hey guys I am not able to download the xml file in section 8.1? I am working on everything else pretty well. This is the hottest ‘tut’ that I have hopped on in a while. Too bad I am the only person I know that does this stuff in my area. (no one to brag to when I am complete. lol)
This tutorial is excellent! I’m working on customizing it now, but I have one question. Is there a way to remove the menu completely and just have it load the thumbnails instead for instances where I only have one menu item?
I have all the code in and can get the thumbs to show but for some reason Big pictures are not displaying or showing. Not even the thumbs seem clickable? help please.
Great tutorial !!! It helped me a lot in creating the kind of gallery that I wanted to. But I have stuck at place. I want an additional feature of having next & previous button so that I can easily navigate through the images those load in bigImage.. movieclip. Please reply earliest.
I would also like to request other people in the forum to please let me know the solution to my problem as quickly as possible.
Thanks.
Thanks for great tutorials. but i have a problem it looks very simple yet ive not found a solution to it :
what if I need to load external images into already made empty movie clips and be sure that all images loaded with the preloader on the 1st frame??
And thank you in a dvance
Hey i really liked u tutorials … it’s pretty powerfull dynamic image gallery…. Thanks a lot… hope i will come with some cool gallery with the help of this one.. for my site….
Anyone with a clue on this?
Dec 18, 2008 at 5:47 am
I have all the code in and can get the thumbs to show but for some reason Big pictures are not displaying or showing. Not even the thumbs seem clickable? help please.
I have no code errors to help me cause the code is validating. Hmm..?
Well gentle man it was nice and fabullous tutorial with full of explanation i’ve never seen in my life ever very nice and creative would you plz do the favor for the designers of new world that plz tell me the best and power full, flash learning or tutorials website through which i am going to learn the stuf which is very important for flash designer.
plz tell me i am redular watcher of the website.
thanks and best regards.
kh junaid.
Hi,
Thanks for this great tutorial!
You can check my version of this gallery here:
http://www.edytajordan.com/galleries/ltcomfort
I would like to know what you think about it.
I use 2 XML files, each main button loads seperate XML ( gallery). And then at the top you can see buttons for sub galleries. I have also added custom functions that let user to print or download single image. And I have also added function that lets me put more than 20 thumbnails. I’m not going to post my code here for those functions, because I have changed the code from tutorial a lot to suit my needs and I also used my own name for MovieClips, so I don’t want to cause a lot of confusion.
I would appreciate feedback very much!
Thank You!
Your tutorial was outstanding and very clear to understand. Just have one question….
I need to include a text link in the description of each image. How can i do that? In the xml file?
Please please please get back to me. Thanks.
also how do i make it so that it is 4 columns and 5 rows instead???
Yes i would like to know how to change the columns and rows. That is, i would like only 2 columns and multiple rows. Also, How do I change it so that i can put more than 20 pictures?
Hi,
My way of handling more than 20 thumbnails was to create a container MovieClip with 3 layers. Bottom layer is the loader for thumbnails. Another layer is where I put my buttons for scrolling the thumbnails (in this case arrows). And the top most layer is the mask which is showing only the first 20 thumbnails.
Then I had to set “arrows” to be invisible and make them visible when there are more than 20 thumbs.
// function enable buttons
function enableButtons(numberOfGalleries):Void{
// code for enableButtons() function here…
//
// added functions for displaying buttons if more than 20 thumbnails here
hideArrows();
if(imagesInGallery[clickedGallery]> 20){
showArrows();
};
};
};
enableGalleryNavigation();
};
This is an example of the code for showArrows() that I used:
function showArrows(){
imagesHolder_mc.arrowUp_mc._visible = false;
imagesHolder_mc.arrowDown_mc._visible = true;
imagesHolder_mc.arrowDown_mc.onPress = function(){
current = imagesHolder_mc.thumbs_mc._y;
target = current – 315;
var arrowTween:Tween = newTween(imagesHolder_mc.thumbs_mc, “_y”, Strong.easeOut, current, target, 3, true);
arrowTween.onMotionChanged = function(){
imagesHolder_mc.arrowDown_mc.enabled = false;
imagesHolder_mc.arrowUp_mc.enabled = false;
};
arrowTween.onMotionFinished = function(){
imagesHolder_mc.arrowDown_mc.enabled = true;
imagesHolder_mc.arrowUp_mc.enabled = true;
};
imagesHolder_mc.arrowUp_mc._visible = true;
};
imagesHolder_mc.arrowUp_mc.onPress = function(){
current = imagesHolder_mc.thumbs_mc._y;
target = current + 315;
var arrowTween:Tween = new Tween(imagesHolder_mc.thumbs_mc, “_y”,
Strong.easeOut, current, target, 3, true);
//imagesHolder_mc.thumbs_mc._y += 10;
arrowTween.onMotionChanged = function(){
imagesHolder_mc.arrowDown_mc.enabled = false;
imagesHolder_mc.arrowUp_mc.enabled = false;
};
arrowTween.onMotionFinished = function(){
imagesHolder_mc.arrowDown_mc.enabled = true;
imagesHolder_mc.arrowUp_mc.enabled = true;
};
};
};
// code for hideArrows()
Code for function hideArrows(){
imagesHolder_mc.arrowUp_mc._visible = false;
imagesHolder_mc.arrowDown_mc._visible = false;
};
I hope this will help
ps. imagesHolder_mc is the name of my container and thumbs_mc is the MovieClip that loads thumbnails
I need to put a clickable link in a description.. Any idea’s how to do that?
I see that Monica Pascual already asked that.. so Monica if you figured it out contact me: mcancho@gmail.com
thx
Hey Luka (or anyone!), I was wondering if you would be able to help me with how to change the movie clip thumbnails a bit. I need the gallery to be able to accommodate both vertical AND horizontal pictures, which would change the amount of pictures on each row in each gallery, but I’m not sure how to change the code for it to be able to do this.
How can we make it so when we’re on the loaded image we can click on a ‘next’ button instead of having it go back to the thumbnails? That way, the user won’t have to keep clicking on the next thumbnails and back and fourth?
Is there a way? Thanks! Great tutorial.
I’ve followed the tutorial and now have a working gallery… However, I want to be able to resize the “big image holder” movie clip in the library dynamically according to the size of the photos (as my gallery contains both landscape and portrait photos) How do I do this?
I figured that I can put each image’s height and width in the xml file, create a new array for these values and tell flash to push these values from the xml files into the corresponding arrays, but HOW do I then use these values to resize the movie clip??
Any help would be appreciated.
i did the whole thing step by step but i keep geting this error msgs.. pls help…
Scene=Scene 1, Layer=actions, Frame=1: Line 29: ‘;’ expected
import flash.filters.DropShadowFilter;
Scene=Scene 1, Layer=actions, Frame=1: Line 74: ‘{‘ expected
function parseGalleries():Void {
Scene=Scene 1, Layer=actions, Frame=1: Line 99: Unexpected ‘}’ encountered
}
thanks for the amazing tutorial Luka, your descriptions of the actionscript were far better than any other tutorial I have found in weeks of searching for ‘how tos’:) am working on trying to make my own gallery now and was wondering is there a way we can make the entire background go slightly darker when the larger image is open? just been browsing some other xml galleries and I noticed that effect on them, and thought it was a nice touch to make the photo look even more like they are floating over the main page. http://www.aaronbirchphotography.com/index.htm (that was one of my favs in terms of flash/xml functionality).
ANCHO….i am still trying to figure it out myself (how to get Url links inside the image diescription area). I have been racking my brain trying to figure it out….if you have the answer please fill me in….
IF ANYONE ELSE knows how to do this please HELP ME, IM DESPERATE…LOL
thanks.
lillmsqt4u81@aol.com
hello edyta,
good day!
i tried this tutorial and it working fine, i put your code in this tutorial because my pictures are more than 20. But i encounter problems in Tween class. Can you help me with my problem.
or anyone who knows how to add more thumbnails? it is limited to 20 pics per button. i appreciate your help.
thanks!
have a nice day!
thanks Luka,
it’s nice to have this tutorial… I have a problem also in menu, number 01-10 buttons are ok, but the remaining buttons when I clicked example number 11, it displays the thumbnails of number 1, number 12 displays number2, and so forth…
can you help me?
thanks!
I have treid out your tutorial! It’s great and very detailed. But I think I did something wrong because when I test the image gallery the only thing that appears is the banner, scroll down button and text ‘Click the gallery’. Please help!!!! I have done everything okay until the stage with the folders I think. I don’t really know how to create the mypage.html file. Please help!!!
Thanks in advance
hello sarah,
just give me your email…i’ll give you the source file of my work i did in this tutorial… there are many possible cause of the problem for not displaying the content (and/or) the menu itself.
Have a nice day!
Jiro – what problem do you encounter with the Tween class?
my emial is : sara-bik@hotmail.com
Thanks a lot Jiro
Thanks for the great tutorial Jiro. I’m having the same problem as Sarah however. I’m not sure how to make the mypage.html file and that seems to be the only thing missing. My email is ilancloud@gmail.com. Thanks again! and keep up the good work.
Having the same results as Sara, was wondering if you figured it out.
Thanks
hello edyta!
Tween class is not recognized, that’s the only problem.
Hello Jiro!
I think you need to import the Tween class. Just put the following statement at the VERY top of your code (import statements always go before any other code-I think)
import mx.transitions.Tween;
this should help! let me know
I have followed this step by step twice and have quadruple checked my work and file structure and everything else. I can get the down button to react but I cannot see any of my images, thumbs or large images and I cannot see my list gallery list. Any suggestions?
Thanks:)
Hi, superb tutorial, I enjoyed working through it, however I seem to be having a similar problem to Sara. When I test the movie, the structure comes up mostly fine, however there is just one blank box in the menu on the left, with no text inside it, instead of the list of gallery items that should be there. I also only get the down button displaying, however the up button appears upon clicking on the down button.
Also, I can click on the blank box on the left and my first gallery does come up and I have found that the tumbnails and big images seem to work fine. However I can only get this part of the gallery to appear, and can’t select any other area, plus as mentioned the text isn’t in the box so I wouldn’t know which gallery I was selecting. The actual text for each image appears correctly too
Any suggestions would be greatly appreciated, as I am stumped. My file structure and xml file all seem to match up namewise so I have no idea what the problem is. Any help would be very much appreciated.
Thanks.
Great tutorial, very in depth. Just a question about putting the gallery into an existing flash site. Is it best to import the SWF into the FLA? Or better to reconstruct it inside my existing site. My problem is that it loads the gallery, but not the images and menu…
Thanks great efforts. II do enjoy following all your tutorials.
I also have the same comment as Chris “it loads the gallery, but not the images and menu…”
Hi Luka, thanks for the great tutorial!
You have not been answering these posts for a while, so my question is to all who might know the solution:
I want to highlight the active gallery button, i.e. when I click on a gallery name the button has to keep its “over” state while I’m browsing through that gallery. Any ideas how to do that?
Also it would be great if someone posted how to add previous/next buttons on the big image.
Thanks!
Hi Luka,
I just want to say thank you very much for such a superb tutorial job well done. I can tell that you have devoted a tremendous amount of time writing the explanation in such a clear and eloquent manner. You deserve a star.
Question: I realize that you have set the tracker at %5 so that the number of rows contains a total of 5 thumnails. I would like to know if I want to have all the thumbnails to load in a single horizontal row, how do I manipulate the actionsript? I want to put a mask so that only seven thumbnails show up at once on the screen and place a “previous” button before thumbnail #1 and another button ( “next”) after thumnail 7 to act as a scroller. That way, the thumbnails can move from left to right once someone clicks one either button. Please help….
Thanks for the easy to follow, every detail included approach. Being new at this, I really have trouble following along some of the tutorials that make a lot of assumptions.
I am afraid I am having the same problem as Chris and Fadia. For some reason none of the images, the text, or the buttons show up. I am only able to preview the logo header, and the “browse galleries” line with up and down arrows.
Thanks again…
Thank you so much for this tutorial!!!
You were so much help and the directions were clearly and easily explained in great detail. I’ve learned so much. Thanks again!!!! 
Hi, absolutely brilliant tutorial!
Although, I’m having the same problem as Sara, when i test the movie, the up/down buttons work, and the logo banner is there but no thumbnails or gallery button menu on the left… I don’t have a clue what i’ve done wrong!! If anyone can help me I would REALLY appreciate it!! my mail is loloalfonz@hotmail.co.uk
thank you!!! Lauren
OK I have figured out my problems, for the menu buttons, make sure the text inside them isn’t Bold. Mine was and for some reason this prevented the text from appearing.
Hello, the tutorial is excellent and the gallery is very robust. I have the same comment/question as Pavel (Feb 8, 2009 at 5:41 pm). Hopefully someone can help out with that. Thanks a bunch!
hi
thank you very much for this garte website , i have a question , can i use this ultimate dynamic image gallery for swf file , i mean i have some swf file that i want to use it instead of JPEG file , i’m beginer in flash , could you please help me, i have a main swf file and some external swf file that i want to load them by preloader , what should i do??? please do me afavor and help me
this is a brilhant piece of work, i’m trying to make an Next/Prev Button in Big img without luck, can u help us Luka?
im also working on a Next/prev setup for slideshow style viewing of these galleries… so far no luck
thanks very much for it, i m really helped about my project to find any works….thanks
thanks for the tutorial, its realy helped. i was download and success for you
hi…
this gallery is reallly interesting..
Hi, this gallery is ideal for me and I’ve found the tutorial very clear and easy to follow. However I’m having an issue with the xml and image loading…
I’m getting this error:
Error opening URL “file:///C|/Documents%20and%20Settings/Simon/My%20Documents/testFlash/gallery/architecture/thumbs/1.jpg”
However there is a 1.jpg image in the thumbs folder…?
Any help v. much appreciated
duude this tutorial was no less than great! thank you!
Loved the tutorial man. I have to say it was the best I’ve found thus far online. Well written, excellent screen shots and no non-sense. Perfect.
Keep it up and if you have other tutorials on flash I would love to know where to find them. Video too even.
Thanks again.
Stef
Has anyone found out how to add this to another project? I’m trying to figure out what part do I just drag into my Gallery section of my site I’m creating. Does that make sense?
I’m not looking to load.swf or anything. I’m looking to just drag and drop this file into the gallery part of my content layer on Frame 6. I can send a screen shot if need be. Someone let me know.
Thanks
stefserafin@gmail.com
Stef
Hi Luka,
just wanted to thank you for this great tutorial! Awesome work!
Since I needed a slightly different layout, I managed to show thumbs and big images in two different placeholders. But when I had one big image open I couldn’t click another one. Needed about 2 hrs to find out what I had to change.
I tried
-
function thumbClickable():Void {
currentThumbnail.onPress = function() {
removeMovieClip(displayBigImage);
…
-
Hopefully I can manage to make a one-row vertical scrolling thumb-menu, showing only 4 thumbs at once. That’d be perfect for my layout. If anyone has an idea how to achieve this: supertt@gmx.de
But I think I can get this working in a few hours.
Greetings from Germany, and thanks a lot!
Hi!
I’m working with my gallery, every link is working perfect, but the first one is not good. The pictures from the first link I cann’t open in full size. What is the problem?
Thanks
Wow Wow!!!
This is the coolest tutorial ever, I like it….
Ok Please I have a request to make; I want a walk thru’ or tutorial on http://www.gensler.com …. My clients insists they want something like that.
I cant wait for it please! Thanks for everything, you are very good at what you do
o wwwwwwwwwwwwwwoooooooooooooooooooowwwwwwwwwwww thats Super Duper grate
i learn alot
I’m having the same problem as Simon. Can anyone help?
Error opening URL “file:///C|/Documents%20and%20Settings/Simon/My%20Documents/testFlash/gallery/architecture/thumbs/1.jpg”
However there is a 1.jpg image in the thumbs folder…?
Any help v. much appreciated
Robertlu326@gmail.com
Thank you so much. Wonderful Tutorial! Everything clearly laid out and explained! Perfect 10/10
Did anyone figure out an answer to Pavel’s question above: how to make the gallery menu buttons stay in the over(frame 2) state when the user is browsing the thumbnails? I’ve been fiddling with it for several hours with little luck.
Some people asked how edit the grid of the thumbnails. The part of code to change is here:
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;
}
Let’s call “5″ value A and “3″ value B.
change the A value to the number of columns you want and then change the B value by the same amount that you increase or decrease value A.
Very Well explained tutorial. Nicely done.
However after i completed the tutorial i got a list of 1046:Type was not found or not a compile-time constant: Void
i changed ‘Void’ to ‘void’ which cleared all the errors but gave me another list of 100 different errors.
most of these are 1120:Access of undefined property
e.g. 1120:Access of undefined property:j
on the line… for (j=0; j<currentGallery.childNodes.length; j++) {
with a few more 1046 errors on the Buttons.
any help would be much appreciated.
Thanks, Luke
Any way to do this without the menu and simply have thumbnails loaded?
This does not work I am getting errors even when I load it straight from your source files without editing anything.
These are them.
Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/monochrome/thumbs/1.jpg’
Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/architecture/thumbs/1.jpg’
Put a PayPal Donate button on your site. I’d like to contribute to this valuable resource.
Please also update this for Flash CS4. Thanks.
I’m at step 2.19
You wrote “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.”
But the move clip is not selected by default. Instead of being able to type gallerMenu_mc in the properties box, the properties box is saying “Frame” and asking for a “Frame Label”
Can you please help me through this?
Thank you,
Andrea
I just wanted to know i am trying to create a flash photo album which has a few categories and then about 20 images per section, i am thinking i might not need to use the buttons, or am not sure, any advice on the best way to go about it. I am new to flash and do not know much about implementing actions and just want the images to be viewed on by one and maybe controlled by either left/right buttons or a scroll bar. any suggestions ro advice pls?
very much appreciated
thanxs
Why when i trace the width and height of the big images i get completely wrong values?
I’m trying to remake the gallery for the thumbs to be loaded elsewhere and i want to center the dynamically loaded images?…
Where would i need to target for me to target the big image?
where is the flash file supposed to be saved in the whole folder directory?
hlp pls
thanxs
wot does this error mean?
“…
Error opening URL “file:///C|/Documents%20and%20Settings/Desktop/root/gallery/gallery/gallery.xml”
…”
Thank You, very cool tutorial… don’t get it yet but am sure it will come together because of your efforts…
Hey, Great tutorial, I just havea few questions i need answered, I followed the tutorial down to the note and quite to my surprise when it came time for me to test the swf out i encountered script errors.
String literal was not properly terminated
currentGalleryButton.sectionTitle_txt.text = “0″+(i+1)+”
String literal was not properly terminated
“+currentGalleryTitle.toUpperCase();
Syntax error.
for (j=0; j<currentGallery.childNodes.length; j++) {
would very much appreciate it if anyone could help me.
Cheers
Thanks for the tutorial its excellent, i have been searching for such a tutorial for years. Now i am having a few problems not with the actionscript because i’m getting no script errors it merely with the galleries; they dont show up even though folder locations and image locations are sound…
Any help would be great thasnks
Amazing….what a tutorial!!!!!!!
Great tutorial.
I wanted to know Instead of text in the menu, How do get an image button to call the thumnails
hi luka thx again for this royaly great tutorial.
question; ive been trying to create a next/prev button for the “BIG IMAGE”. im having big difficulties. ive tried a couple of tutorials , among many othersi tried kirupas wich seems to bee the one mos down to earth. but with no success.
i must admit im a newbie to actionscript, and ive been banging my head against the wall with this, so any help would be very much appriciated.
the code below is mostly lukas original code , with some modifications made to fit my design purposes.
i.e / instead of showing 20 smaller pics i choose to vies 9 larger ones , and i added a rollover to the thums the same way luka did with the mau buttons. the only thing missing now is the user friendly prev/buttons and if someone could , i would also like to be able to have more thumbnail sections for the same kategory . anyone know how to do that in as 2.0?
well thats all folks .
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
stop();
// Buttons
var menuSpeed:Number = 6;
var menuDown:Button = menuDown_btn;
var menuUp:Button = menuUp_btn;
menuUp._alpha = 0;
menuUp.enabled = false;
prevBigImg._alpha = 0;
nextBigImg._alpha = 0;
prevBigImg.enabled = false;
nextBigImg.enabled = false;
// Buttons end
p = 0;
var firstLook:Boolean = true;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
galleryMask._height = 96;
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 = 5;
var galleryBtnUpperMargin:Number = 60;
var galleryBtnVSpace:Number = 19;
var thumbMarginX:Number = 222;
var thumbMarginY:Number = 178
imagesHolder._x = 267.8;
imagesHolder._y = 98;
desc_txt._x = 10;
desc_txt._y = 353;
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;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == “big”) {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
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 = 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; i1) {
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.onRollOver = function():Void { // thumb rollover
this.gotoAndStop(2);
};
currentThumbnail.onRollOut = function():Void { // thumb rollout
this.gotoAndStop(1);
};
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();
prevBigImg.enabled = true;
prevBigImg._alpha = 100;
nextBigImg.enabled = true;
nextBigImg._alpha = 100;
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=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=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._y0) {
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;
}
};
}
};
}
bioText = new XML();
bioText.ignoreWhite = true;
bioText.onLoad = function(success) {
bioMc.bio_txt.htmlText = this.firstChild.childNodes[0].attributes.bio;
};
bioText.load(“gallery/info.xml”);
what does this error mean?
Error opening URL “file:///D|/AS%5FXML%5Fimage%5Fgallery/gallery/Studio/thumbs/2.jpg”
I’d like to make the whole thing dynamic. Is there a way to load a php script that creates the XML file based on MySQL values?
thanks mate u made my day
The most comprehensive tutorial I’d ever seen.
It has a lack, no button “PAYPAL DONATE”!!!
Really, I’d donate for support your work.
Kind Regards.
DanZ.
the best tutorial ever!!!!! honestly! Great work.
I got a previous and next button working. The only problem I’m having right now is that you have to click the previous button twice to start up the photo cycle.
If you click once, it reloads the same image. If you click one more time, it starts moving backwards. Once I figure it out, I’ll post again because a bunch of people were asking about it.
Okay figured most of it out. The following code will let you go forward and backward through the gallery. All you have to do is make a previous and next button and give them instance names of prev_btn and next_btn.
_root.prev_btn.onRelease = function() {
if (bigNumber>1) {
bigNumber–;
bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
disableThumbs();
loader.loadClip(bigImagePath,target);
_root.next_btn.onRelease = function() {
if (bigNumber1)” prevents you from going before 1.jpg.
“bigNumber–;” subtracts 1 from the .jpg hence making the user go backwards through the gallery.
“bigNumber++;” moves you forward through the gallery.
Now, I’m having a problem with the “if (bigNumber<bigImagePath.length-1) ”
Technically, that should make the user unable to move past your last .jpg in your gallery, however, this is not the case. In 3 of my galleries, it will stop right at the last photo but in all the others, I can move past by up to 5 .jpgs. I’m currently trying to figure out how to fix that.
Also, I’m working on making the previous and next buttons load up much like the Big movie clip does. That way, the previous and next buttons will only appear when they are usable.
same method video gallery
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
i did the whole thing step by step but i keep geting this error. I noteced Depak up above was having the same problem. Please help!!!
Scene=Scene 1, Layer=actions, Frame=1: Line 29: ‘;’ expected
import flash.filters.DropShadowFilter;
Scene=Scene 1, Layer=actions, Frame=1: Line 74: ‘{’ expected
function parseGalleries():Void {
Scene=Scene 1, Layer=actions, Frame=1: Line 99: Unexpected ‘}’ encountered
}
my gallery doesent list any errors, it just doesent load the big images when clicked on, what is the problem likely to be?
you are the best. everything works smooth even though i started with different dimensions of the document. superbly explained. i will post this tutorial on my website as soon as i renew it in flash. thank you
Chango no se si sabes español.. no importaa la buena onda igual llega SOS UN GROSO!!!! GRACIASS
Does anyone know how I could go about having the thumbnails in a different area than were the bigger image loads? i.e. I would like to have all the thumbnails smaller and down under the menu and then have the larger images show up in the white space to the right. Any assistance would be fab.
By the way, this is an awesome tutorial!!
Thanks
Thank you so much for such an awesome tutorial!! i have learned so much.. finally i can build my own gallery!!! once it’s done and up, i’ll post a link! =]
thank you!
Great tutorial. One question, how would I make it so the first group of thumbnails load instead of waiting for the button to be clicked? Thanks!
Thank you very much. It is working great.
Do you have any explanation about flash website with admin page?
How to connect xml with php? Is it possible?
To Posso…
I wanted to change the position of the Big Image instead of having the same starting point as the thumbnail, I added these codes somewhere on line 153 & 154.
displayBigImage._x = -20;
displayBigImage._y = -200;
That will do for the meantime, because I am new with AS as well.
Hope that idea helps.
Good luck.
Also, I added this gallery to an existing flash but I didn’t used the loadMovie command which I guess is best & easy way to do it so I am not having an issue with “DEPTH”.
But this work, where my “thumbnails” & “big image” loads up on top of the other instances. I added this code somewhere on line 150ish for thumbnail holder & line 160ish on big image holder:
imagesHolder.swapDepths(0);
Absolutely fantastic! Thanks for the work that went into this!
God Bless You! Just studying this tutorial was enough to teach me more than half of what I need to know in Actionscript. Thank you for such a wonderful tutorial.
Does anyone know How to get the sections (architecture , nature etc…) to put Horizontally because I have only 3 categories.
Luka – this tutorial was absolutely delightful to do. However I am getting the following error – (Yes i did follow the tutorial to the T)
“file:///C|/Users/default.Home%2DPC/Desktop/Shalu%20Files/HCC%2DFlash8/FlashGallery/root/gallery/monochrome/thumbs/6.jpg”
The folder and the thumbs have only 5 images – why is it giving error for the 6th?
Can you please let me know what I am doing wrong? All folders names are the same, in the correct destinations etc.
Thanks
Shalini
code for the next and previous buttons PLEASE….Anyone.!!!
DAVE….can u please post that code for the next and previous buttons again. Its not complete in ur last post. Thanks.
well done for explaining everything so well.
It was so helpful.
I think your next project should be showing how to have 4 gallery instances on the one flash file frame with all 4 galleries on automatic slideshow.
: )
wow. another of your tutorial that rocks! thanks man
i just started this tutorial and i got to the portion where you set the linkage (step 3.18) and it labels the class and not the identifier…i clicked on the identifier portion to type in the name and it said that it isn’t supported my actionscript 3.0 and that i would have to target actionscript 1.0-2.0 ….so my question is can i do this in actionscript 3.0?? i don’t want to get all the way done and find out i couldn’t…please let me know!!
i went ahead and finished the tutorial and tested the swf and it didn’t work….giving me 14 errors. i dont know what to do…can i send you a picture of the errors and get some help??
the errors all have to do with the lines that have the script “Void”
Can I know how to make a sub menu at the gallery menu ? example; architecture -> (sub menu from architecture)
I got the menu to work without giving me any errors, but the pics and menu buttons don’t appear…please help me if you can. my email is timkirchoff@oru.edu. thanks!!
Nicely explained tutorial but I am getting the drop shadow filter error as others were. Also get this in the downloaded source file. Can anyone help please?
need help!! i want to display 10 rows and 2 columns, how i do it?
thanx
I followed this tut and my .swf file works flawlessly on my computer, but when I add it to Dreamweaver it messes up. I preview my work in a browser and the .swf loads and all the thumbnails come up, but only the first couple will actually bring up their big picture when clicked. I haven’t even published it to the web yet this is happening on my computer. I’m pretty sure all my folders are in the correct places because all thumbnails are viewable and some big images are viewable. If anyone has any ideas please let me know. Thanks.
Also when I put the .swf file all by itself on its own .html page it works fine when I preview it.
I figured it out. I had an empty div tag overlapping the portion of the .swf file that didn’t work.
Hi Luka, i am appreciated your tutorial, very insight explanation i love it!, but i just have the same question with the pre and next button, if you can help
cheers
Has anyone made an AS3 Version out of this one? I’m still working on it.
Great example. I am having the same problem Brian had where my text doesn’t show up. I also checked the colors and they are not the same as the background. Any help would be appreciated. Thanks.
Amazing tutorial, got it working first time thanks to your brilliant step by step guide.
I’ve customized it a treat as well, now I’m trying to get it to not only display jpgs but swf files as well. The thumbnails will still be jpegs but I want the big images to be jpg OR swf.
I’m going to keep trying to crack it but I don’t suppose you’ve got any tips for a bit of code that would kind of do the following:
bigImagePath = “gallery/digital/”+whichGallery+”/”+bigNumber+”.jpg” OR “swf”;
I realise that the above won’t work, it’s just to help me communicate what I’m trying to do! I’ll let you know if I get it to work, but in the meantime please let me know if you have any ideas.
Massive thanks,
Matt.
I have the same problem as Claire
it has an error messege
Error opening URL “file:///H|/IT7A%20%28I.T%29/Dreamweaver/Image%20Gallery/gallery/gallery.xml”
please help
PERFECT TUTORIAL!!!!
ive made some changes and heres the result
http://www.smokinjoespits.com
thanks Luka!
http://www.smokinjoespits.com/Gallery.html
to the gallery
Great tutorial. Really wonderful… One thing I’m wondering is if anyone can help me – I’d like to have maybe some text or a picture displaying by default where the thumbnails load when the gallery is initially accessed. As it is, there’s the menu buttons at the left, a big white space where thumbs load and the description text at the bottom, and I think it looks a bit…. Void.
So, how can I put a picture or something there to fill the space that’s empty by default until someone clicks on a section button?
Hey Luka.. Thanks for the tutorial! You rock!
That’s my version: http://www.pafo.gr
Cheers!
can anybody send me a flash .fla of this tutorial into my email id please.
Thnx
If anyone could help with two questions, it would be awesome.
First, how do I get rid of the numbers that appear on the buttons?
Second, I would like ot increase the number of items that I have in the image holder. I would like to be able to have 10 rows of 10.
Can anyone explain how I can change the perameters so that this can be accomplished?
i have call this action script and load a thumbul image
but i have to scroll this thumbul image
is this possible ?
this is my Action script to load the thumbul and on click load image
mydata=new XML;
mydata.ignoreWhite=true;
mydata.load(“data1.xml”);
mydata.onLoad=dosomething;
function dosomething (success) {
if (success) {
showinfo(0);
//setup thumbnails
originalx=290;
originaly=475;
currentx=originalx;
currenty=originaly;
howmany=mydata.firstChild.childNodes.length;
for (i=0; i0))
{
currentx=originalx;
currenty+=79;
}
_root.attachMovie(“thumbnailmovie”,”thumbnail”+i,1000+i);
_root["thumbnail"+i].thumbnailname=mydata.firstChild.childNodes[i].childNodes[1].firstChild.nodeValue;
_root["thumbnail"+i]._x=currentx;
_root["thumbnail"+i]._y=currenty;
_root["thumbnail"+i].whichitem=i;
currentx+=79;
}
}
}
function showinfo (whichone) {
_root.title=mydata.firstChild.childNodes[whichone].childNodes[0].firstChild.nodeValue;
_root.description=mydata.firstChild.childNodes[whichone].childNodes[3].firstChild.nodeValue;
_root.myphoto.loadMovie(mydata.firstChild.childNodes[whichone].childNodes[2].firstChild.nodeValue);
}
and this is my xml data.xml
Concerts Full Page
thumbnails1/concertstn.jpg
aqua2.swf
A full page ad promoting two upcoming concerts
Juan Luis Guerra Poster
thumbnails1/juanluisguerratn.jpg
aqua1.swf
Poster for the dominican artist.
La Buya Full Page
thumbnails1/buyatn.jpg
aqua.swf
Full page advertisement for our morning show
Concerts Full Page
thumbnails1/concertstn.jpg
aqua2.swf
A full page ad promoting two upcoming concerts
Juan Luis Guerra Poster
thumbnails1/juanluisguerratn.jpg
aqua1.swf
Poster for the dominican artist.
La Buya Full Page
thumbnails1/buyatn.jpg
aqua.swf
Full page advertisement for our morning show
Is this possible to scroll image on mouse drag over left or right
Thanks for this tutorial………
Postoji li slican tutorijal na Hrvatskom jeziku?
E da…. HVALA PUNO! Super si ovo odradio, slikovito
!
First of all – this is a great tutorial!!!
I am new to this and had no problem following it in AS2. My question is if there is a way to re-write the action script for AS3? I am trying to implement this gallery into an existing flash file that I have already started in AS3. Also, how exactly are the dimensions for the positioning – I’ve noticed how the coordinates in the AS are not the same used in the placement of the image holders.
Is it possible to include a link to a different URL at the end of a gallery?
Any help would be greatly appreciated – and of course credited on my portfolio page.
Hey, this is a fantastic tutorial, excellent depth, yet unfortunately still having problems due to inexperience sadly, i was wondering if anyone might be able to enlighten me on a problem, basically iv gone through the tutorial twice, and had the same problem each time, when running the program it doesnt show the folder names or any of the pictures, im sure i havent missed anything (although that seems unlikely since its not working correctly) i was wondering if anyone could help or send me a source file, i would be incredibly grateful.
Thanks
Moza
Great tute Luka ! Very well written, and easy for all to understand. you did a good job with all the screenshots which I’m sure would have helped some of the newer ‘flashers’.
I had a little trouble with my dynamic text being displayed.
But as ‘Lee’ mentioned Bold dynamic text fields weren’t displaying at all. So thanks for the heads up Lee, saved me a lot of headache troubleshooting ! ; )
Keep up the good work Luka, you have a talent for writing easy to follow tutorials, I will keep a look out for more of your work.
Regards.
This is a great tutorial, thank you so much.
I also had a few 1046 errors and could see what was happening. In fact, that was a matter of ActionScript version, this script should be compiled with ActionScript 2 and not 3.
After modifying my publish settings, all these errors disappeared. But some popped up. Since I am using Flash 9, there is a concern with the ‘linkage’ options (see step 5.14). The field ‘Class’ should be emptied (since it is automatically filled) and everything will run nice and smooth.
Once again, thank you very much and keep up the good work !
for this error:
Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/monochrome/thumbs/1.jpg’
Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/architecture/thumbs/1.jpg’
Edit your .XML file and check you don’t have empti images comments like this
those delete them.
I have a problem displaying my Thumbs, the mount one over each other…
where is the option to get them loaded as in the example picture?
I’m having some trouble with this tut, in that I’ve completed it three times, starting from scratch each time, following the exact instructions the first time, modifying the photos and the XML file to reflect new folder titles, and finally, trying to download the source file, swap in my own photos with all the original XML info. With my own project, I am able to get the logo, menu navigation buttons (up and down arrow) and the instructions to click on a thumbnail to see the bigger picture; however, the thumbnails don’t appear, nor do the larger pictures. I am having a problem with the folder menu to the left of the page. It won’t display any of the buttons (movie clips). I don’t know what to do now, since I’ve gone through and looked for any obvious mistakes in the linkage, XML file, or the AS. Has anyone else had this problem and if so, how did you fix it?
Any response would be greatly appreciated.
Ben
Why isn’t my description text or my button labels showing.
Thank you for this script, i modified it and you can see it here http://www.cukiernia-sowa-wroclaw.pl/ just click any of the link on the home page. If you woud like to see the modified code just write to me. Ciao!
Hi! Can someone send me the sourcefiles? Unfortunately I got some errors… Thx! szilajmaggot@gmail.com
am still using this app
3 years and counting
Here’s the rest of the code Dave was talking about, in full. I had just appended this onto what was already there in the Gallery Actions’ Actions – Frame window. I do admit that my Actionscript is rusty, but this should work.
_root.prev_btn.onRelease = function() {
if (bigNumber>1) {
bigNumber–;
bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
disableThumbs();
loader.loadClip(bigImagePath,target);
};
}
_root.nxt_btn.onRelease = function() {
if (bigNumber>1) {
bigNumber++;
bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
disableThumbs();
loader.loadClip(bigImagePath,target);
};
}
It appears that I’ve run into a snag. Gallery works fine until I call in the gallery SWF into another parent SWF- buttons are broken. Any suggestions? You can also shoot me an email.
Xa Xa Xa that ain’t correct, here it is
/////////////////////////////////////////////////////////////////
_root.prev_btn.onRelease = function() {
if (Number(bigNumber)> 0) {
if (Number(bigNumber) == 1){
bigNumber = picsNO;
}else{
bigNumber–;
};
bigImagePath = “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
disableThumbs();
loader.loadClip(bigImagePath,target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i=1) {
if (Number(bigNumber) == picsNO){
bigNumber = 1;
}else{
bigNumber++;
};
bigImagePath = “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
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;
}else{
bigNumber = 1;
}
currentThumbnail.enabled = false;
}
//////////////////////////////////////////////////////////////////////
why?
first of all you must give each Pic it's proper text. As you cycle through the gallery with the Next and Prev button each picture must have it's own text displayed.
I included a variable at the begining of the code
var picsNO:Number = 0;
this is the equivalent for number of pics in the gallery
In function parseGalleries()
place
picsNO = currentGallery.childNodes.length;
ATENTION this will not work as I created only one gallery and eliminated the menu as I want to place this gallery inside a web page. For this to work you will have to create an array to store the number of images for each gallery somehow like this:
picsNO[i] = currentGallery.childNodes.length;
after that in Next and Prev button you will have to ask about picsNO[currentGallery]
In this case as you reach the end of the Gallery with the Next button it will jump to the first image and so on
THX for this tutorial!
Last comment, I swear.
I was having trouble with the previous and next buttons working when I pull in the gallery SWF into another. Because I had just tacked the prev and next button code to the END of Gallery Actions, I guess it just didn’t “get around to it.” Moving that snippet code to the top of Gallery Actions AND removing “_root.” fixed it.
can someone make this in Flash CS4 please?
thanks for this tutorial, i want to do more with images, can you please send me the latest styles of image galley with explained.
as i expected, something went wrong. i thought i was doing fine until i reached step 9. Is the file structure compiled in dreamweaver ? probably not. actually i was thinking on step 8. that i didn’t something funny, ofcourse i have read how xml works….any idea ?
i am definately confused on folder structure. where did this mypage.html came from ?
mean while i will read xml tutorial