Microsoft Silverlight 4: for Designers

Course Overview

Silverlight is a new technology for cross-platform rich internet application development, and Microsoft has provided the Expression Suite of tools targeted at interactive designers.

This course will concentrate on using Expression Blend, Expression Encoder, and Expression Design as well as Visual Studio 2010 with the Silverlight extensions.

On this course we'll teach you how to produce Silverlight design together with UI interaction through the use of XAML and some basic C# commands.

Our hands-on Designing with Silverlight / Expression training course has been developed for real-world, commercial scenarios by our expert instructors. The course contains many Silverlight tutorials based on real-world scenarios.

CourseMonster offers the best available Microsoft training in your area.

Related Courses

• Microsoft Visual Studio 2010: Developing Silverlight 4.0 Applications with Visual Studio 2010 and Expression Blend 4
• Microsoft Silverlight 4: RIA Programming with Silverlight
• Microsoft Silverlight 4: Developing Rich Internet Applications Using Microsoft Silverlight 4
• Microsoft Windows Phone 7: Application Development

Audience

Interactive Designers typically from a Flash/ActionScript background who are looking to transfer skills for developing Microsoft Silverlight rich internet applications.

Skills Gained

What you will learn

• What is Silverlight
• Silverlight Tools
• Silverlight Animation & Graphics
• Audio & Video in Silverlight
• DeepZoom
• Styles, Templates, Resources

Prerequisites

Experience in interactive design in Flash or equivalent, including some basic programming experience in a modern programming language.

Course Outline

Introducing Blend and Silverlight

Positioning Microsoft Silverlight?

• Plug-in and Download Requirements
• Placing Silverlight in the Timeline of the Web

Defining Silverlight Capabilities for the Designer

• Key Types of Rich Media Supported by Silverlight
• Animation
• Databinding
• Effects
• Controls
• Layout
• DeepZoom
• Video & Audio
• Resources

Defining Silverlight Scenarios

• Examples in Detail
• High-Definition Video Experiences
• Gaming
• E-Commerce

Overview of Expression Blend 4

• Designer/Developer Workflow
• Prototyping
• The XAML Workflow
• Fundamental Ways to Create Silverlight Content

An Introduction to XAML

• XAML for Communication
• The Essentials of XAML
• Understanding the Scope and Range of XAML Using Animation

Importing Photoshop and Illustrator Files

Customizing User Interface Using Controls

• Understanding User Controls

Adding Interactivity with Behaviours

• Applying a Hyperlink to an Object Using the HyperlinkAction Behaviour
• Publishing and XAP file
• The Site Folder
• The ClientBin folder
• The XAP file
• The HTML and SilverlightJS File
• Creating Prototypes with Sketch Flow

The SketchFlow Workflow

The Philosophy of Prototyping

• The Prototype Workflow in SketchFlow:

Feedback and Evolution

• SketchFlow Authoring
• Feedback using the Sketch Flow Player

SketchFlow Projects and Workspace

The Expression Blend Workspace

• Document Windows
• Artboard
• Sketch Flow Map (SketchFlow only)
• The Tools Panel
• The Asset Library
• The Projects Panel
• The Objects and Timeline Panel
• The Properties Panel

Creating New Navigation Screens

• Adding Content to Navigation Pages
• Adding User Interface Elements

Using Composition Screens

Adding a Navbar Across Pages

Working in the SketchFlow Player

Creating Interactive Navigation

• Using the Navigate To command

Adding States in Sketch Flow

• Creating an Animated Shopping Cart Screen Using States
• Activating State Changes

Working With the SketchFlow Player Feedback Feature

• Exporting Your Project for Feedback

Exporting to Word

• Importing and Building Assets with Expression Blend

Selection Primer: Making Selections in Expression Blend

Importing Assets into Expression Blend

• Vector vs Raster

Importing From Photoshop

• Understanding the Default Canvas Size
• Adding the Photoshop Object

Importing an Adobe Illustrator file

Creating Objects in Using the Expression Blend Drawing Tools

• Overview of Drawing Tools for Shapes
• Aids to Help You Create More Precisely
• Naming Objects in Expression Blend
• Rounding the Corners of a Rectangle

Applying Properties to a Rectangle

• Creating and Editing a Stroke

Cloning an Object

Resizing the Object

• Using the Transform Pane

Applying a Gradient Stroke

Applying Effects Changing the Order

Aligning and Distributing Objects in Expression Blend

Working With Expression Design

• The Expression Design Workspace

Creating a simple shape in Expression Design

Adding a Bevel Effect

Grouping and Naming the object

Exporting into Expression Blend

• Naming and Arranging Elements in Expression Blend

Nested Objects: An Overview of Layout Controls

The Grid Control

The Canvas Control

• Creating a Canvas Control
• Selecting Elements in Objects and Timeline

Exploring the Grid Control

Creating a Grid Control

Grid vs Canvas

• Stack Panel and Border Controls

Transforming vs The Viewbox Control

• Transforming a Canvas

The Viewbox Control

• Creating Animation & Basic Interactivity in Expression Blend

Understanding Storyboards

Creating Storyboard Resources

• Creating Additional Storyboards
• Switching Storyboards on Click
• Understanding Events and Event Handlers

Behaviors in Expression Blend

• What are Triggers?
• Benefits of "Hand-Off" Timelines

Working with the Visual State Manager

• A Look at the UI Controls
• Adding and Modifying a UI Button Control
• Modifying UI Controls
• Modifying States & Transitions
• Applying Style Templates to Existing Controls

Modifying Control Labels and Icons

• A Look at the Content Presenter
• Creating a Custom UI Control

Defining States & Transitions in a Custom Control

Editing the Content Presenter

• Applying Your New Control Styles
• Adding Video in Expression Blend

Preparing Video with Expression Encoder

• The Expression Encoder Workspace
• Trimming and Cutting Video

Importing Media

Understanding Bitrate and How it Affects Quality and File Size

• Encoding Basics
• Working With Encoding Profiles
• Using the A/B Feature Compare to Create a Custom Profile
• Comparing Different Encoding Methods

Encoding Your Video Using Templates

• Editing Encoder's Video Player Templates in Blend
• Audio and Video Support in Silverlight 4

Adding Video Files to a Silverlight Project

• Using the MediaElement Control in Blend
• Creating a Volume Control
• Advanced Coding & Interactivity: A C# Sharp Primer

Brief C# and Net Background

• Common Object Models (COM)
• Operating System (OS)
• Application Programming Interface (API)
• Services

Using Expression Blend to Develop a Silverlight Project Using C#

• Investigating the Automatically-Generated C# Code

Understanding Namespaces

• Collections
• Heap
• Methods

Properties and Methods

• Partial
• Building the simple re-useable Component

What is Object-Oriented: Understanding Classes, Methods & Properties

• The Process
• Accessing an Auto-Generated Control Class
• Bridging Between Auto-Generated Code and Manually Written Code
• Using Comments in Code

Object Instantiation, Object Implementation & Adding Methods & Properties

• Instantiation
• Implementation

Modifying a Property

• Making the Property Public
• Passing an Argument to Set the Property

Using Get/Set to Access Methods

Initializing a Property Through a Constructor

Overloading: Multiple Constructors

if/else Conditional Logic

• Enumerations
• Review of Blocks in the Code
• Advanced Coding & Interactivity: Practical Application

Using Classes in User Controls

• Creating Custom Controls
• Custom Controls as Classes

Adding States to Custom Controls

Extending the Abilities of Custom Controls with C#

Adding Exposed Properties

• Working with Data

Adding Data Sources

Creating and Customizing Controls from Data Sources

Data Binding

• Binding Element Properties
• Introducing DeepZoom

DeepZoom Composer

• DeepZoom Technology
• Blurry-to-crisp Loading Behavior
• Image Pyramids and Tiles
• Project Structure

Preparing Images for a DeepZoom Composition

Creating, Composing, and Exporting a DeepZoom Project

• Creating the DeepZoom Composition
• Changing the Stacking Order

Aligning and Distributing Images

Exporting Your DeepZoom Project

Updating your DeepZoom Project to Silverlight 4

Microsoft Silverlight 4: for Designers / cm100254