ADVANCED INTERACTIVE DESIGN | TASK 2: INTERACTIVE DESIGN PLANNING AND PROTOTYPE

-

ADVANCED INTERACTIVE DESIGN | TASK 2: INTERACTIVE DESIGN PLANNING AND PROTOTYPE

18.05.2025 - 10.06.2025 Week 05 - Week 08
Tyra Franchesca Valerie Anthony / 0368223 / Bachelor of Design (Honors) in Creative Media 
Advanced Interactive Design / Taylor's University 
TASK 2: INTERACTIVE DESIGN PLANNING AND PROTOTYPE 

LECTURES & ACTIVITIES

Week 6 

This week’s online class is being held in place of the usual in-person session due to the ASEAN Summit. For our activity, we’ll be working on creating an animated, clickable button. The process begins by preparing the file and setting up the stage. Once that’s done, we’ll draw a rectangle and add some text on top of it. Both the rectangle and the text will then be converted into a graphic symbol. Afterward, we’ll select the two items together, duplicate them, and place the copy on a new layer. The final step is to turn this copy into a button symbol, ready for animation and interactivity.


Fig 1.1 Editing button Week 06

This week, I discovered a new feature: interactive buttons using actions. To start, we first right click the keyframe and choose the Actions option. There, we start setting it up by clicking on Add with Wizard, which guides us through the setup.


Fig 1.2 Action Script Preview for Button Week 6

Finally, to end the animation, we created another action at frame 40 and selected the stop command. This concludes the timeline sequence. The entire preview and final outcome displayed below can be seen.

Fig 1.3 Timeline Preview Week 6

Button Exercises:  

Fig 1.4 Button Exercises Final Week 6

Fig 1.4.1 Final button Week 6 


Week 7

This week we had a class session directed to making an opening animation with a button that, when clicked, goes directly to the main website. Mr. Shamsul gave us an example from the FWA Awards, and so we were tasked to create a similar style of animation. Below are some snapshots showing the work we made.

Fig 1.5 Progress Week 7 

A good trick I've discovered is that if the shape tween has gone awry, using Break Apart (Ctrl + B) will normally sort it out. We also did a masking effect for the text so that it could emerge smoothly from in front of a line. We added a fade-in effect and then put in a button which leads visitors on to the next page. By using action scripts such as those in our Week 6 exercise, we could in fact interact with and activate the button. Here is the end result.

Fig 1.6 Progression Week 7

Week 7 Exercises: 
Fig 1.7 Final outcome Week 7 

INSTRUCTIONS
MIB BOOKLET:


TASK 2

Interactive Design Planning and Prototype 

In this assignment, we were instructed to take note of the visual design and begin considering a website's interactive elements and features. Interactive web design, unlike conventional static websites, involves animations, and therefore the planning must go beyond simple layout visuals. It should also include references or examples of the intended animations. Students are encouraged either to design their own animations or use reference animations to help communicate their design concepts.


Requirements:

Walkthrough Video

Create a walkthrough video that presents your website plan and shows the animation examples and/or references used to support your design ideas.

E-Portfolio Post
Create a reflective blog post in your online e-portfolio. The blog post must include:
A concise summary of your planning process and key takeaways
Citations for any resources used in planning the design (e.g., Figma, Miro, animation references, etc.)























Comments

Post a Comment

Popular posts from this blog

Packaging and Merchandising Design/Exercise

-
Image
  Packaging and Merchandising Design / Exercise 23 Sep 2023 - 2 Oct / week 1 - week 4  Tyra Franchesca Valerie Anthony Packaging & Merchandising Design / Bachelor of Design (Hons) in Creative Media / Taylor's University  INSTRUCTION EXERCISES Exercise 1: Case Study Analysis final case study Exercise 2: Box-Making Fig 2.2 Hand Cream Fig 2.3 Toothbrush box Fig 2.5 Box # 1 Hand Cream  fig 2.6 box #2 Sun Cream REFLECTION  FEEDBACK week 4  make a new design of the cream packaging for week 5 to come and show the design  week 3  make measurements simple as the design  make everything align do not make anything larger than the design  continue and submit in drive week 2  do not just create a design choose one is easy to do and work with week 1  update the google drive  OBSERVATION During this design process learning something new that would be helpful for me to learn as taking a cream and toothpaste to create a new box for the...
Read more

Publishing Design: Task 3 (B)

-
Image
 Publishing Design: Task 3 (B) on December 19, 2024 05/12/2024 - 02/01/2025 (Week 1- Week 14) Tyra Franchesca Valerie Anthony (0368223) Publishing Design | BDCM | Taylor's University Task 3B: Brand Guideline Interactive PDF LECTURE All lectures are in Task 2 and Task 3  INSTRUCTIONS Task 3B was a collaboration with Brand Corporate Identity where we are to create and make an interactive brand guideline. Process  We started the guideline, i want to still keep the same as my task 3 positioning PPT, i started by creating m y grids and guidelines for my layout especially in the first page. Fig 1.1 grid guideline From the contact time class with miss Lilian said that the structure for the second layout is better than the first one with the 4 columns will be better for my type of layout with adding photo and text. When adding the buttons and the rest of the aspect i see that is starting to come together and well aligned with one another. Fig 1.2  I also made design my color...
Read more

Publishing Design: Taks 3 (A)

-
Image
 Publishing Design: Taks 3 (A) 24/09/2024 - 11/09/2025 Tyra Franchesca Valerie Anthony (0368223) Bachelor of Design (Hons) in Creative Media Publishing Design: Exercises and Task 1  1. Lectures 2. Progress 3. Final Outcome 4. Feedback  5. Reflection Task 3 (A): Book Visual Content Fig 1.1 Book Contents | PDF Format + Grid System  While working on exercise 02 in Task 01, I decided to use the dimensions 240mm x 200mm Fig 1.2 Book size Mockup Book binding style  For my binding of the book, i have chosen to use a staple binding style that will open up the book fully. Fig 1.3 Book Size Mockup (Staple Binding) Reference Layout style  Most of my references are from Pinterest. I have chosen a few that i like and suit the storyline and style Fig 1.4 Book layout idea # 1 & # 2 Book Progression Fig 1.6 Layout Progression Fig 1.7 Revision and Refining Progression Mockup Printout Video of the Mockup Book PDF The PDF need some little arrangement with the typeface so ...
Read more