TGJ3M_Vector_Art_Animation

include component="page" page="course_tabs_header" include component="page" page="menu_TGJ3M_crumbs" include component="page" page="menu_TGJ3M_vector_art_ANIMATION_crumbs"

=Vectors vs. Rasters= There are two kinds of computer graphics - **raster** (composed of pixels) and **vector** (composed of paths). Raster images are more commonly called bitmap images. Vector art is the generic term used for creating or editing images by the use of tools that define borders by a mathematical function, rather than an x,y coordinate that includes colour (which describes raster-art). Vector-based tools generate results that are a composed of a series of lines and curves that can be manipulated at any point using handles (Bézier curves/handles). Thus, a vector-based graphic is composed of a series of mathematically described lines that form geometric shapes. The benefit of vector art is that you can scale an image without making it blurry or pixelated and, you can easily go back and re-edit a vector, within the graphic. Vector graphics are also ideally suited for non-photographic detailed illustrative work, some 2D (and ALL 3D) animations, and industrial illustrations.

media type="youtube" key="W2xknX3k6FY" width="560" height="315"

We will be using both Flash in examining vector-based art in both stills and animation.

== =Uses for Flash=

In general Flash (and programs like it) can be used for a variety of things such as: 

1) Cel-Animation:
that is drawing cel frames one by one to give the appearance of motion. Here we see the disturbing internet meme Salad Fingers. Notice that the animation itself is very rudimentary and uses a lot of Flash fill-ins called tweens. It is deliberately low-quality emphasizing the creepy story. Manga is often done this way - as is the Duck Song (2nd video below).

media type="youtube" key="M3iOROuTuMA?version=3" height="315" width="420" media type="youtube" key="MtN1YnoL46Q?version=3" height="315" width="560" media type="youtube" key="le34ygtODfI?version=3" height="315" width="560" 

2) Web-advertisements
are quite often done as either gif animations (simple image replacement), jpg's or flash (using either drawn elements or video elements). Flash advertisements are quite often simple image replacements too. However, over the past 5 years there has been a trend towards increasingly more immersive content (e.g. interactive games, videos etc...). That said, heavily visited websites tend to make their revenue by linking through to twitter/FB/google+ etc... so they avoid having to make revenue from flash ads. When used however, flash ads come in various forms: media type="custom" key="13304336" media type="custom" key="13304104" media type="custom" key="13307014" 
 * ====The traditional banner found at the top of the page====
 * ====The rectangle ad found in margins or as embedded in the banner or even the content of the page (the middle third).====
 * ====The skyscraper ad found on the side of the page====

3) Art
often people create purely artistic (or artistic with revenue in-mind) pages that are designed to explore a concept. Arcade Fire used this to good effect in the the following website:

[] 

4) Websites:
Whole websites are almost never done completely in Flash (if the designer is doing their job properly). A completely Flash-based website is bulky and slow and while it may be 'flashy' (pardon the pun), it is considered poor design in the age where the average length of time spent on an individual web page is less than 10 seconds. This will mean you'll have a high [|bounce-rate]. If people are visiting your webpage as a result of a Google search, you'll find the results of this study interesting:



4) Online Games
Online video games are often done in Flash. Using a programming language designed for use only within Flash itself (called Action Script) developers can get content to be interactive with the user. This content can be drawn within Flash, or imported as either video or picture sources.



Motion Graphics
Motion graphics are graphics that use video footage and/or animation technology to create the illusion of motion or rotation, graphics are usually combined with audio for use in multimedia projects. We will be exploring Flash in the making of a brief summary of an established book or movie using only moving text and graphics.

media type="vimeo" key="7440725" height="281" width="500"

a) Motion graphics includes moving fonts AND graphics.
Motion Graphics Examples: media type="custom" key="12671026" media type="custom" key="12671074" media type="custom" key="12671112"

b) The use of ONLY moving words to tell a story is called Kinetic Typography.
Kinetic Typography Examples:

media type="custom" key="12671278" media type="custom" key="12671282" media type="youtube" key="uuiKJ0rRTAo?version=3" height="315" width="420" media type="youtube" key="1iaW3IsBkfI" width="560" height="315"

If you like these, [|check out the following resources]

Some basic tools of Flash
Here we see some basic tools of flash that can help you to make your animations successful. #1 is the select tool, it treats the object you select as a series of pixels (a [|RASTERIZED]) object. This has it's benefits. #2 refers to the sub-select (or, as I call it the [|VECTOR] select tool). The difference between vector and raster graphics is that vector graphics are scalable without rasterization (often called pixelation). The vector tool allows you to alter the shape of an object to a high degree of accuracy. #3 is the brush tool, the difference between the brush tool and the pencil tool (above it) is that the brush tool places a vector around a fill, while the pencil tool essentially makes a line (a singular dimensioned vector).

The timeline (located at the top of the screen) has certain features that will help you to do basic animations. #1 refers to the layer name (which can be adjusted by either right-clicking on the layer and renaming it, or by simply double-clicking the layername). When making multiple layers (#4) the layer that is at the top of the timeline is the layer that appears 'furthest forward' on the stage (the area you see when you draw things). In addition to making drawings on the stage, you also can make drawings over time. By __pressing F6__ (which __copies the previous keyframe__) or __F7 (creates a blank new keyframe)__ you advance your animation by 1 frame (typically 1/12th of a second, depending on what your framerate is [#6 - can be adjusted]). In keyframe animation (where you draw cel by cel) it is often useful to click on #6 (onion skinning) which by default shows you the previous 3 keyframes. This allows you to see where your objects have been on the stage and thus allows you to plan out where they are going over time.
 * [[image:timeline.png]] ||
 * Timeline ||

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).



5) Timeline
[|source] The Timeline in Adobe Flash Professional organizes and controls a document's content over time in layers and frames. 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 (CTI): 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.

<span style="-webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: #ffffff; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: myriad-pro-1,myriad-pro-2,Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; margin-bottom: 18px; margin-left: 0px; margin-right: 0px; margin-top: 18px; orphans: 2; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Parts of the Timeline For a more detailed explanation of the symbols you see above right [|read this]
 * < 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 ||

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.

media type="custom" key="13330460" []

 =Assignment #7 - Motion Graphics=

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).

If you need a refresher how to record content into Audacity - read this

While we haven't talked at length about storyboarding yet, after our brief discussion you should scribble out some ideas on paper (gasp!) before tackling this project. This should include rough placements of text and/or shapes and ideas of how things will move from one sequence to another. It will make the animation of your project SUBSTANTIALLY easier. The Timeline in Adobe Flash Professional organizes and controls a document's content over time in //layers// and//frames//. 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 with slight movement between frames so that your animation isn't "jerky".

Evaluation:
by teacher and/or documentation of progress in journal) in spite of several reminders to do so. ||
 * **CATEGORY** || **4** || **3** || **2** || **1** ||
 * **Moving text/graphics** || The motion of the text/graphics make an exemplary product even if audio wasn't present. || The result largely reflects good choices in motion of the text/graphics || The piece has many distracting uses of motion (or very little motion at all) and doesn't adhere to the principles of design || Text and graphic choices lead the viewer to be distracted rather than enhance the piece. No use of moving elements ||
 * **Timing of audio with text and graphic elements** || Timing shows no errors. Images, if used, enhance the piece and don't detract from the words || Overall the piece is well constructed, but the presentation is somewhat lacking due to mis-timings of audio || Generally the piece is satisfactorily constructed, but the presentation is lacking in many areas (either in placement, colour, graphics or size) || The piece is incomplete, or shows signs of obvious neglect in presentation. ||
 * **Overall impact** || The work clearly conveys an emotional feeling about the chosen clip || The work clearly reflects the chosen work, but in some cases misses the target with either style, colour or placement choices. || Style, colour or placement choices lead the viewer to not clearly understand the clip. || The piece doesn't work because principles of design have not been met, or the apparent effort is missing. ||
 * **Use of Time** || Used time well during each class period (as shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well during most class periods (as shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well (as shown by observation by teacher and documentation of progress in journal), but required reminders on one or more occasions to do so. || Used time poorly (as shown by observation