Flash can be divided into a series of learning areas:

I HIGHLY RECOMMEND you read the following if you haven't taken the grade 10 course and/or aren't familiar with some of the basics of Flash already.

1) Strokes vs. Fills (selection tools)

the select tool or 'black arrow' (v) selects pixel areas whereas the sub-select or 'white arrow' (a) selects vectors. You can see in the screen-capture below that the stroke is in purple, and the fill in blue. I then used the select tool to draw a rectangle roughly where the dotted black line is. That allows the user to simply grab some pixels and manipulate them (scale, move, shear etc...). I then used the sub-select tool and selected the section near the bottom right. This shows my bezier handles, allowing me to adjust the outline of the shape.

2) Basic drawing tool use

The basic tools of flash are much the same as the basic tools of Photoshop. The brush, pencil, line, fill tools all largely do the same thing as in Photoshop with the notable exception that every tool except the pencil tool will create a stroke and a fill. Experiment with each tool to see how they function.
One of the things Flash does by default is it creates a protective "Drawing Object" box around each shape you draw. This can be found at the bottom of the drawing toolbar. Frustratingly, each time you draw an object the box will appear around your object and it's a bit like creating a series of layers in photoshop. Make sure the box is UNCHECKED (or unpressed).

3) Basic shape use:

Flash has a series of preset shapes (rectangle, oval and polygonal shape) available to quickly and easily use. The difference between the regular shape and the primitive shape options is that the primitive shape option allows you to adjust the edges to easily create such things as boxes with rounded edges, or oval shapes that can be sliced up.

4) Symbols:

Symbols are the very essence of what makes Flash..., well, Flash. You can convert anything you draw or import into a symbol. And in almost all cases you should. In the Convert to Symbol dialog box (F8) you can type a name for your symbol, select from one of three behaviors and determine the registration point of your object:

Movie clip: Movie clips are dynamic, which means they can be targeted with ActionScript, the programming language of Flash. They can have any number of layers and frames, but their timelines are independent of all other timelines. Think of a solar system: each planet is a movie clip, looping endlessly and independently around a sun, which is the main Timeline.

Button: Buttons have four states: Over, Up, Down, and Hit. These are represented as keyframes in a button symbol's timeline. You can place graphics in any of these states and then apply ActionScript to the instance of a button to add interactivity to your Flash movie.

Graphic: Graphic symbols are very similar to movie clips with the exception that they are not dynamic and cannot be targeted with ActionScript. However, you can place a graphic symbol inside a movie clip symbol if the object needs to be dynamically controlled. Like movie clips, graphic symbols can have any number of frames and layers. Animators prefer to place entire animations inside a graphic symbol's timeline, allowing it to be controlled via the Property inspector in the parent timeline. The most important feature is that they will always be in sync with the main Timeline and all other graphic symbol's timelines. This is very important when trying to create frame-based animations—which is why most animators prefer working with graphic symbols for fixed-frame output formats (such as video).

Code that has to used in order to get the button to work

stop(); play_but.addEventListener(MouseEvent.CLICK, playMovie); function playMovie(event:MouseEvent):void { gotoAndPlay(2); }

The button has to be named: play_but

5) Timeline

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.
Playhead indicates the current frame displayed on the Stage. As a document plays, the playhead moves from left to right through the Timeline. By default, the playhead loops when it reaches the end.
The Timeline status displayed at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.

Note: When an animation is played, the actual frame rate is displayed; this may differ from the document's frame rate setting if the computer cannot calculate and display the animation quickly enough.

Parts of the Timeline

A. Playhead
G. Tweened animation

B. Empty keyframe
H. Scroll to Playhead button

C. Timeline header
I. Onion-skinning buttons

D. Guide layer icon
J. Current frame indicator

E. Frame view pop‑up menu
K. Frame rate indicator

F. Frame-by-frame animation
L. Elapsed time indicator

For a more detailed explanation of the symbols you see above right read this

6) Frame, Keyframe and other such symbols on the timeline

Like films, Flash documents divide lengths of time into frames. In the Timeline, you work with these frames to organize and control the content of your document. You place frames in the Timeline in the order you want the objects in the frames to appear in your finished content. A keyframe is a frame where a new symbol instance appears in the Timeline. A keyframe can also be a frame that includes action script code to control some aspect of your document. You can also add a blank keyframe to the Timeline as a placeholder for symbols you plan to add later or to explicitly leave the frame blank.

A property keyframe is a frame in which you define a change to an object’s properties for an animation. Flash can tween, or automatically fill in, the property values between the property keyframes in order to produce fluid animations. Because property keyframes let you produce animation without drawing each individual frame, they make creating animation easier. A series of frames containing tweened animation is called a motion tween. A tweened frame is any frame that is part of a motion tween. A static frame is any frame that is not part of a motion tween. You arrange keyframes and property keyframes in the Timeline to control the sequence of events in your document and its animation.

7) Tweens

There are several types of tweens, including classic tweens (using the older Timeline animation method), motion tweens (using the Motion Editor and motion paths), and shape tweens (the result of drawing two separate vector shapes and morphing one to another). In addition to tweening movement, you can tween filters, color effects, and transparency.

Objects that can be tweened include movie clip symbols, graphic symbols, button symbols, and text fields. The properties of these objects that can be tweened include the 2D x and y position, scale x and y, skew x and y, 3D z position (movie clips only), 2D rotation (around the z axis), and 3D x, y, and z rotation (movie clips only).

Tweens are used to add a layer of automation to your animation and was the next logical step after cel-animation in the creation of professional animating software. Today tweens are incredibly complex compared to the simple motion and shape tweens that Flash originally had created.

A motion tween animates symbols moving in space; when you create a motion tween, then you can click on any frame in the tween, move the symbol on that frame, and watch Flash automatically build a motion path animating the frames between that frame and the next keyframe. Any frame where you've manually moved the tweened symbol becomes a keyframe. Shape tweens, on the other hand, perform distortions on non-symbol shapes/vector graphics. If you create one shape on one keyframe and another shape on another keyframe, you can connect those two shapes with a shape tween. The tween will perform whatever calculations and morphs needed to transform the first shape into the second. A classic tween works the way old motion tweens used to, in versions CS3 and earlier. In this kind of motion tween, you'd have to manually create all your keyframes and connect all of them with motion tweens that followed point A to point B. So basically, a shape tween is a transformation tween, while a motion tween/classic tween affects position and rotation.

I also highly recommend you watch the following series if you are uncertain about aspects of flash use. While the narrator is irritating, the series is quite well done and will get you from 0->60 mph in no time at all.

http://www.youtube.com/playlist?list=PLF03728C8C8620FCD&feature=plcp

Assignment #8 - Motion Graphics

Part 1
We are going to make a flash animation that incorporates parts that have been demonstrated in class.
1) It will have a motion tween (has to be a symbol)
2) Shape tween
3) At least one audible sound incorporated into the animation a sound created in the sound booth is encouraged
4) Background for your animation has to be included
5) More than one scene i.e.) more than one background

We are to create a series of moving words, pictures, and clips of video to create a 45 second minimum summary of a movie of your choice. We will do so in a Flash document that is 1366x768 (Widescreen format) in ActionScript 3. You may choose moving text only (kinetic typography) or, should you want a challenge, do motion graphics and include pictures and other elements to your composition.You will include audio content into your piece. You may do so in the form of just a soundtrack (which generally will result in an inferior product), or include spoken content (in the form of either an extraction of the audio from the movie, or you may use voice-overs - e.g. you record content into Audacity then bring it into Flash).

The Timeline in Adobe Flash Professional organizes and controls a document's content over time inlayersandframes. Like movie film, Flash documents divide lengths of time into frames. Layers are like multiple filmstrips 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:
When you are done you will have done the following:
a) submitted your SWF (go to File>Publish)
b) submitted your *.fla file (the working Flash file)
c) Your submission will have a minimum of 45 seconds of moving text elements timed to audio content. The submission may also have moving graphical and/or video content as well. Remember that the submission should be running at 24 fps.

Assignment - South Park Animation

‍

‍TASK 1 - CREATE YOUR CHARACTER

Special to S. Hughes

‍Table of Contents

TASK 1 - CREATE YOUR CHARACTER
TASK 2 - CREATE THE MOUTH POSITION
TASK 3 - SPEAK OH GREAT MOUTH OVERLORD
SAMPLE CARTOONS
RESOURCES

Your task will be an easy intro to 2D characters as you will be tracing some of the simplest characters out there ... South Park! Simply follow the steps listed . Please READ ALL STEPS BEFORE BEGINNING. See the South Park version of Mr. Regier below:

Visit the site listed and try to create a South Park version of yourself.

Please don't spend all class trying to get the character perfect. The goal is the use of the tools and not how close you can make the character resemble yourself.

TASK 2 - CREATE THE MOUTH POSITION

In this task you will setup up all the necessary mouth positions and emotions for your character. These will be used to sync up the sound in the next task.

Southpark4.png

Step 1
Make a new layer on the top and call it body-graphic-symbol. Select the legs and body of your avatar (Control-Click the layers with all sub-folders being ) and convert them to a graphic symbol (either by Modify>Convert to Symbol, or simply by pressing F8). Now click on each other layer and convert them to graphic symbols (left eyebrow, right eyebrow, left eye, right eye, left pupil, right pupil etc...). Once you've created graphic symbols of all of your layers, you can now safely delete every layer except right arm, left arm, head and body (that should leave you a blank face as in the picture at right).

TIP: Selecting individual frames or groups of frames in Flash can be tricky until you get used to it. It is good practice to:

Lock layers you're not working on by right clicking on the layer you ARE working on and choose Lock Others (same is true if you want to Hide Others)
Always click off into the "grey-space" away from the timeline before you plan on selecting a frame, or several frames. The reason for this is that if you have a frame selected already and you try to drag your cursor over a series of frames in your timeline, it's quite possible you'll create a cascading series of mistakes. This takes a bit of practice - remember, in selecting, click&hold, then drag your cursor. If you make a oopsie in your selection, click off in grey-space, then try again.

Double click on the head graphic symbol (you should now be inside the graphic and not on the main timeline) and create all the necessary mouth positions and emotions for your character. Sample mouth positions and emotions are shown below.

You can find sample emotions listed below:

Emotion Sample
Mouth Positions
You'll be creating 7 different mouth positions

Frame 1: M, B, P (Closed Mouth)
Frame 2: AH (Open Mouth)
Frame 3: EEE or EH
Frame 4: Consonants (ex. R, D, N, S, etc...)
Frame 5: OH, W
Frame 6: TH, L
Frame 7: F, V

for 3 different emotions

Neutral (hints: neutral-or-no eyebrows, eyes normal)
Happy (hints: eyebrows outside, eyes normal)
Angry (hints: eyebrows together and tilted, eyes are wedges)

You are now going to create what are called keyframes along the timeline. Keyframes occur when information of note happens along the timeline. You can tell a keyframe from a 'static frame' by the fact it is is represented in the timeline by a circle. An empty circle means that you have no information in that frame (but Flash considers it to be a ... well... key frame), while a filled circle means there's something (content) in that keyframe. Lastly, you can have small red flags on keyframes which mean that 'wrapped the keyframe' with some label or code (technically they're called labels and imply that either there is an actionscript/label active on the keyframe, but don't stress about what that means atm). Finally, the empty rectangular box at the end a series of frames (there are regular frames and keyframes) means that's the end of a static series of frames (it means nothing to Flash except to imply that something is GOING to happen in the next frame, because it will be a keyframe).

We're going to make keyframes (by either right-clicking on the keyframe and choosing insert blank keyframe, or by hitting F7). Look at the picture at left to figure out where to put them. In the Notes layer we'll have blank keyframes on frame 1, 11, 21. We'll continue our head layer out to frame 30 statically by either right clicking on the head layer on frame 30 and choosing Insert>Frame (or by hitting F5). I encourage you to learn the shortcuts since they will save you a pile of time. Depending on what's in your extras layer you may want to do the same with it. In my case, I've got my goatee/beard/hairy_caterpillar_thing and I'm to have to animate that along with my mouth movements so I'll have to put in a series of keyframes depending on my mouth movements.

Finally, we're going to copy mouth movements, eye movements and eyebrow movements out to each of our mouth positions (only to keep it as a reference before we move them). We'll do so by Insert Keyframe (NOT BLANK KEYFRAME) which copies the object from the previous frame, and makes a copy of it in that keyframe (shortcut F6). We'll want to do this for frames 2, 3, 4, 5, 6, 7 -> 12, 13, 14, 15, 16, 17 -> 22, 23, 24, 25, 26, 27

If at any point in time you make a mistake, don't start randomly deleting things. To clear a frame, but keep it as a keyframe, simply select the contents by clicking on the layer and frame that you want and hit delete (or Right-Click>Clear-Frame). To clear a keyframe simply Right-Click>Clear-Keyframe (by Removing>Key-Frame your timeline will shift on you reflecting the removed frame).

Finally, we're going to put some labels on our Notes layer. We'll do this to remind ourselves what/where we are when we navigate to get our sounds. Simply click on Frame 1 of the Notes layer and type in Neutral in your properties panel under the text-box called Frame Labels. In frame 11 we'll put in Happy, and in frame 21 we'll put in Angry (note: you have to hit Enter for the text you put in to 'take').

Once we've done the basic mouth shapes in frames 2, 3, 4, 5, 6, 7 all we need to do is not copy and Paste Frames in place the mouth shapes for frames 12, 13, 14, etc....

For your eyes, all you need to do is the "Angry Triangles" you'd see in South Park and make it a static frame for all of the eye frames

TASK 3 - MAKE YOUR CHARACTER SPEAK

In this final task, you will make your character say one line of dialogue using the previous two tasks. Your movie must have a play and replay button. It must not simply loop.

Use this audio

Movie Short

You are to branch off and see if you can't make a late-night infomercial about some relatively useless, likely fictitious product. Your guideline is that you are to do the steps above to create a movie short that is between 15 and 30 seconds long. You are expected to do your own voice-work in Audacity then bring the wav files into Flash. We have the recording computer in the studio against the wall, you can use that to record high quality dialogue, then walk the WAV files over to your computer.
Planning is key in this!!!

Make a storyboard!!

Use Garage band and Sound booth for Audio