Creating an Animation for the WWW

Scenario
‘The DogNBone Appeal’
Practice Model Assignment
This is a guided trial assignment that will help you to prepare for the real thing.
PLEASE NOTE THAT THE CHARITY, THE APPEAL AND THE WEBSITE ADDRESS ARE INVENTED.
Dog-Eared is an animal charity that trains unwanted puppies to be hearing dogs for deaf
teenagers. They have signed up with a recycling company who will pay them £5 for every old mobile phone donated. The fund-raising campaign is to be called The DogNBone Appeal after the Cockney rhyming slang for ‘phone’.
To promote the campaign the charity needs an animation for the homepage of their own website that will help give it an appealing brand identity and an animated banner ad’ that can be placed on other websites to encourage people to donate their old mobiles.
The banner ad’ will link back to their own site, although you do not need to create the link
yourself. They are particularly keen to reach teenagers and young people in their twenties, as they are likely to upgrade their mobiles more frequently than older consumers.

You have been commissioned to create one of these animations for the campaign: the choice is yours. Your animation should be eye-catching, fun, appeal to the target audience
and run for at least 15 seconds.
The design brief from the charity also gives the following specifications about text,
dimensions and file size:
Homepage animation – this should measure 336 x 280 pixels (= large rectangle). The
animation should be exported in a suitable file format and be optimized for the web. You
must include the name of the appeal and the name of the charity in the animation.
Animated banner ad – this should measure either 468 x 60 pixels for a horizontal advert or 240 x 400 pixels for a vertical one (= full banner). The animation should be exported in a suitable file format and be optimized for the web.
You must include the name of the appeal and the address of the charity’s website in the animation: www.dogeared.org.uk

Task 1 “The DogNBone Appeal” practice assignment

Review Existing Animations

What you must do

Read the practice assignment scenario carefully and begin to think about it, although you don’t have to start the design yet.

For your first assessment task, you must write reviews of at least two different web animations. The animations could either be from the list you viewed and discussed in Section 1, or examples that you have found yourself.

Each review should identify the most and least effective aspects of the animation, its particular purpose and the techniques and features that the animator has employed to try to achieve that aim.

You should also suggest one or two possible improvements and explain how you think these could help it meet its purpose(s) better. Are there any features that you could adapt for your own animation, or any that you will definitely avoid? Make a note of them too. You must also include the URL where the animation can be viewed by others.

You can use the ‘Animation review’ prompt sheet to help you organise your ideas before writing your reviews. Save each review to your Reviews folder with a recognisable file name e.g. animation_review1XXX, animation_review2XXX (substitute your own initials for XXX).

Task 2 “The DogNBone Appeal” practice assignment

Design an animation

What you must do

Task 2a – Aim and audience

Read through the scenario carefully. Apply the skills you have developed in Section 2 to planning your design for the DogNBone Appeal animation. Describe the target audience for the animation in detail, referring to your mood board for inspiration, and identify the main purpose of your animation.

What should you take into account to make sure you have considered the needs of your audience and the purpose of the animation? You could also add some basic information about the message you want to relay and how you plan to communicate it.

Save your work as anim_proposalXXX (replace XXX with your own initials) to your design folder. The ‘Animation proposal’ prompt sheet will help you.

Task 2b - storyboard

Keeping the information in your animation proposal in mind, design the storyboard for your

animation.

You should show as appropriate:

· the content or storyline based on key frames

· any text you plan to use

· images or bitmaps that you plan to include or use as sources for vector drawings

· frame timings

· transitions between frames where used

· any effects you plan to add

· other assets like video and audio (for Flash animation only)

You can use or adapt the blank ‘Storyboard’ template to help you do this if you wish, or design your own format. Save your storyboard as storyboardXXX (replace XXX with your own initials) to your Design folder. If you produce the storyboard on paper, you can scan it and save it in PDF format.

Task 3 “The DogNBone Appeal” practice assignment

Create an animation

Either

a) Create a frame-by-frame animation

What you must do

Read through the assignment scenario carefully again and double-check the specifications for the brief you have chosen - either the animated banner or the promotional animation.

· Open your animation software and start a new animation with the correct dimensions

· Draw a background scene (and designate it as Background in the Frame Properties window)

· Create your main characters using freeform drawing tools, or by combining ready-made or found elements. Make sure that you draw moveable parts separately.

· Save characters and any moveable parts to the Gallery

· Using your storyboard as a guide, create a sequence of frames

· View your animation frequently, making any necessary modifications, and save it regularly to your animation/editable-files folder

· Make use of a range of techniques to animate the action and include at least one example of tweening, using the Blend tool

· Adjust frame rates to fit the pace of the action

· Loop at least one element in the animation

· Optimize your animation for the web

· Export your animation in a suitable file format

· Check that the timing is at least 15 seconds in length.

b) Create a keyframe animation

What you must do

Read through the assignment scenario carefully again and double-check the specifications for the brief you have chosen - either the animated banner or the promotional animation.

· Open your animation software and start a new animation with the correct dimensions

· Draw a background scene if desired

· Create your main characters using freeform drawing tools, or by combining ready-made or found elements. Make sure that you draw moveable parts separately

· Save your backdrop, characters and moveable parts to the Gallery

· Find or record and store other assets such as audio files and video clips

· Using your storyboard as a guide, create a sequence of frames

· View your animation frequently, making any necessary modifications, and save it regularly to your animation/editable-files folder

· Make use of a range of techniques to animate the action and include at least one example of tweening.

· Adjust frame rates to fit the pace of the action using the Easing tab

· Loop at least one element in the animation

· Optimise your animation for the web, exporting it in a suitable file format

· Check that the runtime is at least 15 seconds in length.

Task 4 “The DogNBone Appeal” practice assignment

Test animation

What you must do

Read the assignment scenario through carefully again to make a final check that you have included everything that you have been asked for and that you have followed the specifications in the brief.

There are three stages to this task

Test

· Decide what areas of your animation you ought to test and write a test plan covering all aspects of the animation

· Carry out all the tests, logging the results on your plan.

· Save the file as test_planXXX (replace XXX with your own initials) to your testing folder.

· Correct any mistakes.

· Identify areas for improvement.

Action

· Action the improvements, taking screenshots to submit as evidence.

Evidence

· Save your improved animation with a new version number to the exported_files subfolder

· of your animation folder e.g. crowfield_v2 (for comparison with the original and as

evidence of the changes you have made).

· Save the screenshots to your testing folder as improve_evidenceXXX (replace XXX with your own initials)

· Update your test plan to list the improvements you have made

Congratulations! You have now completed this project.