Unit 65 – Digital Web Animation Assignment 3 – Checklist
Explain how you used the following:
Range
Workspace: stage, timeline, menu bar,
toolbar, library, colour palettes,
properties, preferences, help.
How Used Screenshot evidence
Stage
I used the stage to watch my banner as it is being created. Once it is set
to the correct size it shows me the room I have to work with and puts
turns the timeline into the visual design.
Timeline
The timeline helped me know the placements of where to put the assets
and how to time them to come up where I wanted them to. The timeline
is set to 8 frames per second so once I knew this I knew how long to add
the assets in for to make sure my banner was the correct length.
Menu Bar
This is where the different options are such as file and edit. I used the
menu bar whenever I needed to import assets or save my work. I also
used it to open the windows if for example I opened the software and
the stage window wasn’t there. I used the edit tab on the menu bar to
undo a step if I did something wrong rather than deleting it, I could just
undo the score.
Toolbar
The tool bar is where the various tools that are available are shown to
the user. On director, these tools vary from the shape tools to the text
tool, also including the button tool. For this particular project, the only
time I used the toolbar was to change the settings from ‘default’ to
‘classic’.
Help
The help tab is where to go if you have a problem with the software,
there are different options that either open up a new window in the
software with some help or that open up a tab on your browser to help.
With this project I did not use this tab.
Basic tools: drawing, eg pencil, line, pen,
brush, shapes; free transform, eg rotate,
skew, distort, scale, envelope, ruler and
guidelines; editing, eg lasso, eraser,
undo, copy, paste, duplicate, insert,
delete, aligning, grouping, ungrouping
Drawing
The different drawing tools available to use include, the pencil, line, pen,
brush and shapes. These can be used throughout the project and can
have behaviours given to them just like the other assets can. In this
project I did not use any of these as I had already made my assets in
photoshop before starting the actual banner.
Transform
The transformation options are found in the modification tab and give
the options to rotate the asset in various different ways. The other
options for transforming are skew, which would stretch the asset.
Distort, which includes changing the original from of the asset to the
point of it being unrecognisable. The envelope transformation involves
anchor points and the distortion of the original shape.
Ruler And Guidelines
The ruler and guidelines are there to make sure that the placement of
any animations and assets are correct. The ruler is used to create either
diagonal or horizontal lines on the stage which then in turn create line
positions. The guidelines are there to split up the stage so that it is easier
to see where the assets should be placed in order to make them centred
and in proportion to the stage.
Editing
The editing tools are used when a mistake has been made in the
software. They are there to make the design process much smoother as
they mean that mistakes can be resolved much more quickly. The lasso
tool is used to select a specific part of the screen, whether it be a whole
asset or just part of one. It can then be edited further from here. the
eraser tool is there to erase any drawings made with the pencil or pen
tools. This tool only works with the drawings and won’t erase anything
that hasn’t been drawn. The undo tool is found in the edit tab on the
menu bar and works to undo the last thing you did, this can be helpful if
you move something into the wrong place by accident or delete the
wrong asset. when working with the sprites in director if you have
multiple pages and you want some of the same assets in the same place
and the same size on each page then copying and pasting the sprite does
this. It even copy’s the behaviour of the sprite too. Duplicating allows
you to cope the exact asset even after editing it, so you now have two

Colour tools: eg colour properties,
eyedropper, creating custom colours,
colour swatches, stroke and fill
copies of the exact same thing. Delete can be done by using the delete
button on the keyboard and this then deleted the selected asset.
grouping and ungrouping is used to group together a selection of
separate assets so they can be moved as one. Whether this is done to
make it easier moving them all together and then once they have been
moved they will be ungrouped or whether they have been grouped
together to make a new asset.
Colour Palettes
The colour palettes in director are fairly limited however there are many
different options to use for text colours and the background colours.
They can be used in different variations too so the opacity of a colour
can be changed which gives more options to the colours that can be
used.
Eyedropper
this tool is used to select a colour from something and recreate it so it
can be used again for something else. This can be useful if you have used
a custom mixed colour and didn’t save it, or if you need to match
something you’re making to a previously made asset made by someone
else.
Custom Colours
As well as being able to use the sample colours there are also options to
be able to create your own colours and save them too. They can be
made either by mixing a selection of multiple colours or just by one but
by changing how light or dark it is.
Colour Swatches
these are the different options of the colours that are already mixed and
available to use. Instead of just being one colour they usually offer
different variations of the same colour to give different options of tones.
Although there are different options, the number of colours are limited
and basic which is why there is the option to make your own colours too.
Text tools: text, eg editing, moving,
rotating, reshaping, scrolling, creating
text blocks,
converting text to shapes
Manipulating objects: manipulating
vector shapes; single layer vector shape
interaction;
transforming and grouping vector shapes
Editing/Moving/Reshaping/Scrolling
To edit the text in director then all you need to do is go into the modify
on the menu tab. Here is where you can change the font, size and colour
as well as the actual words that have been typed. There are also options
on director to change how the text is viewed for example, a standard
text box or a scrolling text box, it depends which is preferred by the user.
Text can be given a behaviour too such as ‘slide in’ which changes how
the text appears on the screen. By having the text start off not on the
stage and then creating the path for it to follow onto the stage you can
create the scrolling effect so the text will scroll across the screen.
Vector Shapes
Shape tools, pen tools and brush tools can all be used to create a vector
shape. In photoshop they first start out as a raster graphic and this is
known as it is obvious when it is imported as it is a lower quality. These
graphics can be manipulated by going into free transform and then
choosing how you wish to manipulate the shape for example
manipulate/distort/.
Single Layer Vector Shape Interaction:
To manipulate a vector shape that is on a single layer then first a new
layer must be created without any other graphics, symbols or audio. The
new layer is then where you use the tool that you want to use to create
a shape, the vector shape must then be converted into a symbol which
will allow the user to add a preset motion.
Transforming And Grouping Vector Shapes:
Vector shapes must first be converted to a symbol which means the new
copy of the can be rotated, skewed and resized etc.
To group vectors all of them first need to be selected and then you go
into modify and then ‘group’ which then means that all the shapes that
have been grouped can be moved as one. They can also be ungrouped
which will make them go back to the separate assets that they were to
begin with.
Animation: frame label; frame rate;
timeline (playhead, layers, frames, frame
rate,
keyframes, onion skinning, markers);
frame manipulation, eg copying,
deleting, reversal;
testing movies; frame by frame
animation; tweening (shape, motion)
Frame Label/Frame Rate
Frame labels are used to label the timeline so the user knows which
frame is which, to change the label it is done in the properties panel. The
frame rate is also known as the FPS can be adjusted per frame. A lower
frame rate would be used for a graphic animation but if it’s a video then
a higher frame rate should be used to make the movement smoother.
Timeline
The timeline is used to show the different sprites and their animations.
The playhead shows where in the animation it is currently at, it moves
with the animation. This allows the user to select a spot on the timeline
to play from by moving the playhead here and instead of it playing from
the beginning then it will play from the point of selection. The layers are
used to separate the assets on the timeline, they can be merged
together or separated. The frames are used to split up the timeline, on
director it works at 8 frames per second, this needs to be kept in mind
when setting up behaviours and other animations such as videos, if you
import a video then you still need to drag it across to the number of
frames that is correct for the number of seconds the video is.
Keyframes
The option to onion skin a graphic allows the user to move it in any way
that they want however it leaves a tracing outline behind. The markers
on the timeline are there to show the seconds as there are always more
frames than there are seconds. The playhead and markers make this
easier to understand for the user as they can keep track of where they
are up to or how long something needs to be.
Frame manipulation
If the user wants the exact same frame more than once then they can
copy and paste it to duplicate the frame. Frames can also be deleted if
they do not need it anymore. 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.
Assets: importing, eg raster images,
vector images, sound files, video files,
movie clips;
resizing; bitmap to vector conversion;
asset libraries
Advanced tools: scenes; guide layers;
masking, eg mask layers, animated
masks; timeline effects, eg blur, drop
shadow, expand, explode, transform,
transition; nesting movie clips
Assets
Before creating anything in director then first you must import all the
assets that you will need, you can do this by going onto file, import and
then selecting the ones you want to import. Although easier to import
them all at the beginning before you start creating anything, you can
import them as you go along. Raster images, which are saved as .PNG,
.JPG and .GIF, are commonly accepted. These images tend to be
composed of pixels, however, when imported into Adobe Flash, you can
visibly tell the quality has been lowered. With sound files, for director
they have to be saved as an MP3 file in order to be recognised. For as
video then it must have been saves a quicktime file.
Resizing
When importing assets into Adobe Flash, the user can resize certain
assets when moved onto the stage from the library. Some particular
assets which can be resized within the stage would be vector and raster
graphics. When resizing, they do not become lossy meaning they still
retain the quality originally produced at the original size, however, if it’s
making the image bigger from a smaller scale, it will become lossy.
Asset Libraries
One of the main tab in Adobe Flash would be the asset library. In this
tab, it holds all the assets imported into Flash. Users here can create sub-
folders to organise their assets in order for them to easily find the
specific asset they require and as well as renaming the asset files without
affecting the original source.
Scenes
With scenes, the user can create new scenes within Adobe Flash be it
scene 1, scene 2, etc. With scenes these are particularly useful when it
comes to creating opening, middle and end. When a new scene is
created, a blank timeline appears. This is very useful when it comes to
creating very long Flash animation which could contain more than
18,000 frames. This will save time for the user scrolling the playhead
back and forth for the exact frame number. To create scenes, the user
can access by window > other panel > scenes. This will bring up a pop-up
window which lets the user add scenes within their Adobe Flash file.
 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.
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.

Interactivity: scripting; behaviours; Scripting

actions; triggers; buttons; rollovers; For more of a complex animation, users can incorporate Scripting into
playback control; Adobe Flash animation. If the project is saved as ActionScript 3, we
preloaders would be able to use advanced Scripting method to which we can
control the assets within the stage. With this method, it’s technically
more advanced which requires the user to understand ActionScript,
however, there are existing ActionScript ready available for usage in
Adobe Flash. These can be accessed via Code Snippet which will let the
user drag the specified ActionScript to the asset. This will paste the code
which will perform the action as needed.
Behaviours
Behaviours are a different type of scripts that are already pre-defined for
users to automatically attach to objects. Unlike Scripting, behaviours
provide functionality, e.g. frame navigation, loading external SWF,
controlling movie clips, movie clip dragging, etc. To access the
behaviours, the user needs to enable the tab via window > behaviour.
The downside is that this option does not support in ActionScript 3 but
rather ActionScript 1 and 2.
Buttons
Users can apply buttons in Adobe Flash which can trigger specific
functions (refer to trigger). This adds advanced interactivity towards the
multimedia product rather than let the audience watch the animation
effect. There are different types of buttons users can include such as,
roll-over and click, hover and click, etc. In order to include buttons, it
requires the use of ActionScript to cause mouse events such as
‘mouseover’ and ‘onclick’ in order to trigger the action and run the
function. This function can be accessed via ActionScript tab and Code
Snippet tab. Existing buttons can be accessed via window > common
libraries > buttons.
Playback Controls
If the user decides to include playback controls which lets the viewer
control the video playback within Adobe Flash, e.g. stop, rewind, fast
forward, backwards, pause, etc. 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 separately.
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.