Adv. Interactive Design: Exercises & Project 1 - Interactive Web Application

Advanced Interactive Design 31.8.22 - 30.10.22 (Week 1 - Week 9)

Wendy Seto / 0348805
Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercises: Adobe Animate & Project 1: Interactive Web Application

PRACTICAL

Exercises

After being introduced briefly to Adobe Animate and went through the basic functions including the tween tools, Mr. Razif told us to create a square in and gave a list of instructions on how we should animate it. 

1. Animate the box from top left to top right.

2. Animate the box from top right to bottom right.

3. Animate the box from bottom right to bottom left.

4. Animate the box from bottom left to top left.

5. Animate to the center.

6. Animate to become a rabbit.

7. Blink the rabbit 3 times.

8. Shape into a circle.

9. Animate to the top center.

10. Make it bounce.

11. Use easy ease.

fig 1.1 in-class practice 7/10/22

*my rabbit eyes look a bit cacat and I can't stop laughing at it in class.

Project 1

After deciding on going with a cake business, I began collecting cake pictures and mask them one by one using Adobe Photoshop.

fig 2.1 masking the product images in photoshop

fig 2.2 images to use

Then, I started designing my app interface in Adobe Illustrator.

fig 2.3 design draft

fig 2.4 colour exploration

fig 2.5 final designs

Finally, the most traumatizing stage was the animating process. I was very new to Adobe Animate and everything was just very confusing especially when the interactive buttons didn't work.

fig 2.6 animating progress

I had so many copies of the animating file which stressed me out even more *wondering why did I do this to myself*.

fig 2.7 file copies // a mess

fig 2.8 interactive web application.html

fig 2.9 interactive web application walkthrough.mp4

---

FEEDBACK

Good job!