3) Adding the Gallery Images
Step 4.
Now it's time to add some images, which I've made 360x280 in size. I'll be adding 5 in total for this tutorial. Drag one of the images anywhere onto the stage.
Step 5.
Convert the first image into an MC called image_0, giving it the same Identifier. Each image will be given a number, so that we can easily reference it with Actionscript later on.
Step 6.
Delete the image_ MC from the stage, add another image and conver it to an MC called image_1, also giving it the same Identifier as it's name. As you can see, from the image below of the library, I've added 4 images and converted them to MC's, and then placed them in a folder called 'images' . You'll need a minimum of 2 images for this tutorial.
Step 7.
Next, add a thumbnail image for each larger image. As you can see I've made the thumbnail have a width of 72, so that 5 thumbnails will line up, and equal the width (360) of the main image
Step 8.
Convert the thumbnail to a symbol called 'thumb_0', giving it the same Identifier.
Step 9.
As you can see again, Ive added 5 thumbnails and converted them to MC's. Delete all the MC's that are on the stage, becuase they'll all be added dymically within Actionscript in the next part.
Step 10.
Next we're going to start writing the actionscript to actually create the gallery. First of all we're going to define some variables. This is done at the top so that they can be changed easily, without having to look through the entire code to change something.
Line 1 - 2: The main images height and width are stored in these two variables.
Line 3: This variable will hold how many rows (and columns) of mask there will be.
Line 4 - 5: The rectangular masks will be referred to as box, so with these two variables the box's width and height are defined by dividing them with the rows.
Step 11
Line 6: A variable to hold the total number of main images that'll be in the gallery
Line 7 - 8: The thumbnail image's height and width are held in these two variables.
Line 9: This variable will be used to hold a spacing value. One use of it will be when we want each main image wo have a 20 pixel gap from the thumbnails.
Line 10: Each MC (movieclip symbol) we attach to the stage needs to be placed on it's own level, so this value will be incremented each time a new MC is attached, so that the next one will be placed on a comepletely new level.
Line 11: This variable we hold the position of the next image to be shown, when a thumbnail is pressed.
Line 12: The box masks will need a speed at which to shrink.
Step 12.
Line 13: An empty MC is created and named boxes which, as the name suggests, will holds all the box masks.
Line 14: Another empty MC is created which will hold the top layer of images
Line 15: The boxes MC is then set to mask the top MC
Line 16: Another instance of the box MC is created, and named as mask. Since we're going to be lining up all the images horizontally, they need to be masked so that only 1 is showing at a time. So this mask will be used to mask the bottom layer of images.
Line 17 - 18: The mask is set to have the same width and height as each image.
Line 19 - 20: The X & Y position of the mask is set so that it is covering the space where we want the image to appear.
Line 21: Another empty MC is created to hold the bottom layer of images
Line 22: The large mask MC is set to mask the bottom MC
Line 22: A boolean variable will stored whether or not to shrink the box MCs
Create Flash Photo Gallery With just 3 simple steps(import photos, select a template and then publish SWF file) by Flash Slideshow Gallery.Click here to See Tutorial and Sample.
Step 4.
Now it's time to add some images, which I've made 360x280 in size. I'll be adding 5 in total for this tutorial. Drag one of the images anywhere onto the stage.
Step 5.
Convert the first image into an MC called image_0, giving it the same Identifier. Each image will be given a number, so that we can easily reference it with Actionscript later on.
Step 6.
Delete the image_ MC from the stage, add another image and conver it to an MC called image_1, also giving it the same Identifier as it's name. As you can see, from the image below of the library, I've added 4 images and converted them to MC's, and then placed them in a folder called 'images' . You'll need a minimum of 2 images for this tutorial.
Step 7.
Next, add a thumbnail image for each larger image. As you can see I've made the thumbnail have a width of 72, so that 5 thumbnails will line up, and equal the width (360) of the main image
Step 8.
Convert the thumbnail to a symbol called 'thumb_0', giving it the same Identifier.
Step 9.
As you can see again, Ive added 5 thumbnails and converted them to MC's. Delete all the MC's that are on the stage, becuase they'll all be added dymically within Actionscript in the next part.
Step 10.
Next we're going to start writing the actionscript to actually create the gallery. First of all we're going to define some variables. This is done at the top so that they can be changed easily, without having to look through the entire code to change something.
Line 1 - 2: The main images height and width are stored in these two variables.
Line 3: This variable will hold how many rows (and columns) of mask there will be.
Line 4 - 5: The rectangular masks will be referred to as box, so with these two variables the box's width and height are defined by dividing them with the rows.
Step 11
Line 6: A variable to hold the total number of main images that'll be in the gallery
Line 7 - 8: The thumbnail image's height and width are held in these two variables.
Line 9: This variable will be used to hold a spacing value. One use of it will be when we want each main image wo have a 20 pixel gap from the thumbnails.
Line 10: Each MC (movieclip symbol) we attach to the stage needs to be placed on it's own level, so this value will be incremented each time a new MC is attached, so that the next one will be placed on a comepletely new level.
Line 11: This variable we hold the position of the next image to be shown, when a thumbnail is pressed.
Line 12: The box masks will need a speed at which to shrink.
Step 12.
Line 13: An empty MC is created and named boxes which, as the name suggests, will holds all the box masks.
Line 14: Another empty MC is created which will hold the top layer of images
Line 15: The boxes MC is then set to mask the top MC
Line 16: Another instance of the box MC is created, and named as mask. Since we're going to be lining up all the images horizontally, they need to be masked so that only 1 is showing at a time. So this mask will be used to mask the bottom layer of images.
Line 17 - 18: The mask is set to have the same width and height as each image.
Line 19 - 20: The X & Y position of the mask is set so that it is covering the space where we want the image to appear.
Line 21: Another empty MC is created to hold the bottom layer of images
Line 22: The large mask MC is set to mask the bottom MC
Line 22: A boolean variable will stored whether or not to shrink the box MCs
Create Flash Photo Gallery With just 3 simple steps(import photos, select a template and then publish SWF file) by Flash Slideshow Gallery.Click here to See Tutorial and Sample.
No comments:
Post a Comment