DOWNLOAD SOURCE CODE FOR THIS TUTORIAL

Posted by webzo

This is the gallery you will be learning to make. It can look totally different; you will just learn the code behind it.

First of all, get 5 images that you like and put them on the same folder of your document.
Name them "1.jpg", "2.jpg", etc.

1. Now create a new Movie Clip (named "Images"), and drag a Loader component to it. The loader component is on Window -> Components.

After you have dragged it, Flash will save a copy on work library so drag 4 more from there to the Movie Clip.

In each of these components you need to set the path to your images. For that just select one, go to the "parameters" tab and change the "contentPath" field to the path of the image you got.


The loaders will have the images and automatically scale them; you won't have to worry about sizes.

Now create a Button, you will only draw on the "HIT" frame because we need it to be invisible.


Draw a square of the same size of the loader on the Images Movie Clip, the color won't matter as the Hit frame is not visible.

Go back to the Images Movie Clip and create 5 instances of the invisible button you just created.

Place them behind each loader.

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.


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:

Code: Select all
//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.

Code: Select all
//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").

Place the buttons on each side of the "Scroller".

Open the actions for the main timeline and paste:

Code: Select all
//to know whether the buttons are pressed or not
var aPressed = false;
var speed;

aLeft.onPress = function()
{
//set the right button to visible
_root.aRight._visible = 1;

//button is pressed so se to true
_root.aPressed = true;

//speed is positive so it will go to the right
_root.speed = 5
}

aLeft.onRelease = function()
{
//button released so key isn't pressed
_root.aPressed = false;
}

aRight.onPress = function()
{
//left button set to visible
_root.aLeft._visible = 1;

//button pressed
_root.aPressed = true;

//speed negative so will go to the left
_root.speed = -5
}

aRight.onRelease = function()
{
//released
_root.aPressed = false;
}

this.onEnterFrame = function()
{
//if a button is being pressed
if(aPressed)
{
//if hit the limit in the left
if (_root.Scroller.Scroll._x + speed == -100)
{
//pressed set to false
aPressed = false;

//right button invisible
aRight._visible = 0

//leave this so we don't go left
return;
}
//if hit the limit in the right
else if(_root.Scroller.Scroll._x + speed == 5)
{
aPressed = false;

//left button invisible
aLeft._visible = 0
return;
}

//if is positive will go to the right or negative to the left
_root.Scroller.Scroll._x += speed;
}
}
Done! Test it to see the results.



Code Explanation:

Code: Select all
function showBig(obj, path)
{
point = new Object();
point.x = obj._x;
point.y = obj._y;
localToGlobal(point);


Translate the coordinates of the "obj" to global coordinates.

Code: Select all
_root.attachMovie("big_image", "bigImg", 33, {_x: point.x, _y: point.y});


Attach the movie.
Inside the curly braces in the forth parameter you can set any property belonging to the Movie Clip you just attached, so I set the _x and _y coordinates there.

Code: Select all
_root.bigImg.path = path;


Set the variable path inside the bigImg Movie Clip.

Code: Select all
btn1.onRollOver = function()
{
//call function
showBig(this, "1.jpg");
}


Call "showBig(obj, path)" when the user moves the mouse over the button.

That's all for Scrolling Image Gallery. Hope this tutorial will help you dig down more about Flash Actionscript and you will have more understanding about it. Happy coding!