IT213 Lecture: Project #4
Animation Commercial (10% of Final Grade)

I. Purpose
The purpose of this assignment is to demonstrate your ability to use the various features and functions in Adobe Animate to create a commercial for your fictional company/organization. This assignment is an opportunity to utilize the animation authoring skills that you have learned to develop a creative and original 20-second non-looping animation to deliver a message about your company/organization.

II. Steps

1. You must use Adobe Animate to create your commercial. Your animation must meet the following requirements:
• Document Setting:
 Dimension: CAN NOT exceed 800 pixel width and 600 pixel height
 Frames per second MUST be set to 12
• Platform/Playback Type:
 HTML5 Canvas (preferred) or ActionScript 3.0
• Accessibility Setting (only for ActionScript 3.0 documents):
 The Accessibility Panel (Window > Properties > Accessibility) must be activated
 For the movie:
o Select the “Make Movie Accessible” option
o Provide an alternative equivalent in the “Name” and “Description” fields
 For each object (e.g., button)
o Select the “Make Object Accessible” option
o Provide an alternative equivalent in the “Name” and “Description” fields
 Ensure that no component of the content flashes more than three times in any 1-second period
• Requirements (The animation should play in the following order):
 Preloader:
 Select a background color; Create a text box, aligned at the horizontal center of the stage and type in 'Loading' in the text box; Create 5 small white squares and align them as shown.
 Create a preloader animation so that the squares sequentially turn to black squares for 0.5 second each, moving from left to right.











 Motion or Classic Tween (all of the following):
 Resulting in a color change of any object
 Resulting in a position change of any object (movement)
 Resulting in a transformation change of any object (scale, rotation)
 Shape Tween:
 Resulting in a shape change (morphing)
 Button:
 Insert a square and convert it into a button symbol
 Set the following states for the button:
o Up State: Create a text box on top of the square, with the text ‘End’ and align the square and text to look good.
o Over State: Change the color of the text ‘End’.
o Down State: Change the color of the text ‘End’.
 Ending (JavaScript or ActionScript 3.0):
 Create a new key frame after the frame on which the button is created. Delete the button from this frame. Import the Image.gif file to your library and drag an instance of it to this layer.
 Set the Actions to the button/frame so that the animation stops when the button appears, and the animation continues to play the imported Image.gif animation when the user clicks on the button.
 The imported Image.gif animation must run at least once completely without looping.
 File Type:
 FLA (.fla)
 Time Length:
 At least 20 seconds (non-looping)
2. Submit your FLA file via Blackboard using the Assignments Tool (“Course Tools”  “Assignments” follow the “Project 4: Animation Commercial” link).



III. Grading

Description Points
File Format:
• File does not exceed 800x600 in dimension.
• File format is FLA.
• FPS is 12.
• Platform/Playback type is HTML5 Canvas (preferred) or ActionScript 3.0
• Duration is at least 20 seconds. 1-25
Accessibility (only for ActionScript 3.0 documents)
• Create the animation with the Accessibility Panel activated
• Select the “Make Movie/Object Accessible” option on movie or individual objects
• Provide an alternative equivalent in the Name and Description fields
• No component of the content flashes more than three times in any 1-second period 1-25
Preloader
• Select a background color; Create a “loading” text box and 5 small white squares (3 point)
• Create a preloader animation (squares sequentially turn to black squares for 0.5 second each, moving from left to right (3 points) 6
Motion or Classic Tween
• Resulting in a color change of any object (2 points)
• Resulting in a position change of any object (2 points)
• Resulting in a transformation change of any object (scale, rotation)(2 points) 6
Shape Tween
• Resulting in a shape change (2 points) 2
Button
• Create a button symbol (1 point)
• Set the following states for the button: (3 points)
o Upstate: Create a text box on top of the square with the text ‘End’
o Over State: Change the color of the text ‘End’.
o Down State: Change the color of the text ‘End’. 4
Ending (JavaScript or ActionScript 3.0)
• Import the Image.gif file (1 point)
• The animation stops when the button appears (to let the user click on the button) (2 points)
• The animation continues to play the imported Image.gif movie when the user clicks on the button. (2 points)
• The imported Image.gif file must run at least once completely without looping (2 point) 7