Advance Interactive Design // Project 1: Interactive Web Application

March 31, 2022

Advance Interactive Design // Project 1: Interactive Web Application

24/08/21 - 21/09/21 (Week 1 - Week 5 )
Caitlyn Aurelia Tjandra (0339381)/BDCM
Advance Interactive Design
Project 1 - Interactive Web Application

Lecture Notes

Week 1 : Module Briefing

Since this is the first week, we were briefed upon what we will do in this module. Mr. Razif showed us some senior's work in which we will do in this project.

Week 2 : Adobe Animate

This week we finally start on our first exercise. We were introduced to adobe animate which was another adobe app that we were required to learn for this module. We learn some basic animations and codes that would help us when designing our websites. Here are some notes of the animation tutorial:

1. Movement
   - 1 second -> 60 frames
   - shift -> perfect circle, release -> free form
   - draw shape then convert to symbol
   - Symbol : movie, graphic, button
   - Library : history & preset
   - Should have a start and end point
   - insert key frame at the end point of your desired time
   - right click between key frame and click classic tween
   - properties -> classic ease -> ease in -> quad

2. Play with shapes
- scale
- rearrange -> block -> add new key frame -> move

3. Play with effect
   - key-frame -> object -> color effect -> alpha -> 0 ( opacity )
   - To end animation: right click -> action -> this.stop(); !(if not, it will keep on looping)!
   - shape tween ( can only tween shapes)
   - morph circle to square -> right click -> shape tween
   - could do multiple shapes

Task

Excercises

Task 1: Simple Animation

For our first animation, we were told to use key frames and classic tween and make the circle move around the border and eventually become bigger.

Fig 1.0 Classic Tween

For our second animation, we learn to add key frames in between to create an added motion on the whole animation. We were told to make a bouncing ball in which the ball would be squished when reach the ground and comes back up.

Fig 1.1 Shape Tween

The last animation was a little more difficult in which we created a shape tween and a combination of action code which we will be creating an interactive button.

Fig 1.2 Combination