ADV INTD - Exercises

Edita Chew En Thung / 0357357

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 2  : Interaction Design Planning & Prototype

---

Table of Content

1. LECTURES

2. INSTRUCTIONS

3. PROCESS

      i. FINAL

4. FEEDBACK

5. REFLECTION

---

LECTURES

What is Adobe Animate?

Adobe Animate is a powerful tool for creating animations, interactive content, and vector-based graphics. It is commonly used for:

• Web animations
• Interactive banners
• Game design
• Educational content

Key Features of Adobe Animate:

1. Timeline: Organizes your animation into frames and layers. Think of it as a digital flipbook.
2. Stage: The workspace where you create and view your content.
3. Tools Panel: Contains tools for drawing, selecting, and manipulating objects.
4. Properties Panel: Displays options for customizing selected objects, layers, or frames.
5. Library: Stores symbols, images, sounds, and other assets for your project.

---

Getting Started with Adobe Animate

Step 1: Setting Up a New Project

1. Open Adobe Animate.
2. Choose a preset:
   • For web projects: HTML5 Canvas
   • For animations: Choose ActionScript 3.0 (optional)
3. Set the stage size (e.g., 1280x720 pixels).
4. Click Create to begin.

Step 2: The Basic Tools

• Selection Tool (V): Select and move objects on the stage.
• Brush Tool (B): Draw freehand shapes and lines.
• Shape Tools (O, R): Create basic shapes like ovals and rectangles.
• Text Tool (T): Add text to your stage.

Step 3: Layers

• Use layers to separate different parts of your animation (e.g., background, character, objects).
• To add a new layer, click the + icon in the Timeline panel.
• Rename layers for better organization (double-click the layer name).

Step 4: Working with the Timeline

• Frames: Represent a moment in time. Adding content to frames builds your animation.
• Keyframes: Special frames where a change happens (e.g., movement, new content).
  • Add a keyframe by right-clicking a frame and selecting Insert Keyframe.
• Playhead: The red line that shows the current frame you're viewing.

---

Basic Animation in Adobe Animate

1. Create a Motion Tween (Moving Objects):

   • Draw or select an object on the stage.
   • Right-click the layer and choose Create Motion Tween.
   • Move the object to a new position on the timeline. The software will automatically animate the motion.

2. Shape Tween (Morphing Shapes):

   • Draw a shape on one frame.
   • Insert a keyframe later on the timeline and modify the shape.
   • Right-click between the frames and select Create Shape Tween.

3. Classic Tween (Basic Animation):

   • Use for simple movements like fading or scaling an object.
   • Right-click a frame span and select Create Classic Tween.

---

Tips for Beginners

• Save Often! Use File > Save As to create backups.
• Keep your layers organised.
• Use simple shapes to practice animations.
• Play your animation by pressing Enter or using the Play button in the Timeline.

INSTRUCTIONS

fig 1.1 | Module Information Booklet (MIB)

1. Bouncing Ball Animation

   • Use a Motion Tween to move a ball across the stage.
   • Add keyframes to simulate a realistic bounce by adjusting the ball's position frame by frame.

2. Shape Morphing

   • Practice using a Shape Tween to transform one shape (e.g., a square) into another (e.g., a circle).
   • Focus on smooth transitions and keyframe placement.

3. Fade and Scale Animation

   • Create a simple object (e.g., a rectangle) and use a Classic Tween to make it fade in/out or grow/shrink.
   • Adjust alpha transparency and scaling in the Properties Panel.

4. Layer Practice

   • Build a multi-layer project with separate layers for background, objects, and text.
   • Organize and name layers clearly to keep your timeline tidy.

5. Custom Path Motion

   • Draw a custom motion path for an object using the Pen Tool.
   • Attach the object to the path and watch it follow the curve smoothly.

Key Focus Areas

• Experimentation: Try out different tweens and settings to understand how they work.
• Precision: Pay attention to frame placement and timing for smoother animations.
• Organisation: Practice naming layers and managing assets in the library for efficient workflow.
  
  

EXERCISES (WEEK 1-10):

DRAW A BOAT

Intro to traditional animation and tween(s)

simple SPIDER animation 

simple WELCOME BUTTON

car

SLIDE SHOW buttons

zoom in zoom out 

REFLECTION

Findings

Through the course of my learning journey, I have successfully applied theoretical knowledge to practical scenarios, enhancing my understanding of professional practices and ethical considerations within my field. This experience also allowed me to independently locate and synthesise relevant information, sharpening my ability to think critically and creatively to solve problems effectively. Additionally, I gained valuable exposure to team dynamics and leadership opportunities, which further refined my interpersonal skills.

Observations

I noticed that my strengths lie in independent learning and problem-solving, where I am able to analyse challenges and develop effective solutions. However, there is room for improvement in managing leadership roles and ensuring consistent engagement with civic and global perspectives. Communication skills were effectively utilized, especially in team settings, but could be further enhanced to adapt to diverse audiences and digital platforms.

Conclusion

This reflection has emphasised the importance of self-reliance, intellectual engagement, and effective use of ICT tools to thrive in both academic and professional environments. Moving forward, I aim to strengthen my leadership abilities, expand my understanding of civic responsibilities, and deepen my engagement with global perspectives. Through continuous self-improvement and application of learned competencies, I am better equipped to navigate challenges and contribute meaningfully to my field and community.