May 17, 2012 4

Augmenting the Responsive Quick Design Response Reality

By in General Development

Are you fed up of your designs ignoring your requests to respond?
Do enjoy resizing browser windows to see what the transitions won’t look like on devices that don’t support browser resizing?
Are you tired of taking pictures in colour?
Do you yearn for the day when you can open a webpage simply by taking out your phone, opening a proprietary app, taking a photo, re-calibrating, taking another photo and hitting ‘GO!’?

Such are the problems facing today’s ever inventive marketers. But now, with a combination of bleeding-edge technologies, I bring you the solution:

Augmenting the Responsive Quick Design Response Reality

If you want to be first to take advantage of this next generation marketing wankery, get in touch.

Alternatively, visit www.ayetozed.com if you want someone to actually design something for you.

March 15, 2012 0

Painting particles with EaselJS and Coffee Physics

By in Javascript

As a platform for trying out EaselJS I wanted to create a simple particle demo using the Coffee Physics engine. Through a bit of experimentation and (mainly) curiosity, I ended up with something half particle generator, half generative art tool.

View the demo | View sample images | View the source

Having not used EaselJS before it was reassuringly easy to get to grips with, and there’s good documentation available.  Anyone who’s done any work with the Flash display list should have no problems diving straight in. It takes very little code to setup a Stage and a rendering loop, and keeps your application nicely browser and platform agnostic. The demo runs (from best to worst) in Chrome, IE9, Firefox and  Safari for iOS (although very slowly), without the need to write specific code for any of them, which is a great reason for using it.

Although the Coffee Physics demo source contains various renderers, the engine itself is, as you’d expect, completely independent of any rendering process. This makes it very easy to integrate with Easel, or any other rendering method you choose. I didn’t end up using any of the the supplied behaviours in my demo (collision, attraction etc.), but I did play around with these to begin with. The behaviour architecture makes it very easy to leave out any heavy-lifting you don’t need, and easily create and add your own features.

The idea to ‘paint’ the particles came simply from browsing the EaselJS API docs and is achieved easily by setting the autoClear property of the Stage to false. This prevents automatic clearing of the canvas before each render update and would be useful for more serious generative art pieces.

Saving the image seemed like an obvious progression, and it was nice to be able to output and save image data without needing a server transaction or, dare I say it, Flash. It is however, not the most polished solution: dump a base64 encoded image string into a browser window and hope it knows what to do with it. Internet Explorer doesn’t know what to do with it.

Both EaselJS and Coffee Physics are in alpha/beta stage right now, so it will be interesting to see how they progress. This was also my first time using CoffeeScript, which seems to be fairly contentious at the moment, but I found it intuitive and enjoyable to work with. The compiler is reliable, and being able to ‘watch’ any files, recompiling them whenever they are saved, makes the write/run cycle no different from writing straight JavaScript. You could even argue the compile step adds extra sanity checking to your code before run time. Either way, I’ll definitely be using it again

March 13, 2010 3

Google Maps Flash API & Selectable Copyright Text

By in Actionscript

When using the Google Maps Flash API you are required to display the relevant copyright notice for the tiles currently being shown. This is handled internally by the API and is generally not a problem. However, the current version of the SWC provided (1.18) chooses to handle the copyright text as selectable, meaning that the text cursor is displayed when the mouse is anywhere near the bottom 30px of the map. See below for an example


While I’m not sure if this is necessarily ‘as designed’, it doesn’t seem unreasonable to want to make the text unselectable. I’ve registered it as a bug, but for now I’ve also created a workaround in the hope this will be changed in the next release.

After investigating the display list of a Map object, it seems one of the sub-children is an object of type com.google.maps.controls.CopyrightView. This class is not publicly exposed in the API so I’m unsure of the implications of altering it in this way. The terms of use state that:

[you must not] delete, obscure, or in any manner alter any warning, notice (including but not limited to any copyright or other proprietary rights notice), or link that appears in the Products or the Content

We’re certainly not deleting or obscuring it, and we’re not actually altering the notice itself, just the interactive properties it has when displayed. In any case, the solution is presented below:

Update 15/02/2010: It seems the CopyrightView object is not always contained at position 0 in the parents display list. To rectify this, I have ammended the solution below to explicitly find the CopyrightView via its qualified class name.

//_map is an instance of a com.google.maps.interfaces.IMap object
_map.addEventListener(MapEvent.MAP_READY, map_readyHandler);
 
 
/**
 * Wait for the map to initialize and add an ENTER_FRAME event listener 
 */
function map_readyHandler (event:MapEvent) : void
{
    addEventListener(Event.ENTER_FRAME, setCopyrightToUnselectable);
}
 
 
/**
 * Locate the copyright textfield and change its selectable property
 */
function setCopyrightToUnselectable (event:Event) : void
{
    removeEventListener(Event.ENTER_FRAME, setCopyrightToUnselectable);
 
    var container:DisplayObjectContainer = _map.getChildAt(5) as DisplayObjectContainer;
    var numChildren:int = container.numChildren;
    var child:*;
 
    for (var i:int = 0; i < numChildren; i++)
    {
        child = container.getChildAt(i);
        if (getQualifiedClassName(child) == "com.google.maps.controls::CopyrightView")
        {
            var textfield:TextField = child.getChildAt(0) as TextField;
            textfield.selectable = false;	
            break;
        }
    }
}

Even when the MapEvent.MAP_READY event is fired, it seems the CopyrightView object has not yet been added to its parent (or has not been initialized). To get around this, a 1 frame delay is added, at which point the problematic TextField can be targeted and we can set the selectable property to false. This solution gives us exactly what we’re after, without altering the text or effecting the ‘terms of use’ link.

I’m hoping this isn’t an intended feature and that it will change in the next SWC, and in the meantime that the above solution isn’t violating any terms of use.

Tags: ,

Older Posts