Introduction to Expression Studio and Expression Blend for the Flash Designer

1. Introducing Expression Studio, WPF, and
Silverlight for the Flash Designer
By Don Burnett
http://www.uxmagic.com
http://blog.donburnett.com

2. Microsoft Application Platform Benefits
Compelling Consistent & Flexible Connected
UX on all app categories tools / programming / media to web, servers, services
Web Desktop
XHTML / ASP.NET .NET Languages
JavaScript / AJAX XAML / WPF
CSS Windows Media
3rd Party Services

3. Expression Studio

4. The importance of the designer/developer experience
The new way for designers and developers to work together
designer developer
designers & developers:
Speak different languages
Speak the same language
designers design developers add business logic

5. Working on a Silverlight or WPF Project?
Moving from Flash to Expression Studio, and using Expression Blend can be a
great experience, if you know the terminology differences and the
approaches taken by each program. Flash and Expression Blend are very
different products with different analogies to their purposes.
Adobe Flash’s Paradigm
Flash was designed to create movies and animation, so that is its metaphor.
Flash components (aka controls) came later in Flash‟s development
lifecycle. Because of this there is always a main timeline Window in every
project in Flash, even those that use Action Script versus a timeline to
program their behaviors. Everything that happens in the application is
reflected in that main timeline Window, and broken down further into
scenes. A scene is made up of multiple tracks that are much like layers.

6. Flash User Interface

7. Expression Blend User Interface

8. Expression Blend Differences
Expression Studio Paradigm
Although Expression Blend and the other Expression applications do allow you
to create animations, it‟s main goal is producing and “application” with
custom controls. You will find that however the results of both Flash and
Expression Blend aren‟t all that different.
Expression Blend takes a different approach; there is can be no master
timeline at all, as you aren't creating a quot;moviequot;. Each element including
layout managers can have their own timelines, you can add a time line to
any event or trigger or any onscreen item.. Because the approach isn't
building a quot;moviequot; by default instead it's aimed at creating a WPF or
Silverlight GUI, it's sometimes easier to deal with and make things happen
and you don't always have to be always mindful of the master timeline.
Expression Blend takes advantage of WPF and Silverlight's Routed Events
model.

9. Symbols Movie Clips, and Graphics in Flash
In Flash the following terms are defined:
Movie Clips: Movie clips are movies within a movie. They allow you to have
animations that run independently of the movie's main timeline. The can
contain actions, symbols, sounds and can be placed inside of other
symbols. You can also use them to create UI elements like animated
buttons.
Symbols: A reusable element (such as a movie, or graphic) that resides in the
current movie's project library.
Instance: a re-used copy of a symbol. When you create an instance you are
creating a copy of an existing symbol that exists in the document library.

10. Symbols Movie Clips, and Graphics in Flash
Buttons: Symbols that are similar to movie clips that have a special timeline
structure linked to mouse states. You can use a button to take you to a new
position on the main timeline or load any other elements. Button instances
usually have action script tied to them.
Graphic Symbols: These are used mainly for static images that can be reused
in a project. You cannot imbed sounds or actions in a graphic symbol.
Document Library: Where a movie's symbols are stored for reuse. Using a
symbol that has already been created from the library creates an instance.

11. Animations and Controls in Blend
When working in Blend you are actually working with Windows on-screen
controls, or copies of them which are a lot like Symbols. You have full
access Windows system resources including all system and reserved colors
and brushes. You also have more states and triggers available than you do
in Flash (this is true of WPF, but so far not always true in Silverlight.
Silverlight is a highly optimized version of WPF designed to run only inside
the web client, so states and triggers there more closely match the web
browser's capabilities, much like it does in Flash).
Controls: These are design elements that are the visible components of an
application. Controls (such as buttons or lists of selectable items) make it
possible for users to interact with your application. If you understand the
controls that are available to you in Expression Blend and how to customize
them, you can make your application look and behave exactly the way you
want. Controls can reside in the asset library in BLEND.

12. A Button inside a user control in Expression Blend

13. Animations and Controls in Blend
Resources: You can create a brush resource from a picture, photograph, or
other image file, and then apply that brush resource to another object.
Resource Dictionary: Resources in a resource dictionary can be applied
anywhere within your application because resource dictionaries are linked
to your project in the App.xaml file or in the Silverlight themes folder
(Themes/generic.xaml). You can package a set of resources into a resource
dictionary file and reuse the entire file in another application very much the
way you use symbols with the Document Library in Flash.
Pre-Defined Controls: Blend has several types of pre-defined controls
including: Shapes, Layout Panels, Documents/Text and Decorators, and
User Controls.

14. Animations and Controls in Blend
Simple controls: Simple controls consist of the controls themselves and the
properties that can be set on them. Simple controls do not take content. In
other words, they cannot have child elements within them.
Content controls: Content controls can take another element (or can show a
string as text for simple scenarios). Content controls have a Content
property. This means that they can contain singular content such as a
string. Also, content controls can contain another element, such as a layout
panel.
Items controls: Items controls include a collection of child elements. You can
either manually add items to the Items collection property, or you can bind a
data collection ( an Observable Collection) to the ItemsSource property.
Items controls expose items collections and have no Content property and
no Header property.

15. ContentControl and ItemsControl
ContentControls can take another element (or can show a
string as text for simple scenarios). Content controls have a
Content property. This means that they can contain singular
content such as a string. Also, content controls can contain
another element, such as a layout panel.
ItemsControl include a collection of child elements.
You can either manually add items to the Items collection
property, or you can bind a data collection ( an Observable
Collection) to the ItemsSource property. Items controls expose
items collections and have no Content property and no Header
property.

16. Animations and Controls in Blend
Headered controls:
Headered controls include a header child element that labels the control.
Headered controls can either include content (headered content control) or
a collection of items (headered items control). Below is a TabControl
example of a “headered control”

17. Templates and Styles In Blend
STYLES
Styles allow you to modify the default values of properties that are set on
the control to which the style is applied. For example, you can specify
default colors for the background, border, and foreground of a control such
as a button. These style properties can be overridden by the values
that are set on the control itself when it is drawn on the design surface
(or art board).
Example: if you set the background color to red in the style of a button, the
button will appear red when it is drawn on the design surface, but you can
change the color. You can set only pre-existing properties in the style.
For example, you cannot set a default value for a property that belongs
to a new part that you added to the template.
You can also use styles to specify the default behavior of a control. For
example, in a style for a button, you can specify a trigger so that when users
move their mouse pointer over the button, the background will change color.
These property changes are instant.

18. Templates and Styles In Blend
TEMPLATES: Allow you to modify the structure of the control to which the
template is applied. You can modify a control template to rearrange, add, or
delete the elements (or parts) in the control.
For example: you can add a background image or design to a control such as
a button.
You can also modify the values of properties (such as foreground color) that
are set on the control to which the template is applied. These template
values cannot be overridden by the values that are set on the control itself
when it is drawn on the art board. However, you can use template-binding
to set the properties of a template according to the values of properties of
the control when it is drawn on the design surface.

19. Blend Controls, Templates, Styles & Resources,
Layouts, Animation
Animation, Triggers, Timelines
<StackPanel>
Templated <StackPanel.Triggers>
<EventTrigger RoutedEvent=“Button.Clickquot;>
Button <EventTrigger.Actions>
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<ColorAnimation To=quot;Yellowquot; Duration=quot;0:0:0.5“
Storyboard.TargetName=quot;TheBrushquot;
UI Services Storyboard.TargetProperty=quot;Colorquot; />
• Templates <DoubleAnimation To=quot;45quot; Duration=quot;0:0:2quot;
Storyboard.TargetName=quot;LowerEllipseTransformquot;
Storyboard.TargetProperty=quot;Anglequot; />
• Layout
...
• Controls Library </StackPanel.Triggers>
• Styles and Resources … remainder of contents of StackPanel, including x:Name'd
TheBrush and LowerEllipseTransform …
• Annotation
</StackPanel>

20. Templates and Styles In Blend
When you modify a template, you have access to more parts of a control than
when you modify a style. For example, you can change the way the pop-up
list appears in a combo box, or you change the look of the button that
triggers the pop-up list in the combo box by modifying the items template.
Some templates consist of the following parts:
Content Presenter: a placeholder in the control template to display the
content of the control to which the template is applied. This might be the
value of a content property (in a button for example), or a text property (in a
text box).
Header: Some controls have multiple properties that hold content. In this case,
an additional content presenter is used in the template as a placeholder for
the type of content that is used as a header. An example of a headered
control is a tab item control where the header is the label on the tab and the
content is displayed underneath the header.
Items Host: Used as a placeholder for the child elements of a control. The
items host part of a template is identified by Is_Items_Host = True in the
Properties panel.

21. Templates and Styles In Blend
ItemContainerTemplate: An item container is a child template in a control
template for items controls such as a menu or a list. It provides a template
that is used to create each item when items are added to the list.
You can also specify a behavior of any new and existing parts in a template by
using triggers.
Example: You could specify a trigger, so, when users move their mouse
pointer over a button, the color of one of the parts changes. These property
changes can be instantaneous or animated to for color effects..

22. Templates and Styles In Blend
Visual States
Currently if you are working in web based software, you know that there is
usually a limited number of states for things.
For instance take a button in Flash, you have four different defined states..
However if you are working in a WPF application in XAML you have the
possibility of many more and user defined states as well.
Blend's Interaction panel (doing a WPF windows application) on a system
Button looks something like this..

23. Notice that there are a number of states defined;
this one just shows you one of the defined ones
that are standard for a button (not just up, over,
down, hit). There are also a number of events
that can be “triggered” based on state changes
and dependency property changes. Some
people call “dependency properties” attached
properties because you can add your own as
needed depending on the application. There are
some differences between these in Silverlight
and WPF, mostly because Silverlight has a more
limited functionality having to exist inside a web
browser client.
With the next release of Expression Blend 2.0
service pack 1 the Visual State Manager is
being introduced, it allows you to manage states
and define them in a more organized matter.
The image below is a simple Silverlight project
that uses a default styled button. The VSM
allows you to define states and transition times
as well. Right now for the preview this only
works with Silverlight RIA's but will be added
soon to WPF making managing states and
defining them much easier.

24. Blend‟s Visual State Manager makes it
possible to manage the look and feel of on-
screen objects such
As buttons by giving you a control panel to
more easily deal with on-screen visuals.
Right now the Visual State manager works
with Silverlight 2.0 and is being added to
work with WPF applications in the future as
well.

25. Actions in Adobe Flash
ACTIONS
In Adobe Flash we have an quot;Actions Panelquot; that ties actions to things that
happen during a frame.. Please note that this doesn‟t exist in every version
of Flash but it represents what you‟ll see in Adobe‟s CS3 version..

26. Events in Blend
EVENTS
In Blend we have an quot;EVENTSquot; panel that's accessible through the properties panel.. This shows you
the events available for each component and will allow you to define an event like a click and
open visual studio for you to code for yourself. At the moment you can only enter quot;XAMLquot; code
directly in Blend, as it's designed to work directly with Visual Studio. Note: it's easy to go from
here because Visual Studio fills in the shell from the entire event code in for you.

27. Events in Blend
EVENTS
Creating an event in Blend will automatically open you into Visual Studio where you can create code to
for the event you are creating. Expression Studio and Visual Studio are highly integrated and can
on-the-fly pass data and share project files between each other.

28. XAML: eXtensible Application Markup Language
Markup for Windows and Silverlight
– Build applications in simple declarative statements
– Can be used for any CLR object hierarchy (not just WPF)
Code and content are separate
– Streamline collaboration between designers and developers
Easy for tools to consume and generate
<Button Width=quot;100quot;>OK Button b1 = new Button(); Dim b1 As New Button
<Button.Background> b1.Content = quot;OKquot;; b1.Content = quot;OKquot;
LightBlue b1.Background = new b1.Background = New _
</Button.Background> SolidColorBrush SolidColorBrush _
</Button> (Colors.LightBlue); (Colors.LightBlue)
b1.Width = 100; b1.Width = 100

29. Data Binding with WPF and Silverlight
Binding Target Binding Source <StackPanel>
<Label>Select A Customer</Label>
Dependency Object Object <ListBox
Name=quot;myListBoxquot;
OneWay Background=quot;HoneyDewquot;
Dependency
TwoWay Property ItemsSource=
Property
OneWayToSource quot;{Binding {StaticResource mySource}}quot;
</ListBox>
</StackPanel>
UI can be bound to CLR objects or XML
Dependency properties can also be bound to ADO.NET
and objects associated with Web Services and Web properties
Sort, filter, and group views can be generated on top of the data
Data templates can be applied to data

30. Key Platform Concepts for WPF and Silverlight
Element Lookless
XAML
Composition Controls
Composited
Data Binding
Visuals

31. Integrated Vector-based
Graphics and Composition
Modern graphics capabilities
– 2D graphics in WPF and Silverlight, and 3D in WPF
– Image effects and codec support
– Hardware accelerated sub-pixel ClearType
– Video and audio
Revolutionizing the graphics and media pipeline
– Across the display, audio, printing, and remoting subsystems
– Direct3D-based hardware acceleration throughout the rendering pipeline
in WPF
future hardware technologies
– Resolution independence
– Double floating point precision
– Deeper color pipeline

32. Audio and Video Support
<Border Width=quot;400quot;
BorderBrush=quot;Greenquot;
BorderThickness=quot;9quot;>
<StackPanel>
<MediaElement Source=quot;aero.wmvquot; />
<Button>Hello</Button>
</StackPanel>
</Border>
Formats: WMV, MPEG, Some AVIs
Can be synchronized with animations Windows Media Foundation used to
instantiate playback machinery into a DirectShow graph

33. Supported Document Formats

34. Open Document Formats
Specification
XML Paper
XPS Office “12” Custom
Document Open XML Formats
Format Formats
Package Services
Parts and Relationships Abstraction
ZIP
Open Packaging Conventions Specification

35. Expression Studio

36. Flow Documents and Silverlight TextBlocks
Block Elements Inline Elements
– Paragraph – Runs
– List – Bold
– Table – Underline
– Floater Controls
– Figure – Media
– Column – Hyperlinks
– 2D Graphics

37. WPF Architecture Model
Document Services User Interface Services
Application
XPS Documents Controls
Services
Data Binding
Deployment
Packaging Services Layout
Services
XPS Viewer
Core Presentation Base Services
Imaging 2D Audio XAML
Text
Effects 3D Video Accessibility
Animation Input & Events
Visual Primitives Property System
Input /
DWM Property
Eventing
Engine
System
Composition
Engine Media Integration Layer
Windows Media
Foundation Direct3D .NET Framework
Windows Vista Display Driver (LDDM)

38. Silverlight Architecture Model
Browser Host
.NET for Silverlight Server Silverlight 1.0
Data WPF for Silverlight
Extensible ASP.NET Silverlight 2.0
LINQ LINQ-to-XML Web Services
Controls AJAX
Dynamic REST Libs
Legend
BCL POX
Languages RSS
JSON <asp:xaml>
Ruby Python Generics Collections SOAP
<asp:media>
Common Language Runtime
XAML
UI Core Inputs Media Controls DRM
2D Vectors Images Keyboard WMV / VC1 Layout Media
Animation Transforms Mouse WMA Editing
Text Ink MP3
Presentation Core
Integrated DOM JavaScript
Networking Integration Installer Engine
Stack

39. Whether you are designing rich standards-based
websites, ultimate experiences on the desktop, or
managing digital assets and content, Expression
professional design tools give you the flexibility and
freedom to bring your vision to reality.
The professional
The professional The professional The professional
Asset
Web Interactive Graphic
Management
design tool design tool design tool
tool

40. Microsoft Silverlight
is a
cross-browser,
cross-platform
plug-in
for delivering
the next generation of
.NET-based
media experiences
&
rich interactive applications (RIAs)
for the Web

41. Silverlight Overview
Compelling Cross-Platform User Experiences
Immersive media experiences & RIA
Seamless, fast installation for end users
Consistent experiences on Mac / Windows
Flexible programming model with collaborative tools
Integration with Web technologies
Based on the .NET Framework
Role specific tools for designers / developers
Efficient, lower cost delivery, and more capable media
HD to Mobile w/ SMPTE VC-1 and
Broad media ecosystem
Tools for live and on-demand publishing

42. Silverlight Audiences
Content Providers
Engage visitors with highest quality interactive web sites,
video and game experiences with lower costs
Design& Goals
Make efficientDevelopers experience…
getting /the easy you
Designers about results
Make people feel greatwhat you need
Make getting & their
visual direct
want in Windows more…
Consistent suite of tools for designers and developers using
existing skills and domain knowledge and building on existing
application investments
Viewers / End Users
Sites “light up” equally on Windows and Mac, with a one-
time install (~2MB)

43. Microsoft Development Technologies / Competitive Offerings
JSP / PHP Server Vista
ColdFusion Mac OS
Web Desktop
AJAX
Libraries Linux
LAMP “Apollo”
Cross Browser
& Platform
Microsoft
Media Others
& RIA
Flash & Quicktime
Flex & Others
43

44. Silverlight Installation Experience

45. Silverlight Web Media Ecosystem
Create Distribute Experience
Expression Blend for Up to 2x streaming Interactivity, video, and
creating media scalability over animation in browser
experiences Windows Server 2003 and/or full screen
New IIS7 Media Pack with
Expression Media
bit-rate throttling for lower Seamless, Fast
Encoder for publishing
cost for downloaded Installation for End Users
with Silverlight
media
+ Existing ecosystem of New Secure content
WMV technology partners delivery over SSL and Consistent experience on
/ solution providers Cache/Proxy support Mac and Windows

46. Silverlight Web Media Summary
Experience - “Light up the Web”
Industry support for Silverlight
Agencies, Media Technology, Media companies
Creation - Media Technology Investments
HD to Mobile w/ SMPTE VC-1/H.264
Expression Media Encoder
hardware accelerated encoding
Distribution - Windows Server 2008
IIS7 Media Pack for WMS
WM Services 6.5

47. How can we „define‟ user
experience?

48. Design is Inevitable
“Questions about whether design is
necessary or affordable are quite beside
the point: design is inevitable.
The alternative to good design is bad
design, not no design at all.”
Douglas Martin
designer

49. Questions? More information needed?
Contact me at:
Don Burnett don@donburnett.com
http://www.uxmagic.com
Thanks for Attending..