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. Like this:
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.
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").
Place the buttons on each side of the "Scroller":
Open the actions for the main timeline and paste:
//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
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._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.
_root.bigImg.path = path;
Set the variable path inside the bigImg Movie Clip.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!
discuss this topic to forum
