Chuah Kwai Pin / 0348376
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Thematic Interactive Website
LECTURES
Week 3:
For this week, we began to explore Adobe Animate and learned the
basics of
how to use the software. Our lecturer guided us step-by-step in class, and it became easier to manage after more
practice.
Week 4:
Our class was held online today and we resumed practicing animation
using Adobe Animate. Our lecturer taught us how to animate a bouncing
ball and web animation, which would be useful for future
projects.
Week 12:
For our class this week, we did a few more tutorials on Adobe Animate but
this time using GSAP to code. We did 2 exercises with guidance from our
lecturer and it was a challenge at first since the action scripts were
more complex.
TASKS
Exercises
Week 3: Adobe Animate 1
We were told to install Adobe Animate in class this week and we started
off with trying to do simple animations.
.png)
|
| Fig. 2.1 Adobe Animate Progress Screenshot - Shape |
We were taught how to use Classic Tween, Ease In and Out Effect, Changing Colours, and Shape Morphing. It was a basic foundation we needed to get familiar with as we will use them more frequently in our upcoming projects.
Fig. 2.2 Final Output- Shape Animation
Moving on, we also tried to animate a bee flying across the screen.
For this animation, we have learned how to edit inside a layer instead
of the main scene. It was confusing at first, but after a few retries,
I finally got my bee to fly properly.
.png)
|
|
Fig. 2.3 Adobe Animate Progress Screenshot - Bee |
Fig. 2.4 Final Output- Bee Animation
Week 4: Adobe Animate 2
.png)
|
|
Fig. 3.1 Adobe Animate Progress Screenshot - Ball |
For the bouncing ball, we were taught how to do the 'squishing' effect when the ball hits the ground and bounces back up again. It was quite simple to follow and I was glad the outcome turned out quite naturally. We also tried to make the ball bounce across the screen using the same method that we were taught for the bee animation.
Fig. 3.2 Final Output- Ball Animation
.png)
|
|
Fig. 3.3 Adobe Animate Progress Screenshot - Website |
We added transitions for the different pages and some buttons to help us navigate to click on the different pages. The buttons consist of 4 components, "Up", "Over", "Down" and "Hit" and they are useful in styling the buttons and determining the active area of the button. Once the buttons are pressed, it should lead viewers to the respective page with the page transitions and also stop on that page. These actions can be done using the "this.gotoAndPlay()" and also "this. stop()" functions.
Click here to test output: Website Animation Demo
Week 12: Adobe Animate GSAP
In today's physical class, we went back to practicing website animation on Adobe Animate. We were introduced to GSAP coding which makes animation easier. The first exercise was similar to the one we did previously, but this time it was done using GSAP code.
.png) | |
|
Click here to test output: Website Animation with GSAP Demo
In the second exercise, we were taught how to navigate and move around on a website with a large background with GSAP
.png) |
| Fig. 4.2 Adobe Animate Screenshot - Background Navigator |
With a similar concept as the exercise above, the buttons will lead users to a different part of the website background. For the accurate position, we have to key in both the x and y-coordinates of the background as well.
Click here to test output: Website Background Navigation GSAP Demo
Final Project: Thematic Interactive Website
For this final project, we are required to create an interactive and animated purchasing website using Adobe Animate. Since we are not limited to choosing a brand or product of our choice, I have decided to do a jewelry brand. While looking through different jewelry brand websites, I cam across Pandora's Website and was interested in their series. The first thing that caught my eye was their new Disney collection featuring The Little Mermaid.
Being a big fan of Disney, I wanted to recreate a website that features the jewelry collection for The Little Mermaid. Since the movie revolves around sea and underwater, I wanted to make my website fun and refreshing to look at.
 |
| Fig. 5.1 Pandora Website - The Little Mermaid Collection |
While looking through the collection, there are 7 designs of jewelry which included pendants, rings and earrings. I then downloaded the images of their jewelry from their official website to be used when making my interactive website.
1. Website Design
I wanted to make my website design reflect the elegance of Pandora and at the same time keep it in theme with The Little Mermaid. With that, I went to search for a suitable main background and eventually found one that looks suitable for my website. With that background, I then started working on my design layouts and pages including home, about, contact and try-on.
.png) |
| Fig. 5.2 Website Design- Adobe Illustrator |
I began with making the animation for my home page. I wanted the main poster image to appear first and then reveal the individual images. I made use of classic tween to achieve the animation and also added a "this.stop();" in the action script to prevent the animation from looping.
.png) |
| Fig. 6.1 Home page- Adobe Animate |
From there, once users press "view more", the rest of the items will flow in and stay in its place. I have made each of the items into a button so that when users click on it, more information about the item will pop up.
.png) |
| Fig. 6.2 Product page- Adobe Animate |
In this product information page, there are 2 functional buttons which is the "purchase now" button and also back arrow. When the back arrow is clicked, it will go back to the product display page.
 | |
|
When clicked on the "purchase now" button, users will be brought to the purchase page where they are required to key in their credit card details.
 |
| Fig. 6.4 Purchase page- Adobe Animate |
In the About section, it consists of details about Disney's The Little Mermaid collection. Although there is not much interaction in this page, I figured that it would be necessary to introduce what this collection is about and what they are made of.
.png) | |
|
.png) | |
|
 | |
|
When users hover or click on the jewelry, their respective QR codes will show up. Users will have to just scan it using their phone and it will bring them to an external website to try-on that particular jewelry.
.png) |
| Fig. 6.8 Tryon page with QR code- Adobe Animate |
After I have completed all of my pages, I wanted to add some floating bubbles that play constantly in the background so that it looks more alive. I only added the bubbles near the sides of the pages as I thought it would look too distracting if it were to be in the center too.
 | |
|
FINAL OUTCOME
 |
| Fig. 7.1 Final Website |
Click here to test output: Final Pandora Website
Note: Please be patient as the website may take some time to load. For more information on how the website looks like, feel free to watch the walkthrough video in Fig. 7.2
| Fig. 7.2 Website Walkthrough Video |
FEEDBACK
The website has to have interactive elements for users to be engaged. Include animation so that there are no static pages. It could be an animation that is constantly moving in the background.
REFLECTION
Experience
After taking Interactive Design in the previous semester, I was sure that it would be much more challenging in Advanced Interactive Design. However, I think I had a lot more fun in this module mainly because there was not as much coding as I had initially thought. Not only that, but it was also a refreshing experience to learn 2 new softwares in this semester which are Effect House and Adobe Animate.
Observations
While working on this project, I realised that I learned the most whenever I had a failed attempt. There were many times where my website could not work the way I wanted it to, and I admit that it was a frustrating process of trying non-stop. However, as I kept trying to make it work, I learn a lot more about what I have done wrong and how I should do it for my next pages. Eventually, after finding hard for a solution, I feel a sense of relief when my website works properly without many problems.
Findings
I find that it is much easier to animate if we have a rough plan on how we want the website to flow and interact with users. When I started designing on Adobe Illustrator, there were a lot of factors that had to be considered, such as which elements can be grouped together and which ones have to be separated for animation. It definitely helped a lot during my animating stage in Adobe Animate as I rarely had to go back to my artboard on Adobe Illustrator to edit my assets. All in all, it was a rather challenging and time-consuming project, but I had a great time working on it (minus the amount of crashes my Adobe Animate has gone through).
Pandora. (2023). Disney X Pandora, The Little Mermaid. https://us.pandora.net/en/collections/disney/?prefn1=Character&prefv1=The%20Little%20Mermaid
PR Newswire. (2023, May 25th). Pandora announces The Little Mermaid collection to celebrate Disney's all-new movie. https://www.prnewswire.com/news-releases/pandora-announces-the-little-mermaid-collection-to-celebrate-disneys-all-new-movie-301834072.html
Comments
Post a Comment