Simple Image Gallery for the Flash Beginners

There are a lot of cool and advanced tutorials on Flash out there. However, there are too few basic stuffs available for the beginners. It is difficult to find some basic tutorials for only a simple banner rotator, or a carousel, or a flash gallery. So here is a little piece of help for absolute beginners in Flash, a dead simple tutorial on creating a photo gallery with minimal ActionScript.

Preview of Final Result

We are going to use ActionScript 2.0 here, so lets start with a New AS 2.0 Document in Flash CS3.

Next thing we need to do is define the size of the Scene, which is the size of our flash gallery. I want my pictures to be 300*300 pixels in size and 60*60 sized thumbs, so my gallety size should be 300*360 pixels.

Now we’ll need to use the Rectangle Tool to create a white rectangle with white border. Once rectangle is in place, rightclick on it and “Convert into symbol…” – we need to convert it into movie, and the name of it does not really matter.

If the movie clip that you resulted with is not precisely 300*300 pixels, you can easily fix that in the Properties menu below. To have it sit at the very top of the Scene assign 0 values to X and Y cordinates of it.

IMPORTANT: You should fill in the <instance name> setting with a word Viewer just like it is shown below.

Double click on the movie to get into it, and lets start adding pictures and frames. To import pictures, you just need to drag’n’drop them into the library to the right.

Leave the first keyframe untouched and add 5 more Keyframes (1 per picture). This is done by rightclicking the empty frame and choosing “Insert Blank Keyframe”.

I have 6 keyframes in total now. And now we’ll need to insert pictures there. The first keyframe will only contain a phrase like “please pick an image”. To add it, you need nothing but a Text Tool.

We also need to add a little bit of an action script to this frame. Rightclick on it, and choose “Actions” in the drop down menu. In the actions frame add the following code:

stop();

Then highlight the second frame and drag there a picture from your library. Position the picture at 0 for X and Y. Fill in all the frames with their own pictures.

Double click twice out of the movie regions to go back, or click the “Scene 1” Link. Now let’s make a tiny thumbnails out of our pictures. Drag them from the library, resize to 60*60 pixels and position right below the movie clip.

We need to make buttons of those thumbnails to make our flash file work. To do that, highlight them one by one and press F8 to convert them into Buttons. The names you assign do not matter. As a result you should have 5 tiny buttons right below the Movie clip.

Now select the first button, and rightclick on it to insert some Actionsript inside. “Actions” is what you looking for. And the script you need to add goes like this:

on (release) {
viewer.gotoAndStop ( x );
}

Where you need to change X to the number of the frame this button refers to. My first button refers to a picture of a cute girl, which I have placed in the second frame, so I will type 2 instead of X. The next button will refer to 3rd frame, so I wil insert the same code to the second button, but will change X to 3. So in my last button I have replaced X to 6 and everything is ready now.

You can press Ctrl + Enter to check if our flash gallery is working fine. And I am sure it is!

Moreover you can change the buttons to respond whenever you hang your mouse cursor over them instead of clicking. The code for each button will be:

on (rollOver) {
viewer.gotoAndStop ( x );
}
on (rollOut) {
viewer.gotoAndStop (1);
}

And don’t forget to change X to a proper frame! Hope you have enjoyed this very basic tutorial on creating a simple flash gallery.

Other Design Articles You May Find Interesting

20 Comments | Write a Comment

  1. kasmudin says:

    Please send me this tutorial flash, thank’s before
    dan good luck

  2. onion says:

    you must doing more picures that all

  3. hasi says:

    what should i do if i want to have 20 images?

  4. emma says:

    hm,you can make button with little pictures

  5. Emma says:

    I’m having the same problem as Cindy. Everything looks okay on the first page, but the buttons do not link to anything! I change X to the number frame. But none of them work! I’ve got all way through it, completed all the steps but when I click “ctrl+enter” and load it up as it should be, when i click the buttons nothing happens! I tried saving it then loading it seperately and still nothing. Please can you help me?

  6. vinay says:

    very important tutorial this site

  7. deden says:

    thank you it’s very nice…

  8. Cindy Marks says:

    Does it matter which frame you are on when you drag over and create the buttons? I happened to be in the last frame. But then I noticed the buttons were not on the stage in the earlier frames. (And the Flash wasn’t working when I previewed.) To remedy, I put the buttons on a 2nd layer and spread them over all the frames. ??

    I then added the actions to each one again.

    For some reason, my Flash still isn’t doing anything?

    Lastly, I tried adding an Actions layer, again with frames across all of the initial key frames. Then tried to add a long list of code, one action for each button, as I’d seen done in a diff tut.

    Still, nothing working. Anyone have any ideas? Did this work for you?

  9. modi says:

    you r Great mannnn thanks alot,go headddddd

  10. E du Plessis says:

    Thank you so much! There truly aren’t many tuts for Flash rookies.

  11. Nice to have a few flash tutorials here. As much as I dislike it, I still believe it has it’s place on the web.

    P.S. Do not take this the wrong way, but… what’s the source of the girl image? Besides being incredibly beautiful and a really nice photo, I may also be able to use it for something I’m working on.

  12. Rachel says:

    This is a very nice tutorial…simple… I’ll definitely try this…

    • asfsf says:

      Glad you like the tutorial, Rod! The demo is embedded in this page right at the top. I should have style it differently so it don’t look too much like a static screenshot 🙂

  13. FAQPAL says:

    Excellent, thanks guys.

  14. I don’t get it. Is this a Wix tutorial or what?

  15. Nice and simple tutorial. Thanks, bookmarked.

  16. Thanks for this post, I’m really not a flash guy so I appreciate tutorials such as this very much. It would be fun if you have some kind of demo link, thanks again.

    • Johnson Koh says:

      Glad you like the tutorial, Rod! The demo is embedded in this page right at the top. I should have style it differently so it don’t look too much like a static screenshot 🙂

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from urbanfonts.com
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
  • http://www.webbuildersguide.com/
Follow My Twitter Subcribe Full RSS