Tasks 2 & Final Project - Interactive Web Compilation (Advanced Interactive Design)
28 June 2023 - 18 July 2023 ( WEEK 13 - WEEK 16)
CHIN ZHI XIAN / 0344352
BACHELOR OF DESIGN (HONS) CREATIVE MEDIA / Advanced Interactive Design
Tasks 2 & Final Project - Interactive Web Compilation
Task 2 - Interactive Web Application Pre-Production & Prototype
For this week, I use the website that I do before in the Creative Brand Strategi subject, and I have changed some of the design.
Below is the prototype that I use it:
Progression
Figure 1.1 Asset Progression
Figure 1.2Layout Progression
Below is the asset that I will use it when I animate it.
Figure 1.3Website Asset
Final Outcome
Home Page
Figure 1.3Home Page Design
Figure 1.4Event Detail Design
About Us Page
Figure 1.5About Us Design
Recipe Page
Figure 1.5Recipe Home Design
Figure 1.6Morning Delight Page
Figure 1.7Colorful Medley Page
Figure 1.8Wholesome Handhelds Page
Figure 1.9Silky Soft Boil Page
Product Page
Figure 2.1Product Home Page
Figure 2.2Reusable Water Bottle Page
Figure 2.3Lunch Boxes Page
Figure 2.4Cook Book Page
Figure 2.5Apron Page
Figure 2.4Glass Containers Page
Figure 2.5Reusable Shopping Bags Page
Below is the prototype that I use it:
Figure 1.1
Asset Progression
Figure 1.2
Layout Progression
Below is the asset that I will use it when I animate it.
Figure 1.3
Website Asset
Figure 1.3
Home Page Design
Figure 1.4
Event Detail Design
About Us Page
Figure 1.5
About Us Design
Recipe Page
Figure 1.5
Recipe Home Design
Figure 1.6
Morning Delight Page
Figure 1.7
Colorful Medley Page
Figure 1.8
Wholesome Handhelds Page
Figure 1.9
Silky Soft Boil Page
Product Page
Figure 2.1
Product Home Page
Figure 2.2
Reusable Water Bottle Page
Figure 2.3
Lunch Boxes Page
Figure 2.4
Cook Book Page
Figure 2.5
Apron Page
Figure 2.4
Glass Containers Page
Figure 2.5
Reusable Shopping Bags Page
Final Project - Thematic Interactive Web Application
Mr Razif has shared an online website that is about coding, it has a lot of tutorials and the zip for lets us easily make the website interactive.
The website is called GreenSock.
Figure 2.6GreenSock
After I am done with my prototype for my website, I will be starting to make the Interactive Animate at Adobe Animate.
Progression
Figure 2.7Website Animation Progression
When I have done my animation for my website, I will be starting to make coding for my website.
Navigation Bar Coding:
Figure 2.8Navigation Code
The action Behind part has put some coding to let the action stop the page:
From Frame 35, 40, 65, 71, 96, 97, 100, 102, 106, 104, 108, and 183, I gave an action to let the page stop them straight forward to the next page. (this.stop();)
Figure 2.9Stop action Code
For the Recipe page part I wanted to make it when I press the navigation button, it will move it smoothly to the next page.
Figure 3.1Recipe Page
Below is the script that I give to the page and the navigation button.
Figure 3.2Recipe Button & Carousel animation code
the code is:
//intro teaser screen animationgsap.to(this.mc_screen, { x: -2881.45,duration:3 });gsap.to(this.mc_screen, { x: 4799.5,duration:3, delay:2 });
// Navigation Recipe////Button 1this.recipe_btn1.addEventListener("click", moveToScreen1.bind(this));
function moveToScreen1(){gsap.to(this.mc_screen, { x: 2881.55, duration:1 }); }
Final Outcome
Below is the Presentation Video about how to walk through the Website.
The website is called GreenSock.
Figure 2.6
GreenSock
Figure 2.7
Website Animation Progression
Figure 2.8
Navigation Code
Figure 2.9
Stop action Code
For the Recipe page part I wanted to make it when I press the navigation button, it will move it smoothly to the next page.
Figure 3.1
Recipe Page
Below is the script that I give to the page and the navigation button.
Figure 3.2
Recipe Button & Carousel animation code
//intro teaser screen animation
gsap.to(this.mc_screen, { x: -2881.45,duration:3 });
gsap.to(this.mc_screen, { x: 4799.5,duration:3, delay:2 });
// Navigation Recipe//
//Button 1
this.recipe_btn1.addEventListener("click", moveToScreen1.bind(this));
function moveToScreen1()
{
gsap.to(this.mc_screen, { x: 2881.55, duration:1 });
}
Final Outcome
Below is the Presentation Video about how to walk through the Website.
Reflection
The module "Advanced Interactive Design" has been challenging for me. I have been struggling with learning animate and coding in Adobe Animate. Despite acquiring basic skills, I still cannot achieve the desired level of design that I envision. This is mainly due to my insufficient proficiency in these skills, which hinders me from accomplishing the designs I aim for.
Firstly, I have found that learning Adobe Animate requires a significant amount of time and effort. We started exploring these skills only in week 13 of this course, which has limited my time severely. The delay in instruction from the lecturer has added pressure to my learning process, as I feel I have not had enough time to research and practice adequately.
Additionally, I have come to realize that animation and coding are complex fields. Although I have learned some fundamental techniques, I have encountered significant challenges in creating satisfactory designs. This could be attributed to my lack of mastery in advanced techniques and more intricate concepts, impeding my progress in achieving the desired outcomes.
However, despite the difficulties faced in this course, I acknowledge that it presents an opportunity for learning and growth. I recognize the need for more time and practice to enhance my skills. I intend to continue researching and studying Adobe Animate, employing a trial-and-error approach to refine my design abilities.
Moreover, I plan to seek additional resources and learning materials, such as online tutorials, books, or guidance from professionals, to assist me in overcoming these challenges. I believe that through persistent effort and practice, I will gradually attain the design proficiency I aspire to.
Overall, while the "Advanced Interactive Design" module has proven challenging, particularly in regard to Adobe Animate, I acknowledge it as an opportunity to push myself and evolve. I will persevere in learning and practising to enhance my skills, gradually accomplishing the design outcomes I envision.
Comments
Post a Comment