Blend 3, marquee keyframe selection!

It’s finally here guys and girls, marquee keyframe selection for Expression Blend, I have been waiting so long for this feature and my will this be a time saver (life saver when dealing with tight deadlines) when dealing with complex animations

Found out about it from this post, Keyframe marquee selection from the Expression Blend and Design blog, excerpt below:

“With Blend 3 it’s now possible to draw a marquee (or lasso) around keyframes to select all the keyframes that fall within it. Hold down the CTRL key then drag out a marquee with the mouse pointer as shown below. You can even begin your drag operation when the mouse pointer is over a keyframe or an animation bar; so long as CTRL is pressed, this will not result in selecting and/or moving any keyframe or animation.”

Silverlight 3 Coverflow

I have been looking around for a free coverflow sample control and stumbled upon this gem. The source code is even shared out so you can see how the author of this cool component made the coverflow control, taking advantage of Perspective 3D that is newly introduced in Silverlight 3.

View the live sample here and here’s the link to the download page for this cool Silverlight Coverflow control.

Nibbles Tutorial

Just found out from the Expression Blend and Design blog that the Nibbles Tutorial website, famous for providing small tidbit tutorials on Expression Studio, Silverlight 3 and WPF, has been updated to show how the cool samples included with Expression Blend 3 are deconstructed. Check out the updated site now!

Devigner

Nope that isn’t a spelling error, neither is it a word that is in the dictionary, yet.

So now…just what is a Devigner? It’s basically used to describe someone that does not only a Developer but also a Designer, hybrids that have knowledge of both spectrums. He’s basically somewhere in between of the devigner-o-meter! (Picture courtesy of Daqing Lee)

Some are basically capable of coding stuff from scratch, whether its C#, VB,  Actionscript, Javascript or any other programming language, they write poems with code and some of them even speak in binaries! From planning the overall user experience of projects, coming up with brilliant designs in Illustrator and Photoshop to slicing and dicing them up into HTML and CSS, thats how devigners tick. They don’t rely much on WYSIWYG interfaces, they’re not challenging enough, devigners rock with manually typing out those line of HTML code and relish having full control of everything from the front-end to the back-end (doubt this happens much in the real world).

Role of Devigners

Developers and designers never speak the same language, as both work on very distinct roles in the creation of applications, the developers deal with the back-end coding and all the awesome business logic and stuff, while the designer does all the front end graphics, animations and the overall user experience of applications. Sometimes, both sides may not have much respect for each other.

The developer might get troubled because the designer doesn’t know how much work it would be to make a textbox with rounded corners that is backward compatible. The designer might not be happy when the developer tells him that due to timing contraints, some of his/her designs (rounded corners?) can’t be implemented as it would take too much time.

It’s in this scenario, where it is recommended to have a devigner, someone that have knowledge in both areas but not to the extent of specializing in both areas, to bridge between two parties. It gets better if the devigner is involved in the planning stages they can provide their insights on dealing with how to bridge the best of both the design and development spectrum.

Devigner? Who?

Now you might question, where do we look for these devigners?

The answer is you, you can be a devigner too. Start spending some time on understanding the other side of the spectrum. If you’re a developer, start learning stuff like on interface design and usability. If you’re a designer, start learning more about programming. Just by knowing a little more, you’ll start to appreciate your brother/sister on the side of the spectrum, and making yourself a step closer into becoming a devigner.

Imagine this, a designer suddenly helps out a developer in coding certain modules, or the developer helping out in touching up certain design elements that are missed out by the designer, both parties will respect each other more, which is plain cool.

The great thing is, you would also know if a developer or designer is telling you that something can’t be done, but have actually lied

Devigner : Developer + Designer

Mark my words, Devigners will soon be a new term in the industry.

Cheers!

Visual State Manager, new feature of Expression Blend

Which I believe easily one of the most impressive and innovative enhancement to Expression Blend!

Why do I say so? Read on.

One of the key element that makes Expression Blend such a powerful tool, is its capability to allow designers to customize and have complete control over the visual look and feel of every element in WPF and Silverlight applications, which would turn out exactly the same as it looks in Blend, thanks to XAML.

So, when customizing the look, feel, transition animations, etc of a control, the steps are pretty different for both WPF and Silverlight, briefly shown below:

 

Create a Storyboard. Define an transition animation. Add an event trigger for the control, targeting the Storyboard.	Create a Storyboard Define an transition animation For Silverlight 1.0 Sites, JavaScript has to be written in the code behind to trigger Storyboards for each event. For Silverlight 1.0 Applications, managed code has to be written in the code behind to trigger Storyboard for each event.

 

Thus, in order to “style” each control, the designer would have to define the transition animations that are stored in a Storyboard, and the look and feel of various states, and for Silverlight applications, they also need to write code to trigger the transition animations.

With the introduction of the Visual State Manager (VSM), that will be included in the June preview of Expression Blend, these steps could be further simplified, but not replaced. As VSM is introduced to simplify the customization of visual states of controls.

Visual States are essentially the various states of a control that could be seen visually. For example, a checkbox could have a few visual states:

 

Unchecked	–>
Checked	–>
MouseOver	–>
MouseLeftButtonDown (or MouseDown)	–>

 

With VSM, you could easily customize the various visual state of a control, along with the animations that will be in effect upon each state transition, and the very duration of each transition animation.

The Interaction Panel of Expression Blend will now include a State Explorer, allowing designers to now dive down, view, and customize the various visual states of any control. The duration of transitions can be defined for each visual state group, or for a specific visual state, or even for transitions to other visual states.

VSM is not only supported for template-based controls, but also User Controls, where states could be defined, instead of customized based on the available states.

Do take note that the VSM will be available for Silverlight 2 Beta 2 Application Projects for the June preview of Expression Blend, but the preview version for WPF will be available as a separate download.

To find out more about the VSM, check out the awesome posts by Christian Schormann of the Expression Team:

- Creating Control Skins with Visual State Manager – An Introduction (Make sure you see the video!)
- Visual State Manager: Goals
- Visual State Manager for User Controls: A Simple Chord Finder Example

The introduction of VSM greatly simplifies the process of “styling” both WPF and Silverlight applications, by providing a consistent solution of managing “styles” of controls.

I for one love the idea of not needing to write any code in order to “style” the applications I craft, and most definitely reduce the learning curve of designers going from WPF to Silverlight and vice versa.

Kudos to the Expression Team in bringing such a huge improvement to Expression Blend!

Event: Remix Essential 2008

Just got news from my MSP manager that Remix Essentials 08 will be held at:

Date	:	27th May 2008
Time	:	9.00am – 1.00pm
Venue	:	Lim Kok Wing University, Cyberjaya

I’ve been hearing “rumours” that Remix 08 will be held at  soon, and I was really looking forward to it.

There will be sessions on stuff like Expression Studio, Windows Live, Silverlight, WPF, and UX. The speakers of these sessions are awesome guys like Leon Brown, Arturo Toledo, Angus Logan, and our resident Silverlight guy, Rohan Thomas.

Unlike the Remix or Mix events of other countries, Remix Essentials 08 is totally free!

On top of that, attendees stand a chance to win a full copy of Expression Studio 2! The seats are limited to a first come first served basis, you’ll definitely not want to miss out, so register right now!

New version of WPF Released

Today, Microsoft has released a beta preview for of SP1 for various editions of Visual Studio and the .NET Framework 3.5. And Tim Sneath has also blogged about the availability of the new major version of the Windows Presentation Foundation (WPF), that will ship with the .NET Framework 3.5 Beta 1, which full version will be available later this summer.

The downloads for these Service Pack beta releases are available here. For more information also check out Scott Guthrie’s blog post here.

There are a few major improvements, and the most notable one is the introduction of the Client Profile, which is a scaled down version of the .NET Framework 3.5, that is around 25 MB, where assemblies that aren’t used are removed. Its pretty amazing that the solution to the deployment issue for enterprise WPF applications is pretty similar to the approach adopted by the Silverlight runtime. Ease of deployment will definitely help in increasing the adoption rate of WPF in the industry.

There is also improvement to the WPF graphics engine, with enhanced support for shaders and deeper DirectX support, enabling a Direct3D surface to be brushed on top of any surface of WPF elements. Another notable improvement is the “fixes” on the BitmapEffects we most commonly use, Drop Shadow and Blur, which are now hardware-accelerated, and was previously a definite “no-no” in developing WPF applications as it takes up too much processing power.

Other than that, there are many other improvements like the loading screen of XBAPs now running in HTML instead which is definitely a great improvement, the introduction of Splash screen support in Visual Studio 2008 SP1.

There will also be new controls to add on to the arsenal of controls available in WPF, which are the DataGrid, Office Ribbon, and most notably, the WebBrowser control, which could potentially enable seamless integration of WPF and Silverlight applications.

Its great to see that many improvements on WPF, and if Silverlight is to continue evolving to provide the capabilities of what WPF has today, I must say, the future looks very promising indeed.

Some User Experience Guidelines

This article on MSDN may not be that new, but its top notch!

Find out how to create the best user experience for your applications by Dax Pandhi, you’ll be shocked on that by applying some simple tricks and sticking with some guidelines, you could shape your applications into much richer and intuitive applications for both the desktop and the Web.

Developer-Designer Workflow

Check out Ryan Stewart’s post on the importance of developer and designer workflow when it comes to building RIAs and almost any other applications.

He brought up many great points, like how Apple’s focus on both presentation and functionality have contributed to its success throughout these years, and how we’re going to need both the designer’s creativity and the developers code, to come out with something successful.

Collaboration between both designer and developer is essential, and there is a need for a framework or technology to deal with this tricky, tricky issue. The first technology that came to mind, that currently has the best method of dealing with this issue of collaboration, is no other than – WPF.

The workflow of developing both WPF applications and Silverlight applications are pretty similar, where the developer will be using Visual Studio to pump code into the application, and the designer using Expression Blend to craft the user interface.

Where both parties would be dealing with the same project, the same format (XAML), that could be opened in both Visual Studio and Expression Blend, development and design could be done rapidly, and integration would be seamless, and the completed project would include both the creativity of the designer for better user experience and the functional capabilities provided by the developer.

Still, the workflow’s concept might seem a little too elusive, and if you would like to find out more, check out this video from Channel 9, Real World WPF : Designers and Developers working together?!

In the video, Martin Grayson and Paul Tallett from the UK MCS User Experience team talks about their experience working on real world WPF applications and how designers and developers worked together, they’ve also explained in detail the various workflows they have tried out, weighing their ups and downs and their opinion on which is the best workflow for developing WPF applications.

Well, ain’t WPF just cool!

Tech.Ed SEA 2007

This coming September, Microsoft will be having its premier & largest annual conference in the South East Asia region, Tech.Ed SEA 2007, at 10-13 September at the Kuala Lumpur Convention Center.

Why should you attend?

Those attending would be able to learn about the new Microsoft products and technologies, not from just any instructor, but experts and specialists in the industry, some of them even from Redmond, and even some which helped built the products and technologies. Which means you can fire questions at them without thinking twice, neat! (On second thought, do think twice)

Not only will you be able to learn, you would also get to know more people in the industry, share your knowledge, get to know more on what’s happening in the ever-changing world of technology.

Who should go?

The conference is mainly targeted at IT professionals and developers, not only to get them exposed and aware of the new products and technologies available, but to better equip them with the priceless knowledge on how, when, and what technologies or products should be used as their business solution, better improving both themselves, and their organizations.

But this time around, developers that like design, or designers that have technical knowledge, should also take part in this conference! Why? Continue on to find out more!