The magic of TinEye

January 13th, 2009 § Comments Off on The magic of TinEye § permalink

[This post is a bit off-topic compared to the rest of the blog but I didn’t think it made sense to start a whole new blog just for one entry ;) ]

TinEye is an image search engine. But it’s not like Google Image Search: rather than searching for images by keyword, it searches for images based on an image you provide. It’s smart enough that it will find cropped, resized and otherwise modified versions of the original image.

I have gotten into the habit of using TinEye whenever someone passes along an interesting image without any source information. Here’s an example:

Just today I saw this photo album posted in my Facebook newsfeed (link requires Facebook login to view). Such a beautiful and powerful image, but it lacked a photo credit.

arm in arm

I fed the image into TinEye. Out popped a couple of pages of results, mostly blogs and forums in various forms (some were cropped differently, others had text overlaid on it like “We can coexist…”). One result in particular caught my eye: an Amazon.com link. The image was used on the cover of the book Christians And a Land Called Holy by Charles P. Lutz and Robert O. Smith.

Following the link, I noticed the “LOOK INSIDE” button. A couple of clicks took me to the copyright page, which said “Cover photo © Ricki Rosen/Corbis“. Bingo!

After that it was quick to determine via Google searches that Ricki Rosen is a renowned photojournalist, and a search on Corbis located the original image, available for licensing.

iPhone VR: Viewing 3D panoramas in Safari using JavaScript and -webkit-transform

October 13th, 2008 § 4 comments § permalink

Apple’s 2.0 iPhone update brought some interesting enhancements to Mobile Safari, including 3-D perspective and access to multitouch events. Armed with the documentation (of varying quality) from Apple’s Web Apps Dev Centre, and invaluable information from blog articles such as Idean’s “Spin the Bottle”, SitePen’s “Touching and Gesturing on the iPhone” and Paul Bakaus’s “3D CSS Transforms on the iPhone”, I put together a simple web app that displays a cubic panorama in Mobile Safari. Look left, right, up and down by dragging your finger across the display. No zoom, currently, though. It was pretty straightforward, but I did learn a few things while creating it.

Go ahead, take a look :D Visit http://tinyurl.com/iphonevr on your iPhone or iPod Touch.

The images used for the panorama are taken from one of the QuickTime VR movies in Apple’s Cubic VR gallery. I extracted the images from the movie using the procedure explained here (in French, but it’s easy to follow).

I may write a full tutorial on this eventually, but for now I will just share a few notes (and the source code):

  • It’s a lot easier to get the 3-d transforms right if the elements you want to transform start out centred in their containing block (so that they start at (0, 0, 0), essentially). I did this with regular CSS, but I suppose this could also be done as part of the transform.
  • The above also applies (especially) to any DIV that contains nothing but other DIVs. At first my cube was spinning around its top edge, instead of its centre, because its children (the cube faces) were absolute-positioned, and thus the “cube” DIV itself had no height! Giving it an explicit width and height solved this.
  • Touch events on 3-D transformed elements seemed to be little bit unreliable. I worked around this by putting a normal transparent DIV on top of the whole thing and listened to events on that instead.

Download the source code (MIT Licence).

JSFL feature request

July 17th, 2008 § 2 comments § permalink

Automating Flash with JSFL is very useful, but I sure wish there was a way to specify “save as Flash 8” in fl.documentSave(). I guess I could run the script in Flash 8 instead… kind of a hassle though.

Firebug icons

June 24th, 2008 § 6 comments § permalink

Since I recently upgraded Firefox to version 3, I updated my Firebug install to version 1.2 Beta. One of the first things I noticed was that the little icon in the status bar had changed from a checkmark (or a grey slash when disabled) to the little insect icon (it’s grey when disabled, and colour when enabled).
new firebug statusbar icon, disabled

I don’t mind seeing the Firebug icon occasionally (like when the Firebug panel is open), but I find it a bit distracting and, yes, disturbing to have that little bug always onscreen. Oddly, I never found Safari’s “report bug” button distracting in the same wayโ€”perhaps it’s because the Safari bug icon is more abstract than the more finely detailed Firebug icon. (Although I admit that looking at these two screenshots side by side, there doesn’t seem to be much of an obvious difference!)
safari\'s report bug button

In any case, I decided to create my own status bar icon for the new Firebug. As you can see, my icons are very abstract, to get away from the creepy-crawliness of it all. The six legs are represented by six stubby horizontal lines, and the body has become a sphere.

my firebug icon (disabled) and my firebug icon (enabled)
» Read the rest of this entry «

Flash CS3 and the case of the missing upper-left coordinates

May 15th, 2008 § 3 comments § permalink

So I finally upgraded to Flash CS3, and I noticed something that has changed in the UI.

the info panel in flash cs3
You see that little button I circled?

In Flash 8, that button would toggle the X, Y fields between displaying the coordinates of the selected object’s upper-left corner and its registration point. In Flash CS3, though, the button toggles between showing the object’s transformation point vs its registration point.

There seems to be no way to show the object’s upper-left corner coordinates any more!

Unfortunately this was a feature I used a lot. I could write down an object’s upper-left coordinates so that I could later restore its visual position on the stage even if I changed the symbol’s registration or transformation points. Those numbers are critical if I want to edit a symbol’s registration point without disturbing its visual placement on the stage.

Scaring people with fullScreen

May 10th, 2008 § 142 comments § permalink

When Flash Player 9 goes into full screen mode, it pops up a little security message that tells the user how to exit full screen mode. It appears as white text on a semi-transparent black background so it is generally always visible (which is good). Still, I wondered if it could be obscured.

The message is always on top, so it is impossible to draw over it. But what if we tried distracting the user from the actual security message?

Here’s a silly test:

This movie requires Flash Player 9

Of course, you can press Esc (or alt+tab to another window) to escape.

UPDATE: I have made the source code available, warts and all, under a ZLib licence. Share and enjoy :)

Weird query string variable behaviour (ActionScript 2)

May 2nd, 2008 § Comments Off on Weird query string variable behaviour (ActionScript 2) § permalink

I just discovered some strange behaviour in the Flash player if you try to change variables passed in through the query string before the movie has finished loading.

That is:
If a movie is loaded with the URL:
movie.swf?a=initialValue

and the movie contains a script that does something like this:
_level0.a = "some other value"

the value of a will get reset to “initialValue” on every frame, until the movie finishes loading!

This is different than if you pass in the variable using flashVars. If you use flashVars, the variable stays set, as you would expect it to.

Here are some tests to demonstrate the behaviour. It’s best to clear your cache in between each test, or you will get varying results.

Here’s a screenshot from a test using query string variables:
screenshot from test movie
The test movie is embedded with code that passes the variable “a” set to “from html“. The movie continually displays the value of the variable “a” in the scrolling text field. On the fourth frame, it changes the the value of a to “set from script.”

At any time, you can click on the “Set” button to set the variable to “set from script.” When the movie is finished loading (there’s a 700K JPEG file on the last frame to make the movie large and slow-loading), you can click the “Stop” button to stop the scrolling text field from updating.

Play with both tests, and compare the effects if you clear the cache between tests or not, and try clicking “Set” at different times.

UPDATE: This only seems to occur in movies published for Flash Player 8! Here’s a test using a movie published for Player 7 and variables passed via the query string:

And, of course, I have no idea how ActionScript 3/Flash Player 9 behaves in a similar situation…

Flash Player 9 April 2008 Security Update affects me too

April 11th, 2008 § 2 comments § permalink

So here I was, thinking that the Flash Player 9 security update (version 9.0.124) wasn’t going to affect me. A silly assumption, of course—I should have tested with the beta, regardless—but since I didn’t do anything fancy with sockets or web services, I thought I would be fine.

Ha!

I missed this section: “You have SWFs that are exported for Flash Player 7 (SWF7) or earlier that communicate with the hosting HTML by any means”.

And when they say “any means,” that includes LoadVars.send(), which I am using, in a SWF that is hosted on a different subdomain than the page which contains it (petswf.bunnyherolabs.com vs bunnyherolabs.com).

Luckily, the fix was simple: I just had to add the parameter allowScriptAccess = "always" to the embed tag. Phew!

Next time I see one of these announcements, I promise I will test it, even if I don’t think it applies to me ;)

Virtual Worlds

April 4th, 2008 § 3 comments § permalink

I am currently attending the Virtual Worlds conference in New York City. It’s quite a fascinating conference, covering full-blown 3D worlds (a la Second Life), browser-based paper doll communities (Stardoll) and everything in between. Flash is well-represented here; if it’s 2D or 2.5D virtual world (i.e. not a full 3D environment), it’s done in Flash, period (no sign of Papervision, Sandy 3D or other Flash-based 3D engines, though).

Today I attended a session introducing Electrotank‘s ElectroServer Universe Platform (they don’t have a section on their website for it yet, it’s that new!). It builds on their successful ElectroServer product, adding things like a high-performance isometric rendering engine, a world editor, and content management systems. It looks very advanced and quite impressive, and would probably give any developer wanting to create a virtual world a solid leg up. I will definitely investigate this platform further should I decide to extend bunnyhero labs in a more persistent-world direction.

Tweaking gskinner’s compileProject script

February 21st, 2008 § Comments Off on Tweaking gskinner’s compileProject script § permalink

Recently I had the need to rebuild a whole bunch of Flash movies, more than I wanted to do manually. Before writing my own JSFL script to automate the process, I did a quick Google search and found Grant Skinner’s FLA Batch Compiler script. It’s very flexible and very handy: exactly what I needed.

Grant’s script uses a text file to specify what files need to be built and where the resulting SWFs should be copied. However, the text file uses single tab characters (ASCII 9) to separate the fields, and I like to configure my text editors to insert spaces instead of the tab character.

I made a small modification to Grant’s script to allow any amount of whitespace (spaces or tab characters) in between each field in the schema file.

I changed this (around line 49 in compileProject.jsfl):

    var l = schema.length;
    for (var i=0;i<l ;i++) {
        var row = schema[i].split(String.fromCharCode(9));

to

    var l = schema.length;
    var regExpDelimiter = new RegExp("[ \t]+");
    for (var i=0;i<l ;i++) {
        var row = schema[i].split(regExpDelimiter);

And that was that!

(I originally tried using the literal RegExp notation [e.g. scheme[i].split(/[ \t]+/)], but it didn’t seem to want to compile that way.)

« Older Entries

Newer Entries »