Interaction Design Planning & Prototype ㅤ
Table of Contents
Find out other information about this module below
Module Information
Week 5
➜ Online Class / Ball Bouncing / Car Rotating in Map / TV Homework
We had online classes where we learnt how to do 3 different animations in
Adobe Animate. We started off with learning how to make the ball bounce,
then we learnt how to make the car rotate around the map, and lastly our
homework was to create a tv animation transition. For the ball and the car,
we used motion tween (draw with pencil and attach the ball on the line)
while the tv was using masking.
Figure 2.1 Ball Bouncing
Figure 2.2 Car & Map
Figure 2.3 TV Masking
Week 6
➜ Text Masking & Button
Mr Shamsul taught us how to do a simple masking text effect, but today's
class' main focus was to learn how to make buttons.
Week 7
➜ ILW Independent Learning Week (No Class)
Week 8
Week 9
➜ GSAP tutorial (Movie Clip navigation)
Mr Shamsul taught us how to implement GSAP into our Adobe Animate File. As
usual we start off with creating a folder for this week's lesson, and then
we move our downloaded GSAP folder into the same folder we just created for
our lesson. After that we create a new file and save it in that exact same
folder. We first had to add a actions layer where we opened +include and
selected the gsap.min.js file.
From here, we created a new layer and named it screen. We made 3 rectangles
that are the same size as our stage and then changed it into different
colours and align them next to each other. Converted each of them in movie
clips, and all 3 into 1 movieclip (so total 4 movieclips). We then added an
action which was to paste the code that was in
GSAP
website and changed the text to mc_screen (gsap.to). Write the x coordinates
for our movie clip aligned to the last rectangle, and then exit actions and
move the movie clip, align to the most left (first rectangle).
We then learnt to create and link buttons. It's important to make 3 shapes
and convert them into buttons (symbol > button). Then, make sure each of
them has an instance name. From here, we go back to the actions panel and
selected onto the buttons and selected the "code snippets" button then mouse
click event. We changed the code to "moveScreen" action and changing the
instances. This allows all 3 buttons to have an action that movies the
screen to the destinated x coordinates.
Figure 2.6 Week 9 Tutorial
Figure 2.7 Week 9 Results
We were also tasked a homework to do a zoom in photo by using 2 properties
which is x & y to navigate the button to a specific part of the photo.
Also include a navigation panel (smaller version of the big photo) at the
bottom left corner. I tried using the same method as above but make sure to
use the coordinates of x, y and also include scale to make sure my photo
zooms in and does not show an empty screen.
Got extra 5 marks for my final project by finishing before top 5!
Figure 2.8 Week 9 Scale Activity
Task 2: Interaction Design Planning & Prototype
Task Requirements
Students are required to work on their visual design and start planning
their website's interactive design elements and features. Unlike
traditional static website, when it comes to interactive design where
animations are present, the plan not only should include the layout
visuals but also the animation example or reference. Students can build
their animation or user-reference animation to demonstrate the intended
idea.
Submission:
-
Walkthrough Video presenting the plan and
showing the animation examples and/or references.
-
Online posts in your E-portfolio as your
reflective studies with links to any resource involved in the
creating of the
plan. (i.e.: Figma link, Miro link, etc.)
Selected Topic Idea
To recall on task 1 where I selected my topic idea and did further
concept development, attached below are the final proposal for task
1.
Figure 3.1 Final Proposal for Task 1
Figure 3.1 Task 1 Final Slides
Canva Slides
Below is my slides for my task 2. The slides' content
include:
- concept development
- moodboard
- references & inspo
- wireframes
- prototype with references
- user flowchart
Figure 3.2 Task 2 Slides
High-Fi Wireframes
I have completed the wireframe designs in Canva for reference. This will
make the process of Adobe Animate easier for the final task.
Figure 3.3 High-Fi Wireframes
Walk-through Presentation
A Presentation video where I further explain my idea for the animations.
Link
here.
Figure 3.4 Presentation Video
Working on this task was quite challenging as I had to push myself to
think beyond just static designs. I had to do a lot of research about
the original design of Animal Crossing and still have to keep in mind
that not all animations are doable in Adobe Animate. So I had to keep
the simplicity of it as well.
Besides that, I did learn how to organise my slides better and do
proper research before proceeding with my ideas. I also had to make
sure the UI of the website is friendly (UX) and that it reflects the
original design of the game.
Finishing this task did help me learn a few new things and I am glad
I am able to push through with it.
