I will explain you the ActionScript programming code by section, for easier understanding. The code consists of the following parts:
1. Defining variables and positioning the main gallery elements 2. Importing the DropShadow filter
3. Creation of the MovieClipLoader and Listener objects and the functions that enable preloading
4. Loading XML 5. Parsing XML
o Retrieving gallery data (titles and descriptions) o Creating menu section buttons dynamically 6. Defining the functionality of the menu section buttons
o Enabling the display of the roll over and roll out states o Defining which thumbnails shall be loaded
7. Thumbnail positioning and thumbnail preloading 8. Defining the functionality of the thumbnails
o Disabling the thumbnails while the big image is preloading o Selecting the right description for the chosen image
9. Making the big image clickable 10. Fading in the loaded big image
11. Creating the scrolling functionality for the gallery sections menu Let's start!
12.1. Defining variables and positioning the main gallery elements
As you can see, some of the variables here are created to serve as shortcuts to various movie clips, buttons and text fields:
var menuDown:Button = menuDown_btn; var menuUp:Button = menuUp_btn;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc; var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc; var imagesHolder:MovieClip = imagesHolder_mc;
var descText:TextField = desc_txt;
This is done in order to reference them more easily and to do it a lot more faster. For example, imagine if you wanted to point to the menuDown_btn button from a galleryMask_mc movie clip's event handler. Without the shortcut, you would have to do it like this:
this._parent._parent.menuDown_btn
But when you have defined the variables as you did above, so that they serve as references to various objects in your SWF movie, all you have to do is write them and Flash instantly knows what movie clip or button you're talking about, no matter where you reference it. So, instead of writing the above path, all you do is write menuDown and that's it!
And of course, when you are referencing a Movie clip symbol, you have to define the variable which serves as its shortcut as a Movie clip type of variable:
var imagesHolder:MovieClip = imagesHolder_mc;
In a similar way, variables that reference buttons must of the Button type, and of the TextField type for text fields.
Next, the speed at which the menu will scroll is defined, in the variable menuSpeed. This value will be used later, when the scrolling of the menu is going to be defined.
var menuSpeed:Number = 6; menuUp._alpha = 0;
As you can see above, the menuUp button, which is used to scroll the menu upwards is first made invisible by turning its _alpha (transparency) property to 0 (zero) and then disabled by setting its enabled property to false.
Why is this done? To simply turn off and make invisible the button, not to confuse your users. I have done a little bit of testing and people told me that they don't know which button to press in the beginning. Since the menu can only be scrolled downwards at first, it makes sense to remove the menuUp button. This also removes any confusion. So, later you'll see the explanation for the code that makes the button in question appear, but only once a user has clicked on the menuDown button.
NOTE You must always think about your users and make your websites as user-friendly as possible. This can be tricky with Flash, as it offers far more possibilities than plain old HTML, where navigation is reduced to textual or image links. Flash offers basically infinite possibilities to create rich, interactive experiences, and that's why you must be careful: Don't let yourself be seduced by the vast array of eye-candy gizmos that can be made — always keep the user in mind! Have someone try out your Flash project before you launch it: even just a little bit of testing with real users (NOT web designers and such, who are web and computer-savvy) can go a long way towards improving the user experience. I always test my projects before going live. I suggest you do the same and make this a habit.
The variable firstLook is of the Boolean type, which means that its value can equal only true or false. This variable will help Flash determine if the user is using the gallery section menu for the first time. You'll see it later: If the user is indeed using the menu for the first time — by pressing the menuDown button, the menuUp button will appear and become enabled (clickable). After that, the firstLook variable's value will be set to false, because once the button for scrolling the menu up appears, there is no need and sense to do it again.
var firstLook:Boolean = true;
After that, the height of the galleryMask movie clip is set via the _height property of the Movie clip class. This value is expressed in pixels. I have set it to 391 pixels, because I have found that this value is fine for showing up a certain number of gallery section buttons. It just looked good to me, after some experimentation.
galleryMask._height = 391;
See now why it's fine to make a movie clip out of a mask? You can easily readjust its dimensions via ActionScript — there is no need for you to go back inside the gallery menu movie clip each time that you want to change it, select the mask, resize it manually, etc. With ActionScript, the change is done in a snap!
Now come four variables of the Array type. An array is like a big variable: it can store many values, be those values of the Number type, String (text) type or something else. Think of them as of filing cabinets, where each drawer contains a value. They are perfect for storing many values, which will be used later at different points in your code.
var imagesInGallery:Array = new Array(); var galleryNames:Array = new Array(); var galleryIntros:Array = new Array(); var descriptions:Array = new Array();
They serve to contain the following values:
The imagesInGallery array will store the information on the number of images in each gallery section.
The galleryNames array will keep the names (titles) of the sections of your image gallery. If you recall, these are the names of the folders of different gallery sections, which are exactly the same as the values of the title attributes of gallery nodes inside your XML file.
The galleryIntros array will store the descriptions for each gallery section. These are the values of the intro attributes belonging to each gallery node in your XML file. The descriptions array will store inside itself the textual description for each image in
your gallery, which is going to be pulled out from the XML file too.
All of these arrays will be populated (filled with data) during the XML parsing process, which is explained later.
The tracker variable is of the Number type (which means it stores numerical values) and it will serve to keep track of the number of thumbnails when user has clicked on a gallery section and will also serve to place the thumbnails correctly and evenly into rows.
var tracker:Number = new Number();
The whatIsLoading variable is of the String type (meaning it will contain text values). This variable's value will serve to tell Flash if the image that is being loaded is a thumbnail or a big image and to react appropriately in each case.
var whatIsLoading:String = new String();
The variables that follow serve to position different elements of your gallery on the stage: var galleryBtnLeftMargin:Number = 10; var galleryBtnUpperMargin:Number = 60; var galleryBtnVSpace:Number = 23; var thumbMarginX:Number = 96; var thumbMarginY:Number = 68; imagesHolder._x = 243; imagesHolder._y = galleryBtnUpperMargin; logo_mc._x = logo_mc._y = galleryBtnLeftMargin;
The galleryBtnLeftMargin and galleryBtnUpperMargin variables hold the values that serve to position the imagesHolder movie clip (which will contain all the thumbnails and big images, once they load) and also to position the logo. The variable called galleryBtnVSpace determines
the vertical space between each of the section buttons inside the gallery menu. If you
remember, the height of this button was made to be 20 pixels, so adding three more pixels should be just fine. The thumbMarginX and thumbMarginY variables' values determine the spacing between thumbnails of each gallery section.
Next comes the positioning of the big dynamic text field, referred to as desc_txt... desc_txt._x = 243;
desc_txt._y = 400;
...or using the shortcut (see above), descText. Below is the text that will appear when the gallery loads and there hasn't been any interaction with it yet from the user. You must give your users some guidelines for them to be able to use your image gallery more easily.
descText.text = "Click on a gallery name on the left to load its thumbnails. Remember, you can click on a thumbnail only when all the thumbnails in a gallery have been loaded. When you click on a thumbnail to see the big image, clicking on the big image will close it and you will return to the gallery. Use the button(s) above the galleries to scroll through them.";
Of course, you could have devised a graphical element to do this: for example, to give a hint that the big image will close once clicked upon, a "close" button with a small x inside it could be made to show up. There are always many ways to improve your user's experience. Choose what works best and what you think goes well with your gallery's overall design.
12.2. Importing the DropShadow filter
I decided to apply the DropShadow filter to the thumbnails to make them even nicer. The first thing that you must do before applying a filter to an object inside Flash is to import it. When you do this, Flash reads from your disk (specifically, from a folder within the Flash installation) and inserts all the needed code for a particular filter into your SWF movie. Then it can be used and applied, once the importation has been made.
import flash.filters.DropShadowFilter;
After that, a variable of the DropShadowFilter type is created.
var shadowEffect:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 100, 3, 3, 1, 3); The values between the parenthesis are as follows: distance, angle, color, alpha, blurX, blurY, strength and quality. They are pretty much self-explanatory. After that, you add the
shadowEffect variable which contains the filter to the thumbsFilter array, which will then be applied to the thumbnails.
12.3. Creation of the MovieClipLoader and Listener objects and the functions that enable preloading
If you wish to preload external JPEG images into Flash across all browsers, the best method available is the one that uses the MovieClipLoader object. This particular object is specifically made for external content loading. It is great and you will use it to load and preload both the thumbnails and the big images! Here's how it works:
1. The first thing that you must do is create an instance of the MovieClipLoader object. I