How to Create Flash Dynamic Image Viewer
By johnnyb | October 20, 2009 | Posted in Flash | 10 Comments

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.
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

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

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

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

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

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

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

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})

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.
![]()
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.

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.
![]()
That is all, now you can make a cool little image video to your website.
Any Questions write a comment or email me.
Happy Flashing`-`
Johnny
Tags: ActionScript 3, Adobe Flash CS4, Flash Tutorials, free dynamic image viewer, free photo gallery downloadAuthor: johnnyb (9 Articles)
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.
Related topics you may like to read
10 Comments to “How to Create Flash Dynamic Image Viewer”
Post comment
![]() |
![]() |
|
Pages
New Arrivals
Resources News
- A Guide To Typography On The WebMarch 9, 2010
The web is alive and growing more active with each new day. The increasing number of sites that crop up on the daily shows no signs of slowing, and as the online ranks grow, designers are constantl…
- 70 Exceptional Creative Typography Desktop Wallpap…March 9, 2010
We always present quality stuff for you respected visitors and readers, today we have some modern and latest typography wallpapers, we simply presenting beautiful and inspiring to look at I think, …
- 25 Beautiful Flash websites from around the worldMarch 9, 2010
I was never good with Flash back in college, but I always did enjoy seeing some of the most creative websites built in flash. We all know flash is not SEO – Friendly, but in most cases, if you ha…
- How to create a spattered photomontage in Photosho…March 9, 2010
In this tutorial, we’ll learn how to make a spattered photomontage in Photoshop using brushes and some filters. Layered PSD file included. Let’s get started!
- Weekly Design Inspiration #12March 9, 2010
This is our selection of our favorite web designs from the past week, some sites we discovered, but the most of them have been recommended by our readers.I will gives you a weekly design inspiratio…
Useful Links


















Tweets that mention How to Create Flash Dynamic Image Viewer | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net -- Topsy.com says:
[...] This post was mentioned on Twitter by Hawaii Flash , Web Design News. Web Design News said: How to Create Flash Dynamic Image Viewer http://bit.ly/YtfmK [...]
How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … | PhotoShopped says:
[...] Read more here: How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … [...]
How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … says:
[...] more here: How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … Posted in Photoshop | Tags: adobe, behind-the, behind-the-designing, default, foreground-and, [...]
How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … at Flash Designers says:
[...] original here: How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … [...]
How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … says:
[...] post: How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … SHARETHIS.addEntry({ title: "How to Create Flash Dynamic Image Viewer | Flash, Design, Vector [...]
How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … | JOHNDAVE DECANO says:
[...] original here: How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … [...]
Tutorial: Efeito Glow Difusion no Photoshop | Ponto Visual says:
[...] How to Create Flash Dynamic Image Viewer | Flash, Design, Vector … [...]
Photoshop – Retirar elementos menos bonitos da face | Ponto Visual says:
[...] How to Create Flash Dynamic Image Viewer | Flash, Design, Vector &… [...]
Visualizador dinâmico de imagens no Flash CS 4 « Flash Professional says:
[...] Para seguir o passo a passo do tutorial acesse: http://www.graphicmania.net/how-to-create-flash-dynamic-image-viewer/ [...]
Sharedtut says:
Good post, thank you for sharing.