Mike Swanson

  • Mike Swanson's Blog

    Adobe Illustrator to HTML5 Canvas Plug-in Released!


    I am happy to announce that after nearly four months of work, the secret MIX Online project is no longer a secret! Today, we launched Ai->Canvas, a free plug-in for Adobe Illustrator CS3, CS4, and CS5 that works with OS X, Windows Vista, and Windows 7. The plug-in makes it easy to export artwork and animation (yes, you heard that right) directly from within Illustrator to HTML/JavaScript that you can use in your own applications.

    For a quick one-and-a-half minute introduction, watch this brief overview video. Then, download the version for Windows or OS X, extract it to your Illustrator plug-ins folder, and spend some time on the documentation page, where you’ll find 10 tutorial videos that total around 25 minutes in length. Thomas Lewis wrote a nice article titled Introducing the Ai to Canvas Plug-In that provides even more background and context.

    If you’ve read my blog over the years, you’ve probably heard me talk about the Adobe Illustrator to XAML export plug-in I wrote back in 2005. Well, about four months ago, Thomas and I were chatting at lunch, and he was evangelizing to me about the new canvas element in HTML5. As we talked, it became clear that canvas was an element that could benefit from some tooling. So after lunch, I did a search, and most of the tutorials and information I found used very simplistic smiley faces or basic shapes to demonstrate the canvas features. The light bulb went off, and I wondered if a version of my XAML plug-in could be re-tooled to work with canvas.

    Fast-forward four months, and the plug-in has been completely re-architected and re-written from the ground up. What started out as a classic C project that had reached its extensibility limits is now an object-oriented C++ project with room to grow (around 23K lines of cross-platform code for the geeks out there). Along the way, I basically memorized the entire HTML5 canvas spec, encountered some small implementation issues in each browser, read a bunch of HTML5 books (HTML5 for Web Designers by Jeremy Keith is my favorite introduction to the topic), read and then re-read the ECMA-262 (JavaScript) spec, and consumed a few JavaScript books for good measure.

    If you’re interested in the low-level details about how Ai->Canvas is built, you might enjoy Charles Torre’s interview with me on Channel 9. In the interview, I talk about fun topics like arc-length parameterization that are sure to be a hit at parties. Well…at least the kind of parties I attend. :-) Strike that…I don’t really attend parties…

    While we’re on the topic of HTML5, you should also check out the Adobe Illustrator CS5 HTML5 Pack (from Adobe Labs). Their release extends the fantastic SVG support that’s been in Illustrator for years, and it’s great to see a tool like this from Adobe themselves. I can’t wait to see where they take it.

    Over the months, I’ve built-up a bunch of test files for the plug-in (over 100). Most of them illustrate very simple features, and they’re not much to look at. Here are a few that might be interesting to folks:

    • Yellowstone Map – this is a great acid test for the plug-in, and it’s one of the sample files that ships with Illustrator. If you don’t have the fonts installed on your machine, the output won’t look correct. This complex file exports in a couple seconds on my machine. I can’t imagine the practical use of this much canvas HTML/JavaScript, but it’s fun!
    • Pencil Writing (and the original Illustrator file) – this example shows animation along a complex path and includes some dampened rotation animation too.
    • Clock (and the original Illustrator file) – a simple clock with a few lines added to the init() function to set the clock.
    • Newton’s Cradle (and the original Illustrator file) – an example of Newton’s Cradle that uses triggers to start one animation when the other animation ends.
    • Closed Path Animation (and the original Illustrator file) – shows how to set the “follow orientation” of a drawing so that it follows the direction of the curve.

    The only file that’s been edited is the Clock example, since it’s no fun looking at a clock that has the wrong time. :-) Otherwise, all of these are directly out of the Ai->Canvas plug-in.

    Thank you to everyone who helped test early versions of the plug-in, including many of the companies who created the HTML5-based sites for Beauty of the Web. Your insights absolutely helped to refine the feature-set.

    I’d love to hear your feedback about the plug-in so that the next version is even better. Also, if you create any fun projects…even if you’re only using it to export artwork, add a comment along with a URL.


  • Mike Swanson's Blog

    Example C# Code for Reading Flash (SWF) Files


    Wow! it's been about 2 1/2 weeks since I last posted, and it seems like forever. In the meantime, I've upgraded my machines to Windows Vista RC2, and I'm not looking back. I had to do some work on my wife's computer the other day, and she's still running Windows XP. Well, not for long. :) Anyway...

    Ever since my post about Converting Flash Shapes to WPF, I've been asked about the BitReader class that I mentioned. That class has since been replaced by a much more specialized class called SWFReader. As you can probably tell by the name, it's job is to make it easier to read Adobe/Macromedia Flash (SWF) files and their associated data types. If you're unfamiliar with the contents of a SWF file, you should check out A Concise Guide to the SWF File Format and Alexis' SWF Reference. Both are excellent resources.

    To get going, first download my C# sample code: FlashTools.zip (10KB). This Visual Studio 2005 solution contains two projects:

    • The FlashTools project contains four classes: Rect.cs implements the Flash rectangle/RECT type, SWFFile.cs encapsulates logic to open a SWF file and read its contents, SWFReader.cs makes it easy to read common data types from a SWF file, and Tag.cs doesn't do much other than read and identify the various Flash tags.
    • The SWFInfo project is a very simple command-line client that routes tracing information to the console to display SWF header and tag information.

    It's important to note that most modern Flash files use ZLIB compression (explained in RFCs 1950, 1951, and 1952). You could certainly implement your own "inflate" logic, but it's already been done by a number of folks. I chose to use the fully managed SharpZipLib. You'll need to download the assembly and add a reference to it from the FlashTools project to successfully compile my sample code.

    To examine the contents of a SWF file in detail, the Dump Flash Decompiler is an invaluable tool. SWF Tools is another good one to check out (especially SWFDump). Both of these are useful for validating the data that you're reading from the SWF file.

    Last, this is sample code, so swim at your own risk. There's no error checking, unit tests, performance optimizations, or guarantees. If you're going to build a more robust solution, this code will only give you enough guidance to get going. If you have any questions, feel free to contact me directly. Otherwise, party on!

  • Mike Swanson's Blog

    ZAM 3D: A 3D XAML Modeling Tool


    Electric Rain has released a Community Technology Preview (CTP) build of their new 3D XAML designer called ZAM 3D. Although you can always create and edit XAML files by hand (NOTEPAD anyone?), for more complex scenarios, a tool like ZAM 3D is a godsend. In addition to creating 3D models and interface widgets, elements can be animated and integrated directly into Avalon applications. The XAML that is output by this build is compatible with our March 2005 CTP.

    Some of the available features:

    • Primitive, basic and advanced mesh modeling features
    • Independent object animation
    • Object texturing
    • Specular, diffuse, and ambient color properties for mesh material

    I just returned from the Flash in the Can designer event in Toronto where we demonstrated Avalon along with Electric Rain. It was great to be able to show the tight integration and smooth workflow that a tool like ZAM 3D provides, and the feedback we received at the event was fantastic. I videotaped our one-hour presentation, and I hope that I can post it somewhere on the internet for all to see.

    Also, be sure to visit their ZAM 3D discussion forum to give them feedback about this exciting release.

  • Mike Swanson's Blog

    PDC05 Sessions Online


    If you were unable to attend the Microsoft Professional Developers Conference 2005 (PDC05) in Los Angeles this year, never fear; 209 breakout sessions, panels, and symposia are now available online. Each session includes a video of the presenter, a navigable index of the content, the PowerPoint presentation itself, and video of any demos. We'll be hosting this content for free, for anyone, for six full months.

    And, due to popular blogger and e-mail demand, you can also download each session individually for offline viewing. Just click the Download Presentation link that appears beneath the session information (full session zip files average around 150MB each).

    All of the sessions include downloadable PowerPoint presentations, and many of them also include materials (code samples, Visual Studio solutions, papers, etc.).

    If the thought of spending 46 full days downloading almost 27GB of content via a 56K dial-up connection doesn’t sound appealing, you can order the 4 dual-layer 8.5GB DVD set here (attendee price: $199, non-attendee price: $499). As a bonus, the DVD set also includes nearly 4GB of Channel 9 video content that was produced for PDC05. All attendees will automatically receive the DVD set, and it is expected to begin shipping in early November.

    In case you missed my earlier post, you can right-click on the speaker video, choose Play Speed, then Fast to save yourself some time by watching the presentation at a higher speed. Since there’s over 250 hours of content, this can be a big time-saver.


  • Mike Swanson's Blog

    Windows XP Service Pack 2 RTM Available to MSDN Subscribers


    The release to manufacturing (RTM) version of Windows XP Service Pack 2 is now available for download via MSDN Subscriber Downloads. The CD ISO image weighs in at 475.35MB.

    If you’d rather let Windows Update automatically install it, visit this page to ensure that your Internet Connection Firewall and Automatic Update settings are configured correctly. I don’t think it’s available through Windows Update quite yet, but enabling these features will allow your computer to download it as soon as it’s posted.

    This is a fantastic release with a lot of new security features. I’ve been running various builds of SP2 over the past few months, and I’ve loved every minute of it. The pop-up blocker is a very welcome addition, the much improved firewall is easy to configure, and I find that I don’t have nearly as much spyware finding its way onto my computer. Some of the areas that have been improved are: network protection, memory protection, safer e-mail handling, enhanced browsing security, and improved computer maintenance.

    From a customer-ready e-mail that is being sent out:

    I am pleased to inform you that Windows XP Service Pack 2 released to manufacturing on Friday August 6, 2004. Windows XP Service Pack 2 contains major security improvements designed to provide better protection against hackers, viruses, and worms.  Windows XP Service Pack 2 also improves the manageability of the security features in Windows XP and provides more and better information to help users make decisions that may potentially affect their security and privacy. 

    On Monday, August 9, 2004, the full network installation package for Windows XP Server Pack 2 will be posted on the Windows XP Service Pack 2 site on Microsoft TechNet (http://www.microsoft.com/technet/winxpsp2).  This site is also the best resource for accessing the most up-to-date technical information regarding Windows XP Service Pack 2. 

    On-line distribution will be the primary distribution vehicle for Windows XP Service Pack 2 and below is a summary of the key milestones of the distribution plan:

    8/6  Release to manufacturing
    8/9  Release to Microsoft Download Center (network installation package)
    8/9  Release to MSDN subscription site (CD ISO image)
    8/10  Release to Automatic Updates (for machines running pre-release versions of Windows XP Service Pack 2 only)
    8/16  Release to Automatic Updates (for machines NOT running pre-releases versions of Windows XP Service Pack 2)
    8/16  Release to Software Update Services
    Later in August Release to Windows Update for interactive user installations

    Because of the significant security improvements outlined above, Microsoft views Windows XP Service Pack 2 as an essential security update and is therefore distributing it as a “critical update” via Windows Update (WU) and the Automatic Updates (AU) delivery mechanism in Windows. Microsoft is strongly urging customers with Windows XP and Windows XP Service Pack 1-based systems to upgrade to Windows XP Service Pack 2 as soon as possible.

    Update: I've posted another blog entry with More Windows XP Service Pack 2 Information.

Page 4 of 74 (369 items) «23456»