Advanced Interactive Design / Task 1: Interactive Web Application

on

   



31.08.2002 - 28.09.2022 (Week 1 - Week 5)
Audrey Gracia Djohari / 0348120
Advanced Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 1: Interactive Web Application

WEEK 3:
Week 3 Exercise

Figure 1.0: Week 3 Tutorial, Adobe Animate


Mr. Razif told us to create a rabbit, then guided us to animate it. This is my outcome:

Figure 1.1: Week 3 Exercise, Adobe Animate

Figure 1.2: Codings

WEEK 4:
Week 4 Exercise

This week, Mr. Razif taught us how to create buttons and how to animate it when we hover and push it. This is my final outcome:
Figure 1.3: Week 4 Exercise, Adobe Animate

NOTES:

  • Command + Return = Preview in browser
  • Remove Shape = Shift + Block + Remove Frames

WEEK 6:

Week 7 Tutorial
Figure 1.4: Week 6 Tutorial, Adobe Animate


WEEK 7:
Week 7 Exercise
Figure 1.5: Week 7 Tutorial, Adobe Animate


TASK 1: INTERACTIVE WEB APPLICATION


Instruction

Interactive Application Screen Design for Online Store An interactive application is an application that allows users to interact with audiovisual information via an effective screen design layout. Students
are required to create a (prototype) interactive multimedia application for an online store.

Software Requirement: Adobe Animate

What shop that I design?

I created an imaginary online candle shop called Nyala Candle. 

B&W Sketch (Wireframe)

First, I created these wireframes to see the web app's architecture  and to see if the design is good enough or not.

Figure 2.0-2.2: Wireframe Design

App Flow

There are 10 main pages in total. And 8 single product pages.
  1. Login Page
  2. Home Page
  3. Account
  4. About Us
  5. Contact Us
  6. Main Shop
  7. Bestseller
  8. Halloween
  9. Cart
  10. Product Page (there are 8 products)
+ Navigation

These arrows indicate the flow of the app (how each page can leade to another page).

Figure 2.3: App Flow

Color & Design Elements

Figure 2.4: Design Asset in Adobe Illustrator

Figure 2.5: Images

Figure 2.6: Animation & Coding in Adobe Animate

Useful Codes & Shortcuts

SHORTCUTS
  • Command + Return = Preview in browser 
  • Remove Shape = Shift + Block + Remove Frames
CONVERT TO MOVIE CLIP
  • Right Click < Convert to Symbol < MOVIECLIP < Name it (Properties < Docs)
  • Classic Tween Right Click < Create Classic Tween 
  • Easy Ease Properties < Frame < Tweening Effect

MAKING THE ANIMATION STOP
  • this.stop();

CONVERT TO BUTTON
  • Right Click < Convert to Symbol < Button < Name it (Properties < Docs) 
  • Always add the HIT area

MAKING A BUTTON INTERACTIVE
  • Action < Add using Wizard < Go to frame label and stop < This Timeline < Change the Green Text to where the button will lead to < Next < On Mouse Click < Select the Button

MAKING A DYNAMIC TEXT
  • Tools < Dynamic Text < Select the Area < Name it < Alignment, Size, Font

OTHERS
  • Separating  Objects to Different Layers Paste in Place < Distribute to Layers
  • Copy & Paste Duplicate Object < Change the instance name
  • Opacity Color Effect < Alpha 
  • Grouping Convert to Symbol (Convert your vectors to Symbols first before you group it)
  • Mask Add Layer above content < Draw a Shape < Right Click < Mask

CODES
  • Use . to access the child movie clip (inner symbol)
  • Use exportRoot to go back to the main page (most outer symbol)


Figure 2.7: Using dot to target the inner symbol

Figure 2.8: Using exportRoot to target the most outer symbol


Figure 2.9: Codes to create working +- buttons

Final Outcome


Figure 2.10: Recorded Web App Flow, Youtube


FEEDBACK

WEEK 7:

General Feedback
  • Use exportRoot to access the top layers.
  • Input the Instance Name whenever you create a symbol
WEEK 9:

General Feedback
  • Don't forget to always define the button hit area (third box). Because if there's no area, the button might not work.

REFLECTION

Experience
To be honest, I was quite panicked during the last weeks before the deadline because there were so many holidays and we didn't have any classes for weeks. I also did not feel confident because we only got 3 lectures throughout this project and I didn't expect them to be sufficient for me to create my own animated web app. However, something just clicked when I started working on my project using Animate CC, turns out the tutorials given by Mr. Razif was enough once I really took notes of everything he taught. So everything went pretty smoothly for me and I was so happy when the button works just fine in the end. Sure it took me so long to finish this project (approximately 40 hours) but it wasn't because of the errors (thank goodness), it was mainly caused by the time I need to absorb the lectures. Once I understood completely what Mr. Razif was demonstrating, I could do it.

Observation
I observed that with more tutorials and lectures it would be easier for me to use and experiment with Adobe Animate CC. Too bad there were so many holidays this semester. But overall, Mr. Razif really explained things clearly in class and he provided helpful feedbacks.
  
Findings
I learned that this app is the perfect combination of stress for design students, Adobe Animate CC is basically a more difficult version of After Effects combined with codings. I was so relieved and at the same time proud to be able to understand it. Working on this project reminded me that coding requires memorizing and thinking logically. Whilst animating requires planning.


Comments

Post a Comment