disturb media

Illustrator Script: Save Selection Coordinates

07.03.12 George Profenza

In my previous post I mentioned JS and scripting Adobe Creative Suite applications. Starting with this post, I will release tiny tools written for various CS applications (Flash, Illustrator, Photoshop, etc.) that can make some of the tedious tasks a lot easier.

This week I share a script which allows developers pixel perfect precision when dinamically placing assets based on layouts specified by designers.

This is a pretty simple script: it saves the x,y coordinates of selected objects in Illustrator so they can be used by a developer. The most common scenario is when a designer creates a complex layout with many elements tediously placed, that need to be animated/made interactive.

One way to this is to use MovieClips in Illustrator and import them in Flash, then loop through symbols and analyze, which isn't very flexible.

The script I am sharing now gives you a few options for saving coordinates: either as XML (which can be used with HTML5, Objective-C, Java or other technologies) or as ActionScript 3.0 and the data can either be instantly copied to the clipboard for quick use, or saved to a file so it can be loaded later in an application.

You can download the script from as zxp or jsx. files(*).

To use it:

Select elements inside an Illustrator document
Choose File > Scripts > Save Selection Coordinates
Select your options and save !

as the images on the side show. I've also recorded a quick screencast which can be viewed here.

Also, the script offers these extra options:

offset to top left - when selected, the original coordinates are translated so they align with the top left corner (0,0)
sort from centre - when selected, the order of coordinates is sorted based on the shortest distance to the centre of selection, otherwise, it's the order in which the assets were placed inside the document.

According to the xkcd graph this should be handy to someone, at some point :)

* The small print: zxp is the packaged version of the script so you can just open the file and Extension Manager do it's job. The annoying thing is I couldn't find a clean solution for a problem I had with locale and Extension Manager, so the installer will place a lot of copies of the same script just to make sure it works for all locales. If you want to install the script manually, simply download the .jsx file and place it in {Illustrator}/Presets/{locale}/Scripts, where {Illustrator} is the path of your Illustrator installation folder and {locale} is the language/locale used when installing Illustrator. If you have more elegant suggestions for the locale issue when packing scripts, please don't hesitate to post a comment.

Comments ( 0 ) + More

Permalink

#extensions #illustrator #javascript

Cross-domain getImageData API using Google App Engine

29.11.10 Max Novakovic

$.getImageData is a jQuery plug in that allows you to get an image from anywhere on the internet and use it as if it came from your domain. This should prove useful for anyone who has come across the cross-domain policy enforced by browsers on the Canvas tag. The service uses a Google App Engine project to fetch the image and return it as a JSON formatted data URL.

I created the plug in and service so that anyone wishing to take images from somewhere like Flickr or Google Image Search can do so without having to bother to create a proxy or fiddle with the server.

David DeSandro's Close Pixelate (Pictured first) uses the Google App Engine service to enable it's users to process images from other domains. Another novel use of the plug in is on Pete Goodman's website; when the Konami Code is pressed, the whole website turns black and white including any images from other domains. Read more about it here.

Some of the common error codes that come up when trying to get an image from another domain are;

In Firefox:

Security error" code: "1000

In Chrome:

Uncaught Error: SECURITY_ERR: DOM Exception 18

And in Safari:

SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

So, if you have ever come across one of these errors, then have a look at the documentation for $.getImageData which includes information on how to use the jQuery plug in and how to use the Google App Engine service using no javascript library. There are also two basic examples, one of which gets images from Flickr and analyses them to get their average colour (pictured second).

The complete code is also on GitHub which includes example code for the server in PHP and Python in case you want to implement your own version of the server side program.

Comments ( 0 ) + More

Permalink

#canvas #extensions #javascript #jquery

Getting images from Flickr and getting the average colour from them

Playing with lines, shapes and time

22.10.10 George Profenza

I was playing with shapes and the timeline in Flash and liked the shapes that emerged when using the Onion Skin option. It's like freezing/collapsing time into one.

So I wrote a little script in the morning that would mimic that Onion Skin option but would actually store a graphic. It's far from finished and it currently only supports strokes and only works in CS5 for now, but feel free to download it.

Here's a little graphic I made using the script to freeze a bit of John Whitney's Arabesque.

Also there's a quick screencast to illustrate usage. It's pretty basic at the moment:

Create your line shape tween
Select the frame range. You can do that by just selecting the shape tween layer.
Run the script via Commands > Copy Shape Tween As Graphic

In conclusion, have fun making complex graphics with very basic shape tweens.

And make sure you check out John Whitney's awesome animations, if you haven't already.

Comments ( 0 ) + More

Permalink

#animation #extensions #flash #graphics