Transcription
September 27, 2002Julie Albertson, ECCExploring Macromedia Flash MXWhat is Flash?Flash is a stand-alone piece of software for producing and delivering high-impact multimedia andweb experiences. Developers use Flash to create beautiful, resizable, and extremely small andcompact navigational interfaces, technical illustrations, animations, and other dazzling effects forpresentations and web sites. Flash graphics and animations are created using the drawing toolsin Flash or by importing artwork from your favorite vector illustration tool, such as MacromediaFreehand or Adobe Illustrator.Why do I need to use Flash?One can create a "slide show" on the computer. Make no mistake; this is not the traditional"PowerPoint" type of slide show. Flash has the ability to branch, jump to a hyperlink, andincorporate multimedia elements. You can include audio and video into your Flash movie. (Butkeep in mind that those files will bloat your published file.) Additionally, because the file size is sosmall, your Flash movie can be distributed via e-mail or posted on the web for individual viewing.It does come with a moderate learning curve but it is priced reasonably (academic price is under 100), making it one of the most robust yet affordable multimedia tools available.One can create a customized application. Flash is a good tool to use when creating stand-alone,drill-and-practice activities. These could be multiple choice questions, true/false questions oractual scenarios that require a higher level of thinking.One can create a web experience. Flash technology delivers web sites efficiently, even over slowmodem connections. Vector-based Flash sites play as they download, or stream, allowingimmediate feedback. Flash technology offers a more compelling experience than static HTML.Web sites designed in Flash can playback full-screen on all monitor sizes and consistently acrossmultiply platforms, making content interaction for web users very accessible.For these reasons, this tool is an excellent choice for creating remedial and enrichment activitiesas well as presentations and web-based activities.ResourcesJulie’s favorite resources:http://www.flashkit.com (forum, open source movies, tutorials, and other resources)http://www.ultrashock.com (open source movies, tutorials, inspiration)Other tutorials and resource ocuments/flash websites.htmSoftware at kind of graphics do I use with Flash? (vector vs. bitmap)Computers display graphics in either vector or bitmap format. Understanding the differencebetween the two formats can help you work more efficiently with them. Flash lets you createand animate vector graphics. It also lets you import and manipulate bitmap graphics that havebeen created in other applications such as Paint Shop Pro or Photoshop or Photoshop Elements.1
Vector GraphicsVector graphics describe images using lines and curves, called vectors that also includecolor and position properties. When you edit a vector graphic, you modify the propertiesof the lines and curves that describe its shape. You can move, resize, reshape, andchange the color of a vector graphic without changing the quality of its appearance.Vector graphics are resolution-independent, meaning they can be displayed on outputdevices of varying resolutions without losing any quality.Bitmap GraphicsBitmap graphics describe images using colored dots called pixels, arranged within a grid.When you edit a bitmap graphic, you modify pixels, rather than lines and curves. Bitmapgraphics are resolution-dependent because the data describing the image is fixed to agrid of a particular size. Editing a bitmap graphic can change the quality of itsappearance. In particular, resizing a bitmap graphic can make the edges of the imageragged as pixels are redistributed within the grid. Displaying a bitmap graphic on anoutput device that has a lower-resolution than the image itself also degrades the qualityof its appearance.Flash Work EnvironmentWhen creating and editing movies, you typically work in these key areas: the stage, timelinewindow, library window, and the movie explorer.The Stage and the Timeline windowFlash movies divide lengths of time into frames. The Stage is where you compose individualframes in the movie, drawing directly on it or arranging imported artwork.The Timeline window is where you coordinate the timing of the animation and assemble theartwork on separate layers. The Timeline window displays each frame in the movie. Layers actlike a stack of transparent acetate, keeping artwork separate so you can combine differentelements into a cohesive visual image.2
Using the TimelineThe Timeline organizes and controls a movie's content over time in layers and frames.The most important components of the Timeline are frames, layers, and the play head.The Library windowThe Library window is where you store and organizesymbols created in Flash or imported files includingsound files, bitmap graphics, and QuickTime movies.Symbols can consist of graphics, buttons, or movieclips. The Library window lets you organize libraryitems in folders, shows how often an item is used ina movie, and can sort items by type (i.e. graphic,button, or movie clip).Using the Library windowEach Flash file has its own library that maycontain symbols, bitmaps, sound, and videofiles. Use the Library window to view andorganize the contents of the file's library.When you select an item in the Library window, Flash previews the item at the top of thewindow. If the selected item is animated or is a sound file, you can use the controller topreview it.You can organize library items into folders. The Library window column list the name ofan item, its type, the number of times it's used in the file, and the date on which is waslast modified. You can sort items in the Library window by any column.Symbols and InstancesSymbols are reusable graphics that you create with the drawing tools or graphics you import.When you place a symbol on the Stage or inside another symbol, you create an instance of thatsymbol. Symbols reduce file size because, regardless of how many instances you've created,Flash stores only one copy of it in the file. Use symbols, animated or otherwise, for everyelement that appears more than once in a movie. You can modify the properties of an instancewithout affecting the master symbol, unless you edit the master symbol, which will change allinstances.When editing a symbol, both the Stage and the Timeline change to display the content of thesymbol. You can change the Stage to display the symbol in isolation or in its current context bygraying other items on the Stage. You can also edit the symbol in a separate window. TheTimeline displays only the timeline of the symbol you are editing.Editing a symbol in isolation (left) oredit symbol in its context in themovie. (The dimmed areas showthat you are in editing in place.)3
Using the ToolboxThe tools in the toolbox let you draw, select, paint, and modify artwork.Other tools let you change the view of the Stage. Most tools havemodifiers that affect the painting or editing operations of the tool.Using scenesUse scenes to organize a movie thematically. For example, use separatescenes for an introduction, loading teaser, or credits.When you play a Flash movie that contains more than one scene, thescenes play back in the order they are listed in the Scene inspector, oneafter another. Use actions if you want the movie to stop or pause aftereach scene, or to let users navigate the movie in a non-linear fashion.Using the Movie ExplorerThe Movie Explorer provides an easy way for you to view andorganize the content of a movie and select elements in the moviefor modification. It offers many features to streamline the workflow for creatingmovies. For example, you can use the Movie Explorer to do the following: Search for an element in a movie by name Display the properties panel for a selectedelement to perform modifications Familiarize yourself with the structure of aFlash movie created by another developer*this is my favorite use Find all the instances of a particularsymbol or action Replace all occurrences of a font withanother font Copy text to the Clipboard to paste into anexternal text editor for spell checkingThe Movie Explorer contains a display list, a list of movie contents arranged in a navigablehierarchical tree. You can filter which categories of items in the movie are displayed in the MovieExplorer, choosing from text, graphics, buttons, movie clips, actions, and imported files. You candisplay the selected categories as movie elements (scenes), symbol definitions, or both. You canexpand and collapse the navigation tree.Creating a Basic Animation – Shape Tween and Motion GuidesCreating the Shape TweenA shape tween is a similar effect to morphing; you can make one shape appear to change intoanother shape over time.1. Choose FILE NEW.2. Then draw a shape in Frame 1. (I’m going to select a graphic symbol from the library, inwhich I have already created. Note: Shape tweens will not work if the graphic is4
grouped or a symbol. Therefore, once dragged to the stage you will need to break itapart. MODIFY BREAK APART.)3. Go to Frame 5 in the main timeline: RIGHT CLICK and select INSERT BLANKKEYFRAME.4. Keep the Play head inFrame 5 and drawanother shape.5. Go back to Frame 1 anddouble click on thetimeline key framerange area.Go to properties window at thebottom of the screen. In theTween drop down box select shape tween the key frame area should turn into an arrow witha green shade. (Note: A green shade represents a shape tween, motion tweens are representedby a blue shade.)6. Let’s Test the Movie.Go toCONTROL TESTMOVIE a new windowwill appear. Watch howthe shape changes over time. Thetransformation is pretty fast, so you can dragout the last key frame to about 20 orwhatever frame is appropriate for thetransformation.*Note: You can select the Onionskin button to viewthe steps in-between frame 1 thru whatever frameyou dragged the key frame out to. You may have toadjust the drag the area to view the steps you wouldlike to see.Prep the shape tween before attaching themotion guideTo prepare the shape tween you just created youneed to modify it before you add the motion guide.1. Shift Click the whole timeline; frames 1 thru 20 or whatever your last key frame is.5
2. RIGHT CLICK and Select CONVERT TO KEYFRAMES. This converts the shape tweento individual key frames.Create Motion GuideTo create a motion guide, we need to create a guide layer and apath you want your graphic to follow.1. RIGHT CLICK on your currentlayer and select MOTIONGUIDE.2. Select the guide layer; draw apath you want your shape tweento follow.3. Turn on the ONIONSKINbutton to help you adjustthe movement along thepath.4. Select the 1st frame anddrag the object to the path. It should snap tothe path, by clicking towards the center of thegraphic.5. Repeat Step 4 until all the frames graphics havebeen moved to the path.6. To hide the path line, turn off the visible icon ofthe guide layer.To test the movie go to CONTROL TEST MOVIE a new window will appear. When finishedclose the window. This brings you back to the original Flash file. Save the file if you like yourdesired effects as a .fla file. To publish the document select FILE PUBLISH and select theformats you want for your output.Congratulations! You have just made your shape tween that follow a motion path. This is onlya taste of some basic animation you can create in Flash.If you downloaded the shapetween.fla and motionguide.fla files, you can see in detail how the file was created.6
Creating a Very Basic Multiple Choice Quiz1. Choose FILE NEW. Then, choose FILE OPEN AS LIBRARY and selectEXERCISE1.FLA. You will need to download the file in order to use the same graphicsare used in this exercise.2. Then go to the bottom of thescreen and adjust thebackground color and changethe dimensions to 640x480.3. Select the Text Toolin the tool bar. Look at the bottom of the screen and thecharacter panel dialog box is visible for changes. Choose a font, and change the pointsize to 36. Also, change the text color if needed. Type a question. An example: Whenis Halloween?4. Now select the Text Toolagain and change the point size to 28. Type in threedifferent answers/responses, one of thembeing correct. An example: October 31st,April 1st, and March 17th. Select the textand position them on the stage.5. Choose WINDOW LIBRARY or F11.Then select the push-green-button.Select and drag the button to thedocument. Position a button by each ofthe multiple-choice answers. (You willdrag three button instances onto thestage.)Note: We just finished creating our first keyframe. Now we are going to create the correctanswer key frame and a remedial key frame.The other stages are created much the sameway as the first fewsteps.6. Move your cursor to the Timeline Window and Right Clickin Key Frame 2. Then select Insert Blank Key Frame inthe window. The stage area will become blank.7. Type the correct answer. For example: October 31st is thecorrect answer.7
Note: You can add vector graphics to any of these screens. Put a graphic on this screen. Go toyour Library Window and select kids trickortreating.swf. (If your Library Window is notvisible choose F11.) Select and drag the graphic to the stage and position where you wouldlike it.If the graphic is not the right size choose MODIFY TRANSFORM SCALE or click the .Now pull and drag to the correct size. Remember the graphic needs to be selected in order forthe transformation to take place.8. In the Library Window, selectthe push-orange-button andposition it on the page. Thenandselect the Type ToolType "Back", position the textunderneath the button.Now you are going to build your last keyframe. Move your cursor to theTimeline Window and Right Click inFrame 3. Then select Insert BlankKey frame in the context window. Thestage area will become blank.9. Select the Text tooland type in the remedial information. For example: If youselected April 1st or March 17th, you are incorrect. April 1st is April Fool’s day and March17th is St. Patrick’s day. The correct Answer is October 31st.10. Go to the Library Window, select the push-orange-button, and drag the button tothe document. Position the button where you would like it.11. Select the Text Tooland Type, "To try again, push this button".You have finally built all the Key Frames that you need for this multiple choice quiz. Next you willgo over assigning button actions.8
12. Go to the main timeline and insert a new layer. INSERT LAYER Double-click the newlayer you just created in the text label and name the layer actions. It is a good habit toput your actions in a separate layer.Now go the actionslayer and select theFirst key frame inthe Timeline andright mouse click.Choose Actions, thiswill open Actionsdialog box at thebottom of thescreen.Click on the Actions, Movie Control and select and dragStop to the to the open dialog box. Refer to the diagram in the top right. Repeat this action forKey Frame 2 and 3 in the main timeline Window.Note: This step tells the timeline to stop at each key frame, otherwise the movie will play in thewhole timeline, if there were no actions to tell it what to do.13. Now you will add actions to your buttons.First you will assign an action to thecorrect answer in the 1st Key Frame.Select the corresponding button to thecorrect answer. For example: the buttonnext to the text October 31st. Go to theActions dialog box and choose Actions,Movie Control and select and drag Goto too the open window. Then change theFrame field to 2, since this is the KeyFrame with the correct slide information.You have just created your first action bylinking the stage with a button. Continueon with the next 2 buttons on this screen with this process, except in the Frame fieldenter 3 for the 3rd Key Frame.14. Now go to the Timeline Window again and move the play head to Key Frame 2.Select the button and go to the Actions dialog box and choose Actions, MovieControl and select and drag the Go To in the open window. Then change the Frameto 1. This button will take you back to the first key frame, which is where the question isstated.15. Go to Key Frame 3 and select the button. You will do exactly the same step as youpreviously did. Select the button and go to the Actions dialog box and choose Actions,Movie Control and select and drag the Go To in the open window. Then change theFrame to 1. This button will also take you back where the question is stated.16. Finally, you can test the exercise to see if it works. To test the movie chooseCONTROL TEST MOVIE a new window will appear. With your mouse click on thebuttons to see if they go to the corresponding screens. When finished close the window.This brings you back to the original Flash file.9
17. You are almost done. But first you need to save. First always, always, save a copyof the file in its original form. Choose FILE SAVE AS. Give the file a Name and makesure the file type is FLASH MOVIE (.fla). Click SAVE.18. To make this exercise stand-alone for you and your students: Choose FILE PUBLISHSETTINGS. Select the Windows Projector (.exe).Keep all the defaults for this next screen. Click Publish and then click OK. The .exe file will besave in the same location as the original Flash file.Congratulations! You have completed a very basic multiple-choice quiz. This is only the tip ofthe iceberg of what Flash can really do; so if you enjoyed your experience keepingexperimenting. You can use this as a template for other multiple-choice questions to build withinFLASH. 10
change the color of a vector graphic without changing the quality of its appearance. Vector graphics are resolution-independent, meaning they can be displayed on output devices of varying resolutions without losing any quality. Bitmap Graphics Bitmap graphics describe images
![Effectiveness of Computer-Assisted Stad [1] gambari .](/img/12/ej1085945.jpg)
