Advanced Interactive Design: Task 3 Final Project
1/1/2025
ALTAIFI, LEEN MAAN A (0367698)
Bachelor of Design (Hons) in Creative Media, Taylor's University
Advanced Interactive Design
Table of Content
1. Lectures
3. Feedback
4. Reflections
1. Lectures
Week 8 (12/12/2024):
Independent Learning Week.
Lectures and exercises are found in Advanced Interactive Design: Task 1 & Task 2
2. Instructions & Tasks
Module Information Booklet
Task 3: Portfolio Section
The first section I started working on was the portfolio section. Like I planned in the prototype, I wanted the artworks in the portfolio sections to have a parallax scrolling effect, to achieve depth in the transitions between the artworks. I separated all my personal artworks in different layers in photoshop to make this work.
 |
| Fig.1.1: Separating Artwork Layers on PS 2 |
 |
| Fig.1.0: Separating Artwork Layers on PS 1 |
After I finished laying out the timeline and the artworks using separate layers for the foreground, midground, and background and classic tween but at different speeds to have that illusion of depth since things that are closer to the viewer appear to move at a faster rate than the farther things. The video below shows the effect I wanted to have upon publishing the site but only in animate so far.
 |
| Fig.1.3: Parallax Scrolling Timeline 2 |
 |
| Fig.1.2: Parallax Scrolling Timeline 1 |
The video below shows the effect I wanted to have upon publishing the site but only in animate so far.
I wanted it to scroll completely off center, which I attempted in the video on the right, but it was not entirely successful. Additionally, when I tried adding intro animation to the parallax scrolling, it was not working together. At this point, I gave up on having vertical scrolling in the website and tried looking for other solutions.
 |
| Fig.1.4: Portfolio Section Process |
When the transition animation stops, it stops at the center of the art work, and the information and the buttons will fade in. The 'next artwork' buttons transitions to the next artwork, and the 'buy product' buttons leads to you the product page.
 |
| Fig.1.5: Button Hover Animation |
I added a hover animation to the 'buy product' button for interesting interactivity. I did this by first turning the button into a button symbol, then on the 'down' frame, i turned it into a movie clip symbol and do the frame by frame animation there. Now, when the button is hovered, it will play the animation. I ensured to add 'this.stop()' on the last frame of the animation so that it wouldn't keep looping.
Products Section
For the products section, I add 3 sub sections: prints, apparel, and accessories. They are still images when not interacted with, but when it is hovered, the subsection title will appear. Once clicked, it will each go to its respective subsequent pages where it shows all its items.
 |
| Fig.1.6: Products Page Process 1 |
 |
| Fig.1.7: Products Sections Hover |
In the apparel section, there is a horizontal swipe when the arrow button is clicked. I did this using classic tween, labels, and the action layer. I animated the swipe one by one so that once the right arrow button is clicked, it fades out, and the left arrow button appears, or vice versa. It was very tedious, but I managed to make it work. However, after finishing it, I realized I could've done it in a much simpler and straightforward way using gsap to move the positions, but I realized too late.
 |
| Fig.1.9: Apparel Section Process 2 |
 |
| Fig.1.8: Apparel Section Process 1 |
The prints and accessories are done the same way as the products main page, where the product title is shown as it hovers. However, in prints, once you click any of the first 3 artworks, it leads you to a detail page of the product and a 'buy now' button that takes you to an external link of my print store.
 |
| Fig.1.10: Accessories Section |
 |
| Fig.1.11: Prints Section |
Once the print is clicked, it will lead to the detail page, which contains one or more variation of the print, which can be enlarged if the smaller square is clicked.
 |
| Fig.1.12: Print Detail Page 1 |
 |
| Fig.1.13: Print Detail Page 2 |
About Section
In the about page, which contains information about the artist, is done the same way as the swipe in the apparel's section. once the arrow is clicked, it fades out and the big text is pushed to the left as the new content comes from the right all using classic tween.
 |
| Fig.1.15: About Page 2 |
 |
| Fig.1.14: About Page 1 |
Contact Section
The contact section contains a form and my contact information links. When they are hovered, it has a similar animation as the other buttons.
 |
| Fig.1.17 Contact Page Button Hover Animation |
 |
| Fig.1.16 Contact Page |
Background Music
Lastly, I almost forgot about adding background music, so it was the last thing I added. I wanted it to play as soon as the website started but that caused errors once published in the web. So I added a 'start' button that acts as a play button for both the website and the background music.
 |
| Fig.1.18 'Start' Button and Background Music |
Deploying Website
After finishing up the website, I export the html, javascript, and image files into netlify to publish the website. After numerous attempts and slow upload process, I succeeded at deploying the website, although it does take a while to load.
 |
| Fig.1.19 Deployed Folder on Netlify |
 |
| Fig.1.20 Working Published Website |
Final Project Video Walkthrough
3. Feedback
I consulted with the lecturer about my website because I was having difficulties with achieving the parallax scrolling in the portfolio section of my website. Sir suggested I use gsap code and play around with y position and delay to achieve the effect if none of the methods I was using worked.
4. Reflections
Making this website come to life was a very challenging process. What I had in mind in the early prototype stage was that the website would have both vertical and horizontal scrolling, but since we did not cover that in class, nor did all of my attempts at the horizontal scrolling succeed, I settled with having a static canvas webpage. I really wanted to achieve vertical scrolling because a main component of my website was to have parallax scrolling of my artworks to give the illusion of depth. However, just because I could not succeed at vertical scrolling, I did not give up on having the idea of parallax in my artwork. Instead of scrolling, I made it so you click a button that leads you to the next art work, and it would transition from one artwork to another with the illusion of depth that parallax scrolling achieves.
The beginning and the end of working on this project were the rockiest. Initially, I was very lost because I didn't know the limitations of the software and I had a lot of ambitious ideas, ideas that were too hard to implement lol, so I had to simplify a lot of what I wanted to do after numerous attempts. After getting the hang of that, the process went smoothly... that is until I had to publish the website... I tried publishing so many times and met with failure every time to the point I was almost going to give up, until I realized what the problem was, and I felt very dumbfounded lol. We live and we learn. I'm just glad I finished this project in one piece.
Comments
Post a Comment