Advanced Interactive Design - Project 1

29/03/21 - 26/04/21 (Week 1 - Week 5)

Atiqah Farzana Binti Syalleh Karimyee (0336740)
Advanced Interactive Design
Project 1

---

LECTURE NOTES

Week 1: Module Briefing and Adobe Animate Basics

Mr Lun started off the module with a briefing on our projects. He showed us a few of our seniors work so we would know what to expect and the standard of work quality. He also gave us a tutorial on Adobe Animate, which we would be used in project 1. He taught us the basics of how to create pages, buttons, animating shapes, and keyframes.

Week 2: Buttons, Radio Buttons, Checkboxes

Mr Lun continued teaching us how to use Adobe Animate. Today he refreshed some of last week's lesson, in addition to making labels, pages and scripting commands that can take you to different pages. We learnt how to make buttons that go to new pages, radio buttons and checkboxes.

Week 3: Quantity Add/Subtract

Today we learnt how to create the buttons for the quantity add and subtract. 

Week 4: Masking, Rollover/Rollout, Changing Backgrounds

Today we learnt how to use masking and offset animation, changing HTML background using CSS and making it responsive, and rollover/rollout event for the mouse.

Week 5: 

Mr Lun taught us a new software, Spark AR, which we will be using for our project 2 and final project.

---

INSTRUCTIONS

Module Information Booklet:

---

PROJECT

Project 1: Interactive Web Application

An interactive application is an application that allows users to interact with audio-visual information via an effective screen design layout. Therefore, this project requires us to create a (prototype) interactive multimedia application for an online store using Adobe Animate.

We are only required to develop the front-end interaction, UI design, scripting and animation. Backend programming is not required as it is meant to be a prototype. The interactive applications should be able to communicate to the audience about the site's goal and objectives. Users should be able to navigate and use the applications without any difficulties.

The basic requirements include:

• 5 screens/ pages
• interface transitions/ animations
• working button scripting

I decided to create my application screen design for a jewellery store. The brand I chose is UNIF, a funky and quirky fashion brand. Although they sell a variety of apparel and accessories, I chose to only focus on their jewellery to make things easier.

I started sketching out a rough idea of how I want the layout to look like.

Fig. 1.1 - Sketch 1

  

Fig. 1.2 - Sketch 2

Fig. 1.3 - Sketch 3

Fig. 1.4 - Wireframe Skecth

After finalising the wireframe, I converted it into a digital wireframe.

  

  

 

I compiled all the resources needed such as the jewellery product images and began doing the wireframe mockup.

Fig. 1.5 - Carousel Pics

Fig. 1.6 - Necklaces in Listing Page

  

  

 

Project 1 - Proposal Slides

Animating process

I included a few scripting in my animation. I had the carousel function, radio button, and the call-to-action buttons. 

Classic tween + motion tween

Fig. 1.7 - Classic Tween + Motion Tween

Button scripting

Fig. 1.8 - Button Scripting

Carousel scripting

Fig. 1.9 - Carousel Scripting

Radio button script

Fig. 1.10 - Radio Buttons Scripting

Mouse scroll 

I also included a mouse scroll function, but it didn't work how I wanted it to. The scroll would follow the timeline of animations and not just for the page, so when I scrolled backwards, the animations would reverse to the previous pages. I couldn't figure out how to fix it, so in the end I just scrapped it out.

Fig. 1.11 - Mouse Scroll Scripting

Final video

Click here for the link of the file

---

FEEDBACK

Week 1 (29/03/2021)

Specific feedback: I PMed Mr Lun to propose my idea of doing an online jewellery store and it was approved. I decided to separate the pieces into necklaces, bracelets, and rings. He said I should put in a few pieces for only one category and not all of them (for example, > click necklaces category > click on one necklace for more details).

Week 2 (05/04/2021)

Specific feedback: I had 8 screens planned out (the minimum is 5) so Mr Lun said to make sure that I will have enough time to do them. He also said that I shouldn't worry too much about the wireframe right now because it can change later on, but he suggests keeping the screen that can showcase scripting, such as the quantity one. He said I can proceed with the design and plan for the UI animation.

Week 3 (12/04/2021)

Specific feedback: After showing my UI animation planning, Mr Lun said I can proceed as it is already week 3 and the project is due on week 5. He said the deadline can be extended till week 7 or so, however, it's better to complete it now so we can focus on the next project. 

Week 4 (19/04/2021)

Specific feedback: After showing Mr Lun my progress so far, he said it looks ok and noted the slight animation. He said I could copy and paste the carousel from his example and just adjust its size in both graphic and scripting. Also, due to a lot of votes, the deadline will be extended to week 6.

Week 5 (26/04/2021)

Specific feedback: Mr Lun said my project looks nice so far, and I should continue to finish it as project 2 is approaching. He also showed me an example of a mouse scroll animation he did because I included a mouse scroll in my project.

REFLECTION

Experience/Observation/Findings: Week 1 (29/03/2021); I expected this class to have a lot more coding than Interactive Design, but from the first class and looking at the software we will be using I think (and hope) that might not be the case. Week 2 (05/04/2021); Class is quite overwhelming with the information overload, but because Mr Lun gives us recorded tutorials we could practise at our own pace and watch the tutorial again when we need to. Week 3 (12/04/2021); Planning a layout design is simple enough, but a lot of stuff actually happens behind the screen which is crucial in creating a smooth and nice app. Week 4 (19/04/2021); I learnt (the hard way) that you have to be very careful in typing the functions because one wrong spelling or word could make the whole thing not work. Week 5 (26/04/2021); So far Spark AR looks much simpler than Adobe Animate, and I'm excited to make filters with it :)