| 
| 
| 
| Last Modified: July 17, 2009 @ 4:25 am| Gallery 101 |
| by CyanBlue |
| This is very simple barebone version of image gallery. Basically you should be able to learn how to use loadMovie() function and assigning a handler to the loaded image to invoke certain actions. |
There are several things that I need to assume here.
|
| Take a look at the final version so that you will have better idea on what you need to do. |
|
FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT You do not have the Flash plugin installed, or your browser does not support Javascript. |
| Simple, right? Okay, let's tackle it process by process. | |||
| 1. Preparation | |||
| If you know the names of the files, you do know how many images are going to be in the gallery . Let's say that we have image0.jpg, image1.jpg and image2.jpg and image0_tn.jpg, image1_tn.jpg and image2_tn.jpg for the thumbnails. | |||
| Now, it's time to create something that will hold the name of the image files which is going to be an array. I have defined a new array.(Line 1) and a couple more variables(Line 2 - 4) that I am going to use throughout the movie. | |||
|
|||
| There is one more thing I need to prepare. I want to add fading in/out effect on the image files that the user selects. One image fades in and another image fades out. It sounds like that's two step action, right? I am going to create two empty movieClips that I am going to use to fade in/out the images. | |||
|
|||
| 2. Thumbnails | |||
| Okay, we have three images that we want to alternate to show. (I said three on purpose because we do not need to have any scroller with that.) We need to create three empty movieClips that you need to use to load the thumbnail images. Use createEmptyMovieClip() function to do that. and use loadMovie() function to load the thumbnail images into the created movieClips. | |||
|
|||
| Line 1 | for (var i = 0 ; i < image_arr.length ; i++) | ||
| Here I have a for loop that is counting from 0 to 3(image_arr.length). I have not used 3 in there because I have a plan to add some more pictures later on. When I actually add more images, all I need is to change the content of the image_arr that I have defined earlier. | |||
| Line 3 | this.createEmptyMovieClip("thumb" + i + "_mc", theDepth++); | ||
| This line creates three empty movieClips(thumb0_mc, thumb1_mc, thumb2_mc). | |||
| Line 4 - 5 | this["thumb" + i + "_mc"]._x = 50; this["thumb" + i + "_mc"]._y = 50 + 50 * i; |
||
Here I assign the location of those three empty movieClips. |
|||
| Line 6 | this["thumb" + i + "_mc"].loadMovie(image_arr[i] + "_tn.jpg"); | ||
| This line actually applies loadMovie() function into each movieClips. | |||
| Now, test your movie. You should be able to load the thumbnail images fairly quickly since you are loading small images from your hard drive. | |||
| Okay, time to add some functionalities to those thumbnail images that you have loaded into Flash. We will make them all to be buttons which loads corresponding image files. I am going to rewrite the previous for loop to add that functionality. To do that, I am going to create additional movieClips for each thumbnail to see if the thumbnail image is loaded or not. We need to check it to make sure that the image is loaded because the given instruction/functionality will be lost once the image is loaded. So, we need to give the instruction after the image is fully loaded. | |||
|
|||
| Line 4 | this.createEmptyMovieClip("thumb" + i + "_tmp_mc", theDepth++); | ||
| Here I have created additional temporary movieClip that I am going to use to monitor(by using the onEnterFrame handler) if thumbnail image is fully loaded or not(by checking the _width property of the movieClip). | |||
| Line 9 | this["thumb" + i + "_tmp_mc"].no = i; | ||
| I am defining additional variable for this temporary to keep track of which one is which one. Here is very common mistake people make. If you are defining something within the for loop, the value of the variable 'i' becomes the last number that the loop has been processed plus 1 because of the i++ at the end of the loop, and that value is not going to be assigned to the created movieClip. You are responsible of transferring the value. We need to know which button is pressed so that we will load the corresponding image file. | |||
| Line 10 | this["thumb" + i + "_tmp_mc"].onEnterFrame = function() | ||
| This is the loop that we use to see if the thumbnail image is fully loaded or not. | |||
| Line 12 - 13 | var l = this._parent["img" + currentHolder + "_mc"].getBytesLoaded(); var t = this._parent["img" + currentHolder + "_mc"].getBytesTotal(); |
||
| These two variables are the ones that are used to check if the image is fully loaded or not. | |||
| Line 14 | if ((l >= t) && (t > 1) && (this._parent["img" + currentHolder + "_mc"]._width > 1)) | ||
| We just created empty movieClip in line 3. The value of the _width property of the empty movieClip is 0, correct? We are using that idea here. I don't know how big or small the image file is, but it better be bigger than 1 x 1. So I am checking if the width of the thumbnail image is bigger than 1 or not to see if the image file is loaded. We are also checking the total bytes and the loaded bytes to check the image's file size. I hope you know the meaning of the _parent. _parent means the movieClip that this movieClip belongs. We are within this code block, this["thumb" + i + "_tmp_mc"].onEnterFrame, which means that 'this' points to 'this["thumb" + i + "_tmp_mc"]'. We know that 'this["thumb" + i + "_mc"]' movieClip is residing in the same level as 'this["thumb" + i + "_tmp_mc"]' movieClip. That's why we are using _parent to call the movieClip. Lastly, the use of 'this.no'. I am using this variable, no, that I have created in line 9 to address the movieClip. I know that you want to replace 'this.no 'with 'i' but you cannot because the value of 'i' is already 3 by the time when this onEnterFrame handler gets executed. |
|||
| Line 16 | this._parent["thumb" + this.no + "_mc"].num = this.no; | ||
| Basically doing the same thing that we have done previously with 'this.no'. I just gave it different name 'num' to differenciate with 'no'. | |||
| Line 17 | this._parent["thumb" + this.no + "_mc"].onPress = function() | ||
| Assigns the functionality right here. When the thumbnail gets clicked, it executes line 16 to load the image file. | |||
| Line 19 | if ((_global.selectedImage != this.num) && (_global.imageLoaded)) | ||
| The first condition checks if the image is already displayed or not. There is no point of loading the same image over and over when the image is already on the screen, right? The second condition checks if the image that is supposed to be loaded is fully loaded or not. |
|||
| Line 24 - 25 | delete this.onEnterFrame; this.removeMovieClip(); |
||
| We just assigned the functionality so there is no reason for this onEnterFrame handler to exist unless you want to hog down the memory by running this handler over and over. So, we are getting rid of this onEnterFrame in line 19 and deletes the movieClip. | |||
| 3. Image Loading | |||
Now, it is time to define a loadImage() function. This loadImage() function takes one argument which is a number we use to find out which image file it needs to load from the image_arr that we have defined earlier. |
|||
|
|||
| Line 3 | _global.imageLoaded = false; | ||
| Here we are resetting the _global.imageLoaded variable to reset the loading status. | |||
| Line 4 - 5 | this["img" + currentHolder + "_mc"]._x = 150; this["img" + currentHolder + "_mc"]._y = 1000; |
||
| Here we are resetting the _x and _y value of the movieClip that is going to load the image file. _y value is set to 1000 so that it won't be visible when the image file is loaded. The variable 'currentHolder' will be used throughtout the image loading and transition to alternate 0 and 1. |
|||
| Line 6 - 7 | this.createEmptyMovieClip("img0_tmp_mc", theDepth++); this.createEmptyMovieClip("img1_tmp_mc", theDepth++); |
||
| and, here we are creating two temporary movieClips that will take care of the transition process. | |||
| Line 8 | this["img" + currentHolder + "_mc"].loadMovie(image_arr[num] + ".jpg"); | ||
| of course, the actual loadMovie() function that gets the name of the image file from the image_arr array. | |||
| Here we have two onEnterFrame handler functions. The first onEnterFrame handler takes care of the loading an image file into an empty movieClip. The second onEnterFrame handler takes care of the actual transition effect. | |||
| Okay, the first image loading sequence. This block of code is pretty much the same as what we used earlier to make sure that the thumbnail image is fully loaded, right? I hope you already understood what I was trying to say up there. So, I am going to skip those lines that I have covered earlier. | |||
|
|||
| Line 5 - 6 | this._parent["img" + currentHolder + "_mc"]._alpha = 1; this._parent["img" + currentHolder + "_mc"]._y = 50; |
||
| Ths code gets executed only when the image is fully loaded. So, now I am putting everything back to where it is supposed to be, but I have set its _alpha property value to 1 so that the image won't be actually visible in the first place. The actual fade in sequence will be taking care of that. | |||
| Line 7 | _global.imageLoaded = true; | ||
| Here is the variable that I use to initiate the next onEnterFrame handler. _global.imageLoaded was initially set to false, but it only becomes when the image is fully loaded and resets back to false as soon as the _alpha property value is 100. | |||
| 4. Transition | |||
| Here is the second onEnterFrame routine that takes care of the image fade in and fade out. You need to see this part of code carefully. '(currentHolder + 1) % 2' I am using this % operator to alternate between 0 and 1. If you don't know what I am doing here, open up the new Flash movie and type 'trace(1 % 2);' and test the movie to see '1' in the output panel. Change the line to 'trace(2 % 2);' to see '0' as a result. Now, you know why I am using that '(currentHolder + 1) % 2' equation to get the right number that I need. |
|||
|
|||
| Line 3 | if (_global.imageLoaded) | ||
| Here I am using the value of _global.imageLoaded variable to make sure this routine works only when the image is fully loaded. | |||
| Line 5 | if (this._parent["img" + currentHolder + "_mc"]._alpha < 100) | ||
| Another if statement to make sure that the _alpha property value changes only when it is necessary since there is no need to add the value constantly when 100 and above does the same effect to our eyes. | |||
| Line 7 - 8 | this._parent["img" + currentHolder + "_mc"]._alpha += 5; this._parent["img" + ((currentHolder + 1) % 2) + "_mc"]._alpha -= 20; |
||
| The actual routine that changes the _alpha property value for each images. | |||
| Line 12 - 13 | this._parent["img" + currentHolder + "_mc"]._alpha = 100; this._parent["img" + ((currentHolder + 1) % 2) + "_mc"]._alpha = 0; |
||
| This 'else' block tidy up everything after the fade in and fade out is finished. I am making sure that the final values are 100 and 0 for those two image files. I don't think it is absolutely necessary to use these two lines, but I just do it as habit to make sure everything is in place. | |||
| Line 14 | currentHolder = (currentHolder + 1) % 2; | ||
| Here I am making sure that the next fade in and fade out process will work correctly by alternating the numbers. | |||
| 5. Presentation | |||
| Okay. Everything is set up. I don't think it is such a good idea to display three thumbnail images and nothing else. We've got to show the users what they will see so that we could make them to click on other thumbnails as well. | |||
|
|||
| Line 1 | loadImage(_global.selectedImage); | ||
| We just need to display the first image that is defined in the _global.selectedImage variable to fill up the space by calling the loadImage() function. You can change the initial image by changing the argument that we are providing. | |||
| Alrighty. I think I covered pretty much everything on the 'simple' concept of the image gallery here. This is where this tutorial stops. I am sure that you now know what you need to do to. I've done my job as long as you get the idea on what you need to do to get this simple image gallery going. It is your job to create the most sophisticated version of image gallery. You can load the data from any sort of source rather than hard coding it within the Flash. You can make the image fly in rather than fade in. Your imagination is the limit. Do what you gotta do and show us what you create. Well, my advice is that you start from something simple and then you build thins from there. | |||
|
|
|||
| Please post the question to the forum if you have any or if you have suggestion/correction. | |||
| Download the file from here : Gallery101.zip | |||
| | | | Last Modified: July 17, 2009 @ 4:25 am