Create a Flash Template for a Photograghy website
MX is a program used to display rich interactive
animation and multimedia content on the Web. This
is especially advantageous while creating visually
appealing websites for photograghers, designers, artists,
One of the main advantages of Flash
is that it stores all of the information in a single
file that can be easily integrated with most Content
Management Systems (used in http://www.fancydressheaven.co.uk).
Flash is great for showcasing various pieces of media
in a dynamic way that can be completely controlled
by the author. This program uses vector graphics,
which means that the graphics can be scaled to any
size without losing either clarity or quality.
Java applets are also frequently used
on the World Wide Web to create dynamic effects on
web pages. Nevertheless, Flash applications load much
faster than applets do not require programming skills.
Flash also allows interactivity while animated images
However, it should be noted that Flash
is not a method to replace HTML Web pages. While Flash
opens up certain capabilities, its nature of being
a single locked file prevents a flash project's
text from being read by some search engines, screen
readers for the blind and archiving Web services that
cache Web pages. Flash must be used only as a way
to display media in a self-contained "shell,"
knowing that the surrounding HTML will complement
This is a tutorial that will take you
through the process of creating a simple Flash template
with 3 buttons which change while your mouse hovers
1. Create a new Flash document/project
2. Import a background image for your
template. Could be one of the photographs from the
To align your image with the Stage, open the "align"
pane under the window menu. To align, you must first
set the To Stage: option to "on,"
then click the buttons to align to the left edge of
the Stage and the top edge of the Stage.
Next, double click on name of the layer up in the
timeline and name it to "background."
3. Next, create a new layer, which where
we will put our title. Name the new layer "title."
(Important! After you create the title layer, LOCK
your background layer.
Use the text tool to draw a box on your Stage. And
type in "Photography By Nicholas".When
you click on the text tool, you might have noticed
your properties box has changed to show you all of
the option related to text. Here you can change the
color of your text, the font, and style. You want
to make sure you are using Static Text (like it sounds,
it's text that never changes). This is the
most common form of text you will use for titles,
captions, or text that is "static"
and unchanging. You can add effects, such as drop
shadows, to your text by clicking on the filters tab
in your property panel.
4. Create a new layer and call it "buttons."
Remember to lock your title layer, as we won't be
using it again.
Now grab each of the photo1.jpg, photo2.jpg,
photo3.jpg and drag them to the right side of the
stage one at a time, so they are stacked vertically.
You can space the images out evenly by selecting all
of them and using the align pane. This time we are
not aligning them to the Stage but, rather, to each
other. So we turn off the To Stage: option. You can
use the middle Distribute option or the left Space
button to space out the three buttons. You can also
align each button to their left or right edge. In
order for this to work, all three buttons have to
be selected (you will see a grey strip surrounding
5. Click on only ONE of your three button
images, making sure only one is selected. Then in
the top menu click on Modify then choose Convert To
Symbol. Choose button for the symbol type, and give
your symbol a relevant name. This name is for your
reference only. You will know you have successfully
converted your button to a symbol when you see a blue
line surrounding your image and a small circle in
the center. Repeat the steps above for each image,
converting each one to a button symbol.
6. Once you have "converted"
each of the three images into button symbols, you
can edit the properties of each symbol by double-clicking
it to enter symbol editing mode.
First, let's rename the only layer to "image".
After that, click on the frame representing the "over"
state, and click Insert ? Timeline ? Keyframe. You
can also right-click to insert a keyframe.
While the red play head is currently on the over state,
click on the button image on your Stage, and then
in your properties inspector click on swap.
Choose another photo say photo4.jpg. This allows you
to swap the photo on that keyframe for another photo.
7. You can test a project at any time
by going to Control ? Test Movie. Or you can press
the shortcut key which is Ctrl + Enter
About the Author:
Arya works in a web designing agency
in the United Kingdom, where she has handled all aspects
of a website from basic design and conceptualization
to complete development. In her spare time she writes
articles to contribute to the community. Link htp://www.nationalwebdesign.co.uk.
>> Return to Web
Design Article Knowledgebase Index