Victoria Holt

Unit 65 Digital Web Animation Assignment 3 Checklist

The purple highlighted words are the ones I used in each range. The ones highlighted in green are from the ranges I didnt use however I have decided to
write about them anyway. My screenshots are taken on different computers and are taken from different programs such as Flash, Director and Photoshop.
Range
Workspace: stage, timeline, menu bar,
toolbar, library, colour palettes, property
inspector, preferences, help.

How Used
I used the stage in order to set the correct size of my web banner. I
also used the stage in order to drag and drop stuff on and off the
stage so that different things appear at different times. I used this
area to display my assets easily and create the layout correctly to
suit the purpose.
The timeline is used to show the layout of all my assets and
arrange/change my assets to suit the client needs.
On the toolbar at the top of the screen on Director I mostly used the
script window, undo and the play/pause options. In the script
window I have used it to solve any errors that may occur. For
instance, when I added an animation onto one of the text images it
came up with a scripting error as it got confused between the two
animations being set on one asset. On the left hand side toolbar, I
used the shape tool but I mostly used the mouse tool to select my
objects/assets to move them around.
I used the library window in order to see the list of all the
animations I could use and when I found the one I wanted I dragged
and dropped it onto the asset and set up the settings given. In the
library toolbar I could also set up settings for any play/pause buttons
on my product, however they werent required this time round.
In the property inspector I could set the size of my stage size and
when clicked on a certain asset such as a sound clip this is where you
can set the music to loop itself.

Screenshot evidence

Victoria Holt

Basic tools: drawing, e.g. pencil, line, pen,

brush, shapes; free transform, e.g. rotate,
skew, distort, scale, envelope, ruler and
guidelines; editing, e.g. lasso, eraser, undo,
copy, paste, duplicate, insert, delete,
aligning, grouping, ungrouping

I used the colour palettes on Director to change the colour of the

grid lines and any text made in Director, however I made all my text
using Photoshop because it was easier.
On Director you can use a pencil to draw on the stage freely creating
any pattern you like, you can either use a thick or a thin pencil
depending on what you need it for. You can use the line tool to
create straight lines either horizontally, vertically or diagonally. The
pen tool allows you to draw on the images but with a slightly thicker
line than the pencil. The brush is very similar to the pen however
you can change the different strokes and textures. In order to get
these tools up you double click on an image asset shown on the
stage. I didnt use most of these tools as it wasnt necessary. The
only two I did use was shapes and paint brush but this was on
Photoshop and not Director. I used the paint brush to cover up any
gaps on the pixels image on my logo. I used the shapes on the
background.
When changing the scale of an image or object I simply selected the
asset and either dragged the corner or edge to make it the size to fit
well on my web banner. I mostly used this for my logo as when I
dragged the image onto the stage from the cast list it was too big. I
also used it to make up my background image so that all the
rectangular shapes fitted together when both zoomed in and out.
Its easier to line things up when I was zoomed in to 100% however I
wanted to see what the background looked like altogether so I
mostly kept the zoom of the stage on 50%.
I used the guidelines to make sure that all my images were the same
size and to make sure all the images come on stage in the same
place on each of the sections that make up my web banner. I
wanted this to be very precise
I used the copy and paste tool to make another copy of my assets so
that I didnt have to add all the animations to the same image twice.
As I had two of the same image one after the other so that my text

Victoria Holt
stayed on long enough to read. I used the duplicate tool to make an
extra copy of a certain animation to add to each section of my web
banner.
Aligning is used to set up the positions and sizes of my assets to
make sure that the spacing between each asset was equal and didnt
look uneven. To find the aligning tool you can go to modify > align.
I used the grouping and ungrouping tool in a different way by
selecting all the assets I wanted to move/change and just dragging
my mouse across them to highlight them on the timeline. I used it
when I wanted to move more than one asset at a time on the stage,
as this saves time. If I didnt want them to be grouped anymore I
could ungroup by then going to modify > ungroup.
I used the undo tool to go backwards one step whenever I made a
mistake. The only disadvantage of this was that I could only undo
once so I made sure I save my work after every new thing I did which
was right.
I used the delete tool in a similar way to the undo tool however I
could delete things whenever I wanted and didnt have to worry
about whether it was saved or not first. I mostly deleted images that
werent the right size or deleted assets which had an animation on
which was no longer needed.

Objects: symbols, e.g. instances, duplicating

symbols, swapping symbols, editing,
grouping

I used the lasso and eraser tool in Photoshop when getting rid of the
background colours used in the images making my logo design. To
use these, I went to the left hand toolbar and selected the lasso
which is used by highlighting the parts you want to get rid of. The
eraser tool was used when I zoomed into the image to get rid of any
excess white I could see.
I havent used any of these tools whilst creating my product
however I will explain what symbols are in Director.

Victoria Holt
In Director symbols are another value that has a sign before the text
for scripting. For example, the first statement will run faster than
the second one as the coding is better. The only thing you cant do
with symbols is have them contain spaces or any kind of
punctuation.
userLevel = #novice
userLevel = "novice"
Symbols are made from an asset as this is what allows you to add
special movement effects. If something in the Director file is
changed the symbol doesnt change.
Duplicating symbols is when you make an extra copy of the symbol,
normally done if the creator doesnt want to make a symbol from
scratch again. It is very easy to do this in Director as you simply right
click on the asset in the library or on stage and go to the option edit
> duplicate.
If you want to swap symbols around this is also very easy, all you do
is select the symbols you want to swap, then go to properties panel
to click swap. This will simply replace the symbols.

Colour tools: e.g. colour properties,

eyedropper, creating custom colours, colour
swatches, stroke and fill

Editing is basically when you double click on the symbol. This opens
a window and from here you will only be able to view a symbol
graphic only file. From this window you can edit whatever you like
without effecting any other graphics there may be on the Director
file.
I have only used a couple of these in my web banner but I will
explain what they are. The reason I didnt use them is because I just
used the generic colours given by Director.
Colour properties are basically the options given when wanting to
change the colour of text or shape. Colour codes such as #ffffff can
be used within the scripting to get a definite colour. These codes can
be researched to find a specific colour that the user wants. The
colours can be gradient or solid.

Victoria Holt
The eyedropper tool is where an existing colour on an asset can be
selected and add to a different asset. This is a good tool as it means
you can get exactly the same shade of the colour so that the product
can stay consistent. This safes time as it means the user wont have
to use colour properties to rematch the colour again. I used this
because when there were any little gaps in my letters of my logo I
could use this then cover it up using the paint brush tool.
Custom colour is where you can create your own without using the
plain sample colours given. This means you can go back to their
swatch which has been recently made. This means when you open
the colour palette the new colour will be there ready to use. Colour
swatches are colours that are pre-set without the use of picking
colours using the colour picker tool. If I wanted I could set my own
colours or easily pick out basic tones.

Text tools: text, e.g. editing, moving,

rotating, reshaping, scrolling, creating text
blocks, converting text to shapes

Stroke and fill is where you can adjust the colours to your own
needs. This means they can change the colour from black to red by
clicking on the square below the icon and swapping the colours. This
also applies to the paint bucket tool. I used the fill tool to colour in
the lettering of my logo text.
Text is just the way of giving people information in standard format
without any visuals.
I didnt use the scrolling text boxes because my web banner didnt
include enough information to fill one. I would use a scrolling text
box if I wanted to add lots of venues and dates as it would make it
easier and quicker for the user to access.
Once you have created the text box using the tool on the left hand
side panel and clicked on the stage in the correct place you can start
typing. After this you can edit text in many ways by highlighting the
information then going to modify > font. This will then allow you to
choose many different options such as the font colour, size and
style. I used this at first in my web banner but then I decided that I

Victoria Holt
could use more fonts and edit my text more in Photoshop first. In
Photoshop I mostly changed the boldness and colour to make it
stand out more on my web banners chosen background. In
Photoshop I made sure I saved the text image as a PNG so that it had
a transparent background when importing into Director.
When moving text, I just went onto the select tool at the top of the
toolbar and moved it to reposition it exactly where I wanted it on
stage.

Manipulating objects: manipulating vector

shapes; single layer vector shape interaction;
transforming and grouping vector shapes

I firstly rotated my text so that it came onto the stage at a different

angle to give my web banner a different effect/appearance. I did this
by selecting the text box then going to modify > transform and
rotate left/right. However, I had to get rid of this because when I
came to put the animations on the text to come onto the stage it
didnt look right.
I didnt use any of these tools as I didnt include any objects/simple
shapes in my web banner.
Vector shapes can be easily made in Director via the shape, pen or
brush tool. Most of my drawings which were done in Photoshop
such as my text are more than likely to be raster images, this is
shown through there low graphic quality. In order to manipulate
these shapes, you can right click > free transform > envelope then
distort.

Animation: frame label; frame rate; timeline

(playhead, layers, frames, frame rate,
key frames, onion skinning, markers); frame
manipulation, e.g. copying, deleting,
reversal;

In order to transform the objects, I would firstly have to make sure

that it is converted into a symbol but as a raster image. Once it is a
symbol you go onto free transform after right clicking and here you
can resize, skew or rotate the shape without difficulty.
The animations I used on my web banner were slide in and out,
these were mostly used on my text images and logo image. I added
the animation by clicking on the images and then dragging the small
red dot in to middle of the stage where I wanted the image to be
positioned. This animation worked by making the asset follow a

Victoria Holt
testing movies; frame by frame animation;
tweening (shape, motion)

pathway. To make the image stay there before dissolving I basically

made the sprite length longer on the timeline. I duplicated a copy of
this asset and got rid of the animation and instead added a fade out
effect so that my text would fade ready for the next lot of text
coming on the web banner. To create this animation, I went to the
library in the property inspector and selected animation >
automatic. I also used an avoid mouse animation so that the image
of a musical note moves around the banner.
In the cast list there are some frame labels which are very handy
because they let the user known what the asset is for example it
could be a text box so the label would say text. To do this you click
on the timeline > properties panel and type in the name for the
label.
The frame rate was used to make sure that my web banner lasted
for a period of 20-30 seconds long. In order to work out the amount
of frames I needed to use I did a calculation of 25 x 30 as I wanted
my web banner to last for 25 seconds. If I wanted a smother web
banner movement I would use a higher frame rate but if I was doing
a simple animation, I would use a lower frame rate. I could also
change the frames by going to modify > frame, here you can change
the tempo, transition and script. However, I didnt do any of this
until the end of producing my web banner when it came to checking
that my web banner lasted 20-30 seconds.
I used to timeline box to rearrange my assets and the order that
they were played. In the timeline I could also alter the amount of
time that each asset lasted for.
In the timeline the playhead is used to show where abouts in the
animation it is and the speed of the playhead is determined by the
frame rate set by the user. I used the playhead to move from one
frame to another by clicking and dragging from left to right and right
to left. I used the layers on the timeline to position assets on top of

Victoria Holt
each other and add animations to two assets which are being shown
at the same time.

Assets: importing, e.g. raster images, vector

images, sound files, video files, movie clips;
resizing; bitmap to vector conversion; asset
libraries

I used tweening in my animation so that my text images and logo

could follow a pathway, this makes these image slide onto the stage
from the side. This adds movement to my web banner. To do this I
will select the assets on stage and drag the red dot to the correct
position.
When it comes to importing my assets I had to firstly make sure they
were in a suitable format so that they could be easily played in
Director. To import my assets, I went to file > import > media. I then
selected the files from my work area to add to my web banner
project.
When importing my logo image I made it a PNG which is a raster
image, it was imported successfully but some of the quality was lost.
I didnt upload any vector images as these are just simply made up
of lines and shapes which can be easily made in Director anyway. I
also imported a sound clip which will run throughout the whole
product and loop when it gets to the end. I had to make sure that
the file format of the sound clip was MP3 or WAV as Director
doesnt currently support new file formats like M4A. when the files
have been imported they will be found in the cast list window. They
can be shown by their images or as a list.
When it comes to resizing my assets I have to make sure there an
appropriate size to fit on the stage, for example on my frames I want
the logo to be seen throughout the animation so I will make it
smaller to fit in the corner. When the images are resized they will
still be the same quality as they dont become lossy. This is only the
case if the asset (image) goes from big too small.
The asset library on Director is known to be called the cast list. This
is basically a place where all the imported/created assets can be

Victoria Holt

Advanced tools: scenes; guide layers;

masking, e.g. mask layers, animated masks;
timeline effects, e.g. blur, drop shadow,
expand, explode, transform, transition;
nesting movie clips

found in one place. This makes it easier to drag and drop the assets
onto the stage.
Guide layers are more known to be called guides and grids in
Director. I used they to make sure all my assets are lined up and the
right size. These guide layers wont appear when I export my final
web banner.
I didnt use any masking in my product however I will explain what it
is. Masking is where another visible layer is created through a hole
in an object. It can be filled with a shape or graphic. In order to use
this an object will need to be created first and then another layer
above it will need to be shown. To link the two masks together you
simply right click on the mask layer shown on the timeline and then
select mask. Effects can be added once the asset is converted and
the frame in the timeline is selected.

Interactivity: scripting; behaviours; actions;

triggers; buttons; rollovers; playback control;
preloaders

I didnt use any timeline effects however in order to add them you
need to make sure the asset is converted into a symbol. To add
these timeline affects you go onto insert > timeline effects >
blur/drop shadow/expand/explode.
At first while creating my web banner I used the scripting in order to
make my web banner stop in certain places such as making the
animations stop so that a user can interact in order for it to carry on
with the next animation. I then found that this wasnt so good in a
web banner so I took the scripting out again.
I have used behaviours in Director to add effects and provide
interactivity to my web banner in order to make people more likely
to use it. To add these behaviours, I simply went the library and
dropped a behaviour onto the sprite asset. In order to make the
behaviour work the user just has to give a simple mouse click in
order to make the animation jump to another frame or sprite. I only
used a couple of these behaviours on my logo and sound clip. I also
used a behaviour of fading out on the second lot of each asset.

Victoria Holt
I didnt use any of the ones highlighted in green in this range but I
will explain what they are. The reason I didnt use these is because
my web banner doesnt need to be very interactive with the users.
Triggers are part of the scripting which lets the program know that
you want something to happen so that an action can take place.
Actions is where the user can make and edit scripting code for a
frame or object. There are different options for actions such as you
can have movie clip actions or button actions but it depends what is
being selected.
Buttons are related to triggers in that they allow the user to perform
a certain function. They are interactive because they take you to
another internet page or part of the product. They can either be
obvious buttons or hidden so its not as easy to see them. They can
be hover and click or roll-over and click. In order to trigger the action
and run the function ActionScript must be used.
Rollover is where when you hover the mouse over an object it can
change colour for example on text titles is where it is most
commonly found. It can also be used on images too. These can be
applied by ActionScript.
Playback control is when there is a video in the product and controls
are given to help the user playback any video content. Some of
these controls would include play, pause and rewind.