Advance Interactive Design - Final Project

Week 9 - Week 14 (18/06/25 -23/07/26)
Felice Jolin (0373636)
Advance Interactive Design / Bachelor of Design (Hons) in Creative Media 
Final Project

---

TABLE OF CONTENT

Instruction

Lectures

Task

Feedback

Reflection

---

INSTRUCTION

 
Module Information Booklet

back to top

---

LECTURES

Lectures are in Exercise Blog

back to top 

---

TASK

Prototype link: https://www.figma.com/proto/vImZVuZrLViv4lJ0lKkznk/Southern-Xinjiang?node-id=439-138&t=syeQU6PubUs4Wa4w-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=4%3A5 

Below is the compilation of photographs for the website. *Disclaimer all the images are mine personally.

 
Fig 1.1 Photographs

As before in the prototype I am using the frame size 1024px X 768px, now in adobe animate I will be using 1280px(w) x 720px(h), so I decided to re-save all the images in the proper size for the new frame. Although I can mask the images in Adobe animate, but I dont want my file to have too much layers, also the image size were quite large, so I decided to resize them. 

Fig 1.2 Photographs

1. index.html
As a reference from the prototype that I have made, now I proceed to design everthing in Adobe Animate. I start with the first page which is the loading page, I name it index.html and resize the frame to 1280px(w) x 720px(h) followed by setting showed by Mr.Shamsul in class.

Fig 1.3 Set Up

I begin with the logo appearing in the centre, I made with clipping mask to have smooth transition. Then I add loading text and also add masking for it. Next I add 3 loading button and animate it one by one.

 

 

Fig 1.4 Loading Page Animation

After theloading dot ends, I change all the elements and text opacity to 0% to proceed to next animation which is the text 'Let's Begin The Journey'. Here I also used masking. 

Fig 1.5 Loading Page Animation

I also added action layer. Then on the very last frame, I added keyframe and action code so after the  'Let's Begin The Journey' animation ends, it will directly change to home.html

Fig 1.6 Loading Page Action Code

2. home.html
Next on, I proceed with the home page. Firstly, I prepare the navigation bar. Then I add instance name to all the buttons. For the logo it will the home button. 

 

 

Fig 2.1 Home Page Buttons

Then in the ensted layer, I edit the button while hover change into navy color. And in the 'hit' frame I add keyframe and add rectangle so the button click area is larger. I apply this to all the navigation button.

Fig 2.2 Home Page Button Hover

Next, I add the background image, I convertit into graphic and add motion tween for animation. I also add Quad Ease In for the animation. 

Fig 2.3 Home Page Background

The I add the heading, sub heading and also the button 'Discover More' button to change to about page. I madesure all are in separate layer, then I animate it to appear one by one. I also used masking for the text animation to make it consistent across the website.

 

Fig 2.4 Home Page Animation

For the 'Discover More' button, I added the hover effect.

 

 Fig 2.5 Home Page Discover More Button

 

Then I added action layer to add action so when the all the buttons are clicked, it will change to the desired page. Also at the very end of the frame, I add keyframe and action stop code so the animation will not repeat.

Fig 2.6 Home Page Action Code

3. about.html 

Proceed to the next page, I added the text and image then do the appear animation one by one in separate layers. I also decided to animate the places name on the map will appear one by one simultaneaously. 

 

Fig 3.1 About Page Animation

 

 

Then when the kashgar and taxkorgan appeaar in the map, it is actually a button to open an overlay to see a more specific information about that place. So for these 2 buttons, I add a keyframe on each layer and add action 'go to label and play'. In addition, the button also have hover effect.

 

Fig 3.2 About Page Button

Next is to make the overlay page for the button 'Kashgar' and 'Taxkorgan'. I made the box, text and image each in separate layer so I can animate in appear in. Then I also added action layer and add label name 'kashi'. Then add the 'action' layer on the last frame, I add keyframe for action stop.

 

Fig 3.3 About Page Kashgar Overlay

 

To close the overlay box, you can just click anywhere outside the box. To make that happen, I add a white low opacity reactangle accros the website and add a code to go to and play the frame where the initial animation stops.

Fig 3.4 About Page Kashgar Overlay Action

 

 

 Then I repeat this step for the Taxkorgan overlay.

 

Fig 3.5 About Page Taxkorgan Overlay

4. culture.html
Moving on to the culture page. Since in previous pages I have made the navigation buttons, I can just copy and paste in place. Next, I add appear animation for the image, heading and button, then I add classic tween and ease out.

Fig 4.1 Culture Page Movie Clip

 

For the images, I would like to make the images scroll continuously. So I palce all the images allign top and make it as one movie clip, I name it mc_image. Then I get in to the nested layer to edit the animation. I add keyframe, classic tween and classic ease for smooth scrolling to the left.

 

Fig 4.2 Culture Page Movie Clip Animation

Next, for the 'Discover Culture' button, I add hover effect. and at the action layer, I add code so that it will go to and play the culture2 page.

 

Fig 4.3 Culture Page Discover Button

5. culture2.html 

As you click on the 'Discover More' button, you will be directed to culture2 page. So the first outcome will be about Kashgar. The image and text will have animation of appear one by one simultaneously. I added action layer and also label name 'kashgar'. At the end of the action layer, I add stop action. 

Fig 4.4 Culture2 Page Kashgar

As we are in Kashgar-culture, the right button will bring you to the Taxkorgan Button. So on the right button, I need to add action of go to and play 'taxkorgan' label.

Fig 4.5 Culture2 Page Kashgar

 

I did the smae thing to the Taxkorgan-culture subpage. Here I add action layer and made the label 'Taxkorgan' so the previous right button can direct to here. At the end of the frame, I added stop action.

 Fig 4.6 Culture2 Page Taxkorgan

Now the left button need to work to direct you to the Kashgar-culture page. So in the left button, I added go to and play label 'kashgar'.

Fig 4.7 Culture2 Page Taxkorgan

6. kashgar.html 

Next is the kashgar page. Here I animate one by one the heading, image and the button to appear. I added classic tween and also quad ease. 

Fig 5.1 Kashgar Page Animation

I also add action layer to add action code to connect the navigation button to the desired page. Also for the 'Explore Destinations', I added a code to direct you to kashgar2 page.

Fig 5.2 Kashgar Page Animation Code

7. kashgar2.html 
Next when you click the 'Explore Destinations' button, you will be directed here to kashgar2 page. Here there will be 6 places to explore, for the interaction, you can either press the destination name button or the arrow. 

I made each into 6 separate folder. Here is the first one, Old City. I added action layer, label name and stop action at the end of the frame. I also added appear animation for the images and text. 

 Fig 5.3 Kashgar2 Page Animation

While for the button to work, I add keyframe, add action of go to frame label and play. For the example below, on the baisha button, I add the code to go and play the label 'baisha'. Repeat this step for all the buttons and arrow, change the desired label. 

Fig 5.4 Kashgar2 Page Button Action

I repeat the step for all the 6 destination, for all the buttons and arrow. Below is second place, Baisha Lake.

Fig 5.5 Kashgar2 Page, Baisha Lake

 

Below is third place, Aoyitake.

Fig 5.6 Kashgar2 Page, Aoyitake

 

Below is fourth place, Shache County. 

Fig 5.7 Kashgar2 Page, Shache County

 Below is fifth place, N39 Desert.

Fig 5.8 Kashgar2 Page, N39 Desert

 
Below is sixth place, Karakoram Highway.

Fig 5.9 Kashgar2 Page, Karakoram Highway

 

8. taxkorgan.html 

Next is the taxkorgan page. Here I animate one by one the heading, image and the button to appear. I added classic tween and also quad ease. 

Fig 6.1 Taxkorgan Page Animation

I also add action layer to add action code to connect the navigation button to the desired page. Also for the 'Explore Destinations', I added a code to direct you to taxkorgan2 page.

Fig 6.2 Taxkorgan Page Animation Code

9. taxkorgan2.html  
Next when you click the 'Explore Destinations' button, you will be directed here to taxkorgan2 page. Here there will be 6 places to explore, for the interaction, you can either press the destination name button or the arrow.  

Same as before, I made each into 6 separate folder for each destination. Here is the first one, Wahkan Corridor. I added action layer, label name and stop action at the end of the frame. I also added appear animation for the images and text. 

Fig 6.3 Taxkorgan2 Page Animation

For the button to work, I add keyframe, add action of go to frame label and play. For the example below, on the pamir eye button, I add the code to go and play the label 'pamir'. Repeat this step for all the buttons and arrow, change the desired label. 

Fig 6.4 Taxkorgan2 Page, Wahkan Corridor

 

I repeat the step for all the 6 destination, for all the buttons and arrow. Below is second place, Pamir Eye. 

Fig 6.5 Taxkorgan2 Page, Pamir Eye

Below is third place, Panlong Ancient Road. 

Fig 6.6 Taxkorgan2 Page, Panlong Ancient Road

Below is fourth place, Togulenxia Village.

Fig 6.7 Taxkorgan2 Page, Togulenxia Village

Below is fifth place, Mustagh Ata.

Fig 6.8 Taxkorgan2 Page, Mustagh Ata

Below is sixth place, Happiness No.5 Bridge.

Fig 6.9 Taxkorgan2 Page, Happines No.5 Bridge

Music & sound 

After I have done with all the pages, design, and navigation, I proceed to add music and sound. I start with music, I find free copyrighted music from online. Then I import the mp3 o library and make the linkage name as Song0.

Fig 7.1 Import Song to Library

Then I add a layer called btn_song for the speaker icon. Then I convert into movie clip and give instance name of 'player0'. 

Fig 7.2 Song Button

 

Inside the nested layer, I convert the speaker symbol into movie clip again with the name 'playPauseButton'.

 

Fig 7.3 Song Button

Then I double click again to get in to the nested layer. Here I add another keyframe again. As the first icon is for the music to stop, I add icon for the music to play in the new keyframe. Also I add a layer called 'js' to add action stop code.

 

Fig 7.4 Song Play Pause Button

 

Then I just need to repeat this step for the rest of the page so the music can work. Next, after I am done witht he music, I proceed to add the button sound. I search for the button sound online and convert it into wav file type. Then I import the sound to the library. 

 

Fig 7.5 Import Button Sound to Library

 

Then I simply chose one button to try. I double click on the button to get into the nested layer. Then on the 'down' frame, I add keyframe. On the properties pannel, I click frame > sound > choose the file name. The sound will automatically play when I click the button. 

 

Fig 7.6 Apply Sound to Button

 

Next, I repeat this step to all the buttons on all the pages to make it sound. After finalziing everything, I upload this project file folder exclude the fla file to netlify so the website can work. 

 

FINAL OUTCOME

Netlify Link: https://southernxinjiang.netlify.app/
Google Drive Link: https://drive.google.com/drive/folders/1Xs5XB42jNjvcYbgFSIW6zEddLVn54VXq?usp=sharing

back to top

---

FEEDBACK

Week 9
This week I have just started the website in Adobe Animate. I showed Mr.Shamsul the loading and home page. I am confused on how to connect the loading to home page. Mr.Shamsul told me to add action code to go to web page and with this time frame. 

Week 10
Mr.Shamsul said right now my website still looks so static, maybe I can add more animation on the images and text.

Week 11
I have done until the 4th page, I can continue to work on the 5th page.  

Week 12
For the about page, there is the overlay box. Mr.Shamsul suggested me to do a slight animation for the overlay content, the images, heading and body text to appear one by one. Also for the about page, the places on the map can have faster animation.   

Week 13
The website is good already, you are almost there, left adding the music.  

back to top

---

REFLECTION 

back to top