SHIMANLIN,（0375858)
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises
TABLE OF CONTENTS
Instruction
Lecture
Exercises
Feedback
Reflection
INSTRUCTIONS
LECTURE
Week 2: Introduction to Adobe Animate & Exercise
This week, Mr. Shamsul introduced us to Adobe Animate and taught us the
basic settings and tools.
During class, we practised drawing a beach ball and a sailboat to get
familiar with the software. We also learnt tools and functions such as Break
Apart, which helps separate shapes for colouring and editing.
Fig 1. Screenshot of Animate exercise, beach ball
Fig 2. Screenshot of Animate exercise, sailboat
Week 4: Class Exercise – Animating
This week, we learnt the basics of animation in Adobe Animate. Mr. Shamsul
showed us how to create animation using Shape Tween by right-clicking
between frames. For Shape Tween, the objects do not need to be converted
into symbols first.
We were also reminded to uncheck Auto Keyframe to avoid creating unnecessary
keyframes while editing. During the exercise, we explored the differences
between Shape Tween and Classic Tween and practised using both methods in
simple animations.
Fig 3. Screenshot from animation practice, ball
Fig 4. Screenshot from animation practice, spider
The class exercise helped me better understand how movement and transitions
work in Adobe Animate.
Week 5: Class Exercise
During Week 5, Mr Shamsul taught us more about animation techniques in Adobe
Animate. In class, we learned how to create animated web openings using text
animation, shape tween, classic tween, masking, layers, and alpha fade
effects.
Some important notes I learned from the exercise are:
- Graphic symbols only work properly inside Movie Clip symbols.
-
Classic tween should be inserted at the beginning frame in the timeline.
- Mask layers must always be placed on top.
- Objects need to be ungrouped before using shape tween.
-
Using Movie Clip symbols is easier and more flexible compared to Graphic
symbols.
Fig 5.Text animation
This exercise helped me understand better how timelines, layers, and tween
animations work together in creating smoother and more interactive
animations.
Week 7: Class Exercise
In class, we need to link each navigation button at the top to its corresponding page.
Fig 6.Navigation button
Week 8: Class Exercise
In class, we downloaded four landscape images and arranged them on the whiteboard with no gaps.
We converted them into movie clips and assigned instance names, then renamed the layers for clarity.
A 'Navigation' layer was added with buttons, and the setup was duplicated four times.
We also imported the GSAP JavaScript template, added an 'Action' layer (F9), included gsap.min, and recorded the coordinates of each image
Fig 7.Code
EXERCISE
Exercise 1: Asset Creation
Objective: Design a functional "Smart Assistant" avatar or UI widget
using vector tools.
The Task: Using the drawing tools in Adobe Animate (Pen, Oval,
Rectangle), create a character or a central UI hub.
The character I created is a cartoon version of Aespa Karina.
Fig 1. Prototype
I used the image as a tracing layer and then started drawing the
character in Animate using the pen tool.
Fig 2. Layers
I separated the character's various layers, named them, and added labels
to make subsequent animation production easier.
Fig 3. P
roduction process
Finished product
Exercise 2: The Motion
Requirements:
Nested Animation: Double-click your main symbol to animate inside its
own timeline.
The "Breathe" Effect: Use Classic Tweens to create a 40-frame loop.
Polishing: Apply Easing (Classic Ease In/Out) to the tweens so the
movement feels organic and high-end, not mechanical.
I started adding motion to some of the animations.
Fig 5.Production process
Final exercise 2
Fig 6.Final exercise 2
Final submission
Exercise 3
Requirements:
For exercise 3 submission, you are required to:
Upload the file to netlify;
In order to make it work, you need to remane the html file as
index.html (You know the drill).
Upload the entire folder that contains the html file, js file and
images folder. Please do not upload the .fla file to netlify.
I started adding buttons and animation effects.
Fig 6.Production process
Final submission
Animate File
Netlify Link
Screen recording demonstration
FEEDBACK
Week 4
Specific feedback: Mr Shamsul said that my character design was too simple and needed to be further developed with more details.
Week 6
Specific feedback: Mr Shamsul said that my buttons were placed too far apart and needed to be positioned closer together.
REFLECTIONS
Experiences
Throughout this project, I gained experience in creating an interactive character and developing a web-based animation using Adobe Animate. I learned how to use vector tools to create assets, organize layers, and prepare the character for animation. The process helped me understand the importance of planning and structure when creating digital content.
I also gained experience in applying animation techniques such as nested animation, Classic Tweens, and easing effects. Through this process, I learned how small movements, such as breathing effects, can make a character feel more natural and engaging. I also explored adding buttons and interactive elements, which improved my understanding of user interaction and interface design.
Observations
During the development process, I observed that character details and visual elements greatly affect the overall quality of a design. Based on Mr Shamsul’s feedback, I realized that my initial character design was too simple and needed more details to create a stronger visual identity.
I also observed that the placement of interactive elements, such as buttons, can influence the user experience. After receiving feedback about the buttons being placed too far apart, I understood the importance of creating a clear and balanced layout for better navigation.
Findings
Through this project, I found that creating an interactive design requires a balance between visual creativity and technical skills. A successful animation is not only about appearance but also about smooth movement, clear interaction, and user-friendly design.
I also found that feedback and revisions are important parts of the design process. By improving my character design and interface layout based on feedback, I was able to develop a more polished and effective final outcome.
.png)
.png)
Comments
Post a Comment