Advanced Interactive Design Task 3
Instructions:
Advanced Interactive Task 3
Students are required to develop a lo-fidelity to high fidelity prototype to demonstrate their interactive design concept using specific prototype software. This phase is also to allow students to explore and find out the technical limitation they are facing and formulate a solution to overcome or to cater for this limitations.
For the final project of this module, we are required to create a working website using the knowledge that we got from the class lecture. We are required to create 5 pages for this project and we are required to use Adobe Animate.
Progress:
To begin this task, I created the first page, which is the landing page. This is because the landing page is the simplest page out of the 5 pages that I'm planning to create.
|
| Fig 1.1 Progress 1 |
I first aligned the images and made sure that the white spaces are balanced between the 2 images, and then worked backwards to create the fade-in animation to the 2 images that I added.
After I created the animation, on the last keyframe, I converted the navigation bar into a button to make it clickable, and I also added the hitboxes to make it easier to click. After I've done the homepage, it's time to move on to the selection page (where users can pick the figure that they want to learn more about).
For the second page, I wanted to create a smooth transition from the homepage (basically, the title would fade out and the image would move to the center of the page). To begin, I created a new animate file (to make my life easier). And then create the animation that I wanted.
|
| Fig 1.2 Progress 2 |
To begin, I measured the distance between the edges to make sure that the images have balanced blank spaces. And after that, I begin my attempt to animate both the images and the title. Apparently, it's not easy to animate multiple things at once, and I have to break it apart into multiple layers. But after a while, I managed to finish the second page.
|
| Fig 1.3 Progress 3 |
After that I decided to create the President History page, basically this page is about the history of indonesian presidents. I Decided to make it simple, and this page is just to showcase to people about the history of Indonesia Presidents.
|
| Fig 1.4 Progress 4 |
Next I created the B.J habibie & I.R Soekarno page, For these page I decided to make it using a BookFlip animation as shown during class. To achieve this, we need to use gsap minified, this process is rather simple and I did not ran into any issue.
|
| Fig 1.5 Progress 5 |
|
| Fig 1.6 Progress 6 |
Lastly, I added the hitboxes for all the buttons, this is so that the buttons are easier to click, and the user don't need extra effort to click the button.
|
| Fig 1.7 Adding HitBoxes |
After all of the pages, I ran into some issues, for some reason the linking between the pages isn't working, however in the end i figured it out, and it is just some minor issue with the instance name. I also decided to publish this website is "Fit to view" as using the scretch to fit might result in diffrent results on different platforms.
Final Outcome:
Comments
Post a Comment