ADVANCED INTERACTIVE // FINAL PROJECT
Hasnol Rafiq Bin Hasnol Raduan / 0356767
Advanced Interactive / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
Final Task:
 |
| Figure 1 - Loading Screen |
The screenshot above shows my current progress, with the timeline and layers panel visible. The "MainScreen" layer contains the basic shapes for the loading page, and the "Script" layer is prepared for adding any interactivity scripts. The "bg1_outer," "bg1_outertail," and "bg1_inner" layers are additional design elements.
I opened Adobe Animate and created a new HTML5 Canvas document. I set the stage dimensions to 1024x768 pixels with a frame rate of 24 FPS to match the requirements of my project. Using the shape tool, I created a rectangle to serve as the loading bar and positioned it in the center of the stage.
I selected the loading bar and created a motion tween by right-clicking on the timeline and choosing "Create Motion Tween." In the properties panel, I animated the width of the loading bar to give the appearance of loading. The animation starts with a small width and increases to full width over the duration of the tween. To create a smooth loading effect, I applied an easing function to the animation. In the properties panel, I selected the "Ease" option and chose "Elastic Ease Out." This makes the loading bar bounce as it reaches its full width, adding a dynamic and engaging touch to the loading page.
 |
| Figure 2 - Stop Script |
#I've added some essential scripting to control the animation playback. The screenshot above shows the script. I added a simple script `this.stop();` to the keyframe where I want the animation to pause. This script halts the animation playback at the specified frame, allowing for controlled progression of the animation.
The primary reason for using `this.stop();` is to give me precise control over the animation timeline. This is especially useful when creating interactive elements where I want the animation to pause and wait for user interaction before continuing.
 |
| Figure 3 - Main Screen |
I focused on creating the homepage for the graphic design gallery website using Adobe Animate. My goal was to incorporate interactive elements, engaging animations, and an intuitive navigation system.
I started by setting up the main layout of the homepage. The design includes various posters and images to showcase the vibrant work of different graphic designers. I added several navigation buttons for different sections of the gallery, such as "Explore," "Workshops," and "Designers." These buttons allow users to easily navigate through the website.
To make the "Explore" button more engaging, I used a shape tween. This tween animates the button, making it visually appealing and drawing attention to the call to action. The tween is set up in the timeline, allowing the button to smoothly transition its shape when it first loads in.
I added animations that trigger when the page first loads. These animations help create a dynamic first impression for visitors. The animations include elements such as posters and text appearing with a smooth transition, enhancing the user experience.
I implemented scripts to add interactivity to the buttons. The script `this.stop();` pauses the animation at the initial frame, ensuring that the page loads correctly. I then used event listeners to handle button clicks. For example, when the "Explore" button is clicked, the script `_this.explrbtn.on('click', function(){ _this.gotoAndPlay('screen2'); });` transitions to the relevant screen. Similar scripts are applied to other navigation buttons, directing users to different sections of the gallery.
 |
| Figure 4 - Mouse Over Animation |
I focused on enhancing the interactivity of the graphic design gallery website by adding mouse-over animations to the posters. This feature aims to create a more engaging and dynamic user experience.
To organize the animations, I created separate layers for the normal state and the hover state of the posters. This ensures that each state is easily manageable and modifications can be made without affecting other elements.
Using Adobe Animate's tools, I created a smooth transition between the normal and hover states. This involved adjusting the properties of the posters, such as their position, size, and opacity, to create a visually appealing effect when the user hovers over them.
 |
| Figure 5 - Mouse Over Script |
I started by enabling the mouse-over functionality for the stage. This is achieved by setting the frequency at which the mouse-over events are detected. For each poster, I added an event listener that listens for the "mouseover" event. When the mouse hovers over a poster, the corresponding event handler function is triggered.
Creating Event Handler Functions, each event handler function is responsible for playing the specific animation associated with the poster. The animation switches the poster to a different image, providing a visual cue to the user.
 |
| Figure 6 - About Page |
Similar to the homepage, I created separate layers for the normal and hover states of the images. This organization helps in managing the animations effectively. I imported the necessary graphics for both the normal and hover states of the images displayed on the About page. These were placed in the appropriate layers.
Each image on the About page was assigned an event listener for the "mouseover" event. This step ensures that when the user hovers over an image, the corresponding animation is triggered. For each image, I defined an event handler function that specifies the animation to play on mouse-over. These functions ensure that the images switch to their hover state smoothly.
 |
| Figure 7 - Virtual Tour Page |
I created separate layers for the normal and hover states of the images and elements on the Virtual Tour page. This organizational approach helps manage the animations effectively. I imported the necessary graphics for both the normal and hover states of the images displayed on the Virtual Tour page. These were placed in the appropriate layers.
Each image and interactive element on the Virtual Tour page was assigned an event listener for the "mouseover" event. This step ensures that when the user hovers over an element, the corresponding animation is triggered. For each interactive element, I defined an event handler function that specifies the animation to play on mouse-over. These functions ensure that the elements switch to their hover state smoothly.
I then used event listeners to handle button clicks. For example, when the "Explore" button is clicked, the script `_this.explrbtn.on('click', function(){ _this.gotoAndPlay('screen2'); });` transitions to the relevant screen. Similar scripts are applied to other navigation buttons, directing users to different sections of the gallery.
 |
| Figure 8 - Portfolio Page |
I've created a visually appealing layout for the portfolio page, featuring a collage-style arrangement of different graphic design posters. The layout includes elements like "Portfolio", "Vision", and other eye-catching designs, creating an engaging visual hierarchy. I've implemented mouse-over animations for each poster. When a user hovers over a specific poster, it will switch to a different state. This adds an interactive and dynamic feel to the portfolio.
I've set up a timeline for smooth animations when the page loads. This will create a more polished and professional feel as elements transition into view. I've included a back button (visible in the bottom-left corner of the design) to allow easy navigation between pages.
 |
| Figure 9 - Tutorials Page |
I've created a clean, minimalist layout for the tutorials page. The design features a large "TUTORIALS" heading, which clearly communicates the purpose of the page to users. I've also included a back button (visible as an arrow on the left) for easy navigation.
I'm incorporating video tutorials into the page. The image shows that I'm working with a video file named "Beginning Graphic Design_Fundamentals-480p.mp4". This suggests I'm creating a series of foundational graphic design tutorials for users. Using Adobe Animate, I've set up a video player component.
The properties panel shows various settings I've configured:
- Autoplay is enabled, so videos will start automatically when loaded.
- Controls are enabled, allowing users to pause, play, and scrub through the video.
- The video is muted by default, which is good for user experience as unexpected audio can be jarring.
- Loop is enabled, so the video will restart after finishing, useful for short, demonstrative clips.
- Preload is checked, ensuring the video loads quickly when users navigate to the page.
I've created placeholder rectangles for where additional video thumbnails will be placed. This grid-like layout will allow for easy browsing of multiple tutorials.
Website Link: https://advfinal-hasnolrafiq.netlify.app/
.jpg)
Comments
Post a Comment