Advanced Interactive Design Final Project
Ellyn Saw Mei Hui / 0353358
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design Final Project
LECTURES
♡ Before we started this task, Mr Razif taught us how do to simple animations using classic and motion tween. He also taught us how to animating buttons that could be clicked as well as coding by using gsap and the wizard tool in Adobe Animate.
 |
| Adobe animate overview |
♡ Classic tween animation using shapes
Classic tween animation (square)
Classic & motion tween animation (various shapes)
♡ Page navigation animation
- create buttons to link to exisitng animation (by using codes)
 |
| Page navigation overview |
Page navigation video (1)
Page navigation like miro board (2)
FINAL PROJECT:
♡ Create 5 pages
♡ Thematic website with animations and interactions
♡ Choose a product, singer, album, etc to promote
ART DIRECTION
♡ Since Mr Razif mentioned that we could promote singers, albums, products, etc. I decided that my website will be focusing on promoting the new up and coming korean girl group NewJeans! I will be using back NewJean's own distinctive style which many would call it the 'y2k' aesthetic for the theme of my website. Attached below are references from NewJean's Phoning App and 1st EP album.
 |
| Fig1.1 Moodboard for website |
LAYOUT DESIGN
♡ After having a clear art direction, I started with designing the layout on Illustrator! I wanted to promote NewJeans's album at first but I decided to just promote the whole group instead.
 |
| Fig1.2 Draft layout (1) |
♡ Initially, I only had left and right button to navigate through the pages and a home button to go back to the landing page but after some thinking, I still think that having a navigation bar to navigate from page to page might be easier.
 |
| Fig1.3 Draft layout (2) |
 |
| Fig1.4 Draft layout (3) |
♡ Below shows the final layout of my website
<iframe src="https://drive.google.com/file/d/1oZiriEg4UOblt2QmCZoxai268DRV6u-d/preview" width="640" height="480" allow="autoplay"></iframe>
Fig1.5 FINAL website layout (PDF link)
ADOBE ANIMATE
♡ Now that my layout has been decided, the difficult part comes in next which is coding and animating the website in Adobe Animate CC :< Besides the features that were taught to us in class, Mr Razif also provided us with a playlist of tutorials to guide us on how to code the website. |
| Fig2.1 Classic tween animation for intro page |
♡ I also added micro animations to some of my pages to avoid making them look too static. For my about page, the official lightstick of NewJeans can be seen floating into frame.
 |
| Fig2.2 About page with lightstick |
♡ Besides, I also created a 'ball floating' animation on the club recruitment page. I also wanted my posters to 'auto-slide' so I decided to do that using the script that was taught to us in class.
 |
| Fig2.3 Shape floating using classic tween |
 |
| Fig2.4 Auto slider script (1) |
♡ Since there are 2 posters, I realised that the slider will slide even if you haven't clicked into the 'club recruitement page' so I decided to add another script where you can click on the first poster and it will move to the second one.
 |
| Fig2.5 Auto slider script (2) |
♡ I wanted to make my background in the contact page floating or wavy since the background is a photo of the pool. I decided to use motion tween for this and make the background zoom in and out. To my surprise, it actually looks abit wavy.
 |
| Fig2.6 Motion tween |
♡ After I was almost complete with everything, I wanted to add some effects to my texts on the 'about' page. I decided to let the title come into screen from top to bottom.
Vid3.1 Repeating title on about page
♡ It worked but it kept repeating itself so I added a new keyframe and 'this.stop() ;' but that just made my whole animation stopped. I tried multiple ways but I still couldn't figure out the reason why. It was weird since this method worked for my home page >_<
 |
| Fig3.2 Missing title on about page |
♡ As for my nav bar, I wanted to make it where if you hover over the icons, it will slightly jump up but I only managed to animate the icons. I tried to use the code 'thisGotoandPlay' but it didn't work so the icons on my nav bar remains animated when you load into the page. Due to time constraints and limited knowledge on this topic, I didn't have much time to really explore all the possibilities I could do with scripting in Adobe Animate. Luckily my website is able to work thanks to the help from tutorials by Mr Razif, Gsap cheat sheet, Snippets and Wizard tool!
 |
| Fig3.4 gsap script for nav bar buttons |
♡ After everything is done, it's finally time to publish my website! Before that could be done, we had to change the background colour in Adobe Dreamwaver (following Mr Razif's tutorial).
 |
| Fig4.1 BG colour change in Dreamwaver |
♡ Web server for chrome was no longer available so we had to download simplewebserver on our laptops instead. After that I just created a server and uploaded my files.
 |
| Fig4.2 Webserver |
♡ Moving on, is to create a netlify account (required for submission). I uploaded my site and tried to open it but it says error404 so I was a little confused since I practically did everything required already.
 |
| Fig4.3 Page not found for what I uploaded on Netlify |
♡ I decided to ask my friend who had also encountered this issue and she mentioned that I had to duplicate my html file then rename it to index. After doing that, I re-uploaded my site and renamed it after making sure that it works!
 |
| Fig4.4 Renaming my site |
♡ If you click on the link, it'll show a blank white page first which shocked me at first since I thought it wasn't working. Turns out, you have a wait awhile and the site will load itself!
 |
| Fig4.5 Not error just loading |
FINAL SUBMISSION :
Fig5.1 FINAL video presentation, video link
REFLECTIONS :
Experience -
The tasks for this module was delayed so I would say it was quite hectic by the end as I am unfamiliar with Adobe Animate. I've only used it for animation in my diploma and never for scripting so it was a surprise to me that we were gonna using javascript in a software that's widely used for animations. The scripting and animating we learnt in class was quite doable but it starts to get confusing when it comes to implementing it into the website. In tutorials we were only working with one or two shapes but in the website there's different elements like texts, background, shapes, images. I encountered a few issues where some I could fix but some I couldn't. Due to time constraints, I wasn't really able to explore more as I wanted too but I am quite happy that I still managed to design and create a website with working buttons and animations.
Observations -
Througout this task, I noticed that it is important to be aware of what you are scripting. One different punctuation could lead to a stream of errors in your codes. We also have to be patient while trying to fix the errors and be prepared for many trial and errors coming our way!
Findings -
I found the functions in Adobe Animate quite helpful especially the wizard and snippet tool. It's definitely a lifesaver to people like me who are unfamillar with scripting on Adobe Animate. Gsap is also another website that is helpful as it provides you with a 'cheat sheet' that you can use while coding!
Comments
Post a Comment