Your SlideShare is downloading. ×
0
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to Adobe Flash CS3 welcome & course outline (2010)

2,927

Published on

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Excellent. Thank you
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
2,927
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
997
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Try to end each class with the students finishing a fun project that they can take home and show off. Homework assignments? Is there a good flash book? ADDITIONAL TOPICS Motion guides Methods of adding tweening Ways to test your movie masking Runtime bitmap caching ACTIVITIES Simple photo slide show An animated sidebar ad or banner Animated icons or menu bar I should do an example of frame-by-frame animation, using a series of our photos.
  • Please bring up your flash drive to update its files. …
  • 1) examine the philly horse animation http://en.wikipedia.org/wiki/Sallie_Gardner_at_a_Gallop 2) create the cartoon horse animation
  • Begin working with the 1887 horse philadelphia files. A general overview of the application interface. F4 will toggle all panels on and off.
  • 1) Here you are going to create a new flash document for the cartoon horse exercise. Use all the default document properties settings. Import all frames series files into the library.
  • CREATE A LAYER for the background with green grass and a blue sky, divided by rule of thirds. Name the layer. Use rulers and guides. Change the timeline frames to MEDIUM SIZE. ADD FRAMES until frame 8. CREATE A NEW LAYER for the horse frame-by-frame. Create a new BLANK KEYFRAME for each horse. EACH HORSE MUST BE: trace bitmapped and grouped, before it can be adjusted. Set minimum area to 6 pixels. USE ONION SKINNING as you place each of the 8 horses on the stage. SPACING: Each horse’s head can be clear of the previous horse. if you want to publish the movie as a .gif for comparison sake, make sure to turn on the “animated” radio button under the .gif tab.
  • 1) the bouncing ball exercise 2) end the class today with an examination of the animated alphabet to show what all can be done with motion tweens
  • Here you are going to create the initial ball SYMBOL for the bouncing basketball ex. Create a new document at the default stage size. Create it as a symbol before putting it on stage.
  • 1) Create the WHEEL symbol as a graphic, make sure it is asymmetrical. 2) Create a ROTATING WHEEL symbol as a movie clip. 3) Create a frame-by-frame animation of the EXHAUST. 4) Put all these together in a parent symbol called CAR ASSEMBLY. 5) You will then animate this from one side of the stage to the other.
  • Wait to add your tweening until the next slide.
  • Create the motion tween between the keyframes. demonstrate: "SCRUBBING" and also ENTER, LOOPING PLAYBACK, & CONTROL ENTER 3) Save the flash project for the first time as a .fla into the student my documents folder. You will come back to frame-by-frame animation when you do the more elaborate car animation: the exhaust 4) in the next slide we will add changes to that tweening.
  • wait to add your tweening until the next slide.
  • Use this as a conclusion to the opening animation exercise.
  • 1) begin class today with a free-form drawing “playground” to learn more about the drawing tools and layers 2) begin the nested animation exercise of the animated car. you do not need to finish this today. continue next time. 3) finish this day with the examination of student work from past classes.
  • Use this as a conclusion to the opening animation exercise.
  • Just talk about this.
  • Content from slides in dreamweaver exists?
  • free-form abstract drawing & painting exercise
  • free-form abstract drawing & painting exercise CONTINUED Merge Drawing model automatically merges shapes that you draw when you overlap them. If you select a shape that has been merged with another, and move it, the shape below it is permanently altered. Object Drawing model lets you draw shapes as separate objects that do not automatically merge together when overlaid. This lets you overlap shapes without altering their appearance should you choose to move them apart, or rearrange their appearance. Flash creates each shape as a separate object that you can individually manipulate. In previous versions of Flash, to overlap shapes without having their appearance altered, you had to draw each shape on its own layer.
  • Go to the next slide to begin creating the elements of the animated car.
  • 1) continue with the nested animation / animated car exercise. 2) finish this day with an examination of flash graphics saved from the internet.
  • FIRST, a simple MOTION GUIDE animation 1) create a pointy triangle as a library symbol. Check center registration. 2) add a motion tween 3) add a guide layer, and then a straight line as the guide. Then curve the line with the selection tool. 4) rotate the symbol at the beginning and end of tween to orient to path 5) check “orient to path” SECOND, a simple MASK LAYER animation: BINOCULARS. 1) practice adding a photo background, and then TRACE BITMAP. 2) create a symbol for the binoculars. Draw with black fill, using the object drawing model. Then break apart! 3) add the new symbol to a new layer. Create a motion tween. Add easing. 4) add the mask layer properties 5) add an additional layer beneath the mask and masked layers. Add a color rectangle. EITHER/OR: You can do a GUIDE/GUIDED LAYER or you can do a MASK/MASKED LAYER, BUT YOU CANT DO BOTH! THEN … LAYERS to include in the ANIMATED CAR guided project: 1) Use a CAR layer to animate the nested parent car symbol across the screen. 2) BACKGROUND layer for mountains, city, etc. you can teach the students how to loop a background image. 3) SKY layer for clouds and sun 4) add some TEXT to make this entire animation function as a banner advertisement. 5) Use a SOUND layer to add the sound effects. 6) FINALLY: Use a BUTTON layer to make the entire animation a hyperlink.
  • You can just demonstrate this quickly in a new document.
  • free-form abstract drawing & painting exercise CONTINUED
  • Begin each class with a kind of demo: 2 past students work
  • Begin each class with a kind of demo: 2 past students work
  • Sync definitions: If you choose the Event option, the sound will start at whichever frame you attach the sound and will continue to play in its entirety. If you have set a certain number of loops, all the loops will play out in their entirety. It is important to note that once an Event sound starts to play, it will continue to play independently of the timeline. For example, if you import a song 30 seconds in length and set it to Event, it will play out entirely and run independently of what is occurring visually, even after the animation in the timeline may have ended. Generally the Event setting is ideal for short sounds or effects containing a single audio message such as a door slamming or a cannon firing. This allows you to sync up the sound with the graphics for the effect desired in a short time frame. Finally Event sounds must be loaded entirely in order for them to play (unlike Stream as you will see below). The Start option is not much different from Event except that if your sound is playing already, another instance of the sound begins playing. Generally you will use the other sync settings more often than the Start option. The Stop option stops only the sound that is specified (2). This is very useful when you wish to stop a specific sound from a group of sounds that may be playing simultaneously. This is different from adding an action to Stop All Sounds in that you are selectively silencing a certain sound(s) and letting the other(s) to continue playing. Stream is very different from the Event option. The Stream option synchronizes the sound with the animation thereby forcing the animation to keep pace with the sound. If for whatever reason (memory or processor speed), the viewer's computer cannot draw each frame, Flash® will skip as many frames as needed in order to keep pace with the sound. Unlike an Event sound, a Stream sound cannot play outside of the timeline. That is, once the timeline ends or there are no more frames to play, the sound ends. Another important feature is that Stream allows the music (and presentation) to stream over the web; that is, once enough data is loaded, it begins to play. For example, if you set a 30 second song to Stream, it will begin to play sooner than if you set it to Event. Event will require the song to fully load before playing.
  • Use this exercise IF you have time. How can you tell which elements of a web page are flash-based? Versus animated gifs? For this exercise I can do the sesamestreetworkshop.org games There is also line rider … ;)
  • What we are aiming for here is a comprehensive project (set of web pages) from start to finish. (you *could* use the materials on the CD) For the last portion of the class, should the students work on a project of their own?
  • Transcript

    • 1. Adobe FlashFlash CS3CS3 web animation essentialsweb animation essentials your instructor: matteo wyllyamz mouselink@gmail.com http://mouselink.info http://mouselink.biz
    • 2. Adobe Flash CS3 22 getting startedgetting started quick introductions -- customizing this coursequick introductions -- customizing this course administriviaadministrivia making this a better workshop …making this a better workshop … menu of possible class topicsmenu of possible class topics
    • 3. Adobe Flash CS3 33 quick introductionsquick introductions customizing this course who are you and what do you do?who are you and what do you do? what is your experience with computers, the Internet, and thewhat is your experience with computers, the Internet, and the World Wide Web?World Wide Web? what is your experience with vector and raster graphics,what is your experience with vector and raster graphics, Macromedia Flash, and ActionScript?Macromedia Flash, and ActionScript? what are your goals today?what are your goals today? what do you hope to get from this class?what do you hope to get from this class? what is something interesting about you?what is something interesting about you?
    • 4. Adobe Flash CS3 44 quick introductionsquick introductions » matthew wyllyamz software instructor since 1993, with an emphasis on multimedia, graphics,software instructor since 1993, with an emphasis on multimedia, graphics, and internet development.and internet development. have created courses for Jefferson County Adult Ed, CCU in Lakewood,have created courses for Jefferson County Adult Ed, CCU in Lakewood, Productivity Point, and the DOD (at Rocky Flats).Productivity Point, and the DOD (at Rocky Flats). taught Apple Macintosh classes exclusively for five years,taught Apple Macintosh classes exclusively for five years, and have been using the Internet since 1995.and have been using the Internet since 1995. started working with Flash in 1999 (version 4), recently completedstarted working with Flash in 1999 (version 4), recently completed an intensive seven-course program in Flash 8. currently pursuingan intensive seven-course program in Flash 8. currently pursuing certification in Flash CS3certification in Flash CS3 corporate webmaster for two years ('97-'99), blogmaster for seven years. ('99-'05)corporate webmaster for two years ('97-'99), blogmaster for seven years. ('99-'05) TODAY: independent contractor, technical & creative consultant, artist, amateurTODAY: independent contractor, technical & creative consultant, artist, amateur photographer, and author. BA in English writing, and have sold three books.photographer, and author. BA in English writing, and have sold three books.
    • 5. Adobe Flash CS3 55 administriviaadministrivia Workshop scheduleWorkshop schedule Six DaysSix Days 1pm – 4pm1pm – 4pm Two sessions per afternoonTwo sessions per afternoon Short break (15 mins) around 2:30pmShort break (15 mins) around 2:30pm Facilities …Facilities … Bathrooms, vending, Starbucks …Bathrooms, vending, Starbucks …
    • 6. Adobe Flash CS3 66 making this a better workshop …making this a better workshop … please set pagers and cell phones to silent or turn off. understand "concentrated computer training": class is part discussion, part lecture, part hands-on. watch the screen, then try it yourself. PARTICIPATE! ask questions. answer questions. take notes. be mindful of the ability level of others. this is a cooperative learning environment: We are here to learn from each other. so have a buddy, and please don’t sit by yourself. keep in mind that this course was designed for a particular level of student:
    • 7. Adobe Flash CS3 77 making this a better workshop …making this a better workshop … keep in mind that this course was designed for a particular level of student: Created for - the beginning Flash user with a elementary knowledge of computer-based animation. - the beginning or intermediate-level web/Internet developer. NOT created for - the beginning computer user. - the intermediate or advanced Flash user. most importantly …most importantly …
    • 8. Adobe Flash CS3 88 Make it fun!Make it fun!  making this a better workshop …making this a better workshop … most importantly …most importantly …
    • 9. Adobe Flash CS3 99 menu of possible workshop topicsmenu of possible workshop topics What is Flash? What can be done with Flash? The basic Flash interface Document properties Frame-by-frame animation The importance of library symbols Three different types of symbols Nesting symbols within symbols Frames & keyframes “Tweening" Motion tweens The trick to working in Flash … and a word about your materials Vector vs. raster graphics Drawing & painting tools Unique graphic behaviors Shape tweening (morphing) Creating & managing layers Types of layers Looping an animation seamlessly Working with audio Working with blocks of text Flash-based site designs Resources for Flash developers Publishing your Flash project Conclusions …
    • 10. Moving on …Moving on … DAY1
    • 11. Adobe Flash CS3 1111 What is Flash?What is Flash? "Adobe Flash (formerly Macromedia Flash), or simply Flash, refers to both the Adobe Flash Player and to a multimedia authoring program used to create content for web applications, games, and movies. The Flash Player, currently distributed by Adobe Systems (which acquired Macromedia in 2005), is a client application available in most dominant web browsers (97%). It features support for vector and raster graphics, a scripting language called ActionScript and streaming of audio and video. "'Flash' can refer to the authoring environment, the player, or the application files. "The Flash files, traditionally called 'Flash movies' or 'Flash games,' have a .swf file extension and may be an object of a web page, strictly 'played' in a standalone Flash Player, or incorporated into a Projector, a self-executing Flash movie." http://en.wikipedia.org/wiki/.fla
    • 12. Adobe Flash CS3 1212 What can be done with Flash?What can be done with Flash? "Since its introduction in 1996, Flash technology has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, various web-page components, to integrate video into web pages, and more recently, to develop Rich Internet Applications." Create … Static vector-based graphics for websites Stand-alone animated movies Animated elements for web pages Logos, mouse-overs, buttons, drop-downs … Ads, sidebars, banners … Animated .GIFs Completely Flash-based web interfaces Flash-based games
    • 13. Adobe Flash CS3 1313 But exercise self-discipline over …But exercise self-discipline over … "Flashturbation" "Flashturbation is a term used to refer to the inappropriate use of Macromedia Flash software on Internet sites resulting in the creation of unnecessary animation or other annoying features. "Flashturbation is often typified by an option to "skip intro", which allows users to avoid having to wait for the animation either to load or play. The intention of this term is to emphasize a self-absorbed approach in the use of Flash technology." http://en.wikipedia.org/wiki/Flashturbation http://www.goddoesntshootcraps.com
    • 14. Adobe Flash CS3 1414 The basic Flash interfaceThe basic Flash interface Flash developer (.fla) vs. Flash player (.swf) The opening screen Menus & help The stage & work area Timeline & layers grid The toolbox w/ options (in four sections) The (contextual) properties inspector Working with other panels Library, history, scene, behaviors, etc. View options Customizing the interface layout Magnification, rulers, guides, grids, etc. Standard Adobe keyboard shortcuts
    • 15. Adobe Flash CS3 1515 When creating an animation from scratch … Always begin with document propertiesAlways begin with document properties It is often important to make decisions regarding properties before you begin work on your Flash project, however, remember that you can come back and change these settings at any time. Dimensions The default document size is 550 x 400 pixels. The minimum size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels. Meta data Improving the ability of web-based search engines to return meaningful search results for Flash content, not a feature of Flash MX 2004 <. Frame rate The number of animation frames to appear every second. Background color Ruler units
    • 16. Adobe Flash CS3 1616 Simple frame-by-frame animationSimple frame-by-frame animation “Stop motion (or frame-by-frame) animation is a general term for an animation technique which makes a physically manipulated object appear to move on its own. The object is moved by extremely small amounts between individual film frames, creating the illusion of movement when the series of frames are played back as a continuous sequence.” http://en.wikipedia.org/wiki/Stop_motion
    • 17. Moving on …Moving on … DAY2 HOMEWORK DUE ILT workbook Unit 1: “Getting Started” Time: 30 minutes.
    • 18. Adobe Flash CS3 1818 The importance of library symbolsThe importance of library symbols "A symbol is a graphic, button, or movie clip that you create only once, but then can be reused throughout your project or in other Flash documents. A symbol can include artwork imported from another application. Any symbol that you create automatically becomes part of the library for the current document." To save yourself trouble, virtually every graphic you create in Flash should be saved into the library as a symbol. Each time you use a symbol in your presentation, it is called an "instance." Editing a symbol automatically updates any and all instances. Editing an instance does not affect the original symbol. Each symbol can have its own layers and timeline! You can nest symbols inside of other symbols. It is possible to convert existing graphics on the stage into symbols.
    • 19. Adobe Flash CS3 1919 Three different types of library symbolsThree different types of library symbols Graphics Often a single frame, locked to timeline Optionally looped First frame can be varied Instances can be named uniquely Movie clips (not video clips) Usually multiple frames, independent timeline Always loops Scriptable & nameable Results in a smaller file size Buttons Four different states (frames) Up, over, down, hit Easy interactivity
    • 20. Adobe Flash CS3 2020 Working with frames & keyframesWorking with frames & keyframes Understanding the layers & timeline grid "The Timeline organizes and controls a document's content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. Layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead. The playhead indicates the current frame displayed on the Stage. As a Flash document plays, the playhead moves from left to right through the Timeline." Keyboard shortcuts F6 insert keyframe F5 insert frame
    • 21. Adobe Flash CS3 2121 Working with frames & keyframesWorking with frames & keyframes CRITICAL CONCEPTS of manipulating your timeline Keyframes provide the primary transformations for symbols in your animation, while frames fill in the in-between states between keyframes. So, what’s the difference between a frame and a keyframe? When you insert a keyframe, Flash automatically copies all symbols from all (selected) layers into the new frame(s). However, you can also insert blank (or empty) keyframes. Adding or removing frames between keyframes increases or decreases the amount of time perceived between those keyframe states. Keyboard shortcuts F6 insert keyframe F5 insert frame
    • 22. Adobe Flash CS3 2222 Methods of inserting keyframesMethods of inserting keyframes Note: You can add keyframes across multiple layers … and you may need to! Menu: Insert: Timeline: Right click on the timeline F6 Keyframe F5 frame By simply moving the symbol … when you have a non-keyframe frame selected in the timeline Pay careful attention to: The type of frame you are adding: Frame, Keyframe, or Blank Keyframe Why would you want to add blank (empty) keyframes? The layer(s) and/or frame(s) you have selected in the timeline.
    • 23. Adobe Flash CS3 2323 Traditional frame-by-frame animation vs. “Tweening”“Tweening” "Short for in-betweening, tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Tweening is a key process in all types of animation, including computer animation, in which the software enables you to identify specific objects in an image and define how they should move and change during the tweening process.“ http://en.wikipedia.org/wiki/Tweening
    • 24. Adobe Flash CS3 2424 What all can be done with motion tweens?What all can be done with motion tweens? "You create a motion tween by defining properties for an instance, a grouped object, or text in a starting keyframe, and then changing the object's properties in a subsequent keyframe. Flash creates the animation from one keyframe to the next in the frames between the keyframes.“ Remember, only symbol instances (or groups) can be motion tweened. Use motion tweens to … Create movement (including "easing") Rotate, skew, and resize. Alter color, tint, brightness/contrast, and alpha (transparency) Utilize the assistance of onion skins (with markers)
    • 25. Adobe Flash CS3 2525 Easing your tweensEasing your tweens Ease in - minus Affects the speed of the tween as your symbol begins its animation Ease out + plus Affects the speed of the tween as your symbol ends its animation “By default, tweened frames play at a constant speed. With easing, you can create a more realistic rate of acceleration and deceleration. Positive values begin the tween rapidly and decelerate the tween toward the end of the animation. Negative values begin the tween slowly and accelerate the tween toward the end of the animation.”
    • 26. Adobe Flash CS3 2626 The trick to working in FlashThe trick to working in Flash Always pay close attention to … WHERE YOU ARE. What layer are you in? What is your location (frame) in the timeline? What object or symbol do you have selected? (Check the properties inspector) Are you editing a library symbol or a group? What tool do you have selected? What scene are you working on?
    • 27. Moving on …Moving on … DAY3 HOMEWORK DUE ILT workbook Unit 3: “The Timeline” Time: 45 minutes.
    • 28. Adobe Flash CS3 2828 The trick to working in FlashThe trick to working in Flash Always pay close attention to … WHERE YOU ARE. What layer are you in? What is your location (frame) in the timeline? What object or symbol do you have selected? (Check the properties inspector) Are you editing a library symbol or a group? What tool do you have selected? What scene are you working on?
    • 29. Adobe Flash CS3 2929 Understanding vector vs. raster graphicsUnderstanding vector vs. raster graphics "Basically there are two types of computer graphics, bitmaps and vectors. Bitmap files such as jpegs or gifs contain information on each and every individual pixel, while a vector file is "object-oriented" and mathematically contains information on individual objects as to their shape, position, color, etc. Raster images scale poorly, while vector-based images can be scaled indefinitely without degradation." Raster graphics, aka bitmaps "Raster graphics, or bitmapped graphics, are digital images stored as arrays of pixels for display and modification. In raster data there are no lines, circles, or polygons, only pixels that are grouped to give the appearance of these elements." Vector graphics, aka line art "Graphics in which an image is stored as a series of numbers defining size, position, and shape."
    • 30. Adobe Flash CS3 3030 Raster or pixel-based graphics vs.Raster or pixel-based graphics vs. Vector or object-oriented graphicsVector or object-oriented graphics
    • 31. Adobe Flash CS3 3131 Flash drawing & painting toolsFlash drawing & painting tools Always pay attention to your tool options. Pencil, pen, and brush Shape tools Stroke & fill properties The web-safe color palette's 216 colors Paint bucket, ink bottle, and eye dropper Eraser Selection tools Arrow, subselection, lasso, free transform
    • 32. Adobe Flash CS3 3232 Unique graphic behaviors in FlashUnique graphic behaviors in Flash Making selections A single click only selects a fill or line (not both) You must double-click to select an entire object Object interactions: The “Merge Drawing” Model Stacking order (as opposed to working in layers) Objects on the same layer "eat away" at each other The “Object Drawing” Model Transforming, grouping, and breaking apart objects Easily adjusting alignment Using the trace bitmap command
    • 33. Adobe Flash CS3 3333 Custom colors, gradients, and line stylesCustom colors, gradients, and line styles The color mixer panel RGB or hexadecimal and alpha Custom color swatches Gradients Line styles
    • 34. Adobe Flash CS3 3434 Nesting symbols within symbolsNesting symbols within symbols "Nesting symbol instances inside other symbols is a common technique of Flash authoring. A symbol nested inside another symbol is called a child of that symbol. The parent instance contains the child instance." You can animate individual (and separate) elements of your Flash animation by nesting them. Individual nested symbols have their own timeline and their own set of layers. Movie clip symbols may not animate when you scrub, but should be fully functional when you test the movie.
    • 35. Adobe Flash CS3 3535 Moving on …Moving on … DAY4 HOMEWORK DUE ILT workbook Unit 5: “Timeline Animation” Time: 75 minutes.
    • 36. Adobe Flash CS3 3636 Creating & managing layersCreating & managing layers To tween different symbols, you must place each one on a different layer. Creating, naming, renaming, and deleting layers Changing layer order Visibility & layer outlines Locking down layers Utilizing layer folders for complex projects
    • 37. Adobe Flash CS3 3737 Additional types of layersAdditional types of layers Guide layer Never published Can be used for notes, designer's visual aids … Or can be created as a "motion guide" Mask layer Used to obscure elements in a "masked layer" beneath itself Button layer Can provide an invisible "hit state," especially useful to turn an entire animation into a clickable hyperlink Sound layer Placing your sound files in their own layer enables you to see a guide "wave form" to synchronize animation to sound. Actions layer For the sake of organization it is often useful to place all your scripting in a separate layer.
    • 38. Adobe Flash CS3 3838 Vectorization of bitmapsVectorization of bitmaps File > Import > Import to Stage Modify > Bitmap > Trace Bitmap Add to library
    • 39. Adobe Flash CS3 3939 Shape tweening (morphing)Shape tweening (morphing) “With shape tweening, you specify attributes for a shape in one keyframe, and then modify the shape or draw another shape in a subsequent keyframe. As with motion tweening, Flash creates the animation in the frames between the keyframes.” Shape tweening can only be applied to objects drawn directly on the stage and not to library symbol instances. http://www.entheosweb.com/Flash/shape_tween.asp
    • 40. Adobe Flash CS3 4040 Working with blocks of textWorking with blocks of text In object-based graphics programs, text is usually two different things at the same time: A graphic object A block of editable text Understanding variable vs. fixed text blocks All standard text formatting tools apply via the properties inspector. Breaking apart text into shapes
    • 41. Adobe Flash CS3 4141 Moving on …Moving on … DAY5 HOMEWORK DUE ILT workbook Unit 2: “Basic Objects” Time: 120 minutes.
    • 42. Adobe Flash CS3 4242 Review exercises from last weekReview exercises from last week » Choose your animation assignment Average time to complete: up to two hours. Utilizes essential skills sets: Creating a new Flash document, working with library symbols, understanding the timeline, adding keyframes and frames, tweening. Choose your animation style and content: Frame-by-frame: Rain or sparkles Motion-tweened animation: Bouncing balls Combination: Galloping horse with moving background If you find yourself stuck, ask a neighbor for help or flag down your instructor. If you are getting ahead (or finish) take a short break and ask other students if you can help.
    • 43. Adobe Flash CS3 4343 Review: frame-by-frame animationReview: frame-by-frame animation » Back to exercise choices Rain or Sparkles This animation is created simply by drawing raindrops or streaks in one frame, and then varying that same image in one or more additional frames. Sparkles can be created by using the exact same technique. You may reuse your simple rain animation from last week or create a new Flash document from scratch. In frame one of your timeline draw your initial rain or sparkle images directly onto the stage. Add a new keyframe to frame two. This will copy whatever images you have on the stage from frame one. With frame two selected in the timeline, vary the image by moving it or flipping it. Test your animation by looping playback. In your My Saved Files folder, save your file as an .FLA and then publish your animation as a .SWF EXTRA CHALLENGE: Utilize layers to include your rain or sparkle effect as part of a larger picture, such as a rainy landscape or a sparkly treasure.
    • 44. Adobe Flash CS3 4444 Review: motion-tweened animationReview: motion-tweened animation » Back to exercise choices Bouncing balls This animation is created by a series of simple motion tweens. Create a new Flash document with all the default settings. Create a new library symbol, and draw your ball of choice. Note: you will get the best results if your ball is not perfectly symmetrical. Then exit out of edit symbol mode, and return to the primary timeline. In frame one of your timeline, drag the ball symbol onto the stage and position it against the left “wall” of the stage. Add a new keyframe into a future point of the timeline. The number of frames in between the keyframes will create the amount of time elapsed. Position the ball in your new keyframe against the right “wall” of the stage. Repeat steps 4 & 5 until you have an appropriate number of bounces. Continually test your animation by looping playback. In your My Saved Files folder, save your file as an .FLA and then publish your animation as a .SWF EXTRA CHALLENGES: Add rotation. Squish the ball as it hits. “Pop” the
    • 45. Adobe Flash CS3 4545 ReviewReview: combination animation: combination animation » Back to exercise choices Galloping horse with a moving background This project is a frame-by-frame animation of a galloping horse inside a library symbol with its own nested timeline. Once that symbol is created, it is motion- tweened on the stage. Then a moving background is also motion-tweened on a separate, underlying layer. You may also use a running chicken or flapping bird. In a new document, import to library the frame-by-frame images for your character. Create a new library symbol for your nested animation. Then make a keyframe for each frame-by-frame drawing in your animation. Each image will need to be trace- bitmapped so that the white background can be removed. Finally, exit out of edit symbol mode, and return to the primary timeline. In your primary timeline, drag your symbol onto the stage. Then add additional keyframes into future points of the timeline to simulate the travel of your character from one side of the stage to the other. Motion-tween this series of keyframes. For the background, draw directly on the stage into a separate layer scenery which is two or three times as long as the stage is wide. Group or convert to symbol. Motion-tween the background in the opposite direction that your character moves. In your My Saved Files folder, save your file as an .FLA and then publish your animation as a .SWF EXTRA CHALLENGE: Make the background loop seamlessly.
    • 46. Adobe Flash CS3 4646 Moving on …Moving on … DAY6 HOMEWORK DUE ILT workbook Unit 7: “Publishing” Time: 40 minutes.
    • 47. Adobe Flash CS3 4747 Working with simple audioWorking with simple audio "Macromedia Flash Basic 8 and Flash Professional 8 offer several ways to use sound. You can make sounds that play continuously, independent of the Timeline, or you can synchronize animation to a sound track. You can add sounds to buttons to make them more interactive and make sounds fade in and out for a more polished sound track. "There are two types of sounds in Flash: event sounds and stream sounds. An event sound must download completely before it begins playing, and it continues playing until explicitly stopped. Stream sounds begin playing as soon as enough data for the first few frames has been downloaded; stream sounds are synchronized to the Timeline for playing on a website. "To add a sound to a document from the library, you assign the sound to a layer and set options in the Sound controls in the Property inspector. It is recommended that you place each sound on a separate layer. You can import the following sound file formats into Flash: .WAV, AIFF, .MP3."
    • 48. Adobe Flash CS3 4848 Working with simple audioWorking with simple audio Importing Types of sounds Adding sounds to a layer Effects and editing sounds Sync settings Repeating http://www.soundsnap.com http://www.hotcoding.com/flashc...
    • 49. Adobe Flash CS3 4949 Publishing your Flash projectPublishing your Flash project and understanding Flash file types .FLA The developer file .SWF Final publication for web, uneditable .GIF The only bitmap image format that supports animation .HTML Web containers for .SWF files Export Movie … As Sequence (et al) Other additional formats … http://en.wikipedia.org/wiki/Swf
    • 50. Adobe Flash CS3 5050 Buttons and essential scriptingButtons and essential scripting http://www.video- animation.com/flash8_007.shtml
    • 51. Adobe Flash CS3 5151 Flash-based website designsFlash-based website designs As you view the below web pages, ask yourself the following questions:As you view the below web pages, ask yourself the following questions: What is the site about? What do you like about the site? What don't you like about it? Does the Flash-based interface complement or detract from site content? kindnessandhumility.com pulsethemovie.net articleonemusic.com spiderman 3 site da vinci code site womenandguns.vcu.edu xenao.com carlosmarcelo.com KPF.com thanea.com parque.nl bio-bak.nl playgroundsfestival.nl okaydave.com creaktif.com cubamoon.com hybridworks.jp sonjamueller.org
    • 52. Adobe Flash CS3 5252 Resources for Flash developersResources for Flash developers actionscript.org flashadvisor.com newgrounds.com worldbest.com/flash.htm bestflashanimationsite.com atomfilms.com/af/animation/flash saveflash.com flashblock.com macromedia.com/software/flash/flashpro/productinfo/faq lodestone.com/_pdf/manuals/Whats_New_In_Flash_8.pdf
    • 53. Adobe Flash CS3 5353 Conclusions …Conclusions … You cannot learn the violin in a day or two. Flash animation is a skill – like any other – that requires gradual & continual practice & improvement. Approach everything on a need-to-know basis, and don't worry about that which you do not yet understand. Stay upbeat! … but if you get frustrated, remember: You can always turn off the machine and walk away. :) Good luck. Best wishes. And get in touch if you need more help! m.wyllyamz@gmail.com
    • 54. Adobe Flash CS3 5454 copyright © 2010 by m.wyllyamzcopyright © 2010 by m.wyllyamz

    ×