Jan 29

Download Expression Design 5 Today!

image

Microsoft has update Expression Design for 2011 with some great new features including:

Importing Encapsulated Postscript (EPS) files
Expression Design Preview adds support for importing EPS files. To import EPS files, on the File menu, click Import Encapsulated Postscript File.

Making multiple selections in the Layers panel
Expression Design Preview adds the ability to quickly select a range of layers in the Layers panel, as well as a range of groups and objects, by pressing SHIFT and clicking in the panel to select a range, or by pressing CTRL and clicking in the panel to select non-contiguous layers. This feature functions in the same way as the multiple feature selection functions in Windows Explorer.

We have been waiting for this update for sometime… These features were well worth the wait.  There have been many design folks who mistakenly compare Expression design to Adobe Photoshop. It was never intended to be Photoshop or even compete with it. Expression Design is a pure vector art program (not a bitmap editor program like Photoshop).

Why is Expression Design a vector art instead of bitmap ?  Mostly because Expression Blend turns every bitmap (including those from Photoshop) into vectors and it was originally designed this way to work with Expression Blend (pre-Adobe Photoshop import days) .

Because art folks over the years have mistakenly compared Expression Blend to Flash and Expression Studio. to the Adobe Creative Suite (which functionality wise  there is a great deal of overlap) it’s never gained a lot of supporters outside of the Blend/XAML community..

Expression Blend is a vector art program (vector as in Inkscape or Corel Draw or Xara)  but probably not as functional as something like Adobe Illustrator it’s probably goo enough for most projects you’d do, it has long been complained at by many phone mostly Photoshop aficionados who never seem to get the distinction and differences.

One of the key features reviewers really liked about the original  Creature House Expression product was it’s ability to do "skeletal strokes”.   This was a  feature that at the time was very unique an quite a differentiator between it and other competing products.

Quoting Creative Mac:    

“Skeletal strokes allow you, essentially, to use a bitmap or vector image or animation as a stroke. These strokes are laid on top of paths, so, when you alter a path, the stroke images are altered along with them. Now, this isn't unique in and of itself. A variety of vector illustration tools, such as Adobe Illustrator and Macromedia Fireworks, allow you to overlay textures and custom shapes over a path. But what is unique is the way expression handles these image "overlays" (for lack of a better term). Rather than simply repeating a fixed bitmap image, the program twists and stretches it along the path is it would in a raster-based drawing program, but with the advantage of the edit ability of vectors. “

 

The Origins of Expression Design (Why designers should take it  more seriously!)

image

According to Wikipedia:

“Creature House Expression was a vector graphics editor initially developed by Creature House in Hong Kong, then Ray Dream, then Fractal Design Corporation and later MetaCreations as a companion to then-Fractal Design/MetaCreations Painter. At the time, Creature House was an independent Hong Kong software studio. Expression tried to duplicate Painter's UI as close as possible and was available for Mac OS and Windows.

image

Some time after Fractal Design and MetaTools merged into MetaCreations, a public company, management decided to thin out the product portfolio and focus on a more specific audience. Expression ended up back with Creature House who released two versions of the software under their own brand name, Expression 2 and Expression 3.

image

Eventually, Microsoft purchased Creature House and continued development under the code name Acrylic. In 2007, the original Expression application became part of Microsoft's Expression Studio suite of applications, rebranded and rewritten in WPF as Microsoft Expression Design. Windows XP and Vista versions are available, although Mac OS X support has officially been discontinued.”

image

This latest version is a very capable package and this new preview shows that Microsoft isn’t ditching this software even after Expression Blend received Adobe Photoshop and Illustrator import capability. It’s a great tool with a perfect price point in-between something high end like Adobe’s Creative Suite and more low-end and even free packages.

Interestingly enough you can’t say that Expression Design hasn’t made a big impact on the design world today because even the freely available Inkscape now has a XAML import export feature.. 

Expression Design 5 Feature Requests while this is in Preview

HTML 5 Tooling Portability

I was hoping this version of Expression Design 5 would finally support SVG import/export (and it still might this is just a preview) only time will tell..  Are you reading this Microsoft ?

image

SVG has become important again with the advent of HTML 5, and having a tool like Expression Design to help us make portability to and from  HTML 5 tooling a lot easier would be very welcome at this point.. The free Inkscape software supports XAML import and export although it doesn’t have all of the cool tooling that I mentioned above. For now I am using it and Expression Design both together to make that portability happen in hopes that Microsoft has a surprise for us in store for these feature needs.

inkscapeXAML

MIA Creature House Expression 3 Features that are Missing…

These screen shots say it all from the original Creature House Expression 3..

e3b

Adobe Flash graphic export (SWF) – We all know we end up converting graphics files all of the time. why not just let us have this feature back in Expression Design. This would make things a lot simpler. We all have to co-exist anyway.. Flash isn’t going away and neither is Silverlight it’s time Microsoft to bring this back..

EPS - Thanks for the import why not let us export too…

PDF- Why must I go through the extra step of getting these into a windows metafile then into Office PowerPoint (or some other method) to export to PDF ?? Microsoft Office suite has had this (and XPS support)  as an option for years.. Why not Expression Design..

Anyway those are my top “asks” for Expression Design to make it a much more usable product for us all.. This wouldn’t require a major codebase shift at all.. What do you think ? I think I have been asking for some of this for three versions at least.. (EDITOR: SMILE)

If you are interested let the folks at Microsoft know… Download the Expression Design 5 preview today, I know you’ll like it.. Then go report any issues and additional feature suggestions at:     https://connect.microsoft.com/expression?wa=wsignin1.0

----

Inkscape Beginner Tip: If you are trying out Inkscape and want to use it’s XAML export feature remember to do the following before export:

  1. go to EDIT and then SELECT ALL IN ALL LAYERS.
  2. UNGROUP in the OBJECT menu repeatedly until no further ungrouping is possible
  3. Now do your export.

This is necessary so that everything shows up in the final export as it should otherwise you CAN have strange results on occasion.

Oct 29

image

Is there a  version of Silverlight that works with embedded  systems and works with C++ native code ? Survey says yes..

Silverlight for Windows Embedded is a native (C++ based) user interface (UI) development framework for Windows Embedded Compact powered devices and is based on Microsoft Silverlight 3.

Silverlight for Windows Embedded offers a comprehensive C++ API that is fully-compatible with XML-based declarative markup and has no dependency on the .NET Framework.
With Silverlight for Windows Embedded, embedded OEMs can either completely predefine the visual appearance, effects, and behavior in source XAML, or use the C++ programming model to create or customize the UI appearance and functionality for the shell and applications.

 

Developers can use the Silverlight C++ API to load and display an existing XAML UI, implement event handling for the XAML elements, or customize the UI at run-time by adding new elements or changing the visual appearance to respond to factors present at run-time.

To enable interaction with the XAML UI at run-time, Silverlight for Windows Embedded provides Win32 support for hosting the Silverlight visual tree. It also uses the same visual tree to store new objects added by C++ application code at run time.

Silverlight for Windows Embedded is interoperable with Microsoft Expression Blend 3 and provides tools to generate template application code based on Expression Blend 3 XAML projects.

image

Silverlight for Windows Embedded provides helper template methods that automate safe implicit-type conversion of generic object types. The Silverlight for Windows Embedded programming model provides a visual host that hosts a Silverlight visual tree in a Win32 window. To handle UI events, you can attach C++ delegates to UI objects through methods available on various classes in the C++ API.

With Silverlight for Windows Embedded, you can create a Silverlight application for an embedded device, create and add custom user controls to your application, add Win32 controls to your application, and support hardware-accelerated graphics in the OS.

Capabilities of Silverlight for Windows Embedded

  • Define visual UI for applications in XAML.
  • Collaborate with designers by using XAML projects.
  • Separate programming logic and UI design.
  • Add, modify, and customize the UI at run time.
  • Create interactive multimedia UI.

Silverlight is compatible with Silverlight 3 XAML and provides a set of equivalent classes for supported XAML elements.

Silverlight and C++

Silverlight for Windows Embedded, allows you to create a UI that provides advanced visual effects, for your Windows Embedded Compact device shell and applications. Silverlight makes this possible by supporting a subset of Silverlight 3 XAML elements and by supplying a set of C++ classes that provide access to these elements.
Silverlight for Windows Embedded parses XAML UI and loads it into a C++ object tree. Then, it integrates the C++ objects with the Graphics, Windowing, and Events (GWES) subsystem to provide UI for Windows Embedded Compact devices.

Benefits

  • Silverlight C++ API and programming model that integrates with the Windows Embedded Compact operating system. This helps shorten the learning curve for developers familiar with programming in C++ for Windows Embedded Compact.
  • C++ classes that developers can use to create or customize visual appearance and behavior of UI elements.
  • Support for advanced UI features including gradients, transformations, and animations, so that developers can create interactive Silverlight-based controls in UI for embedded applications.

Supported Silverlight UI Features

Advanced Graphics

Graphics capabilities include brushes that produce gradient multicolor blend effects, image brushes that can paint the interior of UI elements, and also transforms, which are used to rotate, scale, translate, or skew UI elements. Three-dimensional (3-D) graphics capabilities include 3-D transforms, which transform UI elements in three-dimensional space.

Layout System

The layout system handles the tasks of drawing, resizing, and positioning UI elements on the graphical window. This removes the responsibility of the developer to draw and size elements on-screen using C++ code. Silverlight supports layout container objects that work with the layout system to intelligently manage the arrangement of UI elements on-screen at run time.

Animation, Timers, and Storyboards
With animation storyboards, UI elements can appear to dynamically change or move on the screen. This is achieved by quickly cycling through a series of images, or key frames, each slightly different from the previous one, over a specified duration of time. This visual effect can be achieved by defining each key-frame C++ object and implementing an animation storyboard.

Pixel Effects
Pixel effects modify the appearance of UI element, for example, by blurring the appearance of an element or adding a drop shadow. Pixel effects usually require hardware acceleration to make the graphics processing done by effects as fast as possible.

Text and Typography

Text controls and typography can both be used to display text in a Silverlight–based application. You can customize the display of text and provide unique customizations by changing visual properties, layout, or applying transforms to the text. With built-in support for the XML Paper Specification (XPS), you can also use predefined glyphs in the Silverlight UI. A glyph is a rendered image that is a visual representation of a character in a font.

New Controls
Silverlight for Windows Embedded introduces new Silverlight controls to Windows Embedded Compact developers, such as user controls, content controls, grids, canvas, paths, rectangles, and password boxes, which each inherit from the intermediate base class IXRFrameworkElement. Silverlight also provides intermediate base classes specifically intended for creating custom controls.

XAML DESIGNER WORKFLOW

Silverlight for Windows Embedded provides embedded developers and XAML designers with the API and tools for creating advanced UI. With Silverlight, OEMs can use the C++ Silverlight programming model to create UI element, graphics, and animations that leverage blend effects, weights, shadows, and gradients.

OEMs can work closely with XAML designers who use Expression Blend 3 to develop customized device UI for both the shell and applications.

XAML designers can design UI with XAML by using Expression Blend 3, and embedded developers can develop UI functionality in C++ by using Platform Builder.
.

image

Win32 Control Compatibility

Silverlight for Windows Embedded is compatible with Win32 controls developed in previous versions of Windows CE.

With Win32 control compatibility, you can add window controls, such as the ComboBox, Button, or ListBox, to the Silverlight object tree at run time, without having to rewrite or change the source code for your window controls.

Visual Hosts and Visual Trees

A visual host represents a Silverlight visual tree in a Win32 window. The concept of a visual host is unique to Silverlight for Windows Embedded. Silverlight for Windows Embedded is a framework which uses Win32 and C++ programming, unlike Silverlight 3 which is based on the .NET Framework and uses managed code. All visual elements parsed from XAML are stored in a visual tree, and only one visual tree can belong to one visual host. By loading XAML markup into a visual tree that belongs to a visual host, you can populate the on-screen content for the UI of a Silverlight for Windows Embedded application. Then a Silverlight for Windows Embedded application can search, modify, and add to the XAML elements in the visual tree with C++ code. For more information about visual trees, see Silverlight Object Trees at MSDN.

http://msdn.microsoft.com/en-us/library/cc189034(VS.95).aspx

Host Windows

To access the host Win32 window, first call IXRVisualHost::GetContainerHWND to retrieve an HWND, and then call Windows Embedded Compact Win32 functions that take an HWND as a parameter, such as UpdateWindow, IsChild, or SetParent. Having access to the host's window handle allows you to call Win32 functions directly in Silverlight for Windows Embedded, which is a feature that is not available in Silverlight 3. The visual host provides event handling at run time for objects stored in the Silverlight visual tree.

Handling Events

The way that you use events and delegates in Silverlight for Windows Embedded is different from Silverlight 3 for web applications. In Silverlight for Windows Embedded, you can attach C++ delegates to UI objects through Add*EventHandler methods, in order to handle events.

In contrast, in Silverlight 3 you attach event handlers in XAML attributes or by using the common language runtime (CLR) event model in C#.

Creating Event Handlers

To create an event handler in Silverlight for Windows Embedded, you first define a class that contains all the event handlers for your application, and then define event handlers for the events you want to handle.  Once you have implemented an event handler, you can create a delegate, and then attach the delegate to an event of a UI object.

Sample Event Handler in Native C++
(note there is no security or signing in this example that are required):

HRESULT OnMouseEnter(IXRDependencyObject* pSender, XRMouseEventArgs* pArgs)
{
IXRUIElementPtr pUIElement;
bool Captured = false;
if((NULL == pSender) || (NULL == pArgs))
{
hr = E_INVALIDARG;
}
else
{
// Get XRMouseEventArgs.Position from the event data and
// add code for additional position processing
XRPoint Position = pArgs->Position;
// Get the object sender and call IXRUIElement::CaptureMouse
pSender->QueryInterface(IID_IXRUIElement, &pUIElement);
pUIElement->CaptureMouse(&Captured);
hr = S_OK;
}
return hr;
}

Retrieving event data

An event handler must accept an XREventArgs derived structure that contains event data. Silverlight for Windows Embedded provides a variety of such event structures that contain data for specific types of events. As long as it reflects the appropriate event type, you can use any XREventArgs-derived structure in the method signature for your custom event handler. Then, you can extract data from the structure to determine information about the event. For example, XRMouseEventArgs provides a Position member that describes the x-coordinate and y-coordinate for the position on the screen where the mouse event occurred.

Modifying Other UI Elements in Event Handling Code

An event handler takes two input parameters: the object sender and an event data structure. To access or modify an object in the visual tree other than the object sender, you need a pointer to the visual host. To access the visual host in event-handling code, you can create a SetHost custom method in your event class that sets the pointer to the visual host to a variable in the event class. Then, you can use that variable to access the visual host in any event handlers in your class.

Add an Event Handler to Parsed XAML Elements

In Silverlight for Windows Embedded, you cannot add names of C# event handlers to XAML elements by using event handler syntax for an attribute of the element.

Instead, you must find each named element at run time and add event handlers to them by using the Add*EventHandler methods. To do this, you must retrieve an object pointer to each named element from the visual tree. For more information about the visual tree, see "Working with Visual Hosts and Visual Trees in Silverlight for Windows Embedded" earlier in this cookbook.

For a list of Add*EventHandler methods available in each object, see the Silverlight for Windows Embedded reference documentation for that object.

X:NAME
You must know the x:Name values for each element that raises events to add an event handler to a parsed element. The x:Name values are defined in the source XAML file.

Recommended Device Specifications for Silverlight for Windows Embedded

image

Hardware Guidelines

    • ARM V6 with Vector Floating Point Unit (VFPU)
    • 550 megahertz (MHz) processor
    • 256 MB RAM
    • 2-D or 3-D Graphics Processing Unit (GPU) with a DirectDraw or an OpenGL interface

For DirectDraw

    • a GPU or video hardware
    • Per-pixel and constant alpha blits
    • Premultiplied alpha blits
    • Hardware-accelerated alpha blits
    • Hardware-accelerated blits on raster operations that use raster-operation code SRCCOPY between system-video and video memory
    • Hardware-accelerated stretch blits for raster operations that use raster-operation code SRCCOPY
    • Hardware-accelerated color fill
    • 20 MB video memory (or system memory that a GPU can directly operate)

For OpenGL

    • you have an OpenGL driver that supports the OpenGL Embedded Systems (ES) 2.0 specification
    • It should pass the Khronos conformance tests. For more information, see the Khronos Group Web site.
    • Additionally it should support a simple vertex and fragment shader that matches the platform's GPU and is linked to a file named Shaders.dll.
    • Support run-time compilation of the default shader source code in Windows Embedded Compact.

More to follow in Future Posts..