This so far looking like a pretty strong kit for bringing the designer pipeline into Flex to provide some really nice looking web styled apps. It has a direct crossover to Silverlight and Path objects that are largely just a series of data created in Expression or exported from Illustrator into XAML. The one benefit of Flex/Flash is it compiles to a very small SWF where with Silverlight you have to package the XAML in a zip and use the downloader object to extract it out. These XAML files and Paths can get massive as I am sure the ones for Degrafa will for Flex but the compile option is nice as it is compressed heavily.

All about Degrafa

• Degrafa Samples
• Degrafa at Google Code
  
• Announcement of Code Availability (1/4/08)

Yes the launch includes shiny buttons…

Sphere Sample (right click for source)

Also, it appears it is a way to bridge the pathing and pipeline for flash or Silverlight. At one of the contributors blogs they mention this:

We have lot of interesting features planned for the coming releases. There is also a converter app that will be made available for converting the juicy Degrafa graphics to XAML.

Degrafa has gone live.

Developing…

as3

as2

actionscript

silverlight

First off, AS2 and AS3 are clouded because they are also related to EDI and EDI-INT so they get a bit inflated. Silverlight though is pretty unique in the naming. So from this graph we can see this happening:

• Silverlight and AS3 are growing rapidly
• Silverlight is crossing over as3 or meeting it
• The market looking for Silverlight is about 8-10 times as large as actionscript/as3/as3
• Silverlight and AS3 are growing, AS2 has no growth left and is an EOL language (end of life)
• AS2 (even with crossover to EDI trends for “as2″) leveled out, where AS3 is starting to lift to a larger market. This is strongly due to it being a fun language based on ES4 and interests programmers.
• The as3 effect started right in March-April 2007 (hrm I started this blog in April 2007 coincidenc? j/k )

Another chart including Flex shows a better picture of the keyword wars between flex and silverlight.

as3

as2

actionscript

silverlight

flex

So from this graph we can see this happening:

• Flex has a large buzz
• Adobe’s marketing efforts are many while silverlight is more unique and focused
• Flex, as3 and Silverlight are popular, and growing in their support (the growth market for technology is in these areas, not in tech from Flash 8/as2)
• AS2 still taking a nosedive

Flash and Flex programmers and designers should know that with Silverlight 2.0 release coming and the capabilities of Silverlight 2.0 more competitive, flashers should be working on Flex, Flash9 or at least AS3 if not Flex. The RIA competition market will heat up immensely this year with Silverlight 2.0 and possibly Flex3 and coding and programming for Flash and Flex is becoming more involved. It also has a very strong competitor in Silverlight 2.0 coming that will drive this market.

This is all great news if you are ready for it, if you are still coding actionscript2 (AS2) and paying no mind to Silverlight, Flex or at least actionscript3 (AS3) then you will see your market slowly start to fade as things are ramped up and more of a programming focus in the vector wars. If you are a flash coder and ignoring Silverlight, your solutions will suffer. If you are a silverlight coder or .NET coder and ignoring the Flex and AS3 rise your solutions will suffer. I have been playing in AS3, Flex and Silverlight for over a year on both now and they are an entirely new platform with great programming models. The competition puts focus on this market so it is a great time to be skilled in these areas.

The latest revision in builds just got the WPF and XAML tools in there. I tend to not use SharpDevelop for website development but do so for class libraries, apps and maybe forms development on occasion. This might help the layout side of things for the next gen of user interface development in .NET beyond just Expression.

One thing that has been apparent with IDEs as sometimes as they grow in size and scope and try to add more features, it is actually a slow down in some cases. I have been slowed from VS.NET 2003 to 2005. They are great tools but things start taking longer, it seems it should be the other way around.

When I need to just bust out a class library many times I do so in SharpDevelop because it is responsive and quick. I just hope they retain this speed. I unfortunately like to work on many projects at once so my IDE has to be smart about long processes (I curse you pending checkins! In 2004 when in beta VS.NET forced me to external IDE source control in Subversion and TortoiseSVN – much happier now).

XAMLPad right now is a pretty good quick development tools for XAML as well beyond just Expression and VS.NET Orcas Beta.

Be sure to try out SharpDevelop if you have not yet and develop .NET or would like to start. It is a great IDE and has some good extras like converting C# > VB.NET buffers whichcan be extended out to a service.

I would love for some kits like papervision3d, Sandy etc to be ported to Silverlight. There are some other early 3d works from bubblemark, a 3D engine recently released in early stages called Balder (source at codeplex), pageturns, and more but it is still pretty young.

Sample Textured Silverlight 3d Vista demo

3D Engine for Silverlight Alpha 1.1

But until Silverlight is available in the market it will hard to justify projects in it unless they are demos or technology show pieces. When it hits around 85% market availability and is finalized (it is currently 1.1 Alpha) it could be dangerous.

The conversion at least for the vector art looks pretty on target.

Features

The following table contains a list of features that are supported by the current version of the SWF2XAML tool or are planned for a future release. Where there are issues, I’ve tried to address them in the Comments column. If you’d like to see some visual illustrations, take a look at the Eye Candy.

Support Feature Comments Yes  Frame by Frame Advance Use the horizontal scroll bar at the bottom of the window to navigate frames in the SWF file. Because frames in a SWF file must be processed sequentially, later frames will need to calculate intermediate frames, so jumping forward may take some time. * The current version of the SWF2XAML tool does not cache prior frames (and that feature in Edit/Preferences is permanently disabled). So, when navigating backwards, the file will be re-calculated from the beginning. Depending on the file complexity, this may take some time. Yes Explore Project Folder Choose File/Explore Project Folder to view the folder that contains any exported assets (like XAML files and bitmap images). Yes XAML Export Choose File/Export… to export the current frame to a XAML file. Yes Save Frame as Bitmap To save the current frame as a bitmap image (.PNG), choose File/Save Bitmap. The image will be named frame####.png where #### is replaced by the current frame number. The file will be saved to the subfolder identified in the application preferences. Yes Launch XAML File Choose File/Launch XAML to automatically export the current frame to a XAML file and launch it in your default browser (normally Internet Explorer).  Yes Launch Original SWF File Choose File/Launch Original to launch the current SWF file. If you have the Flash Player installed, this will open the player and begin the animation. Yes Copy XAML to Clipboard Choose Edit/Copy XAML to copy the XAML for the current frame to the system clipboard. Yes Copy ResourceDictionary Choose Edit/Copy ResourceDictionary to copy a XAML ResourceDictionary element that represents the shapes that have been defined up to the current frame. The XAML is copied to the system clipboard. Note that any shapes that are defined after the current frame will not be included (so, to include everything, first navigate to the last frame of the SWF file). Yes Go To Specified Frame Choose Edit/Go To… and enter a frame number to jump to that frame. Because Flash files must be processed sequentially, all interim frames will also need to be calculated, so this may take some time. Yes Preferences Choose Edit/Preferences… to configure various aspects of the tool: The Display tab contains settings that determine the opacity of the Onion Skin mode and the stroke color and fill opacity for Wireframe Mode. The XAML tab contains settings to export to WPF/E-compliant XAML and to control its formatting. The Files tab controls where the various file types are saved on your system. By default, each SWF file will have its own subfolder created. The Advanced tab contains settings that control how the tool caches various assets. Although caching of assets can improve performance, there may be a significant memory cost involved. Yes Stage Clipping Choose View/Clip Stage to toggle clipping of the frame on and off. Often times, frames in a Flash file contain elements that can’t be seen with clipping turned on. Yes File Information Choose View/File Information to enable the File Information pane. This pane displays information about the SWF file, including: file name, file signature, version, file length, frame width, frame height, frame rate (in fps), and the total frame count. Yes Display List Choose View/Display List to enable the Display List pane. Think of the Display List as a stack of layers that make-up the current scene. You can use the checkboxes to selectively hide/unhide elements until the frame content looks the way you’d like. Note that not all checkboxes will change the visual display (only Shapes, MorphShapes, Sprites, Buttons, and Text). Yes Advance Sprite Frames Many Flash files contains movie clips (or Sprites) that are sub-elements that have their own animation frames. Although these animations will automatically progress with each frame in the main scene, choosing View/Advance Sprites will manually advance each sprite in the scene by a single frame. ** If you run across a single frame Flash file and it doesn’t appear to animate properly, it may be because you need to manually advance the sprites in the scene. Yes Wireframe Mode Choose View/Wireframe Mode to display the outlines of the elements in each frame. The wireframe stroke color and fill opacity can be configured under Edit/Preferences. Note that XAML exported or copied to the clipboard in this mode will represent the wireframe version of the frame (i.e. what you see). Yes Onion Skin Mode Choose View/Onion Skin Mode to toggle opacity of the entire tool window. When Onion Skin Mode is enabled, the tool window becomes semi-transparent so that it can be moved over the top of a comparison window (like the Flash Player). This is useful to visually compare the converted geometry. The opacity of the window can be configured under Edit/Preferences. Yes Tag Statistics Choose View/Tag Statistics to view a table of the Flash tags that have been encountered up until the current frame in the current file. To get statistics for the entire SWF file, choose Edit/Go To… to jump to the last frame of the file, then view the tag statistics. Yes View Original Size Choose View/Original Size to size the frame to the height and width that is specified in the Flash file. When using Onion Skin Mode, this makes it easier to do a visual comparison with the Flash Player. Yes Shape Morphs Shapes that were authored to morph over a specific number of frames are supported in the conversion. This includes geometry, fills, strokes, gradients, matrix transformations, etc. Yes Clipping Layers Layers in the Display List that are set to clip lower layers are supported. Although these layers don’t have any visual strokes or fills, toggling these layers in the Display List pane will affect the display. Yes Bitmaps All JPG, indexed color, and full color bitmap types are supported. Note that indexed color modes are simply converted to 32-bit RGBA PNG files (as are JPG files with an alpha layer, unique to Flash files). Yes Color Transformations Simple color transformations (multiply and add) are supported per-layer in the Display List. Yes/No Shape Fill Types  All fill types are supported to varying degrees: Solid fills are fully supported Both radial and linear gradient fills are supported. However, the new radial gradient settings in later Flash versions are not supported. Bitmap fills are supported, but non-repeating clipped fills currently have some issues. Yes/No  Buttons Only the button “up” state is currently converted and displayed. Also, there is no interactivity.  No Frame Blend Modes No current support for various frame blend modes that were introduced in later versions of Flash. No Dynamic Text Although static glyph text is supported, there is currently no support for text that uses locally-installed fonts. No ActionScript All ActionScript code is currently ignored. As such, no interactivity is converted.  No Sound No sounds are currently exported or played; they are simply skipped. No Video All video is skipped.

Installation

To get the SWF2XAML tool up-and-running on your system, follow these steps:

• Make sure that you have the .NET Framework 3.0 installed on your machine. If you’re running Windows Vista, you can skip this step, because the Framework is automatically installed with the operating system.
• Download SWF2XAML_0.2.zip (521KB).
• Extract all of the files to a folder of your choice.
• Double-click SWF2XAML.exe to run the tool.

Essentially this kit helps to take most of the quirks out of learning animation in WPF early on and making it more like Flash code animation which is a requirement for anything like games, random, visualizations that have no limitations.  I am happy to see this toolkit and more like it soon.  It may help crossover but it also provides a base level platform that allows developers to ride and make solutions in either platform with similar syntax (hrm like the Java to C# toolsets).  Good solutions are not only on one platform but this is only for WPF so far. Found via Zeh.

Microsoft is already using companies to push the Silverlight technology who are known partners and to direct competition with Flash and Apollo with WPF/Silverlight. Although Apollo is a cross platform desktop application wrapper for Flash its more than Microsoft currently has and blows away widget libraries of today.

Here’s a snippet from Niall Kennedy 

Adobe has allocated $100 million towards investing in companies that enhance its engagement platform and is especially interested in funding Apollo companies. As of last month Adobe had invested in 6 companies, including word processing company Virtual Ubiquity. Companies might develop for Apollo to take advantage a strategic investment from Adobe at reasonable terms.

Apollo in its current form seems overhyped, but the cross platform development space will definitely look different in a year as we see new toolkits from big companies executed inside and outside of the browser. It’s not too difficult for a web application to pop out of the web browser and into a standalone web technology, and the marketing and investment dollars being spent by large companies such as Adobe and Microsoft should help boost the visibility of cutting edge web apps.

This was announced at MAX the Apollo/Flash9/AS3 funding effort.  There were lots of interesting things going on in the vector app space and direct to browser desktop apps.  Ray Ozzie added his points about the future of desktop apps in that winforms apps are dead…

Psd2Xaml (with a splash of swf)

Simple, free, open-source tool for converting Photoshop .PSD files to XAML. Also supports limited SWF conversion to XAML.
This project is a by-product of the development of PaintLab, a node-based paint application.
Read more about the underlying PSD parser in this article: http://www.codeproject.com/cs/media/PSDParser.asp

Usage

Drag’n'drop PSD or SWF files to the application, and it will create XAML files in the same directory but with the extension xaml instead of psd. The individual layers’ bitmaps are saved in a subdirectory with the same name as the output .xaml file plus “_Bitmaps”.

Example: “Test.psd” is converted to”Test.xaml” and a new folder with the name “Test.xaml_Bitmaps” will be created, containing the bitmaps.

[source]

Downloads

Application: Psd2Xaml.zip (233 kb)
Source: Psd2Xaml_src.zip (226 kb)
Test media: Tiger.swf (16 kb)  DVDMenu.zip (psd, 989 kb)

It’s Gr-r-r-e-eat!!

Note: I think my processor just melted after this test. 

Bubblemark has been kind to share the source.

Download source code

“Silverlight” 

Personally the names WPF and WPF/E and now Silverlight really didn’t make sense but  Alexey Gavrilov puts a spin on it.  Personally, the Blend, Expression, Slilverlight, WinFX, WPF, WPF/E, Live marketing is a total blitz but I just don’t know that its working much. Here is Tim Sneath’s take on the naming (he works on the project).

I like the technology though but sticking with only Windows Video (which does conform to a standard VC-1 that allows video to be played on mobile, directx and xbox but in a windows only world yes but) after FLV has really taken over it might be tough.  

One thing is for sure the competition between Adobe and Microsoft on these vector tools and development environments will benefit the solution providers and developers who can learn both.  DEVELOPERS! DEVELOPERS!

Adobe vs. Microsoft Vector Wars/Development platform heats up

Silverlight, formerly WPF/E, is a cross platform competitor to flash that launched today.  The new name leaves something to be desired but this is a new technology battle over vector application for RIAs, interactives, 3d, games, etc. 

The great thing about Silverlight is the use ot .NET and C# to code the interaction rather than Actionscript 3 in Apollo/Flex/Flash9.  I like both languages but with a .NET language to code in flash this opens up the development of interactive to a whole batch of developers not into Flash.

Tools to Develop with Expression Studio and Silverlight here

One major glaring problem is that Flash won the internet video battle with FLV video but Silverlight only runs windows video.

All in all this is great news in that two of the biggest companies are going to be pushing Flash and Flash-like Silverlight, meaning mush more possible interactive work.  Some are buying into the Microsoft vs. Adobe game but it just means better tools for smart developers that know how to leverage multiple platforms for their solutions.  This usually leads to the best understanding of solution development when technology has your allegiance rather than a specific platform or company.