Unit 65 Digital Web Animation Assignment 3 Checklist

Explain how you used the following:

Range
Workspa
ce: stage,
timeline,
menu bar,
toolbar,
library,
colour
palettes,
properties,
preference
s, help.

How Used

The main work space (computer screen) is

always optimised as I have all the tabs I need
on the screen all the time, currently I have
chrome, personal workspace, ILP, diary,
sources, banner and checklist open on the
screen.
The timeline on flash is quite simple as I knew
about flash and the animations I knew how to
create easily so I made the dope sheets
around that information, I also made simplistic
dope sheets so I didnt waste time trying to
make the banner look crowded and messy.
I also imported all of the assets used in the
banner instead of pasting them in so they are
all stored in the library of flash screen shot
to the right.

Screenshot evidence

(Screen shot of flash library)

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,
ungroupin
g

I am using flash to create this banner, so far I

have pasted the animations in, created key
frames, deleted key frames and created
motion tweens which are used in between key
frames. (I havent used many tools because I
hav3e only just added animations) There
might not be many more tools as I designed a
simple banner so I didnt have to worry about
it being difficult to create.
In this project I did duplicate the gif and paste
it on the other side, this is because in the
dope sheets there were two gifs and I had
planned to use the same gif twice. The gif is
the only thing in this assessment that I
duplicated as on the banner there is only one
of everything else.
Instead of pasting the assets into flash I
imported them so I knew they would all work
with the software.

Objects:
symbols,
eg
instances,
duplicatin
g symbols,
swapping
symbols,
editing,
grouping
Colour
tools: eg
colour
properties,
eyedroppe
r, creating
custom
colours,
colour
swatches,
stroke and
fill

So far I havent had to edit anything apart

from a music video as it was mp4 and I
needed it to be mp3, I did this in assessment
2 as I wanted the music and video for the
banner ready before hand, I cannot screen
shot editing it as it is already done, however I
have screen shot the folder and the files
orange cone is the edited mp3 file, I still have
to edit them down to size.
To get the colour I want for the background I
will go to a colour editing website:
http://paletton.com/#uid=1000u0klMmTbPy4h
hrxq7iEvpda
Because the animations will have white
backgrounds I might not try to add a
background colour as this will show the white
backgrounds up and would show if the
animations move around the stage.
When I created the logo I used the brush
opacity tool, set it to 75%, then used another
tool to copy the colour of the letter and
painted a slightly fainted line of that colour
over the letter, this was so I could include
more colour to the logo and still tell the
difference text and the lines above it.

Text
tools:
text, eg
editing,
moving,
rotating,
reshaping,
scrolling,
creating
text
blocks,
converting
text to
shapes

I have used the Photo shop text tool when

creating the logo, I will also use ether Adobe
flash professional cc text tool or words text
tool to add in the information on the banner. I
havent got this far yet but I have uploaded
the logo to the banner image to the right. I
got the image by exporting the logo from
Photoshop to a PNG document.
To create the banner, I had to move assets
around, on to and off of the stage, this
required a lot of movement as I imported the
asset, moved it to the outside of the stage (for
example the logo is supposed to rise up from
the bottom of the stage following the dope
sheets so I pasted logo at the bottom, created
a motion tween, moved the logo to the centre
stage, then got another motion tween and
moved the logo to the outer stage again at
the top.
Most of the assets I got were the right size so I
didnt have to resize most of them, the only
ones had to resize was the video which
resized easily in flash and the text which I
decided t5he biggest font possible so it was
clear and easy to read instead of cramming on
lots of small unreadable text as the
information can only be displayed for a few
seconds as the banner has a time limit.
When creating the text, I went for the biggest
font possible, I also chose a font that was

clear and easy to read. In the logo I went of

the colour scheme, made sure all the colours I
used was correct.
Manipula The only thing I did with layers was name, lock (Below are all the layers on the banner all names and locked)
ting
and enable /disable visibility, this is with both
objects:
the logo and the banner. For the logo each
manipulati section is a different layer as the colouring
ng vector
above is a separate layer to the pixels text
shapes;
and the The text is also a different layer,
single
when making it I locked each of these layers
layer
after finishing so I wouldnt accidentally click it
vector
and ruin the layer, by locking all the layers as I
shape
interaction go I kept the work I already had safe. I already
;
exported the logo so I cannot show any screen
transformi shots of the layers, I can show screen shots of
ng and
the banner though (In the box to the right) I
grouping
did the same thing with the banner as I did
vector
with the logo as each element/asset on the
shapes
banner has a separate layer with a timeline
shown to the right:
Each of these layers have a single asset on
them and the timeline shows what asset will
appear when, for ow long and when it will
disappear/leave the screen. As well as locking
the layers I used the visibility enable/disable
button shown on the right (in the red box) to
see more of the page by taking assets away
then reading them by enabling visibility to
certain layers example to the right: the
crosses show which layers are not visible, by

Animatio
n: frame
label;
frame
rate;
timeline
(play
head,
layers,
frames,
frame
rate,
Key
frames,
onion
skinning,
markers);
frame
manipulati
on, eg
copying,
deleting,
reversal;
testing
movies;
frame by
frame
animation;
tweening
(shape,
motion)

clicking them again they will become visible.

The frames on the banner/the layers on the
banner are all labelled, I did this people can
clearly see what each layer includes screen
shot to the right:

(layers and play head screen shot to the left)

(FPS screen shot)

I didnt set the frame rate but the display at

the bottom of flash indicated that it plays at
24 fps/frames per second as the screen shot
shows to the right the display shows the frame
number and the time, by putting the curser as
1 second could tell the fps rate screen shot to
the right of the screen sot with layer names:
The timeline on flash is easy to use and very
simple, I only used a couple of different things
on the timeline, adding key frames and adding
motion tweens between two key frames, by
doing this I could control where things came
from, where they entered from, how long they
stay on stage and where/when they exit I did
this by following the dope sheets I made
beforehand.
The play heads/labels are the same as they
both mean the name of each of the layers, I
would screen shot the separate layers of the
logo (screen shot is the first image that is the
same screen shot as the labels screen shot
no need to waste space pasting it again).

(Layer screen shot)

(In
red
box

key frames and blue part is motion tween)

All the layers on the banner are separate and

all include a single asset each, this is because
once I finished with an asset I sav3ed the
document and locked the layer before starting
with another asset this is so I had all the work
safe and so I couldnt mess up the work oi
already did (screen shot the right)
Before adding any assets to the layer I created
all of the key frames, this is by deciding it
would take half a second to a second to
appear and around a second to disappear, add
the start and end key frame, add two more
key frames a second in from those, add
motion tweens to the outer sides, insert the
asset at the bottom of the screen/side of the
screen in the first motion tween bracket it
would float into the page then at the last
motion tween it would float out. (Screen shot
to the right)
I didnt use any normal frames as I know key
frames and I only had to use them, in the
screen shot for the text above it clearly shows
just key frames used, I did this deliberately as
I know how to use flash so I created a banner
that would be very easy to create in flash so I
wouldnt waste too much time trying to figure
out how to work the software.

(Screen shot for onion skinning)

Onion skinning refers to the different layers in

the banner, I used a layer for each asset, this
was to protect the work I had already created
so I could protect the work I already did, this is
by locking layers once I had finished with
them this is so I wouldnt accidentally click on
the assets in the layer and mess them up
when adding other assets to the banner.
Screen shot of layers above next to top of
paragraph.
I dont know what marker frames are
because I used a different software I might not
have this feature, I discussed the software
change with the client who allowed it as I
prefer flash.
The only thing I manipulated in the
assignment is the motion tweens as I had to
make them so the assets would float in and
out of the stage the same way as the dope
sheets specified, this is so I followed every
detail on the story board and kept the original
plan instead of messing it up by not following
the dope sheets. The image is very faint but
the purple line on the screen shot to the left is
the motion tween paths, it shows where the
animations are starting from and where they
are going. This is the only manipulation I did

(Tweening) I would have copied/pasted the

assets in however I had to export them in to
the document for them to work on the banner,
I didnt paste any images as I saved all of
them and included them to the sources
document so I have a note of everything I took
from the internet on this assessment.
Assets:
I imported all of the assets I used in both
importing, Photoshop and Adobe flash as they didnt
eg raster
work by pasting them in, I cant show any
images,
screen shots of the logo as I have already
vector
exported it but to the right Is a screen shot of
images,
the flash library, this shows all of the assets I
sound
files, video have used in the banner: (Red boxes are
highlighting the key things top red box
files,
showing it says library and second box
movie
showing all the assets second box is the
clips;
resizing;
bottom one). The only image type I imported
bitmap to
was raster, this is because I couldnt find any
vector
vector images, however I was looking for
conversio
pixelated images so raster is the best choice
n; asset
as vector images dont pixelate, I did save a
libraries
video file and an mp3 file, in the end I didnt
include the mp3 file as I though5t it would be
too much but I used the video file in the
banner, I imported it and the video imported
with a border around it including buttons with
a play and paused button, also a sound button
with an option to turn the sound up or down.
Most of the images I found were a suitable

(Screen shot of the assets libery in flash)

size, the gifs I found were a perfect size for

the banner and I didnt need to resize them at
all, the logo I created was also the perfect size
as I set the stage size to 200 pixels tall by 800
pixels wide so it would fit nicely on the
banner, the only assets that needed scaling
were the text as I decided on all of the text
sizes, and the video which scaled very well on
the banner.
Advance
d tools:
scenes;
guide
layers;
masking,
eg mask
layers,
animated
masks;
timeline
effects, eg
blur, drop
shadow,
expand,
explode,
transform,
transition;
nesting
movie
clips

In this assessment I didnt use many

advanced tools, I used: animations/gifs as I
had included them to the dope sheets and
they were asked in the client requirements, I
saved a few and chose one and wrote about
my decision along with screen shots and http
links in the sources document.
I also used the time line as it had to on flash
to create the banner, this was by creating a
layer at a time for each individual asset, I
started with the animations, then moved on to
the logo as it was the first thing that appeared
on the dope sheet, then I added the
paragraph of text as the story board
suggested, then the video, then http link and
then got all the assets to go off stage.
The only affects I used on the assets on the
banner was the motion tweens, I did however
use the opacity tool on the paint brush when
creating the logo, this is how I got a fainter

(below is the screen shot of the gif used in the animation).

Interacti
vity:
scripting;
behaviour
s; actions;
triggers;
buttons;
rollovers;
playback
control;
preloaders

colour than the letters above the text. I also

used a movie clip/mp4 clip on the banner as
the client requested I do so, I took a clip from
the internet (mentioned it in the sources
document and imported it into the banner.
The only scripting I did was with the timeline
this is because the original choice of software
was director however after talking to the client
I asked if I could create the banner in flash
and they agreed. To the right is a screen shot
of the timeline:
The banner was created on flash therefore it
does not include behaviours, instead of this I
have included gifs on either side of the
banner. There is buttons on the video as when
I imported it into the project it imported in
with a control panel boarder which allows
volume control and enable pause/play
buttons.
The banner doesnt include roll overs as the
(Screen shot of last assets to appear on screen before end video
client didnt specify to use roll overs and I am
and http link)
unsure of how to include roll overs on the
software I used.
I didnt get the banner to loop back as at the
end I designed it to end with the video and the
http link as the last thing available so people
can see the video and look at the website
website doesnt exist but I thought it would be
a good asset for the banner as it looks like a
link to more information. (screen shot to the

right). Other than the videos controls I do not

have any other interactive parts to the
banner, mainly because I know the animation
side of flash and not the interactive, I also
designed the dope sheets this way so when I
went to make the banner I didnt have to
waste time learning the software before
making the banner as it would waste too
much time.