ADVANCED INTERACTIVE DESIGN - EXERCISES
29/08/19 - 03/09/19 (Week 1 - Week 6)
Yeap Phay Min (0331073)
Advanced Interactive Design
Exercises
LECTURE NOTES
05/09/19 (Week 2)
MICROINTERACTIONS
In this class, we were introduced to microinteraction. Microinteractions are defined as the contained product moments that do one small task. It is essentially small moments where the user and design interact. It can also be considered as events which have one main task and they’re found all over your device and within apps. Their purpose is to delight the user, to create a moment that is engaging and welcoming.
Examples:
INTRO TO ADOBE ANIMATE & IN-CLASS EXERCISES
29/08/19 (Week 1)
In the first class, we were introduced to Adobe Animate. I've never used it before so naturally I was nervous about it yet also excited to learn how it works. Before starting out on the actual exercises, we did some simple tasks on Adobe Animate to get ourselves familiarised with some of the tools.
For the first task, we were told to draw a vase and let me just say that I struggled with drawing it. My lines all seemed wobbly and overall not like the shape of a vase. I tried using the line tool at first but ended up using the pen tool as my lines looked better with it. We also got to play around with the gradient tool.
 |
| Fig 1.1: Playing around with the colour & gradient tool |
 |
| Fig 1.2: Outcome of the vase |
For the second tasks, we learned how to use the help of grids to draw something. We ended up following the example given and drew out 3 cubes. We also learned that the "background" of the canvas is known as "stage" and we could change the colour of it.
 |
| Fig 1.3: Drawing on grids |
Then, we learned about symbols—graphic, movie and button. We tried out a button and learned how to add keyframes and change the colours when it is hovered and stuff.
 |
| Fig 1.4: Learning about buttons and keyframes |
To preview in our browser, we learned to click command+enter.
 |
| Fig 1.5: Preview on browser |
05/09/19 (Week 2)
In the second week of class, we were taught about shape tween and classic tween on Adobe Animate. For the first task, we learned how to use shape tween to animate a square into a circle. We also added a line at the bottom and used keyframes to move it up and down, so when it's previewed it resembles a guitar string.
 |
| Fig 2.1: First Task |
 |
| Fig 2.2: First Task |
 |
| Fig 2.3: Second Task |
 |
| Fig 2.4: Second Task |
 |
| Fig 2.5: Third Task |
12/09/19 (Week 3)
In this week we were introduced to more things in Adobe Animate. We learned about gotoAndPlay and gotoAndStop.
 |
| Fig 3.1: Adding the numbers |
 |
| Fig 3.2: Scripting |
Some notes on the scripting I took down from the exercise:
this.stop();
this.gotoAndStop(5); // keyframe number
this.gotoAndStop(“label name”); // label name
this.gotoAndPlay(5); // keyframe number
this.gotoAndPlay(“label name”); // label name
this.movieclipname.stop();
this.movieclipname.gotoAndStop(5);
this.movieclipname.gotoAndStop(“label name”)
this.movieclipname.gotoAndPlay(5);
this.movieclipname.gotoAndPlay(“label name”)
26/09/19 (Week 5)
This week we learned about scripting and how we can use it to create buttons for an interface. Our second exercise revolves around this so we started off with an in-class exercise on how to do this.
 |
| Fig 5.1: Adding the codes |
 |
| Fig 5.2: Adding motion to the elements |
Some notes on the scripting I took down from the exercise:
var _root = this;
this.btnChicken.addEventListener("click", btnChickenClick);
this.btnDuck.addEventListener("click", btnDuckClick);
this.btnDog.addEventListener("click", btnDogClick);
function btnChickenClick(p)
{
_root.gotoAndPlay("labelChicken");
}
function btnDuckClick(p)
{
_root.gotoAndPlay("labelDuck");
}
function btnDogClick(p)
{
_root.gotoAndPlay("labelDog");
}
Or if separated
exportRoot.gotoAndPlay(“labelDuck”)
03/10/19 (Week 6)
This week we learned about movie clips and how we could use them. We created simple shapes and changed the colours so that when it's previewed it would have a gradient when the mouse it over it.
 |
| Fig 6.1: Using movie clip |
 |
| Fig 6.2: Using movie clip |
 |
| Fig 6.3: Adding the codes |
Some notes on the scripting I took down from the exercise:
this.chicken.addEventListener("click", chicken_click);
this.chicken.addEventListener("rollover", chicken_over);
this.chicken.addEventListener("rollout", chicken_out);
this.chicken.mouseChildren = false;
stage.enableMouseOver(10);
function chicken_click(e){
alert(e.target.name);
}
function chicken_over(e){
e.target.gotoAndPlay("mouseover");
}
function chicken_out(e){
e.target.gotoAndPlay("mouseout");
}
EXERCISE 1: MICROINTERACTION
05/09/19 (Week 2)
For this week's exercise, we are required to create a simple interface, using both the shape and classic tween. We got to learn about micro-interactions in class, and view some examples that would give us some idea on what we can design. I decided to design a weather app interface. I didn't know what exactly I wanted to illustrate and animate yet so I just started with some sketches.
I decided to compile the progress in a set of slides.
Progress Slides:
Outcome of the Static Screens:
 |
| Fig 7.1: Static Screen 1 |
 |
| Fig 7.2: Static Screen 2 |
Outcome of Interface:
 |
| Fig 7.3: Outcome of Interface |
EXERCISE 2: BUTTON SCRIPTING
26/09/19 (Week 5)
In this week we got to learn creating buttons using Adobe Animate. For the second exercise, we are required to come up with an interface with around 3 screens, making use of buttons as well as simple micro-interactions.
I also decided to compile the progress in a set of slides.
Progress Slides:
Outcome of the Static Screens:
 |
| Fig 8.1: Static Screen 1 |
 |
| Fig 8.2: Static Screen 2 |
 |
| Fig 8.3: Static Screen 3 |
 |
| Fig 8.4: Static Screen 4 |
On Web:
https://jessicayeap.000webhostapp.com
FEEDBACK
12/09/19 (Week 4)
The outcome of the interface for the first exercise is good.
03/09/19 (Week 6)
For the second exercise, the transitions between pages could be smoother by making the pages "overlap" over each other when a button is clicked. Overall, the design is okay, but the way I animate and transition between the pages should be updated.
17/10/19 (Week 8)
The second attempt is better. Upload the files into webhost and submit the link on Google Classroom.
REFLECTION
EXPERIENCE
With the exercises for this module, I got to be introduced to Adobe Animate. Before this I have never used the softwares so going into it was pretty intimidating. However through the in-class exercises as well as the two main exercises of microinteraction and scripting, I was able to learn these new skills. I did experience a lot of challenges along the way as I was sometimes confused with how it all works, especially the scripting part.
OBSERVATION
I observed that Adobe Animate seemed to be more useful (I guess?) than Adobe After Effects, as with Adobe Animate we can easily add motion to something by clicking and dragging, and using classic tween or shape tween. I also observed that it is a little more complicated then After Effects because of all the scripting but I figured it's actually a useful tool when it comes to creating buttons.
FINDINGS
I found that it was really satisfying and rewarding to view the outcome of the exercises but also frustrating when it doesn't work, especially with the second exercise of scripting. I also noticed that I prefer to draw using Adobe Illustrator and import the illustrations into Adobe Animate, rather than drawing in Animate straight away. I guess I'm just more used to the way Illustrator works.
Comments
Post a Comment