Scrolling Image Gallery
| Category | : Flash | Views | : 31056 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : scrolling-image-gallery.zip | ||
| Result | : See the result | ||||
Now give each button an instance name, "btn1", "btn2", etc.
For now we are done with this Movie Clip, later we will add the code for the buttons.
2. Create another Movie Clip called "maskScroll" and add 1 more layer to it.
On the layer 1 drag the Images Movie Clip and give it the instance name "Scroll"; on the other layer draw a square over some loaders and set the layer to be a mask.
The Movie Clip should look like this:
3. Create another Movie Clip named "big_image" and drag a loader (instance "imgLoader") to it; make the loader bigger then the ones used in the other Movie Clip.
In the actions for the first frame of this Movie Clip paste this:
//we will set this variable from the buttons on the Images Movie Clip
var path;
//load the image from the path
this.imgLoader.contentPath = path;
Set the identifier of the Movie Clip to "big_image".
Now go back to the Images Movie Clip and open the actions for the first frame so we can make the code for the buttons.
//the "obj" parameter is the button instance and path is the image's path
function showBig(obj, path)
{
point = new Object();
point.x = obj._x;
point.y = obj._y;
//point object to get global coordinates
localToGlobal(point);
//attach Movie Clip "big_image" and set the _x and _y
_root.attachMovie("big_image", "bigImg", 33, {_x: point.x, _y: point.y});
//set the variable path inside the bigImg(big_image)
_root.bigImg.path = path;
}
btn1.onRollOver = function()
{
//call function
showBig(this, "1.jpg");
}
//other buttons events
btn5.onRollOver = function()
{
//call function
showBig(this, "5.jpg");
}
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut = btn4.onRollOut = btn5.onRollOut = function()
{
//every button have the same roll out event
//as they do the same thing: remove the bigImg Movie Clip.
_root.bigImg.removeMovieClip();
}
If you test the movie you will see that we are almost done, we just need to make it scroll.
So, go to the stage; drag the maskScroll Movie Clip (instance "Scroller") and create two buttons (instance "aLeft" and "aRight").
 |
 |
 |
 |
 |