Ai->XAML Export Plug-In Version 0.2 by Mike Swanson now works in the latest and greatest Adobe Illustrator (18.1.0 but not 18.0.0 so be sure you update at "Updates..." under the "Help" menu) and you may download it here. The applicable .aip file in .zip file goes in C:\Program Files\Adobe\Adobe Illustrator CC 2014\Plug-ins or wherever else your "Plug-ins" folder for Adobe Illustrator may be. You will know it is working if you can export the contents of an .ai file to a .xaml file. Let's go through what that looks like.
To start with I opened up Adobe Illustrator, made a blank empty new .ai file saved to my desktop, and then made a rectangle in it by selecting the Rectangle tool and then right-clicking in the workspace. By right-clicking instead of dragging out a Rectangle freehand, I was able to enter very-specific point values for how wide and tall I wished the rectangle to be and I made my rectangle 400 points wide and 300 points tall. I was being specific and calculated about this as I wished to ultimately move the shapes I was to make to a Silverlight presentation which will be 400 pixels wide and 300 pixels tall. The one-to-one points to pixels translation that comes out of the box with this plugin is pretty sweet. A made sure that my rectangle had no stroke around the border as I feared such might make the rectangle a little fatter than 400 x 300. If you make a rectangle like this for a background and then make sure that all of your other shapes sit within the background not straddling any of its edges you will find it easy to predict where shapes end up in Silverlight. I'll explain this more soon.
Next, I made some other shapes in the Adobe Illustrator file. I broke the shapes out onto different layers. I made some text but I also converted the text to curves before I tried to push it out to XAML so that the text was just vector shapes like all of the other vector shapes.
When I was done I picked "Export..." from the "File" menu and found .xaml as a viable extension. This ended up making a file I could open up in Notepad to see the XAML markup. A Viewbox tag wraps everything and just inside of that there is a Canvas tag wrapping everything else. All of individual layers are broken into Canvas tags within the outer Canvas tag and Path tags detail the individual shapes inside of the Canvas tags for the layers. Here we see, first, the Path for my rectangle and, next, the Path for the shape of a swan I created in Illustrator.
One important thing to note here is that the background rectangle sits zero pixels off of the upper left corner of wherever it may be placed making this approach to getting shapes into Silverlight predictable in terms of how things align. In this approach, in contrast, I could not easily find a comparable way to guarantee placement. That does not mean that there is not a way to better align things in Blend, but the beauty of Mike's plugin is that I get to sidestep Blend. I am an old man with a multimedia degree from the 1990s. I've been using the Adobe tools for twenty years and they are what I am good at. I have never learned GIMP or Paint.NET as I would rather fly in Photoshop than learn to crawl in either of those two environments. Comparably, if I can just stick to the Illustrator stuff I'm good at and turn a blind eye to Blend I'm apt to do so. This approach to building shapes outside of Silverlight's go-to tooling is not outrageous. When I did Macromedia Flash work I would never use the awful tools for creating shapes in Flash. I would always import from Illustrator.
The next step is to make a new Silverlight project in Visual Studio. MainPage.xaml will have a Grid tag wrapped by a UserControl tag. At the UserControl tag, set d:DesignHeight and d:DesignWidth to make the presentation the appropriate size (400 pixels by 300 pixels, remember?).
The next thing I did was copy everything inside of the outmost Canvas tag in my .xaml file to the inside of the Grid tag in Visual Studio.
My swan has survived the translation in pretty good shape. I may see it by previewing the presentation with that "Play" button at the top center of Visual Studio's interface.
When I made this blog posting (for which this most immediate blog posting is an update) XAML was "the future." It doesn't seem like the future anymore though. It and Flash both seem ghetto. We've rebelled against this sort of thing and have decided that we just want to do exciting content with HTML and JavaScript which is what we already knew. This kinda goes back to the old-man-stuck-in-his-ways thing. Anyways, I hope you've enjoyed this swan song for XAML. I don’t know when I'll blog of it again. I never use it professionally.
No comments:
Post a Comment