Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Sponsored Links

A Simple Flash Gallery


Flash has many uses, but perhaps its most common application over the years has been for interfaces in websites, galleries, and web comics. This tutorial describes how to make a basic gallery, yet the principal behind it is very useful for many other things.  What you will learn to do in this tutorial is make an action on one symbol that affects the appearance of another.  You will find this very useful when creating websites, and when you need to have a navigation element affecting other content. Here's what you'll be creating:


Step 1: Create a new document in flash. I made canvas dimensions 330x300 pixels to suitably accommodate my images, but it doesn't really matter what size you use, as long as you can fit your images in it and have them clearly viewable.

Step 2: Import your images to the library (File > Import to Library) and leave them there for now. If you want to use large images, this is OK, but they will resize in your browser (which may be messy), and involve greater download lag for the end user.

Step 3: Create a white rectangle with a border, the same size as your images (or desired viewing size, if you are using larger images).  Convert the shape to a Movie Clip (highlight it all and hit F8 on the keyboard). Place some text behind the movie clip object saying 'please select an image' or something similar to give the user an idea of what to do.

Step 4: Give your movie clip the instance name: viewer. This is very important, as we will be using actionscript to refer to this symbol later by name.

Step 5: Double click your Movie Clip to edit it.  Create as many new keyframes as you need and place all your into separate keyframes, and then drag your images from the library and place one on each keyframe, but now in the first keyframe - this should remain blank!   On your first frame place the following scripting:

stop();

Do this by selecting the frame in the timeline, opening the action script panel and typing stop();  It is only really necessary to do this on the first frame.

Step 6: Click Scene 1 to get back to the main stage.  Now, drag your images onto the stage and resize them - these will be your thumbnails.  Once you've resized them all and placed them where you want, convert each one to a button (Highlight, hit F8, & select 'button')  you can call these whatever you want.

Step 7: OK, now comes the scripting, so pay attention!  Select your first image (which should now be a button), and add the following action script to the button:

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

Where there is a pink x replace it with the frame number of the movie clip (instance name: viewer) that the corresponding larger image is on.

So for example, I'm going to add text to the first thumbnail on the left.  I will replace the x with the number 2 because I placed the image of a skater about to jump some stairs on the second frame of the movie clip.

Step 8: Repeat this process for the rest of your thumbnails.  Then File > Export Movie and you should have a nice functioning gallery and some useful knowledge of Flash! If you have any trouble, you can download the source file here.


Alternative Version
The code in step 7 above creates a gallery where pictures are displayed with clicks. If, however, you want the pictures to show when the house is rolled over them, replace the code in each picture keyframe with this instead:

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

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

This basically just makes the images show when you roll over them and when you roll off the image changes back to the first frame, which should be your "Please Select an Image" screen.

- Tutorial written by Airguitar

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

User:  bedvant (#42703)
Date: Tue Jun 12, 2007. 21:08:01

Post #3 of 3

I to can not get this script to work. There's a poorly written paragraph that makes little sense. If the author could clarify please:


Step 5: Double click your Movie Clip to edit it Create as many new keyframes as you need and. place all your into separate keyframes, and then drag your images from the library and place one on each keyframe, but now in the first keyframe - this should remain blank! On your first frame place the following scripting:











Quote from meop;41725:
I am very new to Flash. I am working in Flash 8 and tried to do the Flash Gallery. The ActionScript in your source file and on the tutorial are different. I tried both, but keep getting this message:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Mouse events are permitted only for button instances
on (release) {

Total ActionScript Errors: 1 Reported Errors: 1

Target not found: Target="viewer" Base="_level0"

Not sure what I am doing wrong.

Thanks in advance for any help.

Reply to this post


User:  meop (#41725)
Date: Tue May 08, 2007. 18:23:32

Post #2 of 3

Quote from AirGuitar;30953:
You're welcome! Any queries you have, I shall do my best to answer if you wish.



I am very new to Flash. I am working in Flash 8 and tried to do the Flash Gallery. The ActionScript in your source file and on the tutorial are different. I tried both, but keep getting this message:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Mouse events are permitted only for button instances
on (release) {

Total ActionScript Errors: 1 Reported Errors: 1

Target not found: Target="viewer" Base="_level0"

Not sure what I am doing wrong.

Thanks in advance for any help.

Reply to this post


User:  AirGuitar (#30953)
Date: Sun Aug 13, 2006. 01:51:39

Post #1 of 3

Quote:This tutorial is now online over @ BioRUST.com :: Tutorials >> A Simple Flash Gallery . Many thanks for your hard work AirGuitar - it was really easy to convert this to the BioRUST format!


You're welcome! Any queries you have, I shall do my best to answer if you wish.

Reply to this post


--- View Entire Thread ---
Amazing Font Pack!

Featured Tutorialsmore

Airbrushing On Pho...
Airbrushing On Pho...
- Adobe Photoshop -
Artificial Rainbows
Artificial Rainbows
- Adobe Photoshop -
Gradient Bars
Gradient Bars
- Adobe Photoshop -
Abstract Modelling
Abstract Modelling
- Maxon Cinema 4D -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Advertisements





Special Options
Download Source File
Printer Friendly Version
Forum Threads

 Re: 3ds Max Tutorials for Beginners
Author: 3DSMaxresources
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 711 views
Delete Account
Author: Neo824
Posted: Oct 18th, 7:47am
Activity: 1 replies, 1833 views
Back...
Author: unleash
Posted: Jul 02nd, 12:37pm
Activity: 2 replies, 1929 views
Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 2379 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 1741 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 2503 views
 changes....
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 3415 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 2658 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 4029 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 3794 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 3:33pm
Activity: 0 replies, 17049 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 4:37am
Activity: 0 replies, 4921 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4669