Expression Blend Design, Part 2 of 3: Animation

Course description

Expression Blend makes creating simple animation easy and quickly. With this course you will be introduced to Sketchflow and Motion Studies. You will see how to use the Storyboard in Expression Blend for creating transforms and other types of Animation. Then you will see how simple animation can be created and animated using animations tools and editing XAML.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.

Prerequisites

This course assumes that students have some programming experience and a background in building user interfaces on the Microsoft platform.

Meet the expert

David Kelley

David Kelley is a Silverlight MVP with over 10 years of experience building Targeted Customer eXperiences. He is currently the Principal User eXperience Architect for [wire] stone specializing in touch experiences such as digital price tags and Silverlight-based kiosks for retail. David publishes a blog called Hacking Silverlight and helps to run the Seattle Silverlight User Group and Interact Seattle, Seattle's Designer Developer Interaction Group.

Video Runtime

135 Minutes

Time to complete

242 Minutes

Course Outline

Animation

Introduction (18:17)

• Introduction (00:37)
• Motion and Interaction (00:42)
• Why Interaction/Motion Design (02:26)
• Five Dimensions (02:27)
• Motion Design (04:10)
• Motion Studies (03:00)
• Motion Study Types and Tests (02:11)
• Motion and Animation (02:22)
• Summary (00:18)

Sketchflow (08:01)

• Introduction (00:30)
• Sketchflow Motion Studies (00:41)
• Demo: Sketchflow Transitions (06:31)
• Summary (00:19)

Sketchflow Continued (18:30)

• Introduction (00:28)
• Demo: Wiring Up Elements (05:53)
• Demo: Sketchflow Paper Dolls (03:36)
• Demo: More Animation (03:37)
• Demo: Adding Frames (04:39)
• Summary (00:15)

Motion Studies (10:13)

• Introduction (00:27)
• Motion Studies in Blend (00:41)
• Demo: UI Element Animations (04:50)
• Demo: Animation Continued (03:59)
• Summary (00:14)

More Animation

Storyboard (18:50)

• Introduction (00:28)
• Storyboard Basics (03:58)
• Types of Animation (07:07)
• Key Frame Animation (03:13)
• Easing Conceptually (03:48)
• Summary (00:13)

Animation (37:42)

• Introduction (00:26)
• Animation and Storyboard (01:03)
• Demo: Animations (03:52)
• Demo: Double Animation (02:48)
• Demo: Create XAML Trigger (01:42)
• Demo: Create Story Board (03:51)
• Demo: Repeat Behavior (03:02)
• Demo: Color Animation (04:40)
• Demo: Easing (04:25)
• Demo: Working in a Canvas (01:11)
• Demo: Canvas.Left&.Right (04:54)
• Demo: Easing Functions (03:56)
• Demo: Finished Animation (01:29)
• Summary (00:15)

Keyframe Animation (23:28)

• Introduction (00:28)
• Keyframe Animations (00:52)
• Demo: Keyframe Animations (00:48)
• Demo: Object for Animation (02:21)
• Demo: Create StoryBoard (01:08)
• Demo: Transform (03:02)
• Demo: XAML (02:02)
• Demo: Rotation Transform (03:12)
• Demo: Animation working (00:28)
• Demo: Back to XAML (00:58)
• Demo: Repeat Behaviour (01:55)
• Demo: Add a Button (02:30)
• Demo: Add an Event (03:25)
• Summary (00:12)