Advanced Interactive Design - Task 2 Interaction Design Planning and Prototype
Bachelor of Design (Honours) in Creative Media
Liang Lina 0347076
Advanced Interactive Design - Task 2
INSTRUCTIONS
Lecture & Activities：
Week 5:
This week we learned how to draw symbols.
First, we need to use object drawing to create the desired shapes, and then convert them into symbols.
Then right-click and double-click to enter the isolation mode (my understanding is that this is another layer of action, involving the movement of the spider's legs)
Return to the previous level and create a classic motion reference layer (draw freely using the pencil)
Attach the spider to the beginning and the end of the thread.
Select "Along Path Direction", and then the spider will move along the route you have drawn with your pencil. (At the same time, the legs of the spider are also moving.)
Week 6:
In the week 6, Mr. Shamsul assigned us a task where we were required to create a countdown animation from the number 10 down to 0.
Week 7:
This week, Mr. Shamsul taught us a rather complex and troublesome operation. He demonstrated it carefully several times during the class. How to stop the timeline in Adobe Animate. (Use the shortcut key + F9)
This week, Mr. Shamsul taught us a rather complex and troublesome operation. He demonstrated it carefully several times during the class. How to stop the timeline in Adobe Animate. (Use the shortcut key + F9)
At the same time, we continue to carry out the operations on the welcome interface that we started last week.
First, we need to convert "enter" into a symbol, create a new button, and give it a name.
We need to achieve the effect as demonstrated by Mr. Shamsul, that is, to create a hover effect. When I click on the "enter" area with the mouse, the animation will be triggered.
Then, Mr. Shamsul moved on to the next step. When you click the button, the button needs to disappear. So we need to add a new keyframe. We will copy the previous one and convert it into a graphic. Change the graphic from looping playback to single-frame playback. Add a keyframe, and add a classic tween animation with fade-out effect and quadrilateral transition.
Add a blank keyframe to the action layer and add a label name. The label name is "Home". (Properties > Frames > Label Name)
If the instance name is not added (below the button), it will not be displayed when performing the operation (using the wizard to perform the operation).
Also, within the "actions" section, we can add JavaScript code? This will make our later web page production more convenient and efficient.
Task 2：Interaction Design Planning and Prototype
Description
Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.
Requirements:
Requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
- Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)
Final Outcome Task 2：Interaction Design Planning and Prototype
Canva：
FEEDBACK
Week 5:
Week 6:
REFLECTION
Experience:
Observations:
Findings:
Comments
Post a Comment