SIM1 - Class 02 - 2011

Subject SIM1 - Interactive Media 1
Competencies

BSBINN502A.1 - Build and Sustain and Innovative Work Environment (part 1)
CUFDIG506A.1 - Design Interaction (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/SIM1
                         (username & password = student)

Flash Animation & Tools

Today we will be covering the following topics:

 

Look at this revamp of a classic flash animation - a clever use of the Flash interface... Animator_vs_Animation & the sequel Animator-vs-Animation-II

 

Wire frames and planning documentation

In Class 03 your design document - with it's wire frames, will be due.

To make sure you are able to complete this by the deadline, I would like you to look at the following resource in your own time:

http://www.slideshare.net/nickf/wireframes-for-the-wicked

Note: I also have a static version of this presentation (minus the audio) available for download from here.

 

Why wire frame?

This video is an excellent resource for understanding what a wire frame is but also the many different forms a wire frame can come in. What we want you to make is a wire frame that does not include any design elements attached to it – we want to see your site and content layout more so than your design.

The video runs for and hour and five minutes – Most of what you will need to know for this brief is covered in the first 15 – 20 minutes.

What you are aiming to create is a hybrid of low fidelity and high fidelity wire frames as in the following examples...

Examples of wire frames from the slide show






Building wire frames

Useful links about wire frames: wire-frame-your-site & web-site-wireframe.php

List below are some additional applications that might help you in building your wire frames – if you are having trouble with any of these then use an application you are most comfortable with. Photoshop would be preferable. Don't forget that you need to include these images in your design document.

http://cacoo.com/
http://www.omnigroup.com/applications/OmniGraffle/
http://www.balsamiq.com/products/mockups
https://pidoco.com/en
http://www.protoshare.com/
http://iplotz.com/
http://hello.hotgloo.com/
http://www.gliffy.com/wire frame/
http://unify.eightshapes.com/
http://www.evolus.vn/Pencil/
http://wireframe.talltree.us/default.asp
http://gomockingbird.com/
http://www.fluidia.org/
http://www.lumzy.com/

 

Using the Library


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.

You can create permanent libraries in your Flash application that will be available whenever you launch Flash. Flash also includes a few sample libraries containing buttons, sounds and other symbols that you can add to your own Flash documents. The sample Flash libraries and permanent libraries that you create are listed in the Window > Common Libraries submenu.

 

Working with folders in the Library panel
You can organize items in the Library panel using folders, much like in the Windows Explorer or the Macintosh Finder. When you create a new symbol, it is stored in the selected folder. If no folder is selected, the symbol is stored at the root of the library.


Finding unused library items
To make organizing a document easier, you can locate unused library items and delete them.

Note: It is not necessary to delete unused library items to reduce a Flash movie's file size, because unused library items are not included in the SWF file.

You can view the Use Count of your items in the library by scrolling across in the library panel.

You can select all unused items in your library by clicking and selecting [Select Unused Items]

 


 

 

Updating imported files in the Library panel
If you use an external editor to modify files that you have imported into Flash, such as bitmaps or sound files, you can update the files in Flash without re-importing them. You can also update symbols that you have imported from external Flash documents. Updating an imported file replaces its contents with the contents of the external file.

To import a file select the [File] option form the top menu and go down to [Import], select [Import into Library].



Select the file you wish to import – in this case I'm importing a bitmap.



You should now see the item located in your library like below.

 

The image I imported looks like this



Now if I take it into Photoshop and edit it to look like the following, it will still appear the same as the original in Flash, as Flash has stored its own version within the FLA.


To update this imported item I need to right click it in the library and select [Update] and then select the [Update] button again. If all went well the tick next to the file name is left and the option box has disappeared.


 

Copying library assets between movies
You can copy library assets from a source movie into a destination movie in a variety of ways: by copying and pasting the asset, by dragging and dropping the asset, or by opening the library of the source movie in the destination movie and dragging the source movie assets into the destination movie.

You can also share symbols between movies as runtime or author-time shared library assets.

 

Animation

 

Using 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. Layers are like multiple film strips stacked on top of each other, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.


 

Using frames and keyframes
A keyframe is a frame in which you define a change in an animation or include frame actions to modify a movie. 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.

The order in which frames and keyframes appear in the Timeline determines the order in which they are displayed in a movie. You can arrange keyframes in the Timeline to edit the sequence of events in a movie.

Note: shortcuts - F5 creates a normal frame, F6 creates a keyframe with the same content as the previous keyframe, F7 creates a blank keyframe. Try and remember these shortcut keys if you can - it makes your work flow much faster.

 

Creating frame labels and comments
Frame labels are useful for identifying keyframes in the Timeline and should be used instead of frame numbers when targeting frames in actions such as Go To. If you add or remove frames, the label moves with the frame it was originally attached to, whereas frame numbers can change. Frame labels are included when you publish a document as a Flash movie, so avoid long names to minimize file size.

Frame Comments are useful for making notes to yourself and others working on the same document. Frame comments are not exported when you publish a document as a Flash movie, so you can make them as long as you want.


To create a frame label or comment:

 

Tweening

Inbetweening or 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. Flash is a great tool for Tweened Animation.

Flash can create 3 types of tweened animation, motion tweening, classic tweening (formerly called motion tweening) and shape tweening.

Differences between motion tweens and classic tweens

Flash supports two different types of tweens for creating motion. Motion tweens, introduced in Flash CS4 Professional, are powerful and simple to create. Motion tweens allow the greatest control over tweened animation. Classic tweens, which include all tweens created in earlier versions of Flash, are more complex to create. While motion tweens offer much more control of a tween, classic tweens provide certain specific capabilities that some users may want.

The differences between motion tweens and classic tweens include the following:

what a motion tween looks like

motion tween

 

Additional tweening resources

The following articles and resources are available about the differences between motion tweens and classic tweens:

 



Frame-by-frame animation
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-by-frame animation, Flash stores the values for each complete frame.



Representations of animations in the Timeline

Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows:


Distributing objects to layers for tweened animation


You can quickly distribute selected objects in a frame to separate layers to apply tweened animation to the objects. The objects can be on one or more layers initially. Flash distributes each object to a new, separate layer. Any objects that you don't select (including objects in other frames) are preserved in their original positions.
You can apply the Distribute to Layers command (Modify/Timeline/Distribute to Layers) to any type of element on the Stage, including graphic objects, instances, bitmaps, video clips, and broken-apart text blocks.
Applying the Distribute to Layers command to broken-apart text makes it easy to create animated text. The characters in the text are placed in separate text blocks during the Break Apart operation, and each text block is placed on a separate layer during the Distribute to Layers process.


Classic tweening instances, groups, and type

To tween the changes in properties of instances, groups, and type, you can use classic tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the colour of instances and type, creating gradual colour shifts or making an instance fade in or out. To tween the colour of groups or type, you must make them into symbols.

To animate individual characters in a block of text separately, you place each character in a separate text block – you “break apart” the text.
If you apply a classic tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.

You can create a classic tween using one of two methods:

classic tween

You should then see the tweening arrow appear between your keyframes. You can add extra keyframes along your tween span by electing the frame and hitting F6 to place a keyframe on the timeline (or by Right-Clicking on the frame). Then you can change a whole variety of symbol properties like scale, position, rotation, alpha, tint etc.

classic tween

 

Shape tweening

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and colour of shapes.

Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer.
To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

 

To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape.



Using shape hints
To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.
Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape. You can use up to 26 shape hints.
Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.
For best results when tweening shapes, follow these guidelines:

To use shape hints:

While working with shape hints, you can also do the following:

 

Onion Skinning



Onion-skinning allows you to see frames on the timeline before or after your current one. It's very useful when you're doing frame by frame animation. You can turn onion-skinning on or off by clicking the onion skinning graphic located right underneath the timeline.

 


You can increase or decrease the scope of your onion skinning  by moving the black brackets.


Onion Skinning with outlines


The onions skin with outlines button is almost identical as the normal onion skinning mode, except it shows surrounding frames as outlines, instead of just fading them.


 

Onion skinning options


Before we look at the third button (editing multiple frames) lets jump to the fourth, which has options for using our onion skins.

Don't forget those – these are optional – you can always just drag out the black brackets to suit your needs.

It's also good to note that these options also apply to editing multiple frames.


 

Edit Multiple Frames


The third button allows you to see and edit a number of objects on the timeline at the one time. This is a handy feature for situations when you may need to move some frame by frame
animation. Instead of moving each image individually, turn on this option, then select all your frames and move them once.


 

 

Motion path

The motion path allows you to control how an object gets from a to b. For example, lets  draw a circle on  the stage.


Now double click on this circle and go up to [Modify] on the top menu and select [Convert to symbol] (or press f8). Set it's name to 'circle' and its type to 'Movie Clip'.



To animate this right click on the circle and select [Create Motion Tween] and drag the circle somewhere else on stage.


Now if you scrub the timeline you should see that the circle is now animating from a to b. This is fine but we can now alter and modify the motion path and edit how it gets there.



With the Selection Tool selected (Black pointer, shortcut = V) click on the blue line and drag it down. You should now be able to see a curved line – this is the path your animation will follow. Scrub through the time line again and see the difference.


We can continue to alter this motion path by selecting the Subselection Tool (White pointer, shortcut = A). Click on one of the end points (larger squares) of your motion path and you should see that you now have some bezier curve handles which you can drag around to make a more complex path. Play with the bezier curves and when your finished scrub through the timeline again. Save this file as 'week2_motion_path' in your week2 folder.


Motion Guide

 

To create a custom motion guide lets start with a new flash file. As before lets draw a circle on screen and select it and convert it to a movieclip with the name of circle.


Lets draw with the pencil tool. Lets set its mode to smooth and begin drawing something that loops.


Double click on that path and cut it (ctrl x / cmd x)

Now right click on our circle and select [Create Motion Tween] from the options. With the motion tween selected paste the line back in (ctrl v / cmd v) and you should now see that your object follows the motion guide you drew.



Mask Layers

Work with mask layers

You can use mask layers to reveal portions of a picture or graphic in the layer below. To create a mask, you specify that a layer is a mask layer, and either draw or place a filled shape on that layer. You can use any filled shape, including groups, text, and symbols, as a mask. The mask layer reveals the area of linked layers beneath the filled shape.

Create a mask layer

  1. Select or create a layer containing the objects to appear inside the mask.
  2. Select Insert > Timeline > Layer to create a new layer above it. A mask layer always masks the layer immediately below it; create the mask layer in the proper place.
  3. Place a filled shape, text, or an instance of a symbol on the mask layer. Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area is completely transparent in the mask; any non-filled area is opaque.
  4. Right-click (Windows) or Control-click (Macintosh) the mask layer’s name in the Timeline, and select Mask. A mask layer icon indicates the mask layer. The layer immediately below it is linked to the mask layer, and its contents show through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.
  5. To display the mask effect in Flash, lock the mask layer and the masked layer.

mask layer mask layer

Mask additional layers after creating a mask layer

Do one of the following:

Unlink layers from a mask layer

Select the layer to unlink and do one of the following:

Animate a filled shape, type object, or graphic symbol instance on a mask layer

  1. Select the mask layer in the Timeline.
  2. To unlock the mask layer, click in the Lock column.
  3. Do one of the following:
  4. When the animation operation is complete, click in the Lock column for the mask layer to re-lock the layer.

Animate a movie clip on a mask layer

  1. Select the mask layer in the Timeline.
  2. To edit the movie clip in place and to display the movie clip’s Timeline, double-click the movie clip on the Stage.
  3. Apply motion tweening to the movie clip.
  4. When the animation procedure is complete, click the Back button to return to document-editing mode.
  5. To lock the layer again, click in the Lock column for the mask layer.

 

Class Exercise

Using the skills you have learnt today, draw an image of a basic car. Using nested movie clips (movieclips inside movieclips) have the car animate across the screen with its tires moving (if you want to include spinners as well go right ahead). Include a bird flying through the clouds following a motion guide / path.

Hints: you only need to have 1 keyframe on the main timeline. All of your animations should be inside movieclip symbols so that they can loop over different numbers of frames i.e. your car animation might require 80 frames to go across the stage, but your bird might require 120 frames. Remember, each tween must be on a separate layer within the movieclip. Name your layers, symbols and other elements in Flash so they are meaningful - it's easier to work with the timeline and interface that way.

if you are familiar with tweening in flash, then add more elements to your animation such as clouds going across the sky or other background features. Experiment with different speeds and types of tweening, experiment with tweening properties like alpha transparency or colour, or even animated text. impress me with your skills!

Here's an example of what I'm looking for - the graphics don't have to be fancy (or even very good - like my 10 min example here), just show me you understand the principals of tweening and nesting movieclips. get the FLA file if you need help to see what my timeline, Library and nested movieclips look like.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Save your work in a directory called Class02. This task will be checked next week to see if it has been completed. This task is a part of your Studio Practice brief.