Ethic Solutions Free Webmaster Tools
     
Create a Photo Gallery Flash Tutorials : FlashAdvisor.com
Flashadvisor logo
:: Desktop Shortcut
:: Flash Help
Advices from Experts

 Submit Here! · Link to Us · Newsletter · Tell a Friend ·

      Add Tutorial |

 

Advertise here










 

Google

Search WWW   
FlashAdvisor.com

 Home > Tutorials  > ActionScript

Create a Photo Gallery

Author: lookaa | Email
Website : www.flash-slide-show.com


Advertisement


Use your arrow keys or press the green left and right arrows in the following animation to navigate through the photo gallery:

Creating a Photo Gallery:

1. Create a new movie in Flash MX. Set the width and height to anything you want.

Now, draw a rectangle the size of the images you will load and make it a movie clip. To convert something into a movie clip, select it and press F8. From the Convert to Symbol Dialog box that appears, select the Movie Clip option and press OK:



Once you have created your movie clip, select the movie clip with your mouse pointer. The Properties panel will display. Give the movie clip the instance name photo:



After you have done that, insert a new layer on your timeline. Right click on the blank keyframe on the new layer and select Actions. The Actions dialog box will appear.

Copy and paste the following code:



//Code written by sbeener (suprabeener)
/*
i wrote this code, but you can use and abuse it however you like.
the methods are defined in the order which they occur to make it
easier to understand.
*/
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);



Would you believe me if I told you that you are done? You are, but to make it work, read on for customizing the photo gallery with your own images, image paths, etc.

Download Source File

| 1 | 2 | 3 |

Rate This Tutorial :
We hope the information helped you. If you have any questions or comments, please don't hesitate to post them on the Forums section
Submit your Tutorial at Click Here
  

Home | About Us | Contact Us | Feedback | Advertise with us

Best viewed in 800x600 resolution with Internet Explorer.

Site Developed and Hosted by  ethicsolutions.com
All rights reserved with FlashAdvisor

Flash is a registered trademark of Adobe Systems, Inc.

36 users online