Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.
Process
Loading and Landing Page
First, I started with creating the loading and landing page as the initial index file. After getting feedback from Mr. Shamsul, I made changes to the loading bar design by making it 2D instead of 3D. I used tween to create smooth animations for the rotating icon and loading bar. I also added fade in and fade out transition for all visual elements. 'Begin Journey' button navigates to another html page, where all the chapters are.
Main Chapters
In order to let the music play across all chapters, I decided to use one html file only for chapter 1-6 as well as the chapters list page. Then, I would just duplicate the frames and make necessary changes of content and visual elements for each chapter.
First, I started with animating the progress bar on the left, then the fade in transitions for the titles and body text. I then created the necessary buttons and movie clip suck as next button, chapters button, and sound button.
The sound button was quite tricky to animate, using this code and making the button a movie clip. I was able to make it be static when music is not playing, and have sound waves animation when music is toggled on.
Subchapters
On the same timeline, I created the subchapters right after the main chapters frame, but users will only go the the frame when clicking the next button. I added fade in transition to the visual elements and icons.
I wanted to make the icons pulse on default, enlarge and stop pulsing when hovered, then rotate + change color + open up panel when pressed. I was able to do this by converting the icon into a movie clip and creating all my desired animations inside while clearly labelling the frames. I used tween for the icon and created masking animation for the panel. The pulse animation is another movie clip nested inside it. The scaling up and stopping pulse animation while hovering was done through coding. Then, I used code to call all the different actions and behavior I wanted it to have.
Chapters List page
On the same timeline, I created the chapters list page. I created a movie clip as the carousel of the 6 chapter cards, then used code that is able to move 1 card at a time when left/right button is pressed. The chapter cards are buttons with light up hover effect.
Ending page
I created another html file for the ending page. I changed the background song to a softer and more sentimental one. Then I added some interactions where users can press to 'bloom' the flowers. It was done using movie clip instance.
The lights design make it flat, the 3d makes it look old style, new trends are more minimalistic and simple.
Chapter subpage: u cant have the elements just floating, it has to point at something and the content has to relate...
Chapters list page add button for navigate left right, don't recommend drag but you can try if u want.
Suggest to use different pages/index for each chapter.
Colors are all fine.
REFLECTIONS
Through this project, I had the opportunity to learn and explore Adobe Animate for the first time. Although it was confusing at the beginning, I gradually got the hang of it, and the process became enjoyable. I found it fascinating how animations could be created using frames, and how different symbols like movie clips and buttons played specific roles in making interactive content.
At first, I was doubtful whether I could bring the website I envisioned to life. My prototype felt ambitious, and I wasn’t sure if I had the skills to build it fully. But I'm glad that my vision was able to come to life. Seeing the final result closely match what I had imagined was a rewarding moment.
One of the most valuable parts of this experience was learning how to apply ActionScript or JavaScript in Animate. While there was a lot of trial and error, I appreciated the ability to search online for solutions and code examples—it helped me overcome many roadblocks. Figuring out how to control timelines, navigate between frames, and integrate user interactions gave me a deeper understanding of how animations and programming can work together.
Overall, I gained not only technical skills but also a sense of accomplishment seeing the final product come together. This project has definitely strengthened my confidence in using animation software and problem-solving through code.
.jpeg)
.jpeg)
Comments
Post a Comment