Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Level
Adobe
ash CS4
INFORMATION
MAP
USTHS TLE Teacher
_______________________________________________ Name
_______________________________________________ Section
FLASH LESSONS
FIRST QUARTER
LESSON 1: Flash Basics 1) Flash Overview 2) Examining the Flash workspace a) Menu Bar b) Stage and Pasteboard c) Tools Panel d) Timeline Lesson 2: Creating Flash Graphics Exploring and working with the Flash tools o Drawing Tools o Selection Tools o Reshape a line or shape Types of Flash Symbols Creating Graphic, Button and Movieclip Symbols Working with Flash Timeline Creating a Flash Animation Animating Text Advanced Animation Techniques Working with Flash Graphics, Colors and Symbols Flash Graphic Effects (1) Filter Effects (2) Blending Effects (3) Color Effects Text Options and Effects e) Property Inspector f) Library Panel g) Color Panel
Lesson 5: Flash Sounds Understanding Web Audio Adding Sound to a Flash Production Editing Sound Files Lesson 6: Working with Flash Video Playing Video with Flash Getting Video Files Ready for Flash
SECOND QUARTER
Lesson 7: Flash Actionscript Lesson 8: Flash Interactivity Adding Button Action to a Flash Project Using Flash Components The Arts and Science of Creating a Flash Application
University of Santo Tomas High School Technology and Livelihood Education Department
Page 2
Flash is a multitasking application: (1) an illustration program ( 2 ) an image and sound editor ( 3 ) a graphics animation program and ( 4 ) a scripting engine
Flash projects can include: simple animations, video content, complex presentations, applications, and everything in between. In general, individual pieces of content made with Flash are called applications, even though they might only be a basic animation. You can make media-rich Flash applications by including pictures, sound, video, and special effects. Flash content may be displayed on various computer systems and devices, using Adobe Flash Player, which is available free for common Web browsers, some mobile phones and a few other electronic devices (using Flash Lite).
Flash History
Flash started off in 1996 as a simple animation program called FutureSplash Animator, designed pretty well exclusively for making cheesy Web cartoons. Just before the turn of the century, a rudimentary programming language was bolted in. The response was overwhelmingly positive, and people started using Flash to make games and websites. These sites were usually pretty awful; Flash was an animation package with a basic programming language crudely slapped in, and it certainly wasn't designed to make websites! Over time, as new versions of the Flash authoring program (and the Flash browser plug-in) were released, the emphasis shifted more towards the programming side of things. We can only assume that the guys over at Macromedia (now an Adobe Product) saw how people were misusing their product, and figured "If you can't beat 'em, join 'em" - they extended the programming language and added new commands and functionality more appropriate for making websites, and today, Flash has evolved into a very useful website creation tool.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 3
2. Artwork
Flash is extremely well suited to creating content for delivery over the Internet because its files are very small. Flash achieves this through its extensive use of vector graphics. Vector graphics require significantly less memory and storage space than bitmap graphics because they are represented by mathematical formulas instead of large data sets. Bitmap graphics are larger because each individual pixel in the image requires a separate piece of data to represent it.
Vector graphics
Vector graphics describe images using lines and curves, called vectors, that also include color and position properties. For example, the image of a leaf is described by points through
which lines pass, creating the shape of the leaf's outline. The color of the leaf is determined by the color of the outline and the color of the area enclosed by the outline. When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. You can move, resize, reshape, and 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 using colored dots, called pixels, arranged within a grid. For example, the image of a leaf is described by the specific location and color value of When you edit a bitmap graphic, you modify pixels, rather than lines and curves. Bitmap graphics are resolution-dependent, because the data describing the image is fixed to a
University of Santo Tomas High School Technology and Livelihood Education Department
each pixel in the grid, creating an image in much the same manner as a mosaic.
Page 4
grid of a particular size. Editing a bitmap graphic can change the quality of its appearance. In particular, resizing a bitmap graphic can make the edges of the image ragged as pixels are redistributed within the grid. Displaying a bitmap graphic on an output device that has a lower resolution than the image itself also degrades the quality of its appearance.
3. Animations
These include banner ads, online greeting cards, cartoons, and so on. Many other types of Flash applications include animation elements as well.
4. Interactivity
Games
Many games are built with Flash. Games usually combine the animation capabilities of Flash with the logic capabilities of ActionScript.
User interfaces
Many website designers use Flash to design user interfaces. The interfaces include simple navigation bars as well as much more complex interfaces.
The use of vector graphics combined with program code allows Flash files to be smaller and thus for streams to use less bandwidth than the corresponding bitmaps or video clips.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 5
Flash Workspace
The Essential parts of flash workspace includes (1) Menu bar (2) stage (3) display bar (4) tools (5) property inspector(properties) (6) library (7) timeline (8) Motion Editor
Motion Editor
Timeline
The Stage
You can think of the Stage as your canvas. You will build your Flash project by adding graphics, text, actions and more onto stackable layers on the Stage. Publish Flash projects are known as movies, so its only fitting that the spot where you do your animation wizardly is the STAGE. The Stage is where you compose the content for individual frames in the movie, drawing artwork on it directly or arranging imported artwork on it.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 6
Edit scene
click this icon to display all scenes in your production, and click the scene name to edit it click this icon to display a list of the symbols in your document, and click a symbol name to edit it choose the magnification or fit the project on the stage
University of Santo Tomas High School Technology and Livelihood Education Department
Page 7
The Tools
Flash provides a variety of methods for creating original artwork and importing artwork from other applications. You can create objects with the drawing and painting tools, as well as modify the attributes of existing objects.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 8
Tool Selection Subselect Free Transform Gradient Transform 3D Translation Lasso Pen Text
Line Rectangle Oval Rectangle Primitive Oval primitive Polystar Pencil Brush Spray Brush Deco Bone Bind Paint Bucket Ink Bottle Eyedropper Eraser Hand Zoom Stroke Color Fill Color Default Colors Swap Colors No color
University of Santo Tomas High School Technology and Livelihood Education Department
Page 9
The Timeline
The Timeline is the most important tool in Flash. With it you can control and sequence your Flash animation or movie. You can think of a Flash project as a mini movie that is made up of many frames, just like a real movie is made up of many frames. You can control the sequence of your Flash project by placing certain control points (Keyframes) on the Timeline. The Timeline organizes and controls a movie's content over time in layers and frames. Like films, Flash movies divide lengths of time into frames.
The major components of the Timeline are layers, frames, keyframes and the playhead. Layers are like multiple film strips stacked on top of each other, each containing a different image that appears on the Stage. These are similar to layers in Photoshop and Illustrator. These help keep content separate, and allows ordering of objects front to back. Each layer can be locked, hidden or displayed as outlines. Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. keyframe is a moment where animation changes occur. Keyframe content does not change over time until a blank keyframe or another keyframe occurs. Flash can tween, or fill in, the frames between keyframes to produce fluid animations. Because keyframes let you produce animation without drawing each frame, they make creating movies easier. You can change the length of a tweened animation by dragging a keyframe in the Timeline. Empty Frame or Blank Keyframe Frames in a timeline that mark a place where changes can occur but are currently empty. These frames have no artwork or action elements. Playhead indicates the current frame displayed on the Stage. You can click and drag the Playhead back and forth to quickly preview your animation.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 10
The library in a Flash document stores symbols created in Flash, plus imported files such as video clips, sound clips, bitmaps, and imported vector artwork. The Library panel displays a scroll list with the names of all items in the library, allowing you to view and organize these elements as you work. An icon next to an item's name in the Library panel indicates the item's file type. You can open the library of any Flash document while you are working in Flash, to make the library items from that file available for the current document.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 11
Page 12
3. With the rectangle primitive selected, you can use the controls in the Property inspector to further modify the shape or specify fill and stroke colors. Properties for a rectangle primitive. Theses Property inspector controls are specific to the Rectangle Primitive tool: Rectangle Corner Radius Controls. Let you specify the corner radiuses for the rectangle. You can enter a numeric value for the inner radius in each text box. Entering a negative value creates an inverse radius. You can also deselect the constrain corner radius icon, and adjust each corner radius individually. Reset. Resets all of the Rectangle Primitive tool controls, and restores the rectangle primitive shape drawn on the Stage to its initial size and shape.
4. To specify a different corner radius for each corner, deselect the Lock icon in the Rectangle Options area of the Property inspector. When locked, the radius controls are restrained so that each corner uses the same radius. 5. To reset the corner radii, click the Reset button in the Property inspector.
Page 13
University of Santo Tomas High School Technology and Livelihood Education Department
Page 14
To draw straight lines and convert approximations of triangles, ovals, circles, rectangles, and squares into these common geometric shapes, select Straighten .
. .
4. To draw with the Pencil tool, Shift-drag to constrain lines to vertical or horizontal directions, click the Stage, and drag.
Page 15
Lock Fill - Used when painting in gradients and if enabled will make use existing brush strokes to determine the gradient fill for subsequent brush strokes Brush Mode - Five modes of the Flash brush that will make many common tasks a great deal easier. More on this later Brush Size - Controls the size of the brush tool Brush Shape - Dictates the shape of your flash brush 1. Select the Brush tool . 2. Select Window > Properties and select a fill color. 3. Click the Brush Mode modifier and select a painting mode: Paint Normal - Paints over lines and fills on the same layer. Paint Fills -Paints fills and empty areas, leaving lines unaffected. Paint Behind - Paints in blank areas of the Stage on the same layer, leaving lines and fills unaffected. Paint Selection - Applies a new fill to the selection when you select a fill in the Fill Color control or the Fill box of the Property inspector, the same as selecting a filled area and applying a new fill. Paint Inside - Paints the fill in which you start a brush stroke and never paints lines. If you start painting in an empty area, the fill doesnt affect any existing filled areas. 4. Select a brush size and brush shape from the Brush tool modifiers. 5. If a Wacom pressure-sensitive tablet is attached to your computer, select the Pressure modifier, the Tilt modifier, or both, to modify brush strokes. Select the Pressure modifier to vary the width of your brush strokes by varying the pressure on your stylus. To vary the angle of your brush strokes by varying the angle of the stylus on the Wacom pressure-sensitive tablet, select the Tilt modifier.
6. Drag on the Stage. To constrain brush strokes to horizontal and vertical directions, Shift-drag.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 16
Page 17
When a corner appears next to the pointer, you can change an end point. When a curve appears next to the pointer, you can adjust a curve. Some brush stroke areas are easier to reshape if you view them as outlines. If you are having trouble reshaping a complex line, smooth it to remove some of its details, making reshaping easier. Increasing the magnification can also make reshaping easier and more accurate. 1. Select the Selection tool 2. Do one of the following: .
To reshape the segment, drag from any point. To drag a line to create a new corner point, control-click (Windows) or Option-click (Mac).
University of Santo Tomas High School Technology and Livelihood Education Department
Page 18
Shape recognition turns the top shapes into the bottom shapes. Smoothing softens curves and reduces bumps or other variations in a curves overall direction. It also reduces the number of segments in a curve. Smoothing is relative, however, and has no effect on straight segments. It is particularly useful when you are having trouble reshaping a number of very short curved line segments. Selecting all the segments and smoothing them reduces the number of segments, producing a gentler curve that is easier to reshape. Repeated application of smoothing or straightening makes each segment smoother or straighter, depending on how curved or straight each segment was originally. To smooth the curve of each selected stroke, select the Selection tool and click the Smooth modifier in the Options section of the Tools panel. Each click of the Smooth modifier button makes the selected stroke progressively smoother. To enter specific parameters for a smoothing operation, choose Modify > Shape > Smooth. In the Smooth dialog box, enter values for the Smooth Angles Above, Smooth Angles Below, and Smoothing Strength parameters. To make small straightening adjustments on each selected fill outline or curved line, select the Selection tool and click the Straighten modifier in the Options section of the Tools panel.
To enter specific parameters for a straightening operation, choose Modify > Shape > Straighten. In the Straighten dialog box, enter a value for the Straighten Strength parameter. To use shape recognition, select the Selection tool select Modify > Shape > Straighten. and click the Straighten modifier , or
Optimize curves
Optimizing smooths curves by refining curved lines and filling outlines, reducing the number of curves used to define these elements. Optimizing curves also reduces the size of the Flash Professional document (FLA file) and the exported Flash Professional application (SWF file). Apply optimization to the same elements multiple times. 1. Select the drawn elements to optimize and select Modify > Shape > Optimize. 2. To specify the degree of smoothing, drag the Optimization Strength slider. The results depend on the curves selected. Generally, optimizing produces fewer curves, with less resemblance to the original outline. 3. To display a message indicating the number of segments in the selection before and after the optimization, select the Show Totals Message option. Flash Professional displays the message after the operation completes. 4. Click OK.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 19
Modify shapes
1. To convert lines to fills, select a line or multiple lines and select Modify > Shape > Convert Lines To Fills. Selected lines are converted to filled shapes, which allows you to fill lines with gradients or to erase a portion of a line. Converting lines to fills can make file sizes larger, but it can also speed up drawing for some animations. 2. To expand the shape of a filled object, select a filled shape, and select Modify > Shape > Expand Fill. Enter a value in pixels for Distance and select Expand or Inset For Direction. Expand enlarges the shape, and Inset reduces it. This feature works best on a single, small, filled color shape with no stroke, that does not contain many small details. 3. To soften the edges of an object, select a filled shape, and select Modify > Shape > Soften Fill Edges. Set the following options: Distance - The width, in pixels, of the soft edge. Number Of Steps - Controls how many curves are used for the soft edge effect. The more steps you use, the smoother the effect. Increasing steps also creates larger files and slows drawing. Expand Or Inset - Controls whether the shape is enlarged or reduced to soften the edges. This feature works best on a single filled shape that has no stroke, and can increase the file size of a Flash Professional document and the resulting SWF file.
Erase by dragging
1. Select the Eraser tool. 2. Click the Eraser Mode modifier and select an erasing mode: Erase Normal - Erases strokes and fills on the same layer. Erase Fills - Erases only fills; strokes are not affected. Erase Lines - Erases only strokes; fills are not affected. Erase Selected Fills - Erases only the currently selected fills and does not affect strokes, selected or not. (Select the fills to erase before using the Eraser tool in this mode.) Erase Inside - Erases only the fill on which you begin the Eraser stroke. If you begin erasing from an empty point, nothing is erased. Strokes are unaffected by the eraser in this mode. 3. Click the Eraser Shape modifier and select an eraser shape and size. Make sure that the Faucet modifier is not selected. 4. Drag on the Stage.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 20
Any symbol you create automatically becomes part of the library for the current document. When you create a symbol, the symbol is stored in the file's library. When you place a symbol on the Stage, you create an instance of that symbol. A copy of a symbol used in the movie is called an Instance, which can have its own independent properties (like color, size, function, etc.) different from the original symbol. An instance is a copy of a symbol located on the Stage or nested inside another symbol. All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie. When a symbol is edited all of its instances get updated, but changing the properties, effects or dimensions of an instance of a symbol does not affect the original symbol or other instances.
Graphic Symbols
are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. They have only one frame in their timeline. Interactive controls and sounds won't work in a graphic symbol's animation sequence.
Button Symbols
are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout, and other actions. You define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in their timeline - one each for the up, over and down states, and one to define the hit area of the button.
Movieclip Symbols
are reusable pieces of flash animation - consisting of one or more graphic/button symbols thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames - just like the main timeline) that plays independent of the main movie's Timeline. The best thing about using movieclips is that you can control them from actionscript - you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 21
University of Santo Tomas High School Technology and Livelihood Education Department
Page 22
University of Santo Tomas High School Technology and Livelihood Education Department
Page 23
Types of animation
Flash supports the following types of animation:
A. Tweened animation
Tweened animation is an effective way to create movement and changes over time while minimizing file size. In tweened animation, Flash stores only the values for the changes between frames.
Motion tweens
Use motion tweens to set properties for an object, such as position and alpha transparency in one frame and again in another frame. Flash then interpolates the property values of the frames in between. Motion tweens are useful for animation that consists of continuous motion or transformation of an object. Motion tweens appear in the Timeline as a contiguous span of frames that can be selected as a single object by default. Motion tweens are powerful and simple to create.
Classic tweens
Classic tweens are like motion tweens, but are more complex to create. Classic tweens allow for some specific animated effects not possible with span-based tweens.
Shape tweens
In shape tweening, you draw a shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Pro then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.
B. Frame-by-frame animation
This animation technique lets you specify different art for each frame in the Timeline. Use this technique to create an effect that is like the frames of a film being played in rapid succession. This technique is useful for complex animation where the graphic elements of each frame must be different. Frame-by-frame animation changes the contents of the Stage in every frame and is best suited to complex animation in which an image changes in every frame instead of simply moving across the Stage. Frame-by-frame animation increases file size more rapidly than tweened animation. In frame-byframe animation, Flash stores the values for each complete frame.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 24
A hollow dot in the first frame indicates that the target object of the motion tween has been removed. The tween span still contains its property keyframes and can have a new target object applied to it.
A span of frames with a green background indicates an inverse kinematics (IK) pose layer. Pose layers contain IK armatures and poses. Each pose appears in the Timeline as a black diamond. Flash interpolates the positions of the armature in the frames in between poses.
A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween.
A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 25
A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
Static Frames. A black dot indicates a single keyframe. Light gray frames after a single keyframe contain the same content with no changes. These frames have a vertical black line and a hollow rectangle at the last frame of the span.
A small a indicates that the frame is assigned a frame action with the Actions panel.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 26
Importing sounds
You place sound files into Flash Professional by importing them into the library for the current document. 1. Select File > Import > Import To Library. 2. In the Import dialog box, locate and open the desired sound file. Note: You can also drag a sound from a common library into the library for the current document. Flash Professional stores sounds in the library along with bitmaps and symbols. You need only one copy of a sound file to use that sound multiple ways in your document. If you want to share sounds among Flash Professional documents, you can include the sounds in shared libraries. Flash Professional includes a Sounds library containing many useful sounds that can be used for effects. To open the Sounds library, choose Window > Common Libraries > Sounds. To import a sound from the Sounds library to your FLA file, drag the sound from the Sounds library to the Library panel of your FLA file. You can also drag sounds from the Sounds library to other shared libraries. Sounds can use large amounts of disk space and RAM. However, mp3 sound data is compressed and smaller than WAV or AIFF sound data. Generally, when using WAV or AIFF files, its best to use 16-22 kHz mono sounds (stereo uses twice as much data as mono), but Flash Professional can import either 8- or 16-bit sounds at sample rates of 11, 22, or 44 kHz. Sounds recorded in formats that are not multiples of 11 kHz (such as 8, 32, or 96 kHz) are resampled when imported into Flash Professional. Flash Professional can convert sounds to lower sample rates on export. If you want to add effects to sounds in Flash Professional, its best to import 16-bit sounds. If you have limited RAM, keep your sound clips short or work with 8-bit sounds instead of 16-bit sounds.
University of Santo Tomas High School Technology and Livelihood Education Department
Page 27
Page 28
Event Synchronizes the sound to the occurrence of an event. An event sound plays when its starting keyframe first appears and the plays in its entirety, independently of the playhead in the Timeline, even if the SWF file stops playing. Event sounds are mixed when you play your published SWF file. If an event sound is playing and the sound is instantiated again (for example, by the user clicking a button again, or the playhead passing the starting keyframe of the sound), the first instance of the sound continues to play and another instance of the same sound begins to play simultaneously. Keep this in mind when using longer sounds, as they can potentially overlap, causing unintended audio effects.
Start The same as Event, except that if the sound is already playing, no new instance of the sound plays. Stop Silences the specified sound. Stream Synchronizes the sound for playing on a website. Flash Professional forces animation to keep pace with stream sounds. If Flash Professional cant draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the SWF file stops playing. Also, a stream sound can never play longer than the length of the frames it occupies. Stream sounds are mixed when you publish your SWF file.
An example of a stream sound is the voice of a character in an animation that plays in multiple frames. Note: If you use an mp3 sound as a stream sound, you must recompress the sound for export. You can export the sound as an mp3 file, with the same compression settings that it had on import. [These choices are explained and demonstrated in this video tutorial by Andy Anderson at InfiniteSkills.com. ]
University of Santo Tomas High School Technology and Livelihood Education Department
Page 29
8. Enter a value for Repeat to specify the number of times the sound should loop, or select Loop to repeat the sound continuously. For continuous play, enter a number large enough to play the sound for an extended duration. For example, to loop a 15-second sound for 15 minutes, enter 60. Looping stream sounds is not recommended. If a stream sound is set to loop, frames are added to the file and the file size is increased by the number of times the sound is looped. 9. To test the sound, drag the playhead over the frames containing the sound or use commands in the Controller or the Control menu.
Page 30
4. Select Window > Properties, and click the arrow in the lower-right corner to expand the Property inspector. 5. In the Property inspector, select the same sound from the Sound pop-up menu. 6. Still in the Property inspector, select Stop from the Sync pop-up menu. When you play the SWF file, the sound stops playing when it reaches the ending keyframe. 7. To play back the sound, drag the playhead in the Timeline. To the top
Edit Button
4. Do any of the following: To change the start and end points of a sound, drag the Time In and Time Out controls in the Edit Envelope. To change the sound envelope, drag the envelope handles to change levels at different points in the sound. Envelope lines show the volume of the sound as it plays. To create additional envelope handles (up to eight total), click the envelope lines. To remove an envelope handle, drag it out of the window. To display more or less of the sound in the window, click the Zoom In or Out buttons. To switch the time units between seconds and frames, click the Seconds and Frames buttons.
Page 31
University of Santo Tomas High School Technology and Livelihood Education Department
Page 32