Advertise About Tech Consultations Write for Us Contact

How to Create Flash Dynamic Image Viewer

By johnnyb   |   October 20, 2009   |   Posted in Flash   |   View Comments  
→ Photoshop 3D for Animators: The complete guide to learn 3D and animation in Photoshop CS5. Pre-order this book now and receive a %22 discount here

How to Create Flash Dynamic Image Viewer

This is what we will be creating a dynamic image viewer with Flash CS 4, and the ScrollPane, titleList, and using the ProgressBar to give a loader.

See this in action

The first thing that we will need for our application are some images. I am using some pictures of beaches here in hawaii, but you can grab your own photos of whatever you like.

Create a folder call it “images” inside this folder place your images.

I am using phtotoname.png, and photoName-thumb.png

so as an example my first image is called BI.png, and the thumb image is called BI-thumb.png

Note the type of images does not matter.

We will be using actionscript to call the images later in the tutorial.

Create a new Actionscript 3.0 project in Flash CS 4
How to Create Flash Dynamic Image Viewer
make the document size 550 px by 580 px and create 4 layers
(1) background
(2) interface
(3) progress bar
(4) actions
your layers should look like this
How to Create Flash Dynamic Image Viewer

Now adding the necessary components
Go to Window-> Components
drag an instance of the TileList to the library
drag an instance of the ScrollPane to the library
drag an instance of the ProgressBar to the library

In the library you should now have these components
How to Create Flash Dynamic Image Viewer

This application will have series of small (thumbs) images in a row at the bottom, and when the user clicks on a thumb, that image will appear in the image canvas above. You can if you so desire to have many thumbnails and if it goes past the boundaries that I set, a horizontal scroll bar will appear. The same effect could be used on the ScrollPane as if you images are bigger than the defined area, horizontal and vertical scrolls will appear. This can be defined in the component inspector.

Creating the outer background. Make sure you are on the background layer, take the rounded rectangle tool and create an area covering the entire stage. I picked a grey color with a black fill.

Next, take the rounded rectangle tool and create covering the original background, but leaving a space for a border. I picked white with a black fill,and a hatched stoke on the fill.

Highlight everything on the stage,and convert this to a movieclip call it background, lock the layer. This way when we build the rest of our application the background does not move.

You should have this on the stage
How to Create Flash Dynamic Image Viewer

Now on the interface layer drag the ScrollPane to the top of the background,and give it an instance name of “loadPhotos”

Below the ScrollPane drag the TitleList and give it an instance name of “thumbs”, leave a little space between these two components.

On the ProgressBar layer drag the ProgressBar in the middle of the ScrollPane,a nd give it an instance name of “loader”

Now open the components inspector (window->components inspector)

set these values for the ScrollPane
How to Create Flash Dynamic Image Viewer

in the source section I am loading the first image by default. If you don’t want an image to load on default, leave this option blank.

set these values for the TitleList
How to Create Flash Dynamic Image Viewer

these are the values for the titleList, for holding the thumbs.

Your values might differ depending on how you design your image viewer.

We are now done witht he interface, and your stage should not look like this
How to Create Flash Dynamic Image Viewer

The interface is done,and you can lock the 3 layers that we have been working on.

Now we can start adding interactivity to the applications.

Open the actions panel (Window->Actions)

we will now create 3 arrays to hold the data.

First we wil create a Photos array to store all the photos

Next we will create an array for the thumbs

Finally we will create an array for the titles of the images, that will be displayed on the thumbs

(Please note due to spacing here I add to add extra lines, when you create this yourself use one line {see source})
How to Create Flash Dynamic Image Viewer

Now we will add all the thumbs to the title list. You will notice that the for loop goes to 5, that is because, we only have 5 images that we are working with. If you decide to add more photos, you will need to change this number.

I also like to keep the thumbs in a separate folder.
How to Create Flash Dynamic Image Viewer

Next we will add the functionality of the  loader.

First we set it to true,a s we are loading an image by default, but make this false if you are not loading an image when the application first starts.

then we tell the loader to load the source, which is loadPhoto,and will get loaded in the ScrollPane. Finally after the image has loaded, we remove the loader.
How to Create Flash Dynamic Image Viewer

Finally we will add the large phtots when the thumbs are clicked. When one of thumbs are clicked we reset the loader,a nd set it to true, so the loader will load the image. then we display the image in the ScrollPane.
How to Create Flash Dynamic Image Viewer

That is all, now you can make a cool little image video to your website.

How to Create Flash Dynamic Image Viewer

Any Questions write a comment or email me.

Happy Flashing`-`

Johnny

Tags: , , , ,


About johnnyb

John Barrett is a ColdFusion & Flash Developer at the University of Hawaii. I am also the manager for the Adobe Hawaii Flash User Group When not doing ColdFusion & Flash I can be found surfing on the North shore.

Enter your email to receive updates:

View Comments to “How to Create Flash Dynamic Image Viewer”

Post comment

blog comments powered by Disqus

Subscribe without commenting

Follow on Twitter Subscribe: RSS | Email


 


 

 

Enter your email to receive email alerts of new posts and fresh free resources .

Pages

 

 


Resources News

  • Create a Vibrant and Eye-Catching Drink Compositio…August 18, 2010

    In this Photoshop tutorial, you’ll learn how to create a Sobe fruit drink advertisement using some simple water stock images and a lot of easy to use techniques that will yield high quality resul…

  • 25 FREE HIGH QUALITY VECTOR FILESAugust 18, 2010

    We would like to proudly introduce you to Vectorious.net. Vectorious is a great resource for finding royalty free stock vector images. Currently they offer over 12055 vector image files available f…

  • Logo Design: 80+ Beautiful ExamplesAugust 18, 2010

    It has been almost four months since my last post on logo design. Since then I have assembled an amazing collection of fresh new creative logos for you to be inspired by. I am confident that these …

  • Poster Art – Reminiscence Down the History LaneAugust 18, 2010

    Poster art is one of the most well-defined forms of art that has a rich historical background that involves a number of famous artists throughout the world. Ranging from advertising campaigning to …

  • The Complete Beginner’s Guide to User Script…August 18, 2010

    A user script is code written in a programming language that allows you to control a piece of software.

 

Useful Links

 
 


Graphic Mania on Facebook