ActionScript3

Flash AS3 Photo gallery

flash_gallery
In this tutorial, we are going to create a Flash AS3 Photo Gallery. The paths of the images will loaded from external xml file and then we will apply Tweener class to add some nice transition effects.

You can find this class from Google. Click here to download.

  1. Create a new file
    File -> New -> Flash File (ActionScript 3.0) and OK.
    Save the file named “photo_gallery.fla”.
  2. Choose Rectangle tool, set the stroke to none and fill #999999 and draw a rectangle on the the stage 110 by 110. Convert the rectangle into a MovieClip by selecting it and then hit F8. Name it as thumb and registration point to center and OK.
    Check the image below.

  3. Open the Library (Ctrl + L). Right click on the MovieClip “thumb” and choose “Linkage”. Select export to ActionScript checkbox, set class name as “Thumbnail” and OK. Delete the MovieClip(thumb) from stage.
  4. Open the Components library (Ctrl + F7). Select UILoader and drag it to the stage. We will load the thumbnails with this component. Select and delete the UILoader from the stage.(we just want it in our Library and not on stage.)
  5. Now, open a new ActionScript file. Goto File > New > ActionScript and OK.We are going to build the “Thumbnail” class which is associated with MovieClip “thumb”.
  6. Copy the code given below and paste it into new ActionScript file.

Save the file as “Thumbnail.as“.

  1. After creating “Thumbnail.as” file, go back to “photo_gallery.fla” Rename the first layer in timeline to “actions” and insert a new layer(Insert > Timeline > Layer) and call it a “background”. Change the width and height of the document by 570 and 350 respectively and frame rate to 30.
  2. Choose Rectangle tool and set the color to black and stroke to none. On “background” layer, draw a rectangle and set the width: 570, height: 350, x: 0, y: 0.
  3. Hit F9 on the frame 1 of “actions”layer to open the ActionScript panel. Copy the below code and paste it into AS panel.
  4. Now create your xml file. The structure of your xml file looks something like this:

    Note:
    Where <image></image> represents a new picture in the gallery. The url tag represents the path to the little picture and the big_url tag the path to the big picture. To add your own pictures you will need to modify these paths. Here I provide the tags for only two images, but the final xml file has 15 images. Open your text editor copy and paste the code from above add the rest of <image></image>tags (until 15) and save the file as pics.xml.
  5. Make a new folder and call it “photo_gallery“. Make 2 new folders inside the same folder, name the first one “pics” and the second one with “big_pics“. Place the photo_gallery.fla, Thumbnail.as, pics.xml and caurina inside the photo_gallery folder. You will get the Caurina folder after downloading the Tweener class. You need this folder if you want to modify the fla file. Place the thumbnails of the your pictures in pics folder and large images in big_pics folder.
    You are done with your ActionScript3 Photo Gallery. Test your photo gallery by pressing Ctrl+Enter

That’s all. I hope you enjoyed the AS3 gallery tutorial. See the demo below…

DOWNLOAD the source file of AS3 Photo Gallery here.

11 Comments

11 Comments

  1. Mohit

    February 24, 2012 at 8:17 pm

    Very informative and good post

  2. minecraft skins

    October 20, 2011 at 5:05 pm

    Thankyou for sharing Flash AS3 Photo gallery with us keep update bro love your article about Flash AS3 Photo gallery .

  3. awesome news

    October 10, 2011 at 3:06 pm

    hello!,I like your writing so a lot! percentage we keep up a correspondence more about your article on AOL? I need a specialist in this space to solve my problem. Maybe that’s you! Having a look ahead to look you.

  4. Sac Hermes Birkin

    September 28, 2011 at 5:21 am

    Definitely informative plus excellent real system of written content , currently that may be user friendly (.

  5. Web design company

    April 15, 2011 at 12:47 pm

    Felix Labs is a best web Design Company india, providing top flash web design services, website development services and 3d animation services. Get high quality website development and web design services from the experts.

  6. söve

    April 7, 2011 at 9:48 am

    Very nice tuto.Thank u for sharing.

  7. flashflex

    March 28, 2011 at 1:34 pm

    Learn adobe flash,actionscript, as3, html5, flex tutorials

    adobe flash,actionscript, as3, html5, flex

  8. nathan

    March 28, 2011 at 6:51 am

    Thats amazing tutor. Steps are explained very clearly. Thanks for sharing your design knowledge.

  9. jenny

    March 26, 2011 at 3:45 am

    Nive transition effect. Thanx for sharing

  10. Horous

    March 23, 2011 at 6:38 am

    I found your all article and posts most fascinating,informative and useful. Thanks so much.

  11. sharon

    March 22, 2011 at 1:14 pm

    Informative read regarding Design . Website design is very beneficial for cost effective marketing and promotions. Thanks for sharing such useful information with us.

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part