|
Theory | Flash | Resources
Flash
Learning Flash
Much like DreamWeaver,
Flash is difficult to learn at first but very rewarding once some
of the basic skills are mastered. On a website Flash can provide
animation and movement, but also some interactive features replicating
forms and links. Under the time constraints and score of this
course, we will only briefly preview moving objects in a straight
line, moving objects along a path, and fundamentals such as inserting
images and text, and saving them for use on the Internet.
Opening and Saving Flash
Opening a document
in Flash is very similar to that of many computer programs these
days. On the Macs in ITC001 you can open Flash by double clicking
on the Flash icon in the dock. Opening a new document can be done
by selecting File and New. Opening an existing document can be
done by selecting File and Open, and then selecting the desired
document. Flash document are identified with the .fla extension
after the document name.
Saving Flash documents can be done
several ways. Save or Save As which is appropraite when saving
the document with the expectation of returning to edit the document
at another time; this document should have the extension .fla.
There is a good reason to save this in the save folder as the
html document that will use this Flash document later.
To save a Flash document for use
in a website, one will Export Movie and select the Animated Gif
format or the Flash Movie format. The first will that the extension
.gif and will be inserted into Dreamweaver by selecting Insert
>Images and browsing for the saved file. It is good to same
the gif in the images folder because it is an image and is treated
as an image. When one chooses the Flash Movie option the extension
will be .swf and is inserted into the website by selecting Insert
>Media >Flash. You will see considerable more code appear
in the Code window of Dreamweaver. This can be saved in the same
folder as the html document. The third method for saving the Flash
document for the website isdone by selecting File >Publish.
You will see nothing happening but what Flahs does is save a .swf
document ready for Dreamweaver in the same folder as the .fla
document.
After inserting the Flash item (.gif
or .swf) into Dreamweaver and saving the html document (probably
in your cse625 folder along with the .swf document), select a
browser and open the html document in the browser to see how it
works.
Making a Moving Object
Below is a set
of typical directions that will allow one to create a Flash movie
with a moving object.
- Open a new document
- Insert a New Symbol
- Type a name for the symbol and make certain that Graphic is
selected
Symbol will the term in Flash for an image or object or
something we draw
- Draw a shape (a circle or a rectangle) over the "+",
center the symbol of the "+" using the arrows on the
keyboard; check the color of the symbol in the left column before
creating it
- From the top menu bar select Windows and Library; click on
the symbol in the library
- Click on Scene 1 just above the stage (Yes, the big blank
screen in Flash is called the stage)
- Drag the symbol from the library onto the stage
- Click on the timeline on top around 40
- Insert a Keyframe (under Insert)
- Select the Arrow tool in the upper left of the tool bar
- Drag the symbol to a new location on the stage
- CTRL-click on the timeline between the beginning and the end
of the timeline; choose Create Tween Motion
- Move the little red box over the timeline to the beginning
- To play the Flash movie, press Enter or Return on the keyboard
- Save the document for safety reasons
Making a Moving Object Follow a Path
Now we will
add a variation by creating our own path.
- Select the Add Motion Guide icon just above the stage near
the left side
- Select the Pen from the tool bar on the left
- Draw a path
- Select the Arrow tool in the tool bar
- Put the little red box over the first frame in the timeline
- Drag the symbol to the end of the path so that the little
"crosshairs" are on the path
- Put the little red box at the end of the timeline
- Drag the symbol to the other end of the path so that the little
"crosshairs" are on the path
- Put the little red box back over the first frame and press
Enter or Return
- To extend the travel time of the symbol, drage teh end keyframe
in the layer to the right
Making a Second Moving Object
To add another
object to follow the same path in a reverse direction, do the following
which is similar to the above.
- Insert a New Symbol
- Type a name for the symbol and make certain that Graphic is
selected
- Draw a shape (a circle or a rectangle) over the "+",
center the symbol of the "+" using the arrows on the
keyboard; check the color of the symbol in the left column before
creating it
- Click on the symbol in the library
- Click on Scene 1 just above the stage
- Drag the symbol from the library onto the stage
- Select the Arrow tool in the tool bar
- Put the little red box over the first frame in the timeline
- Drag the symbol to the other end of the path so that the little
"crosshairs" are on the path
- Put the little red box at the end of the timeline
- Drag the symbol to the beginning end of the path so that the
little "crosshairs" are on the path
- To play the Flash movie, press Enter or Return on the keyboard
- Save the document for safety reasons
|