Unit 65 – Digital Web Animation Assignment 3 – Checklist

Explain how you used the following:

Range How Used Screenshot evidence

Workspace: stage, Stage
timeline, menu bar, The stage is where you can see the work you are producing. You drag the assets onto the
toolbar, library, colour stage to see them, this also where you can type the text, add animations etc. here you can
palettes, properties, also change the positioning to your liking, you get to see a preview of your product before
preferences, help. actually publishing it.

Timeline
The timeline is next to the stage, this is where you can organise the layers and frames to
make changes and add to the product on the stage. By changing the names of the frames, it
makes it easier for the user to read the timeline.

Menu bar
The menu bar is used to control the things you want to do with the assets for example if you
want to export, save, copy and paste etc.

Toolbar
The toolbar is used to select the different tools, each of these tools perform specific tasks.
These are tools like text boxes where you can select this tool and create a text box on the
stage to then write text in.

Library
The library tab holds all of the imported assets, you can view these assets either by an image
of the assets or by the asset name whichever is easier for you. These assets can be clicked
and dragged to both the stage and the timeline to add to the product. This can be things like
text, images, symbols, audio etc.

Colour pallets
The colour pallets allow you to select any colour from a variety of different shades. These
colours can be used for graphics, text etc. you can also use the gradient tool so that you can
get even more of a variety of shades.
 You can also use a colour code instead of selecting a colour from random so that the user
has a specific shade of colour.

Properties
The properties tab allows the user to gain additional advanced
information on making adjustments to selected assets as well as the
stage. If the user decides to change the stage they can enter this tab to
change stage size, colour and FPS rate. Other properties can also be
adjusted not only the stage itself such as audio, sync can be changed to
event, start, stop and so on.

Preferences
The preference tab allows the user to adjust their UI (user interface) within Adobe Flash.
This allows the user to modify workspace settings, panel positions,
behaviours, project settings, cached custom classes, etc. In some
cases, adjusting preference may solve UI issues and can make the
workspace of the UI user-friendly towards the user when creating
their multimedia product, e.g. enabling shortcuts.

Help
The help tab lets users search for additional help on using Adobe Flash as well as resolving
the program issues should they come across errors.
Adobe Flash can also be check to ensure the version
is up-to-date, find product registration, check
information about Adobe Flash itself, etc.

Basic tools: drawing, eg Drawing: pencil, line, brush, pen, shapes

pencil, line, pen, brush, There ae five different ways of drawing. The pencil tool allows you to freely draw using the
shapes; free transform, mouse, this will draw using a simple thin line. The line tool allows the user to draw using
eg rotate, skew, distort, lines, this would be used to draw things like boxes etc. the pen tool is used to plot anchor
scale, envelope, ruler and points to then create smooth outlines instead of having jiggered hand drawn lines. The
guidelines; editing, eg brush tool is used to draw/paint, this tool is much like the pencil tool but instead you get a
lasso, eraser, undo, copy, paintbrush and it draws slightly thicker.
paste, duplicate, insert,
delete, aligning,
grouping, ungrouping Free transform: rotate, skew, scale, distort, envelope, scale
There are five different types of transformations effects that you can apply to a graphic. If
you click on an asset and then click onto the menu bar > modify > transform. Multiple
different options of transformation then appear. You can rotate an asset which means flip
the image around like flip it 90 degrees. Skewing asset is when the asset is stretched so that
it sits diagonally. Distorting the asset is to make the graphics look completely different
meaning doing things like pinching the corners to change the change of the asset. Scaling
makes the asset reduce or enlarge the size of it. Envelope transformation applies multiple
different anchor points around the outline of the asset to then change the shape.

Ruler and guidelines

To ensure that the animation is not jumping around and it carefully aligned, guidelines and a
ruler is used. For the ruler, it helps the user to create diagonal lines on the stage where they
can position the animations to move. The user can also
turn of the guidelines if they were to add too many
guidelines then they can remove them by guidelines >
guides > show guides and simply turn them off.

Drawing: Pencil/Line/Pen/Brush/Shapes
There are 5 different types of drawing tools. The pencil tool allows the user to draw freely
on the stage which gives a ‘thin pencil line’ effect, the line tool lets users to create straight
lines in whichever direction, the pen tool is used to plot anchor points to create smooth
outlines without having jagged lines, the brush tool is used to paint/draw freely much like a
pencil tool except the user would get a ‘paint brush’ effect and lastly, the shape tool lets
users create variety style of shapes without having to draw from scratch.

Free Transform: Rotate/Skew/Distort/Scale/Envelope

5 types of transformation effects can be applied to graphics. If we click on a specific asset
and then on the menu bar > modify > transform. We get a list of option as stated. Rotating
the asset can be used to rotate in a different direction e.g. rotate the graphic 90 degrees.
Skewing an asset would be to stretching them diagonally so
that it becomes slanted. Distorting the asset would mean
we would make the graphics look unrecognisable from the
original setting, e.g. pinching a corner of a rectangle
inwards would cause it to distort abnormally. Scaling would
make the asset reduce or enlarge the size itself. Envelope
transformation would apply anchor points around the
outline of the shape which enables the user to distort the
shape outline in whichever direction they want. Keeping in
mind, only two transformation tool can be used on drawn
vector graphics through Adobe Flash not on imported
assets, which would be ‘envelope’ and ‘distort’.

Ruler & Guidelines

To ensure that an animation is carefully aligned without having it jumping all over the place,
ruler and guideline are used. For ruler, this allows the user to create diagonal or vertical
lines across the stage where they can create line positions, e.g. if they want a character to
walk in a straight line, the ruler is very useful to align the character’s steady walk. If the user
applied too many guidelines and no longer require them anymore, they can disable the
guidelines via view > guides > show guides. Alternatively, they can ‘lock guides’ to prevent
the lines from moving in case they accidentally move the line instead of the asset itself.

Editing: Lasso/Eraser/Undo/Copy/Paste/Duplicate/Insert/Delete/Aligning/Grouping &

Ungrouping
Editing tools are needed when it comes to making mistakes, they can be erased/undo so
that the editing progress is smooth and
stress free.

With the lasso tool, this allows the user to

carefully free-hand draw around a specific
area of the asset to highlight a section they
want to manipulate with.

The eraser tool is used to erase pencil and paint brush drawings. No other assets can be
erased unless it is drawn with a pencil or a paint brush.
 The undo tool can be accessed via edit > undo can back-track the option that has been done.
The undo tool can only go as far as undoing options at least 20 steps back.

The copy tool allows the user to select the asset they want to copy that asset to be used in
another multimedia project, e.g. copying one asset from their main project can be pasted
into different project in Adobe Flash this is followed up by using the paste tool to make the
copied asset appear.

The duplicate tool allows the user to not only duplicate assets itself on the stage, but they
can also duplicate assets within the library, should they need more than one and also
duplicate layers within the timeline (by making exact copies without having to trace the
original).

The insert tool lets users create new symbol, motion/classic/shape tween, timeline
layers/frames/keyframes – this isn’t normally done through the menu bar but more of right-
clicking for easier access.

The delete option, as stated by the name itself, allows the user to delete
assets/keyframes/layers/etc. should they no longer want whichever that was created in
their project. This can be done by right-clicking and selecting ‘delete’.

The aligning tool is used to align a specific asset within the stage to ensure that there are
equal about of spacing between other assets. This can be accessed via modify > align.

Finally, the grouping and ungrouping option is used when the user wants to group specific
bunch of assets together so that upon moving them around the stage they are moved as
one, however, if the user no longer want them to be grouped, they can be ungrouped. This
can be accessed via modify > group/ungroup.

Objects: symbols, eg Symbols: instances, duplicating, symbols, swapping symbols

instances, duplicating Symbols are described as a type of object that is created by a asset that then allow the user
symbols, swapping to add special effects to then create a motion.
symbols, editing,
grouping When a symbol has been created the user can then create instance of that symbol
throughout the product. A example would be when the user changes the name of the
document, Adobe Flash will update the instance of all the symbols. Changes made will only
effect the instance and not the actual symbol. The past made symbols can be counteracted
by clicking on the symbol you want and then clicking the options via edit > duplicate.

Editing:
A symbol can be edited and this can be done by the user double clicking
the symbol and from there a new window is opened to which it will be
the symbol graphic itself and the user can edit the symbol without the
editing effecting any other symbols.

Grouping:
Grouping and ungrouping can be used on symbols. To do so the symbols must be
highlighted and then selecting modify > group. This will then group all of the symbols.

Colour tools: eg colour Colour properties

properties, eyedropper, Colour properites allow the user to change and adjust any colour they wish. Information like
creating custom colours, the colour code can also be found here. The user can also change the
colour swatches, stroke type of the colour for example they can change the colour to a
and fill gradient, solid etc.

Eyedropper
The eyedropper tool is used to take a sample of a colour
the user likes and find the nearest match of the hade for
the user.

Custom colour
 The user can create custom colour swatches so that they can refer back to their swatch they
have recently created. This then makes it much easier for the user to find the shade they
past made instead of having to search through different swatches.

Stroke and fill

The stroke and fill option can be adjusted to any colour the user desires. The fill
tool will fill the desired object with a colour. The stroke can be changed to a pen,
brush, pencil or line.

Text tools: text, eg

editing, moving, rotating, Text: editing, reshaping, scrolling, moving
reshaping, scrolling, If the text is already created and it is pasted in, then it will require editing. This is done by
creating text blocks, double clicking the text to where multiple options like changing the font, size, colour etc will
converting text to shapes appear.

To move the text then the user must not be in editing mode and must selct the sub selection
tool and then click onto the text. From here the user can drag and change the positioning of
the text to anywhere on the stage.

To reshape the text the user can right click on the text and select the free transform option.
Then the user can rotate the text, resize etc.

To create a simple scrolling text box it must be converted into a symbol before any animated
effects can be applied. This is done by right-clicking on the text > convert to symbol. Once
the text has been converted into a symbol, we can go into motion presets > default presets
> text-scroll-3d. This will make the text animated scrolling.
Creating text blocks
To create a text block the text tool must be selected. Then anywhere on the stage the user
can click and create a text block. The mouse must be dragged outwards to create the users
desired size text box and then the userjut simply types the text into the text box. The text
 box can be made bigger or smaller by adjujusting the adjustments on the outside of the text

box.

Converting text to shapes

To change text into shapes the text box will need to be newly created. The text must be
selected and then on the menu bar, select modify > break apart. Once the text has then
been broken, the text will need to be selected and then fill on the edge of the text. The user
will then be able to modify each letter into a shape.

Manipulating objects: Vector shapes

manipulating vector To create vector shapes, we can either use the shape tool, pen tool, brush tool, etc. since
shapes; single layer most drawings that are drawn within Adobe Flash are automatically converted into Vector.
vector shape interaction; Any drawings that are done through Adobe Photoshop will be considered to be raster
transforming and graphics and this can be easily told when importing raster graphics into Adobe Flash due to
grouping vector shapes low quality. These shapes can be easily manipulated by right-clicking > free
transform/envelope/distort.

Single layer vector shape interaction

To make a vector shape on a single layer a new layer will need to be created within the
tieline and this layer will need to not have any symbols, audio or graphics. Using a new layer,
the user will need to crate a new shape using any of the shape tools. Then once the shape
has been created it will need to be converted into a symbol. By doing this a preset motion
will be added towards the vector shape.

Transforming and groping vector shapes

To transform shapes, the shape must be converted into a symbol meaning it should not be a
vector graphic alone. Once it is made into a symbol the user then right click on the shape
and select free transform and this will then allow the user to skew, resize, rotate etc.
 For grouping vectors go to modify, group and then the shapes will then group as one.
Animation: frame label; Frame Label/Frame Rate
frame rate; timeline To do this, the user would go to the specified timeline frame by clicking onto it and then
(playhead, layers, frames, going onto the properties panel, they type the chosen name for the label.
frame rate,
keyframes, onion The frame rate can also be known as FPS. FPS can be adjusted to how fast or how slow per
skinning, markers); frame each frame should run through per second. A lower frame rate is good for graphic
manipulation, eg animation. If its for a video a higher frame rate is required to ensure the movement is
copying, deleting, smoother which requires more frames being produced compared to a graphic animation.
reversal;
testing movies; frame by Timeline: Playhead/Layers/Frames/Frame Rate
frame animation; Within the timeline there are four types that needs to be considered when creating a
tweening (shape, multimedia product animation.
motion)
The playhead is a red line which moves from left to right within the timeline frame. The
speed of the playhead will depend on the FPS rate set. To move from one frame to another,
the user can click and drag the playhead left or right on the timeline.
The layers on the timeline is used to separate assets on top each other. If the user wants
one graphic on top of another, they can create two layers and have the graphics on separate
layer. This is also useful when it comes to making two types of animation required on the
same frame but on different layers.

The frames on the timeline is used to create individual frames which can be stretched to
frame 1 to frame XXX. The user can adjust how long each frame should last against their FPS
rate. The frames also indicate the user whether or not if that specific frame has a motion
set, e.g. a frame contains a graphic that has a fly-out-left motion effect. Users can adjust the
tween and make changes for the frame by either making the frame last longer or become
shorter.

The frame rate in the timeline indicates how many FPS is set at. User can click and drag on
the FPS number left or right to adjust the speed. The less FPS rate, the slower the animation
is played, however, the higher the FPS rate is set, the faster the animation would be. This is
indicated by the seconds next to the FPS bar which displays how long the animation would
last.

Keyframes: Onion Skinning/Markers

When it comes to animating a specific graphic such as making a cartoon walk. The onion
skinning option allows the user to enable moving their graphics in whichever position they
want to but it leaves a tracing outline of where the last movement has occurred. The onion
skinning option can be enabled to see where the individual frames are moving to.

The markers in the timeline indicates that for every 1 marker, represents 1 second. When
using the playhead to scroll through the timeline, the user can keep track which particular
frame no. they are currently on. The larger numbers that ends with a 0 or a 5 is a halfway
point to give the user an estimate on which no. of frame they are currently at.

Frame Manipulation: Copying/Deleting/Reversal

If a user decides to copy the exact frame they have produced within the timeline, the user
can highlight the selected frames, right-click and copy. This will copy the specific frame and
provided that the user has created a blank keyframe, they can paste the frame into the
blank keyframe. This will retain everything within the frame as a second copy in a new
frame.

The user can also delete frames off the timeline should they do not want the specific frame.
To do this, the user must highlight the entire frame within the timeline which would follow
the same step of copying. Once highlighted, the user must right-click > remove frames. This
will remove the selected frames from the timeline completely and will not leave a blank
keyframe.

Reversing keyframe animation is another optional effect which users must insert the
animation for the asset within the frame first, AKA, a tween. By highlighting the tweened
frame in the timeline and right-clicking, an option is given which allows the user to select
reverse keyframes. This can only be done to frames that have classic tween, motion tween
or shape tween which has an animation incorporated. Keyframes cannot be reversed on a
normal keyframe, e.g. only containing assets.

Testing Movies: Frame by Frame Animation

In order to test the animation that’s been produced to ensure that it is working correctly
without any faulty issues, the user can test the animation by going via control > test movie >
in Flash Professional. This will export the product whether it is finished or not as sample
.SWF file. This will automatically stream the exported document which will be viewed within
Flash. This gives the user a brief idea how their final completed finishing product would look
like without seeing the UI, e.g. ruler, guidelines in Flash.

Tweening: Shape/Motions
One of the most common animations that can be incorporated within the frames in the
timeline would be tweening. There are two types of tween to be chosen from:

Shape tweening allows the user to add an animation towards a drawn shape that was
created in Adobe Flash. Users can tween the shape to shift into another shape, change
colours, tween positions and many more. To tween a shape, the user needs to convert the
shape into a symbol and thus going on the frame that contains the shape, right-click the
frame > create shape tween. This type of tween only applies to vector shapes drawn in
Adobe Flash and not imported assets.

Another tween would be called motion. With motion tween, the user can apply a motion
effect within the frame. To do this, the user has to highlight/select the frame they want to
animate and picking the correct asset within the frame. Once selected, and making sure the
asset is a symbol, the user can right-click on the frame > create motion tween. This will turn
the grey frame into a blue frame. From here, the user can go to preset motion listing where
they can choose existing motions which can be added onto the asset. Adobe Flash will
automatically create the motion within the timeline without the user having to individually
place the frame by frame to making the symbol move.
Assets: importing, eg Importing: Raster Images/Vector Images/Sound Files/Video Files/Movie Clips
raster images, vector Adobe Flash have the capability of being able to import many different types of format. In
images, sound files, video order for this, they must be saved in a particular format for Adobe Flash to accept the asset
files, movie clips; that is going to be imported.
resizing; bitmap to vector
conversion; asset Raster image are saved as either .PNG, .JPG and .GIF, are commonly accepted. These images
libraries tend to be made out of pixel but when imported into Adobe Flash, you can visibly tell the
quality has been lowered.

Compared to vector images, these are composed of lines, polylines, polygons, circles, etc.
These types of images can be drawn through Adobe Flash since the program primarily
supports vector graphics. These can be created rather than importing using the shape and
line tools through Flash.

Adobe Flash can accept the following sound file formats:

ASND (Adobe SoundBooth), .WAV, AIFF or MP3. This is limited because although these file
formats are most favoured, older and newer sound files such as .M4A are not supported so
if we were to include audio, the sound file must end in the following format as stated before
it can be imported.

“Video files and movie clips can be supported within Adobe Flash. The following formats
that support are as follows: .MOV, .QT, .AVI, .FLV, F4VMPG, .M1V, .M2P, .M2T, .M2TS, .MTS,
.TOD, .MPE, .MPEG .DV, .DVI, .3GP, .3GPP, .3GP2, .3GPP2, .3P2, .MP4, .M4V and AVC. There
are more variety of video/movie clip formats which allows the user to import using the
following formats into Adobe Flash should they incorporate videos into their multimedia
product”.

Resizing
Within director you can resize the assets using the stage. This is done by selecting the asset
and pulling the tabs at the side of the asset to either outwards or inwards depending If you
want the asset to be smaller or larger.

Bitmap to vector conversion

In order to convert bitmap into a vector the user will need to import the bitmap asset into
director and then drag it onto the stage. The user then needs to select the asset and go to
modify > bitmap > trace bitmap.
 Asset libraries
In the library tab it holds all of the assets that have been imported into director. Here the
user can sub-folders to organise the assets which can be really helpful.

Advanced tools: scenes; Scenes

guide layers; masking, eg With scenes, the user can create new scenes within Adobe Flash be it scene 1, scene 2, etc.
mask layers, animated With scenes these are particularly useful when it comes to creating opening, middle and
masks; timeline effects, end. When a new scene is created, a blank timeline appears. This is very useful when it
eg blur, drop shadow, comes to creating very long Flash animation which could contain more than 18,000 frames.
expand, explode, This will save time for the user scrolling the playhead back and forth for the exact frame
transform, transition; number. To create scenes, the user can access by window > other panel > scenes. This will
nesting movie clips bring up a pop-up window which lets the user add scenes within their Adobe Flash file.

Guide Layers
Guide layers are particularly useful when it comes to aligning objects, however, when it
comes to exporting the final finishing product, the guide layers will not appear in the final
product. To create a guide layer, a new layer must be created and then by right-clicking >
guide, this will change the layer into a guide layer.

Masking: Mask Layers/Animated Masks

Mask layers are created via a hole through another visible layer. With the mask object, this
can be filled as a shape, graphic symbol, or a movie clip. To create a mask layer, the user will
need to create an object first and then they will need to insert another layer above it. These
two layers will be linked together automatically by right-clicking on the mask layer on the
timeline > selecting mask. The icon for the two layers will change to indicate it is a mask
layer. An example would be creating a vector, and then putting a raster graphic as a mask
layer, the image would appear inside within the shape.

To create an animated mask, we can control the shape which can reveal the graphic through
animation. This can be done by using the same steps for mask layers except we would apply
shape tween. When shape tween is applied, the user can adjust the frame however the
shape appears throughout each frame. Upon playing, the shape will slowly reveal the
graphic through the frame bit by bit still retaining as a shape which reveals and hide
content.

Timeline Effects: Blur/Drop Shadow/Expand/Explode/Transform/Transition

Special effects can be added within the timeline. In the original Adobe Flash CS3, there was
an option which allows users to insert timeline effects easily, however, in CS5, timeline
effect options were removed in favoured for preset motions. To add such effects like blur,
drop shadow, expand, explode, etc., the asset must be converted into a symbol. Once the
asset is converted and that the frame within the timeline is highlighted, the user can go into
the preset motion tab where they can select effects such as fly-in-bur, bounce-smooth, etc.

In Adobe Flash CS3, however, to add specific effects like blur, drop shadow, expand, etc. this
was done by accessing insert > timeline effects > effects > blur/drop
shadow/expand/explode.

With transform and transition, this is easily done by ensuring that the selected frame and
chosen asset is highlighted, then create motion tween by right-clicking on the desired frame.
Here, the user can manipulate the asset frame by frame which is automatically dotted on
the motion tween frame. Upon playback, Adobe Flash automatically builds the individual
frame for the user effortlessly, e.g. a user wants to make a shape rotate as a animation, the
user has to slowly rotate the object for each frame such as 3 seconds apart in the motion
tween frame. A Transform tab is also available which gives numerical to let the user know

Nesting Movie Clips

A nested animation is basically a method where you can nest an animation inside another
animation. This is helpful when it requires several types of animation needed to be added
onto one type of graphic. To do this the user would have to double-click on an asset symbol.
Once in editing mode, a motion tween will be created for whichever part of the asset is
within the editing mode. Here, upon creating movement within the symbol, another motion
tween can be added as well. Upon exiting the editing mode, the movie clip that’s nested
within the asset will play on loop until specified to stop.
Interactivity: scripting; Scripting
behaviours; actions; Within the script it is very handy to name each of the scenes you add, as then when it cmes
triggers; buttons; to making any changes they can easily identified. To add things to the stage they need to be
rollovers; playback added to the script first, things like images, music etc.
control;
Preloaders Behaviours
Behaviours can provide things like frame navigation, controlling movie clips etc. To access
the behaviours, the user needs to enable the tab via window > behaviour.

Actions
Actions can be inserted into the multimedia product within Adobe Flash. This technique
enables the user to create and edit ActionScript code for a frame or object. Depending what
is selected, the panel will change in accordance, e.g. Button Actions, Movie Clip Actions, etc.
The user must display the panel via Window > Actions in order to use this option.

Triggers
A ‘trigger’ function enables any user to ‘trigger’ a specific animation. To do this, the user will
need to require knowledge with ActionScript to create a ‘trigger’ interactivity. Instead of
autoplaying an animation, the user would have to perform some sort of action. This is
normally combined with animation and ActionScript.

Buttons
Buttons can be added into director taking the user to a different scene. The colour can be
changed and they can be created to any size the user wishes.

Rollovers
Rollover effects can be added to images for when the user rolls their mouse over a image
and another image will appear. These can be added when the user is in the animations file
and they simply select the rollover option and select the image they want to use as a
rollover.
Playback Controls
The user can access scripts via window > component > video where a folder which contains
all the ActionScript to control a video.

Usually when importing a video onto the stage, there is an automatic option which enables
the user to include playback controls for their video without adding it manually.

Preloaders
Preloaders are basically an interact method of loading large .SWF files which controls the
content load. This is a creative way to create a loading screen by displaying messages, image
or animation to indicate the .SWF is loading rather than a blank screen. To do this, existing
ActionScript can be found in the component and code snippet tab which is dragged on to
the specific asset within the selected stage/frame.