Weekly learning
Week 1：
This week marks the official start of the Interaction Design course. The instructor clearly explained the core framework of the course, covering course requirements, project rules, design principles, tools, and topic selection.
The course grade is composed of both regular practice and the final project, with clearly defined weightings:
• Complete 3 in-class exercises during the semester, which will be counted towards your participation grade.
• The final project carries the highest weight; failure to submit it will result in automatic failure, so it must be taken seriously.
• The overall passing score is 60%, and both exercises and the project must be completed simultaneously.
• All assignments, materials, and reports must be submitted on time; unexcused late submissions will not be accepted.
Our core task this semester: Independently complete a website design project.
The core task this semester is to create a complete website from scratch, with very specific requirements:
• Choose your own theme; options include banking, education, culture, food, sports, etc.
• You must complete the Information Architecture (IA), visual design, interaction flow, and page construction.
• Dynamic interactions, animations, and usability guidance are encouraged; avoid purely static pages.
• Designs must have a benchmark; they cannot be created out of thin air.
• Project Requirements: Reason for Topic Selection, Design Concept, Design System, Site Architecture
The instructor emphasized the underlying logic of interaction design:
• Aesthetics directly impact user perception of usability; good-looking = better-usable
• Follow usability principles: clear interface, intuitive operation, and reduced learning curve.
• Avoid overly complex decorations; maintain structural stability and logical flow.
• Focus on page sequence and flow; ensure a reasonable user path.
Tool Preparation and Class Requirements:
• Adobe software must be installed; practical training begins next week.
• Eating in class is prohibited; bring your own water bottle.
• Preview module content before class; advanced knowledge points will be covered in class.
• Relevant materials and textbooks have been uploaded; please review them in advance.
Instructor Suggestions for Topic Selection
The instructor provided high-scoring and friendly topic directions to facilitate quick theme selection:
• Regional Culture: Showcasing local characteristics of Chongqing, Jiangxi, etc.
• Education and Popular Science: Food science, knowledge learning
• Sports and Health: Interactive websites for basketball, fitness, etc.
• Cultural Innovation: Traditional + Modern Interactive Experiences
• Requirements: Clear theme, relatively recent (within 5 years), and available reference materials.
Next week's tasks include installing the design software, determining and submitting the project theme, starting to find reference websites, and organizing the design ideas.
Week 2: Public holidays
Week 3：
This week's third week of interaction design courses focused on the basic operation of Adobe Animate software and vector drawing. The instructor explained in detail the software's history, interface layout, core tool usage, and key drawing modes. We also completed two classroom case studies: a beach ball and a small boat. Finally, we assigned Exercise 1 comprehensive exercises for after-class practice.
I. Basic Software Understanding
Adobe Animate, formerly known as Macromedia Flash, was initially used primarily for creating web animations and online games. It only supported SWF format publishing, required browser plugins to run, and had poor compatibility.
The upgraded Adobe Animate now supports the HTML5 Canvas platform and can be played directly in mainstream browsers without additional plugins. It is a core tool for creating interactive animations and dynamic web pages.
II. Core Settings for Creating a New File
1. When creating a new document, you must select the Web→HTML5 Canvas platform. This is crucial for adapting to web page display; selecting the wrong platform will prevent the file from being published correctly.
2. Set the frame rate to 24-30fps. This range ensures smooth animation playback and meets visual smoothness standards.
3. We can customize the high-resolution canvas size to meet your drawing and presentation needs.
The teacher then introduced the functions and usage of the core tools in the toolbar one by one, including the selection tool, partial selection tool, free transform tool, rectangle tool, ellipse tool, line tool, brush tool, fluid brush tool, eraser tool, paint bucket tool, and ink bottle tool. The teacher also emphasized that after selecting any tool, parameters such as brush size, smoothness, shape and color, and stroke thickness can be adjusted in the properties panel on the right.
This is the most important knowledge point of this lesson and the basic drawing standard:
1. Object drawing mode must be enabled before drawing. When enabled, each shape is an independent entity; overlapping shapes will not automatically merge. They can be selected, moved, and edited individually, and are marked with a blue border for easy operation.
2. If this mode is disabled, the drawn lines and shapes will automatically merge into a single unit, making individual modification impossible and easily leading to drawing errors.
3. After drawing a shape, if you need to fill different areas with color, you must break it up before using the paint bucket to fill with different colors.
4. The eraser tool supports multiple modes, including erasing only the fill color, erasing only lines, and standard erasure, adapting to different drawing needs.
During the drawing process, alignment tools can be used to center multiple graphics horizontally, vertically, or at equal intervals, improving the neatness of the image. After drawing and coloring the graphics, select all graphics and press Ctrl+G to group them for easy movement and management, keeping the image clean.
Classroom Exercises
Exercise 1: Drawing a Beach Ball
1. Enable object drawing mode. Use the Ellipse Tool while holding down the Shift key to draw a perfect circle as the outer outline of the beach ball.
2. Copy the circle and scale it down proportionally. Use the Align Tool to center the inner and outer circles horizontally and vertically.
3. Use the Line Tool to draw intersecting stripes. The lines should completely cover the beach ball, ensuring even coverage.
4. Select all the shapes and break them apart. Use the Paint Bucket tool to fill each stripe area with a different color.
5. After filling, select all and group them. The final product will have smooth lines, distinct colors, and a well-proportioned shape.
Exercise 2: Drawing a Small Boat
1. Using the object-oriented drawing mode, combine basic shapes such as rectangles, lines, and ellipses to build the hull, bottom, deck, and gunwales.
2. Draw each component independently, keeping it editable, and set the fill and stroke colors to your liking.
3. Adjust the proportions and positions of each part to ensure the boat's shape is simple, its structure is reasonable, and it conforms to the vector drawing style.
Week 4：
This week's lesson focuses on practical skills, from basic shape deformation to character animation.
The first step in animation production is to make the timeline "work for us".
First, customize the timeline panel, enabling core functions such as "Insert Keyframe," "Insert Blank Frame," "Insert Frame," and "Delete Frame," while disabling unnecessary "Free Frame" options to avoid operational confusion.
Key tools and modes to remember:
• Always enable "Object Drawing Mode" to ensure that drawn graphics are independently editable and avoid them from sticking to other elements;
• The alignment panel is a powerful tool for precise positioning. After selecting a graphic, you can quickly place the element in the center of the stage using "Horizontal Center Alignment" and "Vertical Center Alignment";
• The core differences between frames: Keyframes are used to record changes in element state, blank frames are used to clear the stage, and regular frames are used to extend the display time of elements.
Shape Tweening Animation (Using Circle Transformation as an Example)
Shape tweening is fundamental to animation, its core being the smooth transition between two shapes. The steps are simple and easy to learn:
1. Draw the Initial Shape:
Draw a circle in frame 1, enabling object-drawing mode and centering it using the Align panel.
2. Insert a keyframe:
Insert a keyframe in frame 20 as the state node after transformation;
3. Modify the Shape:
Select the circle in frame 20 and reshape it into any other shape (such as an ellipse or polygon). Perfection isn't necessary; the key is to create a difference from the initial shape.
4. Create the Shape Tween:
Select any frame between frames 1 and 19, right-click and select "Create Shape Tween." The frame will turn orange, indicating successful tween creation.
5. Add Easing Effect:
In the Properties panel, select "Classic Easing"—"Easing Out," double-click the parameters to adjust the smoothness, making the transformation process more natural and avoiding a mechanical feel.
6. To achieve a looping deformation:
Insert a blank keyframe at frame 40, copy the circle from frame 1 and paste it to frame 40, then create shape tweens for frames 20-39. This will create a looping animation of "circle → deform → restore".
Finished product display—Shape Tweening Animation
Once we have mastered basic shape tweens, we can move on to character animation. The core strategy is for us to use multi-layer separation for character components to achieve fluid, flexible movement.
1. Principles of Character Layering
Component Decomposition: We break the character down into independent parts (e.g., head, torso, limbs). We place each part on its own layer and rename them (e.g., "Left Leg," "Right Leg," "Body") for easier editing.
Symbol Conversion: We convert all components into movie clips. This ensures that we can add animation effects to individual parts without affecting the rest of the character.
2. Batch Adding Keyframes
Synchronized Keyframes: We hold the Shift key to select all limb layers, then insert keyframes at our target frame (e.g., Frame 5). This allows us to create "state nodes" for all limbs simultaneously, saving us from tedious repetitive clicking.
Static vs. Dynamic: For components where we don't need movement (like the torso or eyes), we simply add regular frames to extend their visibility rather than creating unnecessary keyframes.
3. Character Movement & Path Guiding
Basic Movement: We adjust the position and rotation of limbs at different keyframes (e.g., lifting the left leg, bending the right knee) and create Motion Tweens to simulate a walking gait.
Path Guiding: We right-click a layer and select "Add Classic Motion Guide." Using the Pencil Tool, we draw a path. By snapping the center of the character’s Movie Clip to this path, we can make the character follow a specific trajectory.
Loop Optimization: We copy the character's initial state from the first keyframe to the final frame (e.g., Frame 10). After we create the tween, the character will automatically return to its starting position, allowing us to form a seamless loop.
Finished product display—Character Animation
Week 5：
- During the creation process, we learned:
- Adjusting font size and color
- Using the Align tool to center the text
- Converting text into Symbols (Graphics)
- Using the Timeline to control the animation rhythm
- Insert Keyframes
- Using Classic Tween to create movement animations
- Keyframe
- Classic Tween
- Using the Arrow Key to fine-tune position
- Holding down Shift to precisely move objects
- Controlling animation speed and distance
- Using Ease In / Ease Out to make animation more natural
- Entering from the left → Leaving to the right
- Animation direction should conform to viewing habits
- Motion should not jump abruptly, otherwise it will look unnatural.
- Alpha 0 = Completely transparent
- Alpha 100 = Fully visible
- Fade In
- Fade Out
Video Showcase
- Distributing each line to different layers
- Using Group (Ctrl + G) to organize objects
- Using Break Apart (Ctrl + B) to split objects
- Controlling the animation of each element separately
I combined the previous WelcomeToMyWebsite effect with this and recreated an animation.
Final Showcase
- Lines gradually extend from short to long.
- Lines appear in sequence from different directions.
- The animation should have a sense of order.
I tried making the animation the teacher mentioned after class.
Final Showcase
Week 6: Online class
Today’s class mainly focused on creating button interactions and page navigation in Adobe Animate. The lecturer also demonstrated how to complete the basic steps for Exercise 3. The lesson was very practical and mainly taught us how to convert animated text and lines into clickable buttons and connect different scenes using actions and labels.
Converting Text and Lines into Buttons
At the beginning of the class, the lecturer reviewed last week’s work. Previously, we created animated text and lines using masks. This week, we learned how to turn those elements into button symbols.
The process included:
- Unhide the mask layer
- Select the text and line elements
- Copy all selected objects
- Create a new layer
- Insert a blank keyframe
- Paste the elements in place
- Convert them into a symbol
- Choose “Button” as the symbol type
The lecturer also reminded us to name the buttons properly, such as:
- button_enter
- home_button
This helps keep the project organized later.
Understanding Button States
The lecturer explained that button symbols have a different timeline from movie clips. Buttons contain four different states:
- Up
- Over
- Down
- Hit
The “Over” state is used for hover effects, while the “Hit” state controls the clickable area.
The lecturer demonstrated how to change the button color in the Over state to create an interactive hover effect.
Changing Graphic Colors Correctly
One important thing we learned was that graphic text cannot be edited directly by double-clicking.
Instead, we should:
- Use Color Effect
- Adjust Tint
- Set the amount to 100%
This method changes the graphic color properly without affecting the original object.
Importance of the Hit Area
The lecturer repeatedly reminded us that buttons made only with strokes or outlines will not detect clicks in empty areas.
To solve this problem, we need to:
- Insert a keyframe in the Hit state
- Draw a rectangle covering the button
- Arrange it to the back
Although the rectangle is invisible during publishing, it allows the whole area to become clickable.
This was one of the most important lessons today because it greatly improves user experience.
Adding Stop Actions
The lecturer then taught us how to stop the timeline animation using actions.
We learned to create a separate action layer and add the following:
stop();This prevents the animation from continuously playing.
The lecturer also emphasized that Action Layers should always be separated from other layers to keep the timeline clean and organized.
Using Instance Names
To make buttons functional, we must assign an instance name to each button.
Examples:
- enterBtn
- nextBtn
This allows Animate to identify which button should trigger an action later.
I learned that symbol names and instance names are completely different, and both are important.
Using Labels for Navigation
The lecturer explained that using frame numbers becomes confusing in large projects. Therefore, we should use labels to organize pages.
Examples:
- home
- about
- contact
Labels act like markers on the timeline and make navigation easier.
The lecturer reminded us:
- Use lowercase letters only
- Do not use spaces
This method helps organize larger interactive projects more efficiently.
Creating Page Navigation
Next, the lecturer demonstrated how to create a clickable Enter button that navigates to another page.
The process included:
- Selecting the button
- Adding an event
- Choosing Mouse Click
- Using:
- Go To Frame and Play
- Go To Label and Play
The lecturer recommended using labels instead of frame numbers in larger projects.
Adding Transition Animations
The lecturer mentioned that instant page switching feels too harsh and unnatural.
To improve the transition, we added the following:
- Movement animation
- Alpha fade out
- Classic Tween
The button moved slightly to the right while fading out smoothly.
The lecturer also used:
- Ease Out Quad
This made the interaction look much more professional and smooth.
Class Exercise:
At the end of the lesson, the lecturer asked everyone to practice by:
- Copying text and lines
- Converting them into buttons
- Adding Stop Actions
- Setting Hit Areas
- Creating simple navigation
We were given around 20 minutes to complete the exercise before the lecturer randomly checked students work.
Showcase of in-class practice results
Week 7: No class
- Brand or product promotion website
- Film or media promotion website
- Game release or interactive experience website
- Exhibition/museum/art event website
- Musician or artist's work release platform
- Educational, cultural, or interest-themed website
- Or other creative themes approved by the teacher.
- Idea Generation (multiple creative explorations)
- Research (background research)
- Concept Development
- User Analysis (target user analysis)
- Information Architecture
- Wireframe
- Visual Design
- Interaction Design
- DIMOO Character Interactive Website
- Tissot Lady Heart Watch Experience Website
- The Origin of Mario Game Interactive Timeline
- Peranakan Culture Promotion Website
- Tiramisu Dessert Story and Interactive Recipe Website
- Malaysia Petroleum Introduction Website
- Semporna Underwater Journey
- Malaysian Papaya Discovery
- Mixue Ice Cream Interactive Brand Story
So I sent these 12 framework diagrams to my teacher and waited for their feedback.
I then continued drawing my second version of the wireframe.
FINAL OUTCOMES TASK 1 : THEMATIC INTERACTIVE WEBSITE PROPOSAL
Comments
Post a Comment