Advanced Interactive Design | Exercises
Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
Task 1 : Exercise
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Animate Exercise
4. Feedback
5. Reflection
LECTURES
WEEK 2 - Adobe Animate
! when drawing / adding a shape, turn on the Object Drawing tool (J)
As an exercise, we are asked to trace a boat drawing using the tools we just learnt.
WEEK 3
No class
WEEK 4
Mr. Shamsul taught us basic animation in Adobe Animate by animating a
spider. We tried to animate its legs and making it move up & down
across the screen
As the first stage of this exercise we are asked to make a character that
we're going to animate later on in Adobe Animate.
Ideation
Before looking for inspiration, I already know that I want to make derpy
and dumb-looking characters. I want to make their face simple but show
subtle expressions
|
| Sketch #1 |
I decided to make a character using bakchoy as the body and after
consulting with Mr. Shamsul, he said it was too basic and I needed to make
the character to do a certain activity.
After more consulting me and Mr Shamsul agreed that we can make the bakchoy
wet and that he will blow dry his leaves later as a part of the
animation.
Then I start making the character in Adobe Animate.
Then I start making the character in Adobe Animate.
After a few trials, I found it hard to do the overlapping leaves and I quickly realized how it's gonna be hard when I want to animate it.
So I tried to use another sketch I have in Sketch#1 which is the cooking
character.
But I wasn't sure how to do the final movement for the 3rd exercise, so I ended up not using this character.
After a few sketching and browsing for inspiration, I found photos of
people riding skateboards and thought it would be fun to animate
it.
.jpeg)
|
| Sketch #2 |
I had a vision on how to animate it and then I moved to Adobe Animate to make the final asset.
Adobe Animate
I wasn't sure on how to make the assets and how to separate the layers to
make it easier to animate later. So I decided to separate everything
first.
After making the character, I add a simple background to make it feel more complete.
|
| Final Asset Creation |
>Exercise 2 | The Motion - Idle
For the idle animation, I wasn't sure how much movement I had to make, so
after consultation Mr. Shamsul suggest that I can make the character to
move its feet and try to push the skateboard.
For the movements such as the legs, arms and ears, I mostly use rotation and changing the anchor points before it.
And for the skateboard and its wheels, I tilt it and slightly move every
after few frames to make it look like its moving.
I had several trials to make the straps and its clothes to make it look
like it's moving. I mainly break it down and tried to change its shape and
use Shape Tween at the end to make it smooth. However it didn't work even
after several trials. So I decided to save it for the last
exercise.
After that I just move everything from the back to the front of the frame
and use Classic Tween.
In total I have 120 frames or 3 seconds long animation.
>Exercise 3 | Trigger Button & Action
After consulting and brainstorming on the last action, I decided to go with a jumping animation.
Since I mistakenly put my animation in a graphic, I had to cut and copy everything to a movie clip and start the 3rd exercise there.
For the jumping animation, on my first try, I tried to select the whole thing and adjust the rotation and placement. However, after seeing the preview, some of the parts were flying around. I realized it is because of the anchor points and the rotations.
And after that mistake, I start with separating the layers and adjust its anchor points to ensure it rotates simultaneously.
Additionally, I adjusted the effect of the classic tween so that the animation will be smoother.
Lastly I made the button to be an arrow shape and added the hover micro interaction. After finishing all of the animation and adding the button I tied everything together with the Action (F9). For publishing, we were asked to publish the animation on Netlify.
FINAL OUTCOME
Netlify Link ! https://feilyciaanimatesgeorge.netlify.app/
FEEDBACK
WEEK 3
General Feedback - No class
WEEK 4
General Feedback - Showed him my sketches (Sketch#1) and asked to make a more detailed character or asked to make the character to do a certain activity
WEEK 5
General Feedback - Asked to make the rabbit fall on the third exercise
WEEK 6
General Feedback - Online class
REFLECTIONS
Experience -
Observations -
Findings -
Comments
Post a Comment