ADVANCED INTERACTIVE DESIGN / EXERCISES
╎Gwendalyn Firly Bong / 0374580
╎Bachelor of Design (Honours) in Creative Media
╎Exercises
TABLE OF CONTENTS
I. Instructions
II. Lectures
III. Process
IV. Feedback
V. Reflection
I. INSTRUCTIONS
II. LECTURES
Lecture notes are in Task 1 Blog
Lecture notes are in Task 1 Blog
III. PROCESS
Exercise 01 - Asset Creation
The objective for this task is to design a functional "Smart Assistant" avatar or UI widget using vector tools, using Adobe Animate.
To start, I went on Pinterest to find inspiration for my character. After getting confirmation that I didn't have to make a robotic-esque character, I decided to go for a cute cat character.
Figure 1.1: Pinterest References
Figure 1.1: Pinterest References
As for the style, I decided to go for a low-poly inspired cat that would be easy to draw out as a beginner in both Animate and illustrating.
Figure 1.2: Original Sketches
Figure 1.3: Final Sketch
Figure 1.2: Original Sketches
Figure 1.3: Final Sketch
I created 4 sketches, and after several votes from my friends, I decided to go with the right character.
Figure 1.4: Animate Process
Figure 1.4: Animate Process
After completing the character, I also drew out a very simple background to complement the character, since the main animation would involve the background and the weather.
Figure 1.5: Animate Process
Figure 1.6: Character Final
Google Drive Link:
Figure 1.5: Animate Process
Figure 1.6: Character Final
Exercise 02 - Idle Motion
For exercise 2, I decided that my character would have 3 main motions: The tail, blinking, and a slight umbrella movement.
Figure 2.1: Tail Moving Animation
Figure 2.1: Tail Moving Animation
For the eyes, I started by creating a few new assets, one for the half blink and the closed eyes. Additionally, I also separated the eyelash and the eye layers.
Figure 2.2: Eye Blinking Animation
Lastly, I added slight movements to the hands and umbrella.
Figure 2.3: Umbrella Movement
Figure 2.4: Final Idle Animation
Google Drive Link:
Exercise 3
For exercise 3, we were tasked to add a final motion and a button to activate it.
Figure 3.1: Process
Previously, I made a mistake when creating the symbols for my character. Instead of making it into a Movie clip, I made it into a Graphic. Mr Shamsul quickly taught me how to fix it, so I started off this exercise by fixing it.
Figure 3.2: Process
Figure 3.2: Process
I then added a simple, circular button. When clicked, the color would turn pink.
Figure 3.3: Normal Button
Figure 3.4: Clicked Button
Figure 3.3: Normal Button
Figure 3.4: Clicked Button
For the final animation, I wanted to make a simple background change, which connects to the umbrella/rain theme of my character.
Figure 3.5: Final Animation
Google Drive Link:
Figure 3.5: Final Animation
Google Drive Link:
Netlify Link:
IV. FEEDBACK
Week 3:No class!
Week 4:I showed Mr Shamsul the sketch of my characters, and gave him the general lore or idea of the animation I wanted for exercise 2 and 3. He approved and told me to go ahead and start on animate.
Week 5:
I showed Mr Shamsul the final character and he initially looked confused, but after explaining my ideas he approved.
Comments
Post a Comment