Flash Game Design  
 
     
Tutorials Articles
     
AddThis Social Bookmark Button  
This is the final part of the flash tutorial to create a gallery with rotating thumbnails. We will now use some actionscript. to make the thumbnails function and to rotate them around the main image.
 
Step 29.
Code Explanation:

Line 1: A stop() function to stop it from looping

Line 2: A variable to hold the number of images in the gallery

Line 3: A boolean variable which is used to pause / unpause the gallery

Step 30.
Code Explanation:

Line 6 - 7: A for loop is created to assign each thumbnail a property containing the name of it's corresponding image. The "i" in the loop will start off at 0 and increment by 1 (i++), while i is below 8 (i<imageTotal). If we had 10 images we would set this to i<10. As the "i" increments, the variable "t" (line 7) will equal one of the thumbnails. So, when i is 4, "t" will hold the path of thumb4: "gallery.thumbHolder.thumb4".

Line 8: Now that we are storing "thumb4" in "t", we give it the property "image" and assign it to hold image4 ("image"+i)

Step 31.
Code Explanation:

Line 9: An onPress function is create for each thumbnail

Line 10: The last displayed image will be held in current, so we use this function to remove it before the new one is attached (line11), upon pressing the thumbnail

Line 11: We use the t.image property to attach the image to "imageHolder" MC. t.image is refered to as this.image because it's being called from withing an onPress function.

Line 12: When a thumbnail is rolled over with the mouse, the gallery will be pause (see next step), but when the thumbnail is pressed, we want them to start rotating again, so we set "pauseGallery" to equal false.

Step 32.
Code Explanation:

Line 14 - 16: "pauseGallery" is set to equal true when the thumbnail is rolled over.

Line 17 - 20: "pauseGallery" is set to equal false when the thumbnail is rolled out.

Step 33.
Code Explanation:

Line 21: When the gallery start image0 is attached to be displayed.

Line 22: An onEnterFrame function is created which will execute any code inbetween the braces {} repeatedly, at the frame rate (30) of the movie.

Line 23: Another loop is used to rotate each thumb counter clockwise with 0.5 degrees. This needs to be done because when the thumbnail holder is spinning round (line 27) the thumbnails will stop being upright.

Line 25: Last we rotate the thumbHolder by 0.5 degreess. You can change the value of this and line 27 to increase or decrease the speed of the rotation.

Step 34.
And here is the entire code:
 
 
And that brings us to the end of this Flash tutorial to create a rotating gallery! Download FLA
Part: 1 | 2 | 3 | 4 | 5 | 6
 
 
Site Copyright © 2008 Nick DS. All rights reserved.