Foster encouraged me to put together some Flash tutorials. It will
be a fun way for me to share some of the tricks I picked up writing
the Complete Idiot's Guide to Macromedia Flash 5.
Flash is complex, but learning to use it is more fun if you start right
in by creating animated movies. While Flash comes with a decent set of
vector-graphic drawing tools, we'll bypass them, and rely on graphics
you've created in CorelDRAW, Adobe Illustrator or Macromedia Freehand.
Gary Priester has supplied
Unleash.com with an amazing set of tutorials
for creating logos using those programs.
In this tutorial, I'll show you how to create an animated splash screen
for a Web site that displays a moving logo, and then opens a Web page in
the browser window.
With a logo saved to either Freehand or Adobe Illustrator's *.ai file
format (an easy export for DRAW users, open Flash 5 and select File, Import.
Navigate to your *.ai file, and import it into your Flash movie. As you do,
the logo will appear in Frame 1 of your movie (the numbered frames in the
Timeline at the top of the movie window control your animation - we'll use
them shortly). Click and drag on your logo to locate it in the upper left
corner of the stage (the white area where frame content is defined).
Click in frame 20 in the Timeline, and press the F6 function key to
duplicate your logo 20 frames later in your movie. Drag the copy of the logo
to the lower right corner of the stage. Right-click on the logo in frame 20,
and choose Scale from the context menu. Drag on a corner handle and enlarge
your logo.
To add a "fade in" effect to the logo, click on Frame 1. Click to
select the (smaller) logo in that frame, and choose Window, Panels,
Effect to open the Effects panel. Choose Alpha from the drop-down list
of effects, and use the slider to set the Alpha (opacity) setting to
about 15%. Your logo now has motion, and changes in size and opacity.
Now we animate. Click in the Timeline at the top of the stage anywhere
between Frame 1 and Frame 20. This selects all the frames but 20 (in Flash 4,
it selects all the frames). Hold down your Shift key and click on Frame 20 to
select Frames 1-20. They turn black. Right-click on the selected frames, and
choose Create Motion Tween from the context menu. This animates the motion
between Frame 1 and Frame 20.
Finally, we need to add a bit of Flash's easily generated ActionScript
(think JavaScript - if that's a help, if not, don't worry - we'll generate
our snippet of coding with menu options). Click in Frame 20, and choose Window,
Actions from the menu. In the Frame Actions window, choose "+", Basic Actions,
Stop - as shown. You just told Flash not to repeat this movie when it ends.
Still in the Frame Action window, choose "+", Basic Actions, Add URL. In the
parameters area, add the URL that the movie will jump to after it runs. Now you
can close the Frame actions window. The little "a" in the timeline in Frame 20
signals that you have added a bit of actionscript to this frame.
You're ready to publish your movie and add it to your Web site. Publishing Flash
movies presents a number of challenges and options, but the simplest way to do
it is to publish the movie as an HTML page with an embedded *.swf shockwave file
that can be viewed with Internet Explorer, or Netscape Navigator with the
shockwave plug-in (get the plug-in at http://sdc.shockwave.com/shockwave/download/).
First save your file. The folder to which you save your file
will determine where your final published movie ends up. Then, choose File,
Publish Settings, and choose the Flash (*.swf) and HTML check boxes.
Click on the Publish button, and then click on OK. This creates a
playable shockwave (*.swf) file, and embeds that file in an HTML page.
If you are publishing your HTML page to a Web server, make sure the *.swf
file ends up in the same Web folder as the HTML page.
You're ready to test your movie. Open the HTML page - the movie will
run, stop, and launch your designated Web page.
Add a Motion Guide to Animation:
You can define a path for your logo to travel across the screen. To do this:
Click on the label "Layer 1" in the timeline, and choose Insert,
Motion Guide. A new, non-displaying layer is generated.
Use the Pencil tool in the Flash toolbox (on the left of the
screen) to draw a path for your logo to travel along.
Resave, and republish your movie.
You've entered the world of Flash movies. Stay tuned for more...
I've added a start button here so you can start the splash screen animation
when you're ready and see how it works. I'll show you how to add buttons
yourself in an upcoming tutorial. Note that when the short animation finishes,
a new window will open with my Web site shown. This simulates an "entry" animation
for a site.
Press the Subscribe button at right to receive our free
CorelDRAW Unleashed emagazine! Each issue is full of top notch tutorials from the leading CorelDRAW
experts worldwide. It will definitely increase your productivity.
Bookmark this page on del.icio.us
Digg this page on digg.com
Submit this page on reddit.com
Search Technorati for links to page
