Flash

What is flash? You must read this....
Flash is an incredibly cool online movie machine. It works with a principle called "streaming". Once a little chunk of information comes in - it plays it, then another chunk comes in, and it plays that. It appears that the whole movie uploaded in 10 seconds, when in reality, just the first chunk did. This means less time waiting for your visitors.

As DSL starts to reign over the Internet, flash movies will slowly over take JavaScript and DHTML. The goal of cyberspace has always been to make web pages have a "computer program" quality - without sacrificing quick loading time. Flash brings us closer to that. The bandwidth is the limit, and as that is conquered - Flash will rule the world. Man, I love this stuff!

Want to see a cool flash movie that uploads fast?
Pyramids

This is the absolutely best use of Flash I've ever seen. It appears to be of Computer Program quality. Therefore, it is slower uploading. I suggest you take a look at this to see the capabilities Flash has, yet the limitation put on it by modem speeds.
http://www.extremedays.com
NOTE: Sometimes the intro does not work - but if you have a big enough bandwidth, and there isn't too much traffic, ur ok.

The basics:

1) The first time you go into Flash 5, several windows pop up (i.e. mixer, characters etc.) You can close all those small windows except for the "tools" window.

2) Choose
File>New
if a new flash movie isn't already displayed.

3) A white box will appear in the middle of the screen, this is your canvas.

4) First you must decided on a background color for your movie. If you are trying to match the color with your web page - make sure the shade is exact, or else it will clash.

This course is simply a starter, because there is no limit to what you can do within the Flash program.

Flash 101
This is a crash course in Flash, if you get this, you'll get the whole thing. If you don't get it, let us know, we'll try to help you out.

The movies are made up of many layers (referred to by geeks as an onion). Layers might refer to graphics, sounds, events and movies within the movies. Each layer is pictured in the horizontal lines at the top half of your screen.

To achieve the "animated" look, you must work within a series of "keyframes". Here's what the image might look like, the bird might actually be flying.
But in reality - when we slow it down, this is what really is going on. The wing moves a tiny bit in each keyframe, so when all of them are stuck together, and put in a regular motion - it looks OK. Here's the image above, slowed down.
In the Flash program each of those tiny rectangles represent a split second or "frame". The norm is 12 fps, or "12 frames per second". Each "keyframe" represents one change from the previous keyframe. If it be moving a bird's wing, adding an element, or creating a link from normal text - you must insert a new keyframe to apply changes.

This is done by right clicking a frame (thos little rectangular boxes), and choosing the "insert keyframe" command. You will then see a black dot appear in that frame - letting you know, this is a keyframe.

But within the keyframes, you must have regular frames, to add time between keyframes. This prevents your visitors from going bug eyed.

To insert more time within keyframes, click the single rectangle with the black dot in it and press "F5" until you have the amount of time you wish.

TIP: To change the FPS go to Modify>movie...>Then in the "frame rate" field, type the number of frames per second that you want.

If you want to have a key frame twice as long as it currently is, simply highlight the whole key frame, by clicking the middle of the rectangle and press F5. This will duplicate your frames.

You might want to copy some keyframes, especially when doing animations within the movie, or fading text.
To copy frames, highlight the larger section of the main frame you wish to copy. Right click it, and choose "copy." Then create a keyframe where you want it to be pasted. Right click THAT keyframe, and choose "paste".

TIP: Have the first 10 seconds be low resolution "loading" frames. Simply have text and perhaps a tiny bit of animation. (like a dot moving around the screen, or lines changing colors, or have a countdown with an explosion at the end). This allows time for graphics and sounds to load, without disturbing the process of the film.

Test your movie by pressing "Enter" on your keyboard. To do a mock-up, real thing test choose:
Control>Test Movie

Text
Text is pretty much self explanatory. Click the "A" in the tool bar, create a text box, and type what you want it to read.

Highlight your typed text, right click, and choose "character properties". This will allow you to change fonts, colors and font sizes.

TIP: In some of the newer versions, they let you embed links within the movie. Under character properties, there is a text field box that says URL. Simply type the web address you want to link to from the flash movie. It took me forever to figure out how it works, SO! FOR THE URL TO WORK YOU MUST DO THE FOLLOWING:

Control>Enable simple frame actions

Espresso!

Images
To add an image from a file choose
file>import...
Simply choose your image, and press OK.
You then must resize. Also, for a slight effect rotate the image by right clicking the graphic, and choosing "rotate". Then grasp the corners and rotate the image.

How to work with animated GIF's in a flash movie.
Animated GIF's are a pain in flash - so if anyone has a better idea of how to solve this problem - I welcome any suggestions - but here's the rundown.

1) File>import...
choose you animated GIF.
2) Place the image where you want it on the screen, and resize it.
3) When you move to the next keyframe, you will see the problem - that's right, the next part of the graphic moves right back up to the left hand corner. Move it down to line up with where you put the other one, and re-resize it again.
4) Same song, third verse - move that little image back down to where it belongs.
5) Keep repeating this until all the keyframes within the GIF are moved to the correct loaction.

I don't know what else to tell you - except choose a short GIF.

Your movie will load faster if you have less images from outside sources, and more text and hand drawn graphics right on to the canvas.

Drawing and Painting
To draw and paint images directly onto your movie, there is a paint brush - along with options on the lower part of the tool bar for shapes and sizes. I really love these tools, because they automatically straighten out your crooked lines, or smooth your curves, very professional looking.

NOTES: 3 things that are kinda cool to know.
1) There are two "color" boxes in the tool bar where you can select colors to draw with. The first one is for an outline, and the second is the body color of your paint brush.
2) To the left of the paint bucket that changes the colors (like a paint program) There is a tool that will change the outline color.
3) Along with your basic colors, at the bottom left of the color palette, there are pre faded colors. (They kind of look like tiny "bursts" or "lights", and one is rainbow colored. These are cool to use, and give your movie a refined, 3D look.)

Before you begin on the sound and music effects, please take note:
Sounds have a tendency to slow down the streaming process - especially sounds that correspond with objects on the screen. (Like the explosion sound uploading in time for when the bomb goes of on the screen, or music keeping up with the lyrics) That's why it's a good idea to use music and SFX at a bare minimum, if at all. Low quality sounds are possible with the compression tool. While some will wait to see your awesome 1,892 kb production - others will give up.

Records show that if your web site does not load in 20 seconds or less, visitors leave. You have 20 seconds to work with, GET THEIR ATTENTION. Focus on the first 20 seconds, and if you get them hooked - perhaps they will stick around for your cool stuff, and even wait a little longer.

Sounds:
Flash is capable of using WAV sounds. You can convert your MP3's to WAVs, or use some of the pre loaded SFX within the library. To search for WAVs already loaded on your computer go to
start>find>files and folders>
type in "wav" and search.
Keep in mind the file size when doing this. Once you find "the perfect WAV" follow these instructions:

1) In Flash....File>Import...>>>>>>>>>
choose the WAV file>Open
2) It will appear as if nothing has happened - that's a good thing.
3) Right click the keyframe on which you want the sound to begin
Panels>Sound
4) Where it says "Sound: none", click the tiny arrow next to that, to select the WAV file you imported.
5) Try around with the different variables, until you find a combination you like.

NOTES: The "event" variable will cause the sound to upload at that frame - while "stream" will play it whenever the sound uploads - which could be before or after that frame. Loop let's the computer know how many times to play the sound/song.

Exporting
Once you are satisfied with your creation, find the final frame in your movie. The blank rectangle to the right of that needs to be highlighted, and deleted. Run a final test of your movie by choosing Control>Test Movie. You are now ready to export.

File>Export Movie

A box will appear asking you what you want to save your file as. Most of you will simply take the default settings like normal...but you do have more options.

You can save you movie as a GIF Image - I suggest this for smaller movies, and those without sound.

You can save the "sound track" of your movie as a WAV - if you have several sounds mixed. This is handy to have sometimes.

There are other options - but you probably just want to save it as a Flash movie (.swf).

____

Now another box will appear asking you some standard export questions. Some of these won't apply to you.

If you figured out how to add more layers then one, you may want to decide in which order you want them to load. (bottom up, top down) depending on whether you want events, graphics or sounds to load first.

If it seems that the upload time may be slow, have your movie generate a size report.

Protecting from input & Omit Tracing * Debugging Permitted - this is in most cases non-applicable.

JPEG quality - the higher the quality, the sharper the film - the lower the quality, the faster the uploading.
WARNING: If your JPEG quality is too low, some text will be illegible, and graphics will be fuzzy. If you have bold fonts, then I would set JPEG quality at 25, if you have thinner fonts, I would set JPEG quality to about 45.

Depending on the sound variable you chose (streaming, event) will depend on which option you edit, both have the same parameters:
For looped or short audio clips - convert to ADPCM.
For long soundtracks - convert to MP3.

The lower the bit rate, the lower the file size - however this also decreases quality. Be careful that your tracks don't come across sounding like "static".

A fast quality = lower file size, this is a good choice.
That's it for sound options.

If at the last minute, you choose not to have sounds, simply over ride it here. And where it reads "Version:" just take the default. And that's it, press "OK", and you are good to go!

How To Get It On Your Web Page
Netscape:

1) Highlight the following code, and press CTRL-C.

2) Insert>HTML Tag>Ctrl-V to paste

3) Alter what is highlighted in red, replacing it with the file name of your flash movie. This is case sensitive, so be careful to copy it exactly. You might also want to alter the WIDTH, HEIGHT, and LOOP variables.

4) Pretend like you are going to insert an image - choose all files, and find your Flash Movie.
(Can't find it? Click here.)

5) The file will appear as a broken image, that's OK.

6) Upload the site to the internet, doing a test to make sure the movie uploaded properly.

7) Delete the broken image, and re-upload.

That's it, you have just completed one of the highest quality multi-media resources available to a web master! Congrats!

This should get you started on Flash basics. It's kind of like training wheels - there is so much more for YOU to discover and explore. If you are having problems, need help, or have any suggestions, click here.

<español> <french> <hebrew> <german> <russian> <italian> <portuguese> <arabic> <japaneese> <chinese> <korean>

Copyright Thinkquest Team C0110523: Jordan, Maegan, and Chris. Please contact us if you wish to use any part of this website Visit Thinkquest at thinkquest.org

Click Here to Sign our Guestbook!