To Do:

1. synthesise the knowledge gained in tasks 1 and 2 for application in task 3

2. create integrated visual assets and refine the prototype into a complete working and functional product experience.

I didn't use much GSAP in my project, as I thought that I am more familiar with using the timeline, plus I have tried using some GSAP, but the scripts conflict each other too easily, increasing the workload. So I only use minimal GSAP where I think it's usable and doable, other times I just work on the timeline or use Javascript. 

The background of the whole timeline is an infinite horizontal scroll animation which works as a movie clip, seamlessly auto scrolling horizontally all the time at the back of the stage. I wanted to try this infinite background because with cooperating the movements of the wheels, it will achieve an effect of the bike moving forward. 

I achieved this by creating the background movie clip in another layer, clipping two seamless images with a dark background and some blurry gold spots which I made in figma earlier together, convert into movie clip and drag the position correctly on the timeline, than create classic tween to make the background move.

By this, I'm happy to have a seamlessly infinite moving background throughout all the pages. And since my whole webpage is on the same timeline, when screens are switched between one another, the background moving on another layer still moves seamlessly without getting affected or being replayed, causing a weird animation lag. 

Initially, the loading screen animation design are just as what I have did in the figma prototype, with the text and logos zooming or masking in and out, but after a while I felt that it seems dull, so I added in this circular masking in and out animation, adding a sense of stronger gold colour revealing the brand, which is also a symbolic colour of Colnago, this historic bicycle brand. I'm using simple shape tweening effect for the circular mask. 

Another important element of my website is the bike movie clip. As my website only showcases a single product, which is the special edition of this bike, so how to make it lively and eye-catchy would be very important. During my prototyping phase I already had the idea of making the wheels rotate, coordinating with the background constantly moving background, it will create an effect of the bike moving forward. 

But I faced issues like how to create the assets for this animation? The full image of the bike which is at the correct angle is not high res on the official website, so I went through a lot of photoshopping in order to seperate the bike wheels away from the frames, so that they can rotate individually. 

I created a movie clip for the bike, and placed the bike frame and the two wheels in 3 different layers to ease my animation progress. 

The home page comes right after the loading page, with the main character - the bike in the middle of the stage. Most of the action script which controls the navigations between each screens are also placed at this part of the timeline. 

As usual, the original design was plain so I decided to add in some shapes and lines to make it more interesting. By using the cursor to hover over the yellow box, it will transition into the info page, by animating the bike to move over to the right, and text will appear. 

The specifications page is quite straight forward. I used some tweening effects to make the bike wireframe appear. 

The information cards of each specs are first hidden, by clicking onto the buttons, the working script will toggle their visibility to make them appear. 

The paint scheme page is far more tricky, as I needed to code out a script which can control the rotation of the wheel (acts like a colour wheel) and the colour information cards at the same time, along side with their descirption. 

I created every information card into movie clips for better control, and used dynamic text styled accordingly for the description box, so that I can easily control the text in the scirpt. The left and right buttons are coded accordingly to control the movements of the cards and the rotation of the wheel. 

The contact us page would be the last screen. I'm using simple tweening effects for the content to appear on the stage. For the quote at the center of the stage, I added a looping animation so that the text will change every 20 frames. 

Finally, this module has come to an end. Great thanks to Mr. Shamsul for all the help, not only for this sem but for the previous modules also. This is my first time using Adobe Animate, which is also a new and fun experience for me. Previously in Interactive Design where we are using HTML, all the designs are mainly static, and I dare not use a lot of animations or complex arrangements of content else my code will be in a mess. But the fun of Adobe Animate is that it never limits your creativity and imaginations. Just with enough time and effort, and with the help of Javascript and GSAP coding, the website comes to life. I love this app so much as it changed my perspective of looking into webpage designs. 

However, using either the timeline or GSAP, it requires a lot of trail and errors, to find out the perfect timing for every animation and transition. I enjoy this process, although I feel that I can never make it perfect, as my ocd would prefer to set every keyframe on the timeline on multiples on 5 😂 I know it's a bad habit, and I'm trying to get rid of it. 

All in all, I had a good time "playing" with Adobe Animate throughout this module, especially when I was creating this prototype website for Colnago V4Rs Tadej. Looking forward to using what I have learned in this module in the future.