Advanced Interactive Design - Project 1

01/09/2022 - 11/12/2022 / Week 1 - Week 14
Darren Liga / 0351480
Advanced Interactive Design: Project 1


Link to Project 1 - Google Drive:
https://drive.google.com/drive/folders/1DSNKWs0Z5BkRdlEnyuQqE57ueJMZHyAd?usp=share_link

INSTRUCTIONS



For the first project, we were tasked to create a mobile application using adobe animate. Since I had recently developed a coffee addiction (hobby), I decided to do this module based on coffee.

I started the first advanced interactive design project by designing the pages needed in adobe illustrator.

Fig 1.1: initial design

I then imported the bitmap to adobe animate to start the main task.

Fig 1.2: importing pages

I followed the tutorial to import the pages and started doing basic animation.
Had a few issues along the line, accidentally added "this.stop();" in the global script instead of the targeted actions keyframe of a particular time. This caused a setback in overviewing the animation, showing a blank page. Asked Sir Razif about this issue and fixed it instantly.

Fig 1.3: root pages

Added roots in the timeline, converting to symbols to enable classic tween, on that symbol page, had roots of other symbols, which caused a minor issue. Discussed further. Since the script "exportRoot" takes you to the main timeline, I had to jot down each level name if I needed to browse through 3 levels of the timeline. For instance, "exportRoot.level1.level2.level3" then the script.

Fig 1.4: cart page script

For the cart page, another student showed a similar problem I was facing. The total amount and the items inside the cart did not respond to the actual amount. Following this tutorial was fairly straightforward as Sir Razif explained it clearly and reasoned out why and how it happens and/or a certain code needed to execute the desired outcome.

Due to this being my first interaction with javascript, much more exploring was needed. I wasted a lot of time because I could not find/did not know the needed script.

Fig 1.5: Publish Settings

After everything was done, I published it and then tested it out.

Fig 1.6: Published .html app

To conclude, almost everything turned out how I wanted it. Aside from the minor bugs here and there, the main page cannot carousel right. 


Link to Project 1 - Google Drive:

Comments

Popular Posts