Mike Swanson

  • Mike Swanson's Blog

    Moving Along


    After 11½ years at one of the greatest companies in the world, I’ve decided to leave Microsoft and rejuvenate my entrepreneurial spirit. My last day in the office is Friday, September 30, 2011.

    Thank you for subscribing to, reading, commenting, and e-mailing me about what I’ve written over the past 8 years. I’ve thoroughly enjoyed “talking” to all of you, albeit in virtual form. It’s kept me grounded and in-touch, and your feedback has helped shape a lot of decisions at the company, especially those related to our PDC and MIX conferences.

    Over the past 8 years, I’ve written 392 posts. You’ve left 3,227 public comments (I didn’t track the number of private e-mails, but it’s a lot). And according to our blogging platform, you’ve contributed to 10,273,373 total views. Wow!

    I’ve setup a new personal blog at http://blog.mikeswanson.com, if you’d like to follow along. Or, you can see what I’m up to as @Anyware on Twitter. Either way, I hope that you keep in touch.

    Take care, remember to take big, bold bets, and whatever you do, improve the world!

  • Mike Swanson's Blog

    Ai->Canvas FAQ


    Since the launch of the Ai->Canvas plug-in for Adobe Illustrator a few days ago, I’ve collected a bunch of questions via e-mail, Twitter, blog post comments, and forums. This list should eventually make its way to the official Ai->Canvas project page on MIX Online, but in the meantime, I’ve included a first version of the FAQ in this post. If you have other questions that you’d like addressed on this list, please leave a comment or drop us an e-mail. And thank you for all of the encouragement, blog posts, and tweets!

    Q. Why would I ever want to export vector graphics to a HTML5 canvas element when I can just use Illustrator to export to SVG?
    A. Excellent question! If you’re building a HTML5 application that can do everything with SVG, there’s no reason to use Ai->Canvas (and in that case, you should check out the Adobe Illustrator CS5 HTML5 Pack). However, if you’re building a canvas-based application or game that requires lower-level access and you need to draw more than simple bitmaps, Ai->Canvas makes the job much easier. Without a tool like Ai->Canvas, designers and developers are forced to manually write hundreds of lines of code like: context.bezierCurveTo(5.4, -1.5, 2.7, -1.5, 1.5, -0.5);. No fun at all.

    Q. Am I required to keep the Mike Swanson and MIX Online comments in my HTML/JavaScript code?
    A. No. We expect most people to copy and paste just the code that they need for their own projects. If you feel like giving us credit, though, we won’t complain!

    Q. Can I use Ai->Canvas to convert .ai files without installing Adobe Illustrator?
    A. No. Ai->Canvas is not a file conversion tool. It runs within Illustrator so that it has direct access to the internal representation of your artwork. This enables very high-fidelity output and also simplifies the workflow. If you don’t have Adobe Illustrator and you’d like to try Ai->Canvas, you can download a free 30-day trial

    Q. When using Internet Explorer 9 Beta 1, how do I prevent the “blocked content” alert when loading the exported HTML file?
    A. Choose Internet Options from the Tools menu (or press Alt + X), then click the Advanced tab. Scroll down to the Security section and make sure that “Allow active content to run in files on My Computer*” is checked. After you enable the setting and click OK, restart Internet Explorer for the changes to take effect.

    Q. Which versions of Windows does Ai->Canvas work with?
    A. The PC version of Ai->Canvas works with Windows Vista and Windows 7. Due to some OS-specific function calls, it will not work with Windows XP.

    Q. Does Ai->Canvas work with the trial version of Adobe Illustrator?
    A. Yes. If you’d like to try Ai->Canvas and you don’t have Adobe Illustrator, you can download a free 30-day trial.

    Q. In the tutorial videos, the right-click “View source” menu in Internet Explorer 9 Beta 1 brings up Visual Studio 2010. How can I configure the same behavior?
    A. Press F12 to bring up the developer tools window. Choose File/Customize Internet Explorer view source/Other… Then browse to your Visual Studio folder (usually something like C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE). Select the devenv.exe file and click Open.

    Q. Are there plans to release the Ai->Canvas source code?
    A. We had hoped to provide the source code for the plug-in, but the Adobe Illustrator CS3 SDK License Agreement (EULA) in section 2 appears to prohibit the release of source code. It sounds like it allows object code, but that wouldn’t help anyone who wanted to understand/modify/extend the plug-in.

    Q. Why are my international characters lost during export?
    A. While all text is handled as Unicode within the Ai->Canvas plug-in, it is converted to basic ASCII characters in the output stage. This is a known issue that is on the list to be addressed in a future version.

    Q. Why is the performance slow when I export a complex animation and run it on a [fill in device name here]?
    A. It’s hard to say, because each device, OS, browser, and application combination has unique performance characteristics. That’s why it’s important to test, test, test. Also, Ai->Canvas exports HTML and JavaScript code that is intended to be copied and pasted into your own project where performance is managed according to your project’s requirements. In general, though, the more elements that are animated and drawn for each frame, the slower the overall performance. For applications that don’t need to clear the canvas and re-draw the entire scene, there are many easy optimizations that can drastically improve performance.

    Q. How can I include complex animation properties when Illustrator CS3/CS4 has a 100-character layer name limit?
    A. Each property has an equivalent short name that uses fewer characters. For example, the rotate-timing-function property can be shortened to r-t-f, saving 17 characters. Some values also have short versions. For example, origin: center can be shortened to o:c. See the Ai->Canvas Extended Documentation for details.

    Q. Is there a way to visualize the timing (easing) functions that are included in the Ai2CanvasAnimation.js file?
    A. Yes. This HTML file draws a line graph for each of the built-in timing functions. The x-axis represents the input value (from 0.0 – 1.0), and the y-axis represents the output value (from 0.0 – 1.0).

    Q. Are there plans to create a version of Ai->Canvas for Inkscape, Fireworks, [fill in app name here]?
    A. Not at this time. Because the Ai->Canvas plug-in is written using the Adobe Illustrator SDK (software development kit), it is very specific to the internal workings of Illustrator. While the concepts could certainly be re-purposed for other drawing applications, it’s likely that very little of the actual code could be re-used.

  • 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

    HTML5 Demo Sites


    In addition to my work on PDC10 and Tech·Ed Europe 2010 (stop me and say “hi” if you attend one of these events), I’ve been spending quite a bit of my spare time on an upcoming project for the purveyors of standards-based web development over at the finely crafted MIX Online. As part of that work, I often find myself looking for good HTML5 samples, demos, and sites that take advantage of technologies like Canvas, SVG, CSS3, DOM L2 and L3, and ECMAScript5/JavaScript.

    There are a lot of fantastic sites that are included on the IE9 Beauty of the Web Experience page, but I’ve personally found it difficult to browse the list. So, I took the time to assemble a simple text-based version for your own browsing pleasure. Some of these focus on IE9-specific features like Pinning and Jump Lists, but many of them take advantage of HTML5 features.

    I hate to pick favorites, but when I started this blog years ago, I made a promise that my posts would try to “add value” beyond just a simple copy and paste of the daily news. The value here is that these are my personal favorites (for whatever reason). Some of them may even redefine what you expect from a web “site.”

    While they didn’t quite make my favorites list, here are the other sites (in no particular order):

    You can find even more demos at the Internet Explorer 9 Test Drive site, and while it doesn’t look like it’s been updated in awhile, www.canvasdemos.com is another fun place to browse. Oh…have fun with these Asteroids demos too.

    I know I’m a Microsoft guy (and I’m biased), but if you haven’t tried the Internet Explorer 9 beta with these demos, it’s worth your time. I think you’ll be surprised.

    Have fun!

  • Mike Swanson's Blog

    PDC10 is Sold Out! Really?


    As you may have heard, PDC10 is sold out! This year, we decided to hold the event at the Microsoft Conference Center (otherwise known as the MSCC or building 33) on our corporate campus in Redmond, Washington. There are many good reasons behind this decision, and one of them is to provide a more intimate and engaging experience for our in-person attendees. You see, this is the first time in PDC history that we’ve held the event on our own campus.

    Holding the event on campus enables us to do a lot of things that we could never do in a remote location, but it also has its limitations. For example, the Microsoft Conference Center is nowhere near the size of a Los Angeles Convention Center (not even close). That means that we have physical limitations including how many people we can safely accommodate.

    You’ve probably noticed signs at restaurants and other public places that state maximum occupancies/capacities, and perhaps you’ve even wondered where these limits come from. Well, they come directly from the fire marshal. There are many factors that go into determining the maximum capacity of a public space, including the size of the space, the height of the ceiling, placement of permanent columns, furniture, built-in cabinets, etc. All of these factors are considered to ensure that getting out of the room in an emergency situation is as fast and as safe as possible. Egress is the word they like to use.

    Here’s a diagram of the keynote room for PDC10. The front of the room is at the top, where you’ll notice a representative keynote stage and two large projection screens. The blue areas are for attendees. As you can see, there is no physical space remaining to add more seats. That is, unless you want to sit on the keynote stage or in the aisles. :-) We’re actually required to submit our floor plans to the fire marshal’s office, and it has to be approved before we can hold the event.

    This is what we mean when we say “sold out.”

    You’d be surprised how many e-mails we receive—both internally and externally—stating that company X or person Y absolutely must be physically present at PDC10. While we understand the frustration of our response, unfortunately, this is a limitation of physical space.

    But all is not lost.

    This year more than ever, we’re amplifying what we provide online. PDC, MIX, and Tech·Ed attendees have become accustomed to full-screen, high-definition broadcasts of our keynotes and 24-hour-or-less, free downloads of all session content. Yes, we’ll do the same for PDC10 (with some new enhancements), but we’ll also stream all of our sessions live…for free…for anyone. Including your mom. This is how you get back at her for making you watch all of those Hallmark Hall of Fame originals. :-)

    We’re also partnering with our global Microsoft offices, academic institutions, and some third parties who want to hold local PDC10-related events. While the list of events is currently being assembled, I highly encourage you to sign-up for the PDC10 mailing list. This, our @PDCEvent Twitter account, and the official PDC10 web site are the best ways to keep up-to-date on the latest developments.

    Last, but certainly not least, you can always sit comfortably at home or in your office and watch all of the content streamed to you online.

Page 1 of 74 (369 items) 12345»