Adv. Interactive Design - Final Project: Completed Thematic Interactive Website
30 May 2023 - 07 Aug 2023 (Week 6 - Week 16)
30 May 2023 - 07 Aug 2023 (Week 6 - Week 16)
Vincent Lee // 0359386
Adv. Interactive Design // Bachelor of Design (Hons) in Creative Media //
Taylor's University
Final Project: Completed Thematic Interactive Website
INDEX
- Refining and Materials
- Animating Process
- Deploy and Publish
- Final Project Submission and Video Presentation
Instructions
<iframe
src="https://drive.google.com/file/d/1HLrXQ1grWUtRYq1IxHjxZjJWyqRd1SjM/preview"
width="640" height="480" allow="autoplay"></iframe>
Final Project: Completed Thematic Interactive Website
For this task, we are required to bring our proposed theme/concept and
previous prototype planning to life. We are to complete this task using the
knowledge gained over the past 14 weeks to create a fully functional and
working product experience.Task Requirements:
1. Upload the website to a web server.
2. Record a video walkthrough.
3. Online posts in your E-portfolio as your reflective studies
4. Make sure to embed or provide a link to the website and the video from the blog post.
By adding this script, when users hover over the elements, the timeline will
play and stop according to where the label has ended. Using the same
concept, the timeline will be allowed to replay even after it has completed,
ensuring the animation is not just a one-time event.
The animations primarily involved sliding in from different directions and scaling up/popping up. I applied color effects and tweening (Quart Ease-In-Out) between keyframes to ensure a smooth transition.
After animating each page, I added a mask to each page so that only a margin
of the other pages appears. This visual design gives a hint of adjacent
content without fully revealing it, guiding the user's focus to the central
area while indicating that there is more content to explore.
In the figure below, you can notice that I added a keyframe named 'click area'. This is because my interaction is designed for users to click on the margin of the other content to view it. However, if I did not add this click area, the animation would replay if the users accidentally click on the background.
Adding this.stop() after each keyframe ensures that the animation
stops after playing. A motion tween has been applied across each keyframe.
The initial plan for the directional buttons, intended to allow users to
navigate to the previous or next video, was to include them in the main
layer. However, to facilitate easier settings and navigation, the buttons
were integrated into each page.
Animations were only applied to the music title and video using a sliding-in effect. To create the sliding-out transition to other videos, the keyframes were duplicated and reversed. Adding labels allows the script to easily navigate and determine what to play.
Week 16 | Adv. Interactive Design_Final Project Submission: Completed Thematic Interactive
Website
I remember starting my first semester with no experience or knowledge of Adobe Illustrator, Photoshop, and similar software. It was quite tense, but I managed to cope with these new tools and submit my tasks on time. When I was introduced to Adobe Animate, my first thought was: HAHA, as long as it doesn't require coding, it should be fine, especially since I have experience with animation using Adobe After Effects and Premiere Pro. I thought it would be easy to familiarize myself with and apply my designed animations.
The class materials provided and the guidance from Mr. Razif were sufficient, especially when I was deciding on the amount of content to include in my Task 1 proposal. The pace of the class was well-suited to keep every student on the same track. Additional consultations after class and online were also helpful in assisting me with the challenges I faced during exercises and projects.
I want to admit that, due to personal reasons, I wasn't able to be as active or invest as much time in my academics as I did in my previous semester. However, once I went through this hard time, I quickly remedied the situation by catching up with class tutorials and projects. Despite the workload snowballing, where missing one tutorial or submission made it increasingly difficult, I managed to stay on track.
After all, the animating experience with Animate CC was relatively easy. However, when it came to applying the scripts, I found it complicated due to language issues, and I was quite desperate because ChatGPT was less helpful in this case. Ultimately, I was able to complete my projects, but the outcome was less interesting than what I had planned and imagined during the planning stage.
1. Upload the website to a web server.
2. Record a video walkthrough.
3. Online posts in your E-portfolio as your reflective studies
4. Make sure to embed or provide a link to the website and the video from the blog post.
Refining and Materials
As mentioned in the previous task, I feel that my design was plain and
boring, lacking of interesting or visual appealing elements, hence I
downloaded several gradient pictures that suitable with my website design
direction.
|
| Figure 1.1 - Materials |
I integrate the gradient image as the background layers and made further
adjustment on my layout design and the amount of content to showcase.
|
| Figure 1.2 - Refining Final Website Design in Figma |
Animating Process
Elements that need animation, especially those serving a functional purpose,
were converted into symbols (movie clips).
- Home Page
I animated them according to the planned animations shown in the figure below. Labels and actions were added to the script to identify where and what to play, ensuring that I don't mess things up when applying the script.
On the timeline, both elements will scale up and wiggle upon hovering, then scale back to their original size.
I animated them according to the planned animations shown in the figure below. Labels and actions were added to the script to identify where and what to play, ensuring that I don't mess things up when applying the script.
On the timeline, both elements will scale up and wiggle upon hovering, then scale back to their original size.
Figure 1.3 - Zoom and Wiggle Effects
|
| Figure 1.4 - Hovering and Clicking Script |
- Biography Page
Continuing with the process, each background was converted into movie clips,
then imported (copied and pasted as PNG) from Figma into the layer (nested
movie clip of the converted background for each page). I then animated their
entrance timing as shown in the figures below.The animations primarily involved sliding in from different directions and scaling up/popping up. I applied color effects and tweening (Quart Ease-In-Out) between keyframes to ensure a smooth transition.
Figure 1. 5 - Biography Page 1 & 3 Animations
At the end of the each discopage layer, it has added a this.stop()
to stop the currently running animations on the selected elements.
1. _this.biopage2.gotoAndPlay('biopage2');
- This line tells the biopage2 movie clip to go to a frame labeled biopage2 and start playing from there.
2. _this.biopage3_click.on('click', function () { ... });
- This sets up an event listener for the click event on biopage3_click.
- Inside the event handler:_this.gotoAndPlay('biopage3'); makes the main timeline or the current movie clip go to a frame labeled biopage3 and start playing from there.
- _this.biopage2.mc_guitarplay.visible = false; sets the visibility of mc_guitarplay (a nested movie clip within biopage2) to false, effectively hiding it.
- This sets up an event listener for the click event on mc_logo.
- Inside the event handler:
- exportRoot.gotoAndPlay('homepage'); makes the main timeline (exportRoot) go to a frame labeled homepage and start playing from there.
|
|
Figure 1.6 - 'Click' to Trigger/ Navigate Script
|
In the figure below, you can notice that I added a keyframe named 'click area'. This is because my interaction is designed for users to click on the margin of the other content to view it. However, if I did not add this click area, the animation would replay if the users accidentally click on the background.
|
| Figure 1.7 - Content Masking and Overlay |
- Discography Page
Importing the social media logos, then convert to movie clips and break
apart to further modify the colour effects of the icons.
|
| Figure1.8 - Hovering Animation |
|
| Figure 1.9 - Hover Animation and Script |
Animations were only applied to the music title and video using a sliding-in effect. To create the sliding-out transition to other videos, the keyframes were duplicated and reversed. Adding labels allows the script to easily navigate and determine what to play.
Figure 1.10 - Sliding In/ Out Animation
- The code sets up click event listeners on two buttons (mc_rightbutton4 and mc_leftbutton4).
- When either button is clicked, the current timeline plays an animation labeled pg4_slideout.
- After 1 second, the parent timeline navigates to either 'Disco Page 5' or 'Disco Page 3', depending on which button was clicked.
- The current timeline then stops at frame 0.
|
| Figure 1.11 - Button and Navigation Script |
Deploy and Publish
 |
| Figure 1.12 - Deployed in Netlify and Rename |
Google Drive Folder:
Netlify:
Video 1.1 - Final Project Video Presentation
Video 1.2 - Website Walkthrough Video
Reflection
The class materials provided and the guidance from Mr. Razif were sufficient, especially when I was deciding on the amount of content to include in my Task 1 proposal. The pace of the class was well-suited to keep every student on the same track. Additional consultations after class and online were also helpful in assisting me with the challenges I faced during exercises and projects.
I want to admit that, due to personal reasons, I wasn't able to be as active or invest as much time in my academics as I did in my previous semester. However, once I went through this hard time, I quickly remedied the situation by catching up with class tutorials and projects. Despite the workload snowballing, where missing one tutorial or submission made it increasingly difficult, I managed to stay on track.
After all, the animating experience with Animate CC was relatively easy. However, when it came to applying the scripts, I found it complicated due to language issues, and I was quite desperate because ChatGPT was less helpful in this case. Ultimately, I was able to complete my projects, but the outcome was less interesting than what I had planned and imagined during the planning stage.
Materials
1. Adobe Flash Tutorials: Link
Quick Links
