Application Design II / Task 3
17.6.2024 - 8.7.2024 (Week 8 - Week 11)
Loke Yan Ling / 0344602
Application Design II / Bachelor of Design in Creative Media
Task 3: Interactive Component Design & Development
Instructions
Task 3: Interactive Component Design & Development
Fig 1.1 Logo Animation
In this task, we will creating animation that will be used in the application as per planned in last task. Sir had recommend a platform called "Lottie" to create animation. However, im more prefer in Adobe After Effect(AE) after i tried "Lottie". Although lottie has similar functionality to AE, I would recommend AE simply because I've learnt how to use it in previous semesters and it's not wise to spend time adapting to another similar application.
Fig 1.2 Intro 2 Animation
While I was working on the animation, I felt that the current intro2 animation was a bit monotonous and dull, so I looked for a suitable illustration in freepik. The illustration was imported from adobe illustrator to AE for the animate. These illustrations are imported from adobe illustrator to AE for animate.
Fig 1.3 Error in Display
Fig 1.4 Error in display
Mr. Razif briefly mentioned integrating an After Effects animation into Dreamweaver using Lottie during our meeting. Unfortunately, detailed guidance was unavailable, prompting me to seek tutorials online.
Fig 1.5 Lottie File Extension
Fig 1.6 Lottie Embedded Code
Fig 1.7 Puppet
Fig 1.8 <script>
After a several experimenting, I found a simpler way to make this work in Adobe dreamweaver. Download the extension of Lottie to AE online, then find the extension in the AE window and upload the animation. In Lottie, find the animation and enabled it to embedded. Then just copy the embedded html to adobe dreamweaver. There are two code contain in it, one is called <script> one is called <dotlotttie-player>. The player placed into the index container while the script is placed after the </body>. The issue I found is Lottie does not support puppet features, only support a simpler features such as rotate, scale, position. etc.
Fig 1.9 Transition between Intro Pages
Fig 1.10 Control the sequence of animation
The illustration is composed of two separate animated elements. One animation is designed for a single playback, whereas the other is intended to repeat indefinitely until triggered by a user action, such as a swipe or button press. To achieve this specific animation behavior and control the sequence of their execution, JavaScript code is needed. Additionally, a separate JavaScript script is necessary to handle the transitions between introductory pages.
Fig 1.11 Transition from Logo to Intro1
Fig 1.12 Control Pages
The instructional material provided by the lecture was insufficient for managing the complexity of controlling multiple pages. To effectively handle the navigation and interactions across these pages, implementing a counter within an event listener is necessary. This approach enables dynamic page management and ensures proper functionality.
Fig 1.13 Swipe Effect
To create a smooth swiping transition between the introductory screens, I leveraged the capabilities of artificial intelligence. Providing clear and specific instructions to the AI was crucial in obtaining the desired visual and interactive outcome.
Fig 1.14 Sidebar Menu
A horizontal sliding animation for the sidebar menu was implemented using CSS and JavaScript. To enhance visual contrast and user interaction, I aimed to incorporate a semi-transparent overlay behind the menu. This overlay would not only distinguish the menu from the main content but also serve as a clickable area to close the sidebar. However, I have yet to determine an effective method to achieve this functionality.
Fig Home Page
The homepage is nearing completion. The only remaining elements to be developed are a vertically sliding white border animation that originates from the bottom of the page and the interactive linking buttons.
Final Submission
Fig 3.1 Final Presentation Video
Reflection
This project marked a significant shift from the focus of Interaction Design modules. While those modules honed my understanding of user experience and interaction principles, this project delved deep into the world of code. Here, I primarily focused on JavaScript and exploring the expressive potential of HTML and CSS.
The project challenged me to push beyond the basics of HTML and CSS, particularly in my manipulation of properties like position, justify-content, and display. These properties became essential tools for crafting the visual layout and achieving the desired animation effects within the application.
The project also reinforced a key distinction between websites and web applications. Websites primarily built with HTML and CSS can function as static informational pages. However, web applications, like the one I built, require a more dynamic approach. This is where JavaScript truly shines.
Throughout the development process, I discovered several reasons why JavaScript plays a crucial role in web applications:
Interactivity: JavaScript bridges the gap between static HTML/CSS and dynamic user experiences. It allows web applications to respond to user actions, update content in real-time, and create animations, breathing life into the application.
Complex Functionality: Web applications often boast intricate features beyond simple websites. JavaScript empowers developers to build features like user logins, real-time data updates, and complex animations, transforming a website into a powerful and engaging application.
Modern Development Landscape: Modern web development practices heavily leverage JavaScript frameworks and libraries. These frameworks provide pre-built structures and functionalities upon which developers can build, streamlining the development process and creating robust and interactive web applications.
Comments
Post a Comment