Advanced Interactive Design / Project 2

on

19/5/2025--10/6/2025 (W5-W8)

LIU YITONG (0370907)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 2

INSTEUCTION

LECTURE & TUTORIAL
Week 5
·Exercise 1
This week's first class exercise was creating a spider animation.
Fig.1.1 Edit spider animation in the Library
We needed to double-click the spider symbol to edit it in the Library, allowing us to animate the eyes and legs separately inside the symbol.
Fig.1.2 Progress of week5 exercise1
This deepened my understanding of how to individually animate grouped elements in Adobe Animate using nested symbols.
Fig.1.3 Final outcome - week5 exercise1（GIF）
·Exercise 2
In this exercise 2, we learned how to use the Ruler Tool and Masking Technique together to create an animated reveal effect.
Enable the ruler with Ctrl + R, then drag out guide lines to align with the TV edges. This helps with precise placement.
Fig.1.4 The drawing of lines
Create two layers: one for the actual image (masked layer), and one with a rectangle shape that acts as the mask. Then Set the upper layer as Mask and the lower layer as Masked.
Fig.1.5 Layer management
Add keyframes to the mask layer and use Shape Tween to animate the rectangle growing in size, creating a smooth reveal effect.
Fig.1.6 Progress of week5 exercise2
Fig.1.7 Final outcome - week5 exercise2（GIF）

Week 6
·Button exercise
Use Graphic Symbols to animate the appearance of the button (e.g., hover or pressed states).

Action editing
Create a new Action Layer
Use the Wizard to add:
Stop > This Timeline > With this frame

Assign an Instance Name to the button
In the Action Layer, use the Wizard to add:
Go to frame label and Play > This Timeline > (Enter frame label) > With mouse click
This lets the button navigate to a specific frame label when clicked.
Fig.1.8 Action Page
Use Edit in Place to go inside the button symbol and design the different states: Up, Over, Down, and Hit.
Fig.1.9 Edit in Place
Fig.1.10 Progress of week6 exercise
Fig.1.11 Final outcome - week6 exercise

Week 7
In the exercise of Week 7, we combined the masks, button making and Animate with Tween we learned before to create the opening of a website.
Fig.1.12 Progress of week7 exercise
Fig.1.13 Final outcome - week7 exercise
Week 8
Independent Learning Week
Completed project 2
TASK
After receiving feedback from Mr. Shamsul on my previous idea, I began to work on my prototype.
Because Mr. Shamsul advised me not to use illustrator but to look for some ready-made photos to create the website. So I first searched for materials, and then made the pictures with a transparent background using Photoshop as needed.
Fig.2.1 Progress in Adobe Photoshop
Then, after looking for references, I thought the design of the footer was a bit too thin. So, I still used Adobe Illustrator to draw the background graphic of the footer.
Fig.2.2 Progress in Adobe Illustrator
After that, I reconfirmed the flowchart of my website and then began to make my prototype.
Fig.2.3 Flowchart
I first started to produce the home page and about page before and after the plant profile section. After completing these two parts, I began to conceive the production of animation effects.
Fig.2.4 Part of prototype
After I began formulating plant animation part, I harvested in Clément Grellier — Front-end developer image deformation of inspiration, and then think of at the back of the animation part can use transparent PNG plant material found at the bottom of the move to make.
Fig.2.5 The prototype of the plant part
Fig.2.6 Full wireframe

Final submissions


Prototype (Project 2) - PDF Canva Slides

Presentation


After Feedback
After Mr. Shamsul's feedback, I decided to make some changes: 
1. The font size of the "Introduction" interface on the website is a bit too large; it needs to be reduced. 
2. The layout of the pictures in the "Gallery" section needs to be revised; the current layout does not suit the interface style of my website. 
3. The interaction part is a bit too minimal; some parts such as clicking on the plant leaves to enlarge and display details can be added.
I followed these changes and added more interactive parts. The final version is below.

Prototype (Project 2) - Figma（PDF）


Final Flowchart:

REFLECTION

Working on this project was both challenging and fun. I learned a lot about animation techniques in Adobe Animate, like masking, button interactions, and nested symbols. At first, animating the spider and creating smooth transitions felt tricky, but with practice, it became easier. 

I noticed that small details matter—like aligning elements precisely with rulers or testing button interactions multiple times. Also, getting feedback was super helpful. Mr. Shamsul’s suggestion to use ready-made photos instead of Illustrator improved my workflow and made the design look more polished. I also realized that planning animations (like the plant movement) beforehand saves time later.

The more I experimented, the more creative I became. For example, using transparent PNGs for the plant animations gave a cool floating effect I hadn’t thought of initially. I also found that breaking tasks into smaller steps (like finishing the homepage first) kept me organized. Sometimes, simpler solutions (like masking) worked better than overcomplicating things. Overall, this project taught me to be flexible and keep refining ideas until they work smoothly.
FEEDBACK

1. The font size of the "Introduction" interface on the website is a bit too large; it needs to be reduced. 
2. The layout of the pictures in the "Gallery" section needs to be revised; the current layout does not suit the interface style of my website. 
3. The interaction part is a bit too minimal; some parts such as clicking on the plant leaves to enlarge and display details can be added.
I followed these changes and added more interactive parts. The final version is below.
But the overall layout is very good.

Comments

Post a Comment