Sie sind auf Seite 1von 37

Fireworks

Animation
Jeremy Watson

Fireworks Animation

Jeremy Watson

Analysis
Perceived Need
The lesson will teach someone how to create animations in Adobe Fireworks. It is
important to know how to make animated gifs because they are used on websites,
and the need for such people is in high demand. This lesson fills that need because
it shows the user how to make an basic animation, and by doing so helping the user
gain access to better opportunities in the future.

Audience Analysis
The lesson is geared towards both male and female; therefore the instruction is
gender neutral. The age of the audience is geared towards college students who are
18 and above. The lesson is geared towards users with at least a basic
understanding of computers, so the instruction does not need to address the
fundamental functions involved in opening programs. The learners are not required
to have any past experience with Adobe Fireworks because the instruction will teach
everything they need to know to create the animation. The learner must also speak
English because the instruction will not be translated to a different language.

Learning Context Analysis


Regarding the learners
Before taking the lesson, the learners only need to know the basics of operating a
computer. They are going to need instructions, sample files, and tutorials (print
based and video based) to complete the lesson. The learners will also need a PC
with internet access running at least Windows 7, speakers, an updated webbrowser, a media player, Blackboard access, and the Adobe Fireworks CS5 Software
program. They need to be anywhere that they would have access to the required
equipment and materials.

Regarding the instructor teaching the lesson


They need to know how to create animations in Fireworks and know how to grade
Blackboard assignments. They are going to need instructions, sample files, and
tutorials (print based and video based) to complete the lesson. The instructor will
also need a PC with internet access running at least Windows 7, speakers, an
updated web-browser, a media player, Blackboard access, and the Adobe Fireworks
CS5 Software program. They need to be anywhere that they would have access to
the required equipment and materials.

Regarding time
It should take the learner thirty to sixty minutes to complete the lesson.

Page | 1

Fireworks Animation

Jeremy Watson

Design Context Analysis


Regarding the designer
They will need information obtained from the SME provided video, google images,
and personal photos. The Subject Material Expert (SME) that was chosen for the
lesson is Montell Ray. The designer need to know how to create animations in
Fireworks, as well as document design skills, video editing skills, speaking skills, and
knowledge of how to implement a Blackboard class. They need a computer with an
internet connection, speakers/headphones, microphone, Camtasia, Studio 8, Snagit,
an updated web-browser, a media player, Blackboard access, and the Adobe
Fireworks CS5 Software program. It should take approximately 25 to 50 hours to
complete the lesson.

Page | 2

Fireworks Animation

Jeremy Watson

Instructional Design
Objectives
Given sample files, the learners will be able to make an animation that meets
project criteria. Given instruction, the learner will learn how to open and import files
in fireworks in order to start the animation. Given instruction, the learner will learn
how to duplicate states in fireworks in order to complete the animation.

Prerequisite Knowledge
No prerequisite knowledge is necessary to complete the guided instruction in
Fireworks, but the learner would need to have knowledge of the fundamental basics
for operating a computer.

Scope Map
Pictures

Open designated jpg

Import designated png

Duplication

Duplicate a state

Correctly position the png file on


each duplicated state

Running Animation

Run the animation

Slow the animation speed down


for all slides

Scope Description
The first part of the content is pictures. In this part, the instruction will show the
user how to open the background file then how to import the object file/png file. The
second part of the content is duplication. In this part, the instruction will teach the
user how to duplicate a state then explain where to place the png file on each
duplicated state. The third part of the content is running the animation. In this part,
the instruction will explain how to run the finished animation then explain how to
slow the animation speed down for all slides.

Page | 3

Fireworks Animation

Jeremy Watson

Sequencing
The lesson is presented with identifiable prerequisite sequencing. An example of
this is that you must teach how to open a picture file in fireworks before teaching
how to import a picture file onto another picture file.

Reading Level
The lesson uses a basic 7th Grade reading level with some jargon for the instruction.
This reading level makes it so that anyone can use the instruction if they wish to
make a basic animation in fireworks.

Motivation
The lesson gets and keeps the attention of the audience through active sentences
and pictures. The lesson is relevant to the audience because they are trying to learn
how to create a fireworks animation. The lesson build the confidence of the
audience by showing them pictures of some completed steps to let them know they
are on the right track. The lesson reinforces the satisfaction of your audience by
allowing them to complete an individual exercise. The lesson utilizes the Present
Worth ARCS model because it teaches the user how to create an animation using
fireworks now, which will help the user in future if they need to use fireworks for a
another project.

Page | 4

Fireworks Animation

Jeremy Watson

Lesson Format
Focus Learners
In the first few moments of the lesson, the learners attention is focused by the
instructor providing his name and telling what the lesson will be about. The
instructors name is located in the print-based materials cover page, while the
information telling what the lesson is about is located on the instructional design.

Stimulate Recall of Prior Learning


There is no prerequisite knowledge to review before teaching the new content.

Give Advanced Organizer


The advanced organizer chosen for the lesson is located after the title screen but
before the actual lesson begins. The graphic organizer contains the three sections
the lesson will be split into, which includes Pictures, Duplication, and
Running/Saving the Animation. The graphic is three different shades of blue, with
the shade lightest to darkest.

Present Content
New content information will be presented with the introduction of each section. The
new content is located in the video-based lesson. The first section will show how to
open and import files in Adobe Fireworks. The second section will show how to
duplicate states and where to place the imported file on each of those states. The
third section will show how to run the animation and how to save the animation.

Provide & Evaluate Guided Practice


The learners practice the information by completing the guided practice. The
learner will be opening and importing files in the first section. In the second section,
the learner will be duplicating the states while placing the imported file in the
appropriate places. In the third section, the learner will run the animation then save
the animation. The guided practice is located in the lesson video, it is also located in
lesson instruction. The guided practice will be evaluated using the video and printbased instruction, it can be evaluated for accuracy.

Provide & Evaluate Independent Practice


The learners practice the information on the own by completing the independent
practice. In the independent practice, the learner will uses the same sections as the
guided practice but the will not be given the exact steps. The independent practice
will have the learner create an animation where a jet flies from behind a mountain
range, so they will have jet that starts small and gets bigger the closer it gets. The
independent practice will be located in a folder name Independent Practice. The
independent practice will be evaluated using a rubric, which make it easy to grade

Page | 5

Fireworks Animation

Jeremy Watson

and allows the learner to make sure they have everything required for the
assignment.

Enhance Retention and Transfer


The leaners will use this information in the future when they are working on another
project for a different class, or when they are trying to get a job that requires them
to show off what kind of computer skills they have, or if they just want to use it for
their own personal time. This is told to the learner at the end of the video-based
instruction, before the credits but after the final section of the lesson.

Page | 6

Fireworks Animation

Jeremy Watson

Media Design
Print-Based Tutorial

Content
The print-based tutorial is a printed out copy of the instructions need to create the
racecar animation in Fireworks. The deliverable contains individual steps,
accompanied by screenshots. The information contained in the deliverable will
guide the user through the process of using Fireworks to complete a simple
animation.

Layout

The headings are located before steps 1, 10, and 25 because these are the first
steps in each of the three sections. The body text is place in normal alignment and
numbered in order to avoid confusing the user by showing them layouts they are
not use to. The graphics used are located after the step in which they are needed
and due to the size of the graphics only about 2 will fit on a page, I did it this way
because I wanted to avoid overwhelming the user by putting a lot of information on
one page which can make some people become uninterested in what they are
doing. My header is located in the top left corner to just remind the user what it is
that they are doing as they work on completing the steps. My page numbers are
located in the bottom right corner so the user may count the pages without having
to look at the entire page.

Color
The section headings are dark blue, while the steps and objects are light blue. I
chose dark blue for the section headings because I want the user to realize when

Page | 7

Fireworks Animation

Jeremy Watson

the next section to begin. I chose light blue for the steps because that makes them
look softer and more inviting.

Typography
All my section headings are formatted with a bolded heading 1 style and 16 font
size (Calibri Light). All my steps are formatted with numbered bullet points and an
11 font size (Calibri). Also, some of the information within the steps are bolded.

Graphics
The graphics used include only screen grabs and shape objects. The screen grabs
where chosen to give the user a visualization of the steps they were completing,
while the shape objects where chosen to point out certain aspects of the screen
grabs that they needed to focus on. I made the screen grabs fairly large because I
wanted the user clearly see all of the information on the screen grab. I made the
shape objects large enough to point out where the user need to look on the screen
grabs, while not blocking any important information on the screen grab. I placed the
screen grabs directly after the step that they were to be used, so the users could
see what they needed to do after they read what they needed to do. The shape
objects where placed on the screen grabs in order to draw the users attention
directly to what they needed to see.

Page | 8

Fireworks Animation

Jeremy Watson

Media Design
Tutorial Video

Content
The video tutorial is a video-recorded copy of the instructions needed to create the
racecar animation in Fireworks. The deliverable contains individual sections,
accompanied by actual footage while creating the animation in Fireworks. The
information contained in the deliverable will guide the user through the process of
using Fireworks to complete a simple animation.

Layout

The section title screens appear before each section begins and also have voice
narration introducing each section. The section titles are placed with a centered and
middle alignment, so that the user sees it immediately without having to look for it.
The recordings are located after the section title in which they were introduced and
due to the length of the video there are pause sections after each recorded section,
it was done this way to avoid overwhelming the user by putting a lot of information
on them at once, which should make the lesson easier to follow.

Color
The section title screens are black with blue water at the bottom, while the title is
light blue. The black with blue water title screens were chosen to clearly show when
a new section began. The light blue for the titles was chosen because it follows the
theme of the entire project and it is clear to see on the black background of the title
screens.

Typography
All section titles are formatted with a 72 font size (Franklin Gothic Medium). The
ending credits is formatted with 48 font size (Franklin Gothic Medium). The font
sizes were chosen because it was the appropriate size to use in order to get the
most out of each title screen.

Page | 9

Fireworks Animation

Jeremy Watson

Graphics
The graphics used include only callouts, which are used in conjunction with zooms.
The zooms are used to give the user a better view of the screen during the video,
while the callouts are used to point out certain aspects of the zooms that they
needed to focus on. The zooms are used to make a portion the screen larger by
zooming in on that portion and because it shows the user the parts of the screen
that are most important at that moment. The callouts are large enough to point out
where the user need to look on the zooms, while not blocking any important
information on the zoom. The callouts are placed in the zooms in order to draw the
users attention directly to what they needed to see.

Page | 10

Fireworks Animation

Jeremy Watson

Media Design
Instruction, Guided and Independent Practice Activities

Content
The guided and independent instructions outline the steps needed to create the
racecar animation in Fireworks. The deliverables contain individual steps,
accompanied by tables that tell what is required in the finished animations. The
information contained in these deliverables will guide the user through the process
of using Fireworks to complete a simple animation.

Layout

The titles are located at the top of the page with center alignment, they are placed
in this way so it is the first thing the user reads before they read anything else. The
body text is numbered bullet points. The body text is placed this way to illustrate
the order in which the user should complete them. There are tables at the bottom of
each page outlining the grading criteria for each practice activity. The tables are
placed there so the user can see exactly what is expected of them in each
animation.

Color
The titles and subtitles are both light blue. The titles are colored so that they are
consistent with the color used throughout the entire design report. The body test is
colored black. The text is colored this way so it is made clear that this is the body
content of the instruction. The table is colored both dark and light blue with white
text in the dark blue and black in the light blue. The table are colored this way so
that it is consistent with the entire design report, while allowing it to stand out at
the same time with the white text.

Typography
The title is formatted using the Calibri Light (Headings) font with a font size of 28.
The title is formatted this way to distinguish it from the rest of the document. The
sub-heading is formatted using the Calibri Light (Headings) font with 16 size font.
The sub-heading is formatted this way because it shows that this is a separate

Page | 11

Fireworks Animation

Jeremy Watson

section but it is not the title for the documents. The Calibri font with 11 font is used
on the body text and the text in the tables. The body text is formatted this way
because it show that this is the context of the instruction which makes it easier to
distinguish it was the instruction.

Graphics
The only graphics used in the instructions are the tables. They were chosen in order
to display the grading criteria for the guided and independent practice activities.
The tables where sized in a manner that shows everything in the table, while not
making the table to large. This was done in order to capture the users attention,
while not overwhelming them. The table was placed at the bottom of the page, and
this was done to ensure that the user looks at the table after reading the steps for
the instruction.

Page | 12

Fireworks Animation

Jeremy Watson

Formative Evaluation
Deliverable test/review: Lesson Task Analysis
Overview
The materials tested included the hard copy of the lesson task analysis and the
sample files provided by the SME. For the first test, the steps were 100% complete.
The hardware used was a PC running on Windows 7 and the software used was
Adobe Fireworks CS5. The participants were given a printout containing information
to complete the Fireworks animation and they were also given the sample files. The
participants followed the steps on the printout and were encourage to give
feedback. The evaluator wrote down the comments that were made, observed the
user, and made note if they have any problems with the steps.

Expert Reviewer
The name of the SME is Montell Ray. Montell is a senior and he is 22 years old. He
seemed to be very interested in Fireworks. Montell went through the steps without
many problems, and only say problems with a few steps. Montell is qualified to be
the SME because he had in-depth hands on experience with Fireworks and adobes
other programs while he was in high school.

User 1
The name of user 1 is Chris Redd. Chris had never used Fireworks before, and it
appeared as though he was unfamiliar with any of Adobes programs. Chris is a
sophomore and he is 20 years old.

User 2
The name of user 2 is Rico McKenzie. Rico had never used Fireworks before, and it
also appeared as though he was unfamiliar with any of Adobes programs. Rico is a
senior and he is 22 years old.

Findings & Resulting Changes


Findings

Resulting Changes

Key words blended in making the


harder to notice
Did not tell how to open

Key words will be bolded so they stand


out
Added the steps to open fireworks

Steps were all together making it


difficult to keep track
Some steps were unclear

Added Phases for better grouping


Changed Steps to make them clearer

Page | 13

Fireworks Animation

Jeremy Watson

Formative Evaluation
Deliverable test/review: Print-Based Tutorial Mock-Up
Overview
The materials tested included the hard copy of the print-based tutorial mock-up and
the sample files provided by the SME. For the first test, the steps were 100%
complete. The hardware used was a PC running on Windows 7 and the software
used was Adobe Fireworks CS5. The participants were given the print-based tutorial
containing information to complete the Fireworks animation and they were also
given the sample files. The participants followed the steps in print-based tutorial
mock-up and were encouraged to give feedback. The evaluator wrote down the
comments that were made, observed the user, and made note if they have any
problems with the steps.

Expert Reviewer
The name of SME is Chris Redd. Chris has used Fireworks before. Chris is a
sophomore and he is 20 years old. He is qualified to be the SME because he has
already complete the animation once and therefore understands what it take to
create the animation.

User 1
The name of user 1 is Donivan Ragsdale. Donivan had never used Fireworks before,
and it appeared as though he was unfamiliar with any of Adobes programs.
Donivan is a sophomore and he is 23 years old.

User 2
The name of user 2 is Jermaine Hall. Jermaine had never used Fireworks before, and
it also appeared as though he was unfamiliar with any of Adobes programs.
Jermaine is a senior and he is 22 years old.

Findings & Resulting Changes


Findings

Resulting Changes

The print-based mock-up didnt have a


picture on the title
Had no call outs

Added picture of the Animation to the


title page
Added call outs to the screenshots

Some steps are repetitive

Condensed steps to reduce the amount


of words in the tutorial
Added the section titles

Needed to distinguish the sections

Page | 14

Fireworks Animation

Jeremy Watson

Formative Evaluation
Deliverable test/review: Video Tutorial Mock-Up
Overview
The materials tested included the digital copy of the video tutorial and the sample
files provided by the SME. For the first test, the steps were 100% complete. The
hardware used was a PC running on Windows 7 and the software used was Adobe
Fireworks CS5. The participants were given a video containing information to
complete the Fireworks animation and they were also given the sample files. The
participants followed the steps in the video and were encourage to give feedback.
The evaluator wrote down the comments that were made, observed the user, and
made note if they have any problems with the steps.

Expert Reviewer
The name of SME is Rico McKenzie. Rico has used Fireworks before, and it also
appeared as though he was familiar with how to open Fireworks program in
Windows. Rico is a senior and he is 22 years old. He is qualified to be the SME
because he has already complete the animation once and therefore understands
what it take to create the animation.

User 1
The name of user 1 is TJ McGinnis. TJ had never used Fireworks before, and it
appeared as though he was unfamiliar with any of Adobes programs. TJ is a senior
in high school and he is 18 years old. .

User 2
The name of user 2 is Kayla Stevens. Kayla had never used Fireworks before, and it
also appeared as though she was unfamiliar with any of Adobes programs. Kayla is
a senior and she is 23 years old.

Findings & Resulting Changes


Findings

Resulting Changes

Parts of the lesson where hard to see

Added zooms to the video

Had no call outs

Added call outs to the video

Video was recorded in one recording

Split the video into three sections

Needed to distinguish the sections

Added the section titles screens to the


video

Page | 15

Fireworks Animation

Jeremy Watson

Implementation
Instructional Materials Needed

Print-based Tutorial
Video Tutorial
Sample Files
Overall Instructions
Guided Practice Instructions
Independent Practice Instructions

Equipment Needed
Instructor:

Computer with Internet


Speakers
Blackboard Access
Fireworks CS6
Media Player
Updated Web Browser

Student:

Computer with Internet


Speakers
Blackboard Access
Fireworks CS6
Media Player
Updated Web Browser

Environmental Requirements
Must be located anywhere that has access to hardware and software required

Page | 16

Fireworks Animation

Jeremy Watson

Appendix

Page | 17

Fireworks Animation

Jeremy Watson

Overall Instructions
1) Download all sample files located on Blackboard. Be sure to
save them to the desktop of your computer.
2) Read the guided practice instructions located in the Practice
are of Blackboard.
3) Either watch the video tutorial, read the print-based tutorial,
or both. The video and print-based tutorials will both be
located in the Tutorials are of Blackboard.
4) Complete the guided practice activity in conjunction with the
tutorial(s).
5) Submit the guided practice activity through its submission
link located in the Practice are of Blackboard.
6) Read the instructions for the independent practice located in
the Practice area of Blackboard.
7) Complete the independent practice activity. Make sure all
criteria is meet.
8) Submit the independent practice activity through its
submission link located in the Practice area of Blackboard.

Page | 18

Fireworks Animation

Jeremy Watson

Guided Practice Instructions


1) Download all sample files located on Blackboard. Be sure to save the sample
files to the desktop of your computer.
2) Either watch the video tutorial, read the print-based tutorial, or both. The
video and print-based tutorials will both be located in the Tutorials are of
Blackboard.
3) If you are watching the video, after each section is completed, pause and
complete the same steps using the sample files.
4) Make sure you are saving as you go to ensure not losing any material, also
make sure you are saving everything in the correct folder.
5) When you have completed the tutorial(s), submit you completed files(s)
through the practice activity submission link located in the Practice area of
Blackboard.

Guided Practice Rubric


Criteria
racetrack.jpg is opened
yellowcar.png is imported
There are 15-18 states
Yellowcar is positioned properly on
each state
State speed is saved from 7 to 21 for
each state
Animation is saved as racecar
animation
Image Preview is generated

Not
Address
ed
0
0
0

Mastered
5
5
5

Page | 19

Fireworks Animation

Jeremy Watson

Independent Practice
Instructions
1

Download all sample files from Blackboard. Be sure to save them to the

desktop of your computer.


Using the skyandmountains.jpg and jet.png files, create a new animation with

the following characteristics:


The jet coming from behind the mountains
The jet starts small but gets bigger, simulating its getting closer
Must have at least 10 states
Utilizes the before current state method for duplicating states
Animation speed is change from 7
Image Preview is created
Animation is Saved as frombehindthemountains animation
Make sure that you are saving as you go to ensure not losing any material,

also make sure you are saving the correct folder.


When you have completed the activity, submit your completed file(s) through
the independent practice submission link located in the Practice are of
Blackboard.

Independent Practice Rubric


Criteria
skyandmountains.jpg is opened
jet.png is imported
Jet starts small and get bigger
At least 10 states
State speed is changed from 7
for all states
Animation is saved as
frombehindthemountains
animation
Image Preview is created

Not
Addressed
0
0
0
0

Mastered
10
10
10
10

10

10

10

Page | 20

Fireworks Animation

Jeremy Watson

FIREWORKS
ANIMATION
By Jeremy Watson

Page | 21

Fireworks Animation

Jeremy Watson

Opening Files in Fireworks


1
2
3

Click the Windows Menu Button located in the bottom left corner.
Click in the Search Bar and type Adobe Fireworks, then click on the
Adobe Fireworks CS5.
Once Fireworks program is up and running, click the Open button.

Page | 22

Fireworks Animation

Jeremy Watson

In the Open Dialogue box, navigate to the Sample Files Folder, select the
file racetrack.jpg, and then click Open.

Click View on the Tool Bar, the Click Zoom In.

Page | 23

Fireworks Animation

Jeremy Watson

Now Click File, then Click Import.

With the Import Dialogue Box open, navigate to the Sample Files Folder,
select the yellowcar.png, then click Open.

Page | 24

Fireworks Animation

Jeremy Watson

Page | 25

Fireworks Animation
8
9

Jeremy Watson

With pointer changed into a black arrow, click anywhere on the


racetrack.jpg (do not drag) and the car should appear on the canvas.
Now that the yellowcar.png has been imported, position the car so that
the front bumper is slightly over in front of the finish line (this is
where the animation will eventually end).

Duplicating States
10 Look at the panel to the right in Fireworks and make sure the States tab is
selected. Next right-click on State 1, then click Duplicate State.

Page | 26

Fireworks Animation

Jeremy Watson

Page | 27

Fireworks Animation

Jeremy Watson

11 With the Duplicate State Dialogue Box open, make sure the Before
current state button is selected, make sure the number is 1, then click OK.

12 Now select and drag the yellow car backwards so that it is positioned well
behind the finish line.
13 Repeat Step 11, select and drag the yellow car backwards again except this
time make sure it is positioned just before the racetracks left curve on

Page | 28

Fireworks Animation

Jeremy Watson

the top of the track.

14 Repeat Step 11, select and drag the yellow car so that it is positioned in
the middle of the racetracks left curve.

Page | 29

Fireworks Animation

Jeremy Watson

15 With the yellow car still selected, right-click the yellow car, scroll down to
Transform, then click Rotate 90 CCW. (make sure the yellow car is
centered on the track after the rotation)

Page | 30

Fireworks Animation

Jeremy Watson

16 Repeat Step 11, select and drag the yellow car so this it is positioned just
outside the bottom of the racetracks left curve, then repeat Step 15.

17 Repeat Step 11, select and drag the yellow car (which should now be on the
bottom part of the racetrack) a little to the right.
18 Repeat Step 17 (4 times)
19 Repeat Step 11, select and drag the yellow car so that it is positioned just
before the racetracks right curve by the bottom.
20 Repeat Step 11, select and drag the yellow car so that it is positioned in
the middle of the racetracks right curve, then repeat Step 15.
21 Repeat Step 11, select and drag the yellow car so that it is positioned just
before the racetracks right curve by the top, then repeat Step 15.
22 Repeat Step 11, select and drag the yellow car so that the back bumper is
positioned slightly in front of the finish line.
23 Repeat Step 11, select and drag the yellow car so that the front bumper is
positioned directly to the behind the finish line. (this is where the
animation will start)

Page | 31

Fireworks Animation

Jeremy Watson

24 With State 1 selected, hold down Shift and click State 15. Then doubleclick the 7 (located to the right of any of the states) and change it to 21, then
hit the Enter key

Saving/Exporting the Animation


25 To save the animation, click File then Save As.

26 Once the Save As Dialogue Box is open, change the file name to racecar
animation, make sure the Save as type is Fireworks PNG (*.png), then

Page | 32

Fireworks Animation

Jeremy Watson

click Save.

27 To save animation as an Animated GIF, Click File then Image Preview.

Page | 33

Fireworks Animation

Jeremy Watson

Page | 34

Fireworks Animation

Jeremy Watson

28 Once the Image Preview Dialogue Box is open, Make sure the selected
format is Animated GIF then click Export.

Page | 35

Fireworks Animation

Jeremy Watson

29 Once the Export Dialogue Box is open, make sure the file name is racecar
animation.gif and export is Images Only then click Save.

Page | 36