Zachary Pulkin 09-13-2009 EME6930 – PLE: Flash – The Spider Finder Game
Title
“The Spider Finder Game”
Client / Organization
The application will be made for an educational institution at the middle school level for the
biology classes there.
It is aimed for students pursuing the more advanced science track and will be designed with intelligent
6th graders in mind. The school is an A School, and the teachers are eager to bring the latest and best
new teaching materials to their students. This application will fit that niche.
Problem Goals
The problem is short attention spans at the early middle school level. The application will
provide a fun, animated educational game about finding spiders to keep a student's attention.
Target Audience
The application will be geared toward intelligent, well developed 6th graders, who apply
themselves fully to their courses of study. The audience will be able to pay attention to the application
and derive enjoyment not only from the animations and the graphics, but also from the content
presented. Students will have a level of hand-eye coordination common to 6th graders, which will
enable each student to navigate the application with a minimum of guidance.
Goals for Target Audience
The student will learn about the different species of spider common to the southeast United
States, and upon finishing the application, will be able to identify and differentiate venomous spiders
from harmless ones. The student should also come away with a greater appreciation for the role the
spider plays on the ecological stage.
What the Application Will Do / Description
The application will offer a menu choice of thumbnail “scenes” to view. There will be a clear
indication by instructions that a scene should be clicked on to proceed. When a student clicks a
thumbnail, they will be taken to the scene depicted in the thumbnail – a grassy burrow, an attic corner, a
pool screen, a tree, a shoe, etc. The scene will contain click-able objects that contain a hiding spider.
Each click-able object will “halo” are different color to indicate click-ability. When the student clicks
the object that the spider is hiding behind, the spider will animate out from behind or inside the object.
The spider animation will then trigger information to appear on that spider. There will be a clear
indication on which spiders are harmless and which are venomous. On entering a scene, there will be a
clear “back” navigation button on the lower left, however on revealing the spider and reading the
information, a “done” button will appear on the opposite lower right corner of the information. When a
student clicks “done”, they will be taken back to the thumbnail menu and the completed scene will be
darkened and marked as completed. The scene will still be available to view again, but after all scenes
are marked “completed” a new thumbnail will appear indicating a quiz. The quiz will ask students to
match each spider with a fact (or facts) about each via multiple choice. It will also quiz what the
student has learned about dealing with venomous spiders. The approach to the quiz will be drag and
drop, multiple choice, and essay. Clear indications will be given immediately on a successful drop to
the target area on correct / incorrect for the drag and drop portion, and answer checkers will be
available for the multiple choice portion. When the quiz is completed successfully, the user will be able
to return to the introduction screen to begin the application over again.
Task Analysis
Task Analysis for Concept Development:
1. See harmful spiders
2. Learn about how harmful spiders can harm a person
3. See the harmful spider habitats (including describing the habitats)
4. See harmless spiders
5. Compare the difference between harmful and harmless spiders
6. See the harmless spider habitats (including describing the habitats)
7. Select the harmful spider when comparing two spiders
8. Pick the harmful spider out of a lineup
9. Select the habitat of the harmful spider
10. Match facts about a spider to a representation of a spider
11. Describe how a harmful spider can harm
12. Know steps to take when bitten by a harmful spider
Instructional Objectives
1. Identify harmful spiders and be able to differentiate harmful spiders from harmless ones.
2. Describe harmful and harmless spiders role in their habitats.
3. Describe how spider venom affects the body.
4. Know how to deal with a bite.
5. Know how to identify the spider.
Prerequisite skills and knowledge
Basic computer graphic user interface navigation skills will be assumed. Beyond that,
instructions will be provided within the application.
Instructional Strategies
The information will be disseminated through means of interaction – namely a hide and seek
type game whereby students find the hidden spider. By this means, I hope to keep students attention
and make the student an active participator in the gaining of knowledge. ‘Once a spider is found, there
will be information presented about the spider, its habitat, whether or not venomous, how to identify
and what to do (if venomous) when bitten. A picture or pictures will be provided of the spider to aid
the identification process. Each spider can be revisited at any time before the assessment.’ The
assessment/ quiz at the end will aid students in practicing their knowledge, while helping to affirm
what they have learned. ‘The quiz will allow students to practice identifying the spiders, matching facts
about a spider to a representation of the spider, identifying the habitat of a given spider and what to do
when bitten by a harmful spider (some sort of mix & matching of these will be employed using drag &
drop with multiple choice, or there may be two quizzes that must be completed.’
Assessment Methods and Feedback
The quiz or quizzes will appear after all spiders are reviewed. The student will be given clear
feedback as they progress through the quizzes. The final feedback will be given at the terminus of the
quiz.
How Media Will Be Used
All media will be original Flash paintings and motion tweens based on hand drawn graphics.
Limitations / Constraints
Given that this project must be completed by early December, the biggest limitation for the
application will be time of development. Another constraint is inexperience, which stems from the fact
that prior to this class, I had zero experience with designing in Flash and had only heard the term
ActionScript when conversing about the Flash movies used in one of the product lines produced where
I work.
Scope
In light of the time limitation, I will develop two of the planned 6 “scenes” described in my
project description. I would of course make sure that the quiz functionality is functional for the number
of scenes that do get developed. I will include the spider information only for scenes that are not
developed to include the interactive content and animations.
Deliverables
I would like the project to be a single Flash application, which would make the .fla file, the final
movie (.swf) and the dressing for the .swf (the webpage) the deliverables. I will also deliver all .fla files
as well, along with all incremental and support files.
Technical Requirements for creation
Requirements of Flash CS3:
Intel Pentium 4 or newer CPU, Windows XP SP2 or higher OS, 512Mb System RAM, DVDRom drive, QuickTime 7.1.2 or higher, internet connection, 2.5Gb available hard drive space.
Other requirements:
Functional soundcard or sound device with speakers or headphones for testing the sound, a
microphone if sounds need to be recorded locally, a video card capable of displaying Windows (which
is the basic unwritten requirement for Flash as well) and possibly a paint program or Photoshop CS3
(since the whole CS3 suite is installed on the system I will be using.)
Technical Requirements for the user
The minimum machine requirements are an Intel Pentium 4 or newer CPU, Windows XP SP2 or
higher OS, 512Mb System RAM, with QuickTime 7.1.2 or higher installed, an internet connection and
a Flash capable web-browser with Flash 9.0 or higher installed. The program will also use sounds, so
speakers or headphones should be available as well as a soundcard or onboard sound capable of driving
them. A Mac computer may also be used if it includes speakers and Safari 2.0 or higher with Flash 9.0
or higher installed.
Development Timeline
September:
- Concept Paper due September 13th
October:
- Design Paper due October 4th.
- Begin drawing/painting spider habitat scenes.
- Prototype the completed modules -> quiz appears functionality in ActionScript.
- Development Paper due October 25th.
November:
- Prototype the quiz or quizzes
- Prototype presentation due November 22nd
- Make final scenes decision based on how many scenes are painted/drawn
- Tie scenes to prototype of completed modules -> quiz prototype
- Finalize quiz content
December:
- Final project / Reflective response/ Final Proposal Paper due December 4th
Outline
I)
Welcome screen / Introduction with instructions
a) Start application button
II)
Scene selection thumbnails screen
a) 8-10 clickable thumbnails
III)
Scene Screens
a) Clickable objects in each scene, one with spider behind /inside
i) Detailed spider info linked from clickable animated spider
IV) Quiz appears once all spiders found
a) Assessment through drag & drop matching
V)
Final Feedback screen
Flow Chart
Storyboards
Unit Title: Menu Screen
Date: 12/03/09
Work Space:
File Name: Final_Project.fla
The goal of this page is to introduce the program. The only action is a
“Begin” button to start the application.
Unit Title: Menu Screen
Date: 12/03/09
Work Space:
File Name: Final_Project.fla
The goal of this page is to let the user choose which spider “scene” to
study next. The buttons logically link to a scene containing each spider and
are labeled appropriately. The title at the top provides directions on what to
do, and there is a “start over” button in the lower left that returns the user
to the Splash Screen
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File Name: Final_Project.fla
Clickable object
The goal of this page is to (1) provide an interaction that allows the student
to “find” the spider. (2) To teach the material about the spider. The scene
contains “clickable” objects like the log pictured above.
Style Guide / Conventions
All navigation buttons will be consistent. I will use large, emphasized buttons for navigation. If
graphic buttons are used, they will “hover” a different color. The graphic buttons will only be used for
developed scenes. I will keep all navigation buttons at the bottom of the application with the
conventional back and next buttons on the left and right respectively where necessary. Each button will
be labeled according to its function. The scenes will be created in similar style, painted as realistically
as possible with the Flash paint tools. Please see the painting style shown in the storyboard above, this
painting style will be consistent throughout the “scenes” of the application. I will make sure that the
text in the spider descriptions is large enough to be legible and I will use a bold blue text on white
background for the spider info windows and for the quiz to keep a consistent look going. The initial
thumbnail screen will employ the same white background with dark blue bold text as well.
Citations
- Gagne’s 9 Events of Instruction @
http://www.citt.ufl.edu/toolbox/toolbox_gagne9Events.php
- Nielsen’s Alertbox @ http://www.useit.com/alertbox/20030825.html
Appendix
Low level Storyboards
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Clickable object
Interactivity and Feedback: In the scene above, there are 5 clickable
objects: A “knothole” on the tree, the branch extending to the right of the
tree, the bush, the log and the rock. When the branch, knothole, rock or
bush is clicked, a message will appear momentarily on the screen with a
prompt to “keep looking” or a goad that the spider is “not there.” When the
log is clicked, a Black Widow spider (specific to the screen shown above)
will animate from behind the log and hang down on a single strand of
spider silk. Immediately after the animation ends, an info box will appear
on the screen. Please see the next storyboard.
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Clickable object
Interactivity: In the screen shot above, the info box has popped up after
the spider animation ended (you can see the Black Widow represented
between the log and the rock.) The text is consistently stylized throughout
the application with Bookman Old Style, blue bold text. The marked
“Clickable object” is the “Bite Danger!” red underlined link. This link
may be clicked to bring up more information. Please see the next
storyboard.
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Clickable object
Interactivity: In the screen shot above, the “Bite Danger” link has been
clicked to reveal details about the venom that this particular venomous
spider’s bite injects, what it does to the body and how to react if bitten. The
“Done” button finishes the module and returns the user to the Menu screen
(please see general Story Boards.)
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Interactivity: Once each module has been visited and the spider found (or
the information viewed in the case of the undeveloped modules,) The
“Start Quiz” button will appear in the middle as shown above. Each
module may be revisited as many times as the user would like before
beginning the quiz, and even after beginning the quiz, the user may return
to this menu in order to review a module.
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Interactivity: In this first quiz screen, the user is presented with the three
objects shown and quizzed on which action they would take first if bitten
by a Black Widow. Each object may be dragged.
Assessment: If the soap bar is dragged to the box, the user is informed of
success. Upon successful completion of this portion of the quiz, a
“continue Quiz” button will become available in the lower right corner.
Feedback: Each object has either a hint or a goad to prompt the user to
action. These comments are shown as blue text on the right side and there
is feedback for any action taken.
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Interactivity: In the screen above, the interaction is a multiple choice quiz.
The user must choose an answer by selecting a radio button by the correct
choice.
Assessment: A final assessment will be given after the fifth quiz question is
answered. A “Begin Part 2” button will appear upon completion of the
multiple choice portion.
Feedback: Each question includes a “Check Answer” button which allows
the user to check their answer before submission. The answer checker will
give the user feedback on whether or not the answer is correct.
Unit Title: Scene demonstration
Date: 12/04/09
Work Space:
File name: Final_Project.fla
Interactivity: The final portion of the quiz is shown above. It is preceded
by a descriptive screen, informing the user that they are about to begin a
timed essay.
Assessment: For this final portion of the quiz, there is no assessment given
immediately. Instead, the essay must be emailed to the instructor (myself)
for grading.
Feedback: Upon completion of the essay, the user is given feedback
indicating that they should email the essay. A link to auto-populate their
email client with the essay is provided for their convenience. Also on the
final screen, a button will appear that says “Start Over”, which, as the
name implies, starts the application over from the beginning.
Paper Based Materials:
There are no paper based materials for this project.