ADVANCED INTERACTIVE DESIGN // FINAL TASK

  ADVANCED INTERACTIVE DESIGN // FINAL TASK

Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media 
Advanced Interactive Design// Task 01

---

Task 02: Interactive Web Application Pre- Production & Prototype

✧ We are required to create 5 webpages based on existing brands that is promoting an item. Sir mentioned that it can be a song or an album as well. 

✧ I decided to go with Burger King as the brand and promoting their new rye breakfast burger collections.

Draft webpages

✧ Fig 1.1 : Intro Pre Load Page

              ✧ The idea was to have the 4 burgers roll out side ways and the big logo will pop up 

                   with animation style 

Fig 1.1 Intro Pre load page 

✧ Fig 1.2 : Shop Page

              ✧ This is an introduction to all 4 burgers and their names, a call to action button to 

                  direct people to the offers page

Fig 1.2 Shop page 

✧ Fig 1.3 : Offers Page

              ✧ The page displays the offers that comes along with the breakfast burger, a call to 

                  action button to direct them to the outlets to purchase

Fig 1.3 Offers page 

✧ Fig 1.4 : Outlets Page

              ✧ A display of some of the stores in KL, a direction call to action button 

                  was implemented 

Fig 1.4 Outlets page 

✧ Fig 1.5 : Contact Us Page

              ✧ A general type of button to link to all the individual pages. The big logo will direct 

                  them into the original burger king Malaysia website

Fig 1.5 Contact Us page 

Final webpages

✧ There were a few changes from the draft version

Fig 2.1 Intro Pre load page FInal pNG

Fig 2.2 Shop Page FInal PNG

Fig 2.3 Offers Page Final PNG

Fig 2.4 Outlets Page Final PNG

Fig 2.5 Contact Us Page Final PNG

Fig 2.6 Full Webpages in PDF

Animate CC Progression

 ✧ I had quite a difficult time getting it to work, the process of that was not screenshotted as i was busy fixing all the buttons and trying to make them work...

Fig 3.1 Full Animate CC Website

 ✧ I mostly use classic tween and resizing the items big and small to make it look natural and smoother in terms of animations

Fig 3.2 Mc_intro

Fig 3.3 Mc_intro classic tween animation

Fig 3.4 Mc_shop

 ✧ For this page, i turned the 4 burgers into buttons and animated them to have some effect when people scroll or hit on it. The effect here is a bouncing up and down effect by using the button function

 ✧ In Fig 3.5 i also used the button function to have an up, down, over and hit effect

Fig 3.5 Order button in Mc_shop

Fig 3.6 Mc_offers

✧ Similarly to mc_shop, i turned the 4 burgers into buttons however in here the effect is a slight wiggle when you mouse over it

Fig 3.7 Visit button in Mc_offers

Fig 3.8 Mc_outlets

Fig 3.9 button image ioi city mall

✧ For the outlets page, i decided to direct users to the map of the store location and added a layer as such shown in Fig 3.8 during scroll over

Fig 3.10 Mc_contactus

✧ I've linked all the buttons within this artboard to their respective existing websites: 

            ✧ 1st icon > Instagram

            ✧ 2nd icon > Facebook

            ✧ 3rd icon > Tiktok

            ✧ 4th icon > Directory page on official malaysian burger king website

            ✧ 5th icon > Official malaysian burger king website

Fig 3.11 Linking buttons to url codes

Fig 3.12 Full Action workboard

Fig 3.13 Library items

Publishing

 ✧ After I was finally done and able to link all the buttons I went on to revisit sir's Youtube lecture. 

FIg 4.1 error when inserting the html file directly into google chrome after clicking the publishing button in animate cc

Fig 4.2 Web Server for chrome extension

✧ I followed and downloaded the web server for chrome which in return was not working. I went into the groupchat and realised sir gave us another link to download it and was finally able to upload it as a realisih web page

Fig 4.3 Webserver

Fig 4.4 Webserver File

Fig 4.5 Netlify Site Configuration

Final Submission

 

Netlify Link

Google Drive of files

Final Video walkthrough of website

---

REFLECTIONS

Experience 

This task was quite rushed as it was delayed and assigned during almost week 12. I was also unfamiliar with the software which made things even more difficult. I remember a few of the functions taught in class and applied them in the project, like the classic tween function. This is the first project where we were required to create a full fletch website. Whereas back then during tutorial classes we were only taught minor pages.

Observations

One word added wrongly or the button name was written wrongly, the whole webpage may turn up blank during web preview. I had this moment multiple times and had spent hours pouring over the codes to see where went wrong.

Findings

The Code snipet tool is very useful as it only requires to change the name and frame number and the button was linked.

-