New Introductionfor Flash Designers

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

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

Expression Studio

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

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.

Flash User Interface

Expression Blend User Interface

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.

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.

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.

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.

A Button inside a user control in Expression Blend

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.

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.

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.

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”

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.

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.

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>

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.

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..

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..

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.

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.

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..

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.

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.

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

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

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

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

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

Supported Document Formats

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

Expression Studio

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

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)

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

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

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

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

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)

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

Silverlight Installation Experience

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

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

How can we „define‟ user experience?

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

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

http://uxmagic.com	8
http://www.uxmagic.com	3
http://www.slideshare.net	2
http://www.linkedin.com	2
http://blog.donburnett.com	1

New Introductionfor Flash Designers

by www.donburnett.com

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 16

Statistics

New Introductionfor Flash Designers Presentation Transcript