CS 325 and Film 385: Introduction to Flash
Highlights of this lab:
- What is Flash?
- Flash's Environment
- Drawing with Flash
- Motion Tween
- Using a Motion Guide
- Working With Buttons
- Publishing Your Flash Movie
:: What is Flash? ::
Flash is a vector graphic based application. It is used worldwide to produce movies, animation, presentations and more. You can use it to create presentations for your company, equipped with an up to date database to show the right information at the right time. Flash is easy to use and an effective tool in the web development industry. One advantage to Flash is it is a cross-browser platform, which means you can show your movies in any browser out there, such as Internet Explorer or Netscape Navigator.
:: Flash's Environment ::
The Flash Workspace:
The Flash workspace consists of five main components:
- The Menu: The Menu contains controls for common functions such as opening and saving files, as well as specific functions, such as copying and pasting, calling up specific windows or panels, and controlling the Flash environment.
- The Stage: The stage is the area in which you will be working. The stage is basically your drawing board, where you can create, add and delete your work. The stage(s) are the only areas in which you can put in graphics, and while your movie is in play on a web site, and only the content in the stage will be displayed. You can also use special features and import your graphics from other programs.
- Timeline: The timeline is the area that represents moving objects in your stage. The timeline is consisted of frames and layers. Each frame is a brand new image. Using simple tweening motions will allow you to modify your objects in your timeline to produce a quick movie. Layers represent each layer of transparency on your stage, you can have as many layers as you want and you can only see objects on the layers.
- Panels: The panels used in Flash 5 allow you to control anything you do, such as modifying your text, of setting effects for a symbol. The advantage about the panels is that they can be hidden allowing you more work space to work on. Go to Window then Panels for a complete list of your panels.
- Toolbox: The Toolbox contains a collection of tools for creating, selecting, and manipulating content in the Timeline and on the Stage. The Toolbox is divided into four parts: Tools, View, Colors, and Options.
Flash 5, now allows you to import MP3 sound files. This new feature allows you to play music, add sound effects to your buttons, etc. This new feature is only useful using supported sound files, such as .mp3 and .wav.
The library is just a small database where Flash stores all your graphics and symbols. From the library, you can click and drag symbols onto your stage area, which saves you a lot of time, instead of re-creating new graphics.
In Flash, a symbol represents a movie clip, button or graphic that you have created. Symbols make it easier to use the same object over and over again without having to re-create it, which is a waste of time. In this section, we will learn how to create, modify and remove symbols you have created. We will also learn how to add effects to these symbols, enhancing your movie.
Layers are simple transparent sheets that are placed one on top of each other. These layers can be moved around, added and they can also be deleted. They organize your movie without affecting the rest of your movie.
:: Drawing with Flash 5 ::
For this lab we are going to make a simple boat movie. Sounds like fun??, "No!", well too bad!...no, no, it'll be fun!
- Create a boat for our movie. Begin by selecting the pencil drawing tool from the drawing tool menu
- Notice how the bottom of the palette changes based on the tool you've selected? Go ahead and select the Straighten line style.
- Now, draw the basic hull of the boat, just try to create a simple box shape.
- Letís adjust the bow of our boat a bit. See how the tool changes when you pass over a corner?
- Click and move the top of the bow a bit.
- Let's draw a mast. Select the box tool in the menu. Notice that this one has both a FILL color and a LINE color.
- Select brown as the fill color.
- Now, draw the shape of the mast on top of your hull.
- When done, it should look like this:
- Add some sails using the line tool.
- Now, draw a diagnal line form the Mast to the Bow.
- Then, draw the lower part of the sail. When done, your sails should look like this.
- Select the pointer tool, and warp the sails to look like this.
- In order to fill to hull with color, click on the paint bucket tool.
- Notice the tools which appear at the bottom of the palette. One is unusual in that it allows you to compensate for breaks in the lines which Flash draws. If you can't fill a shape, try adjusting this.
- Let's fill the the sails with a gradient. Remember, that fills can have gradients while lines cannot. Flash can create a very useful type of gradient called a locked gradient. To do this, begin by selecting a gradient under the fill tool.
- Then, fill the first sail with this gradient fill.
- Now, click on the Lock Fill button at the bottom of the tool palette.
- To adjust this gradient, click on the fill adjust tool.
- Click on the gradient pattern and adjust it.
- Finally, in order to animate this boat properly, we need to convert it to a symbol. Under the edit menu, choose Select All.
- Now, click on Convert to Symbol under the Insert menu. Name is boat and save it as movie clip.
- Check your library and viola! You've got a boat!
:: Motion Tween ::
- Let's animate our boat using a Motion Tween. Begin by selecting the first frame of your layer, then place the boat symbol where it will start it's animation.
- Click on the blank frame 50 where the boat movement will end.
- Now, select insert Keyframe using the Insert menu.
- With the keyframe still selected, move the boat to the position it will be at that keyframe.
- Finally, click on the FIRST keyframe, and select Create Motion Tween under the Insert menu.
- Notice how the line turns blue and a solid line appears. If this line were dotted, it would mean that you had some something wrong. Usually this means you've tried to use non-symbols on at least one of the keyframes.
- To see your animation run, click the return or enter button on your keyboard.
:: Using a Motion Guide ::
- Right now, our boat slides across the screen in a straight line. In order to make our boat appear to sail the high seas, we need to use a Motion Guide to give the boat a path to follow. To begin this process, select the layer with the animation you wish to use the motion guide for. Then, click on the Add Motion Guide button.
- A new layer will appear with the name of the linked layer and a special icon on it.
- On this (Guide) layer, use the pencil tool to draw a path for the boat to follow. Start where the boat begins. Here's a tip, use a thickness of 4 on this line and don't make it too complex. Flash will get confused.
- Click on the last keyframe of the boat layer, and click on the boat. Notice the + on the boat? Click on this and drag the boat over the end of the line. See how the boat appears to SNAP to the end of the line?
- Click return and see how your boat follows the path? Now, let's make our boat follow the path. Select the first keyframe in the boat layer, then select Frame properties. Now, click on Orient to Path and see what happens.
..:: Working with Buttons ::..
- Create a new symbol, but make sure to select the BUTTON behavior.
- Notice how this symbol editor is different? It has only four frames:
- Up: This is the natural state of the button before anybody has moved their mouse over it.
- Over: This is the MouseOver state.
- Down: This is what you seen when you press DOWN on the button.
- Hit: This defines the area of the button that responds when clicked.
- Normally you won't use this because it defines the region that makes the button go active. Normally, the shape defined in the Up frame does this. Here's an example of how you would use this. If you wanted to make a text only button, you'd have the problem that the user would have to pass their mouse over the actual shape of the letters to click on it. If you create a filled rectangle in here the shape of the text region the user won't see it, but they'll be able to click anywhere on it's region.
- OK, let's create a simple circle in the Up frame using the filled circle tool.
- Notice how the + is off-center? Let's align it. First, double click to select the graphic. It should look like this:
- Now, open up the align tool by pressing cntrl-k (command-k on the mac). You'll get the align pallet. Click on the little icon below To Stage; (this will center the button exactly) then click the center icons.
- Add a KEYFRAME to the Over frame then change your face a bit. Finally, add another KEYFRAME to the Down frame and make another face. OK, your button is ready to be used.
- To see your button work, select Enable Simple Buttons under the Control menu
- See how it works. Pass your mouse over it.
- Now, click on it.
- A button is pretty cool in and of itself. But, in order to really use it, we need to attach an action. You cannot move or change a button as long as Enable Simple Buttons is selected. So, uncheck this. Now, select the button, and open the Actions menu.
- In the scene area, click on the button so you see a blue rectangle around th
- Click on the Basic Actions icon, then go down and select Get URL. We'll use
this to tranform our button into a hyperlink.
- Now, fill out the form associated with this action. Type whatever URL you wish (with caution I guess ;-)
- NOTE: Again, like with Dreamweaver make SURE you always include "http://" when typing in a URL.
- To see this button work, we need to preview it in a browser. So, click on Publish Preview under the File menu. Then try out your new button.
:: Publishing Your Flash Movie ::
- Flash can output files as a multitude of formats. But, the best way to get something out of flash is using the Publish command. This can not only create the format file, but even generate the HTML itself. Let's take a look at this. Begin by selecting Publish Settings.
- The Formats window will pop open:
- Here you can select the particular formats you wish to export.
- Now, click on the Flash tab:
- Let's examine each of these settings in turn:
- First, the load order should not be important if you use a preload scene. BUT, I leave it on bottom up.
- Under Options, Generate size report will give you a detailed explanation of your movie. It includes the size of each frame, each symbol, and all elements, This is very useful in determining where you optimize your movie.
- Omit Trace Actions, as well as Debugging Permitted are only necessary if you are doing some complex programming.
- Protect from Import will only prevent others from importing your SWF files into their copy of Flash. There are plenty of tools that get around this so this is of mixed value.
- Password, This will allow you to lock your movie.
- JPEG Quality: This only affects Raster Graphics (such as photographs) you are using in your movie NOT any of the vector based components. If you are using images which were imported as JPEG graphics and already optimized, I recommend you set this to 100%. Otherwise, set it based on how much detail and size is in the images. The larger the image, the lower the compression. The smaller, the higher.
- Audio Stream/Event: These settings are used to optimize your audio. (not discussed in this lab)
- OK, click on HTML.
- First, the templates determine the type of Flash movie you are working with.
- If you use Percent on Dimensions, these settings will affect your movie:
- Default means that the movie will appear in a letterbox format (with black bars at the top & bottom) depending on the screen size)
- No Border will do what they call "pan & scan". This means the ends will be lopped off to fit it into the window. Exact Fit will distort the movie to fit the window.
- The checkboxes influence the plug-in settings. The two interesting one are Display Menu (this allows the user to pop open a menu on the movie using either the Right Mouse button (PC) or holding down on the mouse (MAC). Use Device Font will look to see if there are any fonts loaded on the system which are used in the movie. This will reduce the file size, but ONLY works on IE 4.0 or new on Windows system
- The result will be three new files: flashmovie.swf, flashmoviel.html, flashmovie.swf report (with the appropriate names). The SWF file is the optimized flash movie which will need to be uploaded to the server, the HTML document contains the code to place your movie into a document, and the Report file is the statistics about your movie.
- Now, you have done a complete flash movie. If you are interested in making different movies, you can check out the follwoing websites.
:: Assignment ::
For this lab assignment I want you to simply follow the instruction for this lab and create a flash animation or button. The animation or button can be exactly as descibed above.
- Marking scheme:
- 1.0: For an animation or button (it can be the boat animation or happy face button discussed above)
- 0.0 - 1.0: If it is different than the lab example. What I mean here is that it is a different looking boat or not a happy face button or something totally new!
Submit your flash file on Web-CT, in the assignments folder using the link for this lab assignment. This is due on Oct 4th at 11:00am. Have fun!
..:: Online Source(s) ::..