Vector Art & Animation

Vector Art | Corporate Identity | Advanced Animation

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.

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

Attraction Tricks

These tricks aim to attract the viewer's attention so that he/she does not miss something. This involves giving the viewer a hint that something is about to happen and where so that the user is looking in the right direction when the action itself takes place. Examples include an object blinking, rocking back and forth, backing up a little, or hesitating a moment before the action takes place.

Timing Tricks

Sometimes it can be appropriate to use non-realistic timings in order to achieve the desired communicative effect. For example, you can slow the speed down or speed it up, zoom. In some cases it can also be appropriate to use a logarithmic scale rather than a linear one (e.g. if flying towards objects that are vastly different in size).

You can make your animations seem more alive by making several things occur simultaneously. For example, a humanoid that is standing still might be seen to be breathing, but also blink or look around occasionally rather than look like a statue.

Motion enhancement Tricks

Sometimes, it is necessary to make it more obvious that a motion is taking place. For example a rolling ball may need some markings on it so that the user can clearly see that it is rotating as it moves. The same is true of smooth spinning objects, where it can be appropriate to add some marks. Shading with highlights can give a good impression of motion without additional enhancement,

Other tricks

Other things that you should think about when designing an animation are conveying the weight and size of an object so that it's movements appear to be realistic. Also think about whether an object is soft or hard. A soft bouncy ball will distort as it bounces while a hard object that collides with something may simply vibrate or distort the object it hits.

If you are telling a story with animation (interactive or otherwise) then timing is very important. The viewer should anticipate actions, see them, and react to them, but this should not happen to quickly (or you'll lose the viewer) or too slowly (or the viewer will get bored).

Illusion of Motion

One of the keys to illusion of motion is that the object must appear to move smoothly between frames. Typically in TV, cartoons animation run at 12 frames per second (fps). Film runs at at 24 frames per second. So, the MOST any cartoon can be animated to is 24 fps (often referred to as 24p). The NTSC standard is 23.97 fps (Don't think it matters that video is 30 fps- they are still shot on film...) As a matter of course, though, what is typically done, at least by big budget films, is 12 cels per second, each cel being shot twice. However, lower budget cartoons can and usually do use the same cel three or more times... the more a cel is used, the "jerkier" the final cartoon will look.

Uses for Animate (formerly known as Flash)

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

1) Cel-Animation:

These are 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 Animate fill-in-between 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), or the Gotye music video (3rd video below)

2) Web-advertisements

Are quite often done as either gif animations (simple image replacement), jpg's or Animate (using either drawn elements or video elements). Flash (Animate) 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, auto-play 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 these ads. When used however, ads come in various forms:

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:

http://www.beonlineb.com/

4) Websites:

Whole websites are almost never done completely in Animate (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:

w3 Technology Survey

5) Online Games

Online video games are often done in Flash/Animate. Using a programming language designed for use only within Animate itself (called Action Script) developers can get content to be interactive with the user. This content can be drawn within Animate, 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 Animate in the making of a brief summary of an established book or movie using only moving text and graphics.

a) Motion graphics includes moving fonts AND graphics.

Motion Graphics Examples:

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

Kinetic Typography Examples:

If you like these, check out the following resources

Some basic tools of Animate

Here we see some basic tools of Animate that can help you to make your animations successful. #1 (below) is the select tool, it treats the object you select as a series of pixels (a RASTERIZED) object. This has it's benefits that we'll describe later.

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

Timeline

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.

Animate 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 Animate 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 Animate 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 Animate 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:

Animate 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 Animate..., well, Animate. 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 Animate. 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 Animate 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 Animate organizes and controls a document's content over time in layers and frames. Like movie film, Animate 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.

Parts of the Timeline

A. Playhead

B. Empty keyframe

C. Timeline header

D. Guide layer icon

E. Frame view pop‑up menu

F. Frame-by-frame animation

G. Tweened animation

H. Scroll to Playhead button

I. Onion-skinning buttons

J. Current frame indicator

K. Frame rate indicator

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, Animate 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. Animate 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 Animate 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 Animate 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.

Assignment #7 - Motion Graphics

We are to create a series of moving words, pictures, and clips of video to create a 30 second minimum audio clip of a movie/tv show/song of your choice. We will do so in either an Animate file (1920x1080 (Widescreen format) in ActionScript 3) or in After Effects (composition settings 1920x1080)

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 can get this audio by following these steps:

If you're using an audio track (e.g. music from your phone) go straight to step 2. If it's a clip from youtube or some other video stream you have to separate the audio from the video. To do that you have to a) get the URL (the share address) of the video. b) copy/paste it into some sort of mp3 stripping website (google search for youtube to mp3 converter). Or use the trick of removing the UBE from the word youtube in the URL (e.g. https://yout.com/video/OrLz6McW55w/). Then choose WAV. Careful with any of these that you don't install malicious software on your computer.
Once you have the audio (either copied from your phone, or stripped from youtube as in the step above) make sure it's copied over to the D drive (local drive) in a folder with your name on it. You can try using it in your Google drive instead if you'd like

3. In Animate, go to "File>Import to Library" the audio to your Animate library. In AfterEffects (AE), drag it into the assets library (top left).

If it doesn't work right away and gives you an error, then you'll need to bring that MP3 into Adobe Audition. Once it's loaded In Audition, just click File>Save As and choose WAVE PCM. You'll be able to use that WAVE file in either AE or Animate afterwards

4. In Animate, on the main timeline, create a a new layer called soundtrack. In AE just drag the audio to the timeline and lock the layer

5. *In Animate (only):

1. Select the first blank keyframe in the soundtrack layer and drag your audio file from the library to the stage.
2. Go to the Properties panel and make sure that your soundtrack layer Frame 1 has a Sync setting of Stream (see picture below)
3. You'll notice that there will be a strange little line going across the middle of your 'blank frame' - don't worry, you just don't have a long enough time period for the whole audio file to be played at present. Remember, you only inserted it on frame 1 and at the moment that's 1/24th of a second. We'll fix that by extending out the amount of time available to the audio by going off to a frame somewhere around frame 1080 inserting a static frame F5 is the keyboard shortcut (BTW, do NOT make this frame a keyframe).

6. In Animate or AE, start aligning text elements with sound by using keyframes. Refer to our tutorials on Animate or AE for more advanced things like opacity or tweens

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 Animate or After Effects organizes and controls a document's content over time in layers and frames. Like movie film, they divide lengths of time into seconds and smaller than that, 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 MP4 (go to File>Export>Video/Media in Animate, or File>Export in After Effects)

Choose H.264 encoding (it is by default). Hit the Play button at the top right for exporting from ANIMATE.
The default in AE is a H.264 MP4 file. Just click on the blue 'link' to rename it and click RENDER.

b) submitted your *.fla file (the working Animate file) or ONLY the *.MP4 if you're using AE.

c) Your submission will have a minimum of 30 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 or 30 fps fps with slight movement between frames so that your animation isn't "jerky".

How to set your audio to STREAM in Animate, so that you can scrub the playhead for sound

Google Sites

Report abuse