Assignment 1 – Digital animation
Due Date: 5pm, Thursday of Week 7. Worth 20%
This assignment will test your Flash-based digital animation skills and is worth 20% (Type A) of your overall course mark.
This assessment task examines the following Learning Outcomes and Attributes:
K2. Relate multimedia design methodologies to the lifecycle of a multimedia project;
K4. Relate legal and ethical concerns to a multimedia project and associated wider society;
S1. Reproduce a multimedia design from a set of specifications;
S2. Select and apply appropriate multimedia approaches to solve a real world design;
S3. Outline issues of ethical and legal natures which may impact a multimedia project;
S4. Select and appropriate multimedia tools to author a product.
A1. Select appropriate design principles to design multimedia products that align with client and project expectations;
A2. Operate appropriate software packages to build multimedia products that align with client and project expectations.
This assignment requires you to develop a simple digital animation using Adobe Flash.
In the Assignment 1 section of Moodle there is a zip file named “digital_animation.zip” that is available to download – when unzipped this will produce the following files:
• Ten (10) images of digits (0.jpg to 9.jpg). These images will be used for your student number in the animation specified below.
• An Ass1_Sample.swf file showing a sort of animation. However, please note that you need to note that the animation in the sample file is based on a very different specification; so, you are required to follow the specification given below.
The animation must incorporate the following images:
• An image of yourself – it can be whatever image you like (eg. You on holiday, at the beach, at university, etc), but must include yourself. This image will be used as a background image (in step a and b below).
• An image of your home town. This image will be used as a background image too (in steps b, c, d and e below).
• The images of the digits provided to make up your student number (in step c below).
• An image (different to that used for steps a & b) of yourself that you can select your head (from neck up) and cut it out to create a new image. Your image must be neatly cut out from its original photo. When you cut yourself out and save the image, the background should be fully transparent. You will have to save it in a correct file format for it to be successfully shown against the background in Flash. (in step f below).
Before you begin, keep these requirements in mind:
• The animation must be 800 pixels wide by 600 pixels high, with a blue background (#0000FF) for the stage, and run at 15 frames per second.
• Each layer in your Flash file should be named appropriately.
• Each event must be displayed for a minimum of 2 seconds and a maximum of 3 seconds. For example, entering an animating image into the stage and leaving should take between 2 and 3 seconds.
• Each event should overlap with the previous event (Except for the first step (step a) where your own image fills the screen). Starting at step b, as one image leaves the screen, the next image should be entering the screen simultaneously.
• The animated sequences for this assignment must be tweened using the techniques shown in the lab classes (motion, shape and guide). Frame-by-frame animation will not be accepted.
• All number images used throughout this whole animation must fill the screen exactly with no overlap and perfectly fit the 800px by 600px stage area. Feel free to stretch and skew images to fit.
• Make sure that your text is using a font that is easily readable and if it overlaps the self-image picture make sure that it is highly distinguishable against the image.
Sequence of the Animation:
a) The animation should start with the image of yourself (on-screen); it needs to be initiated from a locked width/height ratio (e.g. width of 50px) and scaling up to fill the entire window (800px by 600px) at the end of the first three seconds.
b) The image of yourself needs to be fading out and be replaced by fading in image of your hometown. This image needs to be static as the background for the point ‘c’ below.
c) According to the sequence of the digits in your student number, each image of the digits provided needs to enter the stage from a different corner or edge (i.e., top, bottom, left, right, top-left, top-right, bottom-left or bottom-right) while the other image leaves from another corner of edge (i.e., top, bottom, left, right, top-left, top-right, bottom-left or bottom-right). Make sure you use different variety of positions for entering and leaving the stage.
• In these animations, you need to incorporate each of the following features at least once (each animation should only do one of these):
i. Fading in,
ii. Fading out,
iii. Performing a double clockwise rotation to roll on the screen,
iv. Performing a triple anti-clockwise rotation to roll off the screen, and
v. Tween easing.
vi. Transformations (skew / shrink / enlarge / etc).
• One of these above features must be incorporated for each digit. However, overall all of these features need to be demonstrated at least once in their animation.
d) After animating the last digit of your student number, you need to use a text based representation (not images) of the digits in your student number in sequence ‘bounce’ across a path on the background image of your home town screen. You must use motion guides, and clever positioning so that the digits appear to ‘interact’ with the background image (e.g. bouncing off & around objects). Be as inventive as you wish here but make sure that your numbers clearly show out opposed to the background image. Your numbers must be 50pt in size and can be of any readable font style. Your student numbers must travel across the guide one digit at a time.
e) Next, the image of your home town should shrink and change into a 5 sided pentagon shape before leaving the stage. This requirement of the assignment is worth 4 marks overall, so please spend some time on it. You must use a shape tween to achieve this effect. (hint: you can’t shape-tween a symbol!)
f) The animation should end with a screen showing the static cut-out photographic image of yourself in an appropriate position – on the left or right. This image must have been cut out neatly from the original photograph and only show yourself. You will have to use some form of transparency and save it in a correct file format for it to successfully show against the coloured background in Flash. This image must not occupy more than half of the screen.
• Finally, the roll of the credits! Have the following text entering from an appropriate position (the opposite side to your photograph position) on the screen showing:
i. An acknowledgement of your lecturer & tutor.
ii. Your student number;
iii. Your name;
iv. A motivational phrase (including an acknowledgement of the author).
• Image and credits should remain stationary on the screen for last 5 seconds.
You need to provide a table specifying the layout of your design. The following table provides an example for the type of information that is required to be included:
0-3 seconds Animation starts with image of myself at a 50px width with aspect ratio locked. By three seconds it zooms in to fill the screen.
4-6 seconds The image of myself fades out, as the image of my hometown fades in.
7-9 seconds The hometown image remains on screen, as the image of my first digit in my student number “3” moves in from the top-right corner while performing a double clockwise rotation.
All students must submit the saved .fla and published .swf files, as well as their table in a document specifying the timing layout. (Additional ITECH5004 requirements below)
The sample solution illustrates an example of the animation based on different specifications. It is just to give you an idea of the Flash Animation. Please refer to your specific requirements
ITECH5004 students only:
Before the last animation, for duration of around 10 seconds, you must create an animated sequence showing off some of FLASH’s more complex features (none of which were taught in class). During the 10 second sequence you must employ at least three of the following techniques (you may think of others but your tutor must approve of them first):
• Non-linear interpolation;
• Soundtrack (copyright safe);
• Colour tweening;
• Flash 3D animation;
• Mouse over effects;
• Button controls.
Be as creative as possible and show off your Flash skills.
In addition to the above outlined requirements of both parts of this assignment you must also do the following:
Submit a Word document which describes the steps which you followed in completing the features included within the additional assignment task. Think of this as creating a tutorial outlining step by step instructions of how to employ the techniques you have chosen to produce the features in your animation (when describing the steps think of how a lab tutorial is written). In your document also outline how you solved any copyright issues that may have occurred; and any difficulties that you had in completing the assignment, how you overcame them and what lessons you have learnt that will make Assignment 02 easier for you to complete.
Submission and marking process
Create a single zip file containing all of the files required for your submission (check requirements above). Submit this as a compiled zip file for Moodle submission.
Assignments will be marked on the basis of fulfilment of the requirements, and the quality of the collage & animation.
In addition to the marking criteria, marks may be deducted for failure to comply with the assignment requirements, including (but not limited to):
• incomplete documentation
• incomplete submissions (e.g. missing files)
Refer to the Course Description for details of the policy on marking of late assignments. Any applications for extensions or special consideration should be made as early as possible, and in all cases prior to the deadline for submission.
The marks distribution is explained on the next page.
Assignment 01 - Digital Animation
Student Name: Student ID:
Marking Criteria Weight Mark
A table specifying the layout of the animations 4
Appropriate 2 starting images (yourself & hometown) 2
Appropriate credits image (head cut-out with transparency) 2
Correct animation properties 3
Appropriate use of angle/edges for enters/leaving the stage 4
Images entering and leaving the screen simultaneously 2
Initiating tweening from a locked width/height ratio (e.g. width of 50) and scaling up to fill the entire window 2
Digit animations incorporates each of the following features at least once:
Fading in, 1
Fading out, 1
Performing a single/double clockwise rotation to roll on the screen 1
Performing a triple anti-clockwise rotation to roll off the screen 1
Tween easing 1
Transformations (shrinking, enlarging, skewing etc) 1
Shrinking and changing the background image into a 5 sided pentagon 4
Creative and appropriate use of text animation over background image (motion guide) 4
Credits – all requirements met 4
Overall design & creativity 3
Layers must be named appropriately or lose up to 4 marks -4
.fla, .swf (at least .fla needs to be present for marking. -2 if not) -2
Additional Requirements (ITECH5004 students only)
Advanced Flash techniques 10
Report on methods used to create animation 10
ITECH1004 Assignment Total: 40
ITECH5004 Assignment Total: 60
Contribution to unit mark: 20% Type A