• Save
New Introductionfor Flash Designers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

New Introductionfor Flash Designers

on

  • 1,175 views

Introduction to Expression Studio and Expression Blend for the Flash Designer

Introduction to Expression Studio and Expression Blend for the Flash Designer

Statistics

Views

Total Views
1,175
Views on SlideShare
1,159
Embed Views
16

Actions

Likes
0
Downloads
1
Comments
0

5 Embeds 16

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The other part of design that many of us never see but that impact how many companies do successful things (companies like Apple, GE, Sony, BMW, McKinsey, etc.) is to focus on strategic aspects of our enterprise that inform WHAT we should do to. If you sometimes struggle and wonder how everyone else is having the successes that you’re not it might be because they are using design to impact their organization in fundamental ways.
  • Number of toolbars and Task Panes in Word, by releaseAs you can see, the number of features using all UI mechanisms goes up virtually every version. Keep in mind that every toolbar includes between 10 and 50 commands, often presented only as 16x16 unlabeled icons.
  • Most of us are probably familiar with design in the role of a typical software phase. The ‘how’ phases. In a lot of cases we may ONLY involve designers in production or perhaps high level or detailed design phases. Designers only involved in production can impact how things look but little else.
  • User interfaces that are applied after an application is created are a bit like putting icing on a cake. I can make a great cake and lousy decorating job will obscure the value that an application brings. Contrarily, a bad cake can’t be fixed by a nice decorating job.
  • Number of toolbars and Task Panes in Word, by releaseAs you can see, the number of features using all UI mechanisms goes up virtually every version. Keep in mind that every toolbar includes between 10 and 50 commands, often presented only as 16x16 unlabeled icons.
  • Number of toolbars and Task Panes in Word, by releaseAs you can see, the number of features using all UI mechanisms goes up virtually every version. Keep in mind that every toolbar includes between 10 and 50 commands, often presented only as 16x16 unlabeled icons.
  • WindowsLet’s talk about what motivated us when we approached Vista but first let’s take a show of hands.How many people use Windows right now? How many people use Macs? How many people use something else? Or all of the above?Some of what we will show here will look familiar but there’s something important that I want you to consider, what makes some of what we’ve done with Vista that is truly unique and special is that we’ve created a system that is independent from locked down hardware. This quite frankly makes our design job exponentially harder than working on a closed or tightly integrated set of software and hardware. As we are well aware there are advantages and disadvantages to both approaches. But let’s also understand the magnitude of the challenge and how far designers have been able to bring Windows, it’s a big success that will bring BETTER user experiences to hundreds of millions of computer users.
  • So as we can see from the last slide designers have a lot of roles that they play. You might be asking yourself how can anyone person be good at all that stuff? And the answer is that they can’t. But design is a different discipline than software or Web site development.ResearcherGraphic Designer (Also known as a Visual or Communication Designer)Product DesignerInteraction Designer (Sometimes the shorthand for this is IxD)Information Designer (Also known as an Information Architect)Design PlannerNow just like a technologist can wear many hats so can a designer, and many do. But some specialize in area too. More often than not though most are what we called T-shaped. They have deep knowledge in one area and general knowledge in other areas.Many folks are familiar with what a graphic, visual or communications designer would do for software. They focus on the styling of an application and can use their knowledge of color, composition, contrast and typography to enable the surface or presentation layer of an application be more usable and (typically) more esthetically pleasing. But if this is all a designer does for a project than all your really doing is pushing icing around on a cake. What’s inside stays the same and if there’s a problem with how it tastes no amount of icing will fix it.Interaction and information design get at what’s inside an application and how it should work and these disciplines are usually exclusively focused on the creation of software or computer-based interfaces. Interaction designers have specialized knowledge and training about how to make interactions effective for users. Information designers specialize in the structure and nomenclature of information. Sometimes folks do both but in many cases people specialize in just one.Sitting out in front of these folks is a design researcher and often someone called a design planner. These folks focus on the ‘what’ to make versus the ‘how’ and they ensure that we’re all solving the RIGHT problem. They do this by using methods specific to design planning that focus on intent, contextual inquiry, data analysis, synthesis and conceptualization to arrive at a set of needs and criteria that informs and provides traceability to a design specification.
  • So if we summarize, there are a lot of different roles that designers play. Some designers might play all these roles but really be an expert in only one or two. Much like architects, designers need to be able to see the big picture. If you don’t have designers on your team it’s likely that some folks have to play roles like this already. As you’ll see as we continue to talk about design and user experience the importance of doing these things well, and the ease of doing it, are what is changing how we design software and Web sites.
  • So, what is User Experience.
  • Douglas Martin is actually a book designer but his thoughts ring true for us as well. You make design choices everyday.

New Introductionfor Flash Designers Presentation Transcript

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