Advanced Interactive Design / Task 1
31.08.2022 - 30.10.2022 (Week 2 - Week 9)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Advanced Interactive Design / Taylor's University
Task 1 : Interactive Web Application (Animate)
TUTORIAL
<back to top>
Introduction to Animate CC
- New File, web -> hd video version, frame rate 30, html5 canvas, create
- Circle : represent what content u have in that screen
- Click on number, expand frame to make it longer
- Dark grey : frame, light grey : content
- Double click : access to original shape
- Faster : reduce frame
- All animation works on browser, but looping
- Shape tween : make the animation progressing
- Motion tween : symbol cannot
- Don't follow "scene" because won't appear in HTML5
ANIMATING
- Shape - right click - convert to symbol
- Right click insert keyframe
- Go to keyframe end move object
WEEK 3 EXERCISE:
- Animate the box from top left to top right
- Animate the box from top right to bottom right
- Animate the box from bottom right to bottom left
- Animate the box from bottom left to bottom right
- Animate to the center
- Morph to a rabbit
INSTRUCTIONS
<back to top>
fig 1.1 Module Information Booklet of Advanced Interactive Design
PROGRESSIONThe first project, we were tasked on doing an Animate project. The animate project will be using mobile phone's format. In this task, we were tasked on making an application to promote our chosen product.
I choose the PopMart brand, which they offer various type of series from Molly, Dimoo, Skullpanda, Disney, etc. First, I can't decide on making skullpanda or dimoo, then I proceed on choosing Dimoo over skullpanda because I planned to create something without gradient blending.
After that I became to create the scenario in my head; landing page - home (preview of the series) - shop (cart and +/- button) - account. I began to create all the assets needed, looking for the Dimoo's product pictures on the Google, and doing some thing on AI.
fig 2.2, assets
Then, in my animate, I began to create the first page, the landing page, moving on to the home until setting. I have problem with the (+/-) button at first, because the page was made in sub-nest of the nested page, then, I asked sir on how to make it like that, and sir helped me, and my buttons work, yay!
Moving forward on finalizing everything, so here's the final preview of my animate project.
Final file can be accessed here.
FEEDBACKS
Sir Razif fixed some nested pages on my animate.
Feedback: only 2 screen? -> added more.
It's very hard to do animate, I'm not really familiar with the software. The tutorial sessions are explained so fast :'). I think my problem is because I made lots of nested pages while it should be better on the main timeline. But I'm relieved I can catch up a little bit, although I kept on failing on doing the animate.
Comments
Post a Comment