| |
Internet and Businesses Online > Web Design > Create a Simple Flash Template
0
Reviews [ add review ],
Article rating : 0.00, 0 votes. Author : Arya Borkar
Create a Simple Flash Template
By Arya Borkar (www.nationalwebdesign.co.uk)
Macromedia Flash 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, etc.
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. 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 don’t.
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 it.
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 over it.
• Create a new Flash document/project
• Import a background image for your template. Could be one of the photographs from the collection.
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."
• 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.
• 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 them).
• 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.
• 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.
• 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
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:www.nationalwebdesign.co.uk
Deep Articles portal.
Article reviews
Post your review
[ Note : no HTML/URLs - will removed automatically ]
More articles from Internet and Businesses Online > Web Design
|
