WebDevelopersJournal.comTips on Web Page Design, HTML and Graphics
SITE SEARCH
Newsletters
Java/Open Source Daily



Jobs at webdeveloper.com

Resources By Subject
Technical
Graphical
Authoring
Business
WDJ resources
Archive

internet.com

internet.commerce
  • Partner With Us
















Developer Channel


Find a web host with:
CGI Access DB Support Telnet Access
NT Servers UNIX Servers



Semi-automatic?

JavaScript
JavaScript Helper:
Meet Paige Turner, the least geeky geek we've ever come across.

Variables and Operators Explained:
First of a three part guide to JavaScript basics.

Controlling Forms:
Enhance your HTML forms with a touch of JS.

DHTML:
Forget how it works, let's see some in action!


Formats - Page 2

Although Flash is a vector-based application, bitmap images can be imported and used. There are a wide variety of formats listed under [File- Import] (Ctrl-R). The vector-based images are quite straightforward as they can be resized easily inside the application and even edited. Vector-based files can be imported from Adobe Illustrator, FreeHand, and include Windows metafiles, Flash SWF and others.

Bitmap images can also be imported and converted into vectors, using the Trace Bitmap option. File types include GIF, JPG, PNG, TIFF, as well as others. To convert a file, select the imported image and choose Modify-Trace Bitmap. In the resulting pop-up window you can then select the Color Threshold (increase the value, decrease the number of colors), Minimum Area (number of surrounding pixels), Curve Fit (determines the smoothness of the outlines) and Corner Threshold (sharp edges or smoothed out). If the bitmaps contain a lot of complex shapes and colors the vector image can create a larger file size than the original. Other Flash SWF files can also be imported (unless they are protected).

When publishing the final SWF file care must be taken as to how it will look in the users browser. The program allows the ability to change the bitmap compression, with the lower quality producing smaller files and higher quality producing larger file sizes. This may take some experimenting to determine the best quality, while maintaining reasonable file size.

Now let's learn about the way in which movie clips, timelines, and frames per second work within a Flash file.

Flash allows the user to create Movie Clips inside of the file which can run independently of the main movie and other clips. Movie Clip formats include animation, actions, buttons, and other interactive features. Within the main movie or even another movie clip you can tell Flash to do lots of things to influence when the movie plays, what frame it goes to, send variables, and other interactive aspects.

To create a movie clip simply go to 'Insert' and then 'New Symbol' on the menu bar or press [Ctrl]+F8 on the keyboard. On the following menu select the 'Movie Clip' option. Here we are going to create a small animation that will play repeatedly on the main stage of the movie while other things are happening around it.

An example of this is importing a series of images of a man walking and then looping them repeatedly to give the illusion that the man is in fact walking in place. There are five 'Keyframes' with a different image on each one which create the effect.

Flash uses a timeline to graphically represent the passing of time in a movie clip. It is divided into Layers and Frames. Frames enable Flash to display time within the movie. There are two main types of frames: normal 'Keyframes'. A keyframe is shown in the timeline as a frame with a blue dot, and a normal frame has no dot. Keyframes can have actions assigned to them which tell the movie to do different things when it arrives at that frame. This could be a simple command such as to stop the clip at a certain frame and then to begin playing again: the beginning of a tween from one location to another.

What is a tween you ask? "Short for in-betweening, the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image" (Webopedia)

Flash can create two different types of tween animation: motion and shape tweening. With motion tween, the user defines properties such as position, size, and rotation of an instance, group, or text block at one point in time (using a keyframe). Then at another point in time the same properties are changed. In shape tweening, there is a shape at one point in time and then another shape drawn at another point in time. shape tweens cannot follow a path; rather they can only move in straight lines.

If you take the movie clip we created and place it on the main stage of the movie, it will loop endlessly, giving the impression that the man is walking in one spot. With this clip on the stage you could then create buttons that would use the 'Tell Target' command to cause the walking to begin when the mouse is moved over it.

We now come to one of the more 'interactive' aspects of the Flash application — Buttons. Numerous features can be programmed into the button functions, from simply telling the Flash file to go on to the next frame of a scene to complex math functions and everything in between. In an HTML file the button created simply takes effect when the user clicks on it. But with Flash there are numerous ways to assign values and functions to a button. The button can be set in such a way so that if a user rolls over (or rolls out) the button an event can happen. The event can even be set so that Flash waits until the button is actually released to take any action.

To assign an action to a button, select the button or movie clip and choose 'Windows', 'Actions' from the menu. In the toolbox located on the left side of the panel, click on the basic actions category. Actions can be assigned in a few different ways, but perhaps the easiest way is to simply double-click on the selection you want to make and it will be shown in the right panel. When you add actions to a button, Flash automatically inserts the OnMouse Event code to trigger any selected action.

Hopefully this tutorial will give you the basic understanding needed to start creating some wonderful Web sites with Flash and will push you in the direction to want to learn more!

<< Page 1 | Part 2 >>

Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers