AudioSpot coordinates: x:230, y:175, z-range:2-5
Keyboard Controls: i: zoom in, o: zoom out, a: pan left, s: pan down, d: pan right, w: pan up

Download Source Code: audiospots_basics_CS3_2009_05_07.zip

When the blue circle in the image is moved to the center of the viewport and the zoom depth is between 2 and 5 audio begins. Once the circle is either moved away from the center or the image is zoomed beyond the given range the audio fades away.

In keeping with the overall design of the overlay extension this addition consists of a “layer” ( AudioLayer ) that listens for events from the zoom image and manages the AudioSpot object(s). It’s interface is consistent with the HotspotLayer in that there are methods for adding and removing AudioSpot objects. Like Hotspots, all coordinates are relative to the original size of the image.

To accomplish bounds checking each AudioSpot in a layer contains a ProximityGate object. The gate opens and closes based on the distance between the point in the image currently at the center of the viewport and a given point. As mentioned the proximity gate can define either a radial or rectangular region. The ProximityGate classes ( RadialGate & RectangularGate ) are abstracted from the AudioSpot code. This means that can be used in other situations where some functionality needs to be invoked based on proximity.

I’m looking forward to implementing the audio classes as ambient accompaniment to large zoomable collages. I’m also quite excited to see what others come up with. If you find these classes useful and end up using them in a project let me know! I’m amped to see what people come up with. If you have thoughts on improvements or find bugs don’t hesitate to leave a comment.

Click the blue hotspots to pan and zoom:




Dowload Here: overlays_basics_CS3_2009_04_15.zip

Hotspot Examples
Polyline Example

Download Source Code And Examples:

http://code.google.com/p/ghostinteractive/

Overlays

I have been using the term “overlay” as a catch-all for the different types of visual elements I’ve been working on. Currently there are two types of overlay classes:

Hotspot:
This element is meant to be used as a base class for “marker” elements. These are typically clickable points of interest which when clicked pan, zoom or pan and zoom the image to a specific position and/or depth.

PolylineSegment:
This element uses the flash.display.Graphics class to draw paths around a zoom image. The paths can be used for a number of things including map routes, path based navigation, relational links( think node based graphical displays ), etc… Each connecting line can have unique attributes such as color, thickness, alpha, caps style and others properties related to the Graphics line-style.

Layers

To display the different types of “overlays” each type is managed by a unique “layer” class. This is somewhat of a departure from typical mapping software models. Most mapping software implements a single overlay layer to which any type of overlay can be added. As we add classes to the overlays package we may adopt a similar system but for now we are more interested in a lean implementation than the overhead of unneeded abstraction. Below is a short description of each layer type.

HotspotLayer:
The HotspotLayer manages the positions, depths and visibility of Hotspot sub-classes. It also provides the functionality for zooming and panning to specific points within the image.

PolylineLayer:
This layer contains a list of PolylineSegment sub-classes and draws them. Each time the zoom image pans or zooms the layer redraws the shapes relative in size and position to the original image size.

Simplified code example:

var msImage:MultiScaleImage = new MultiScaleImage();
var hsLayer:HotspotLayer = new HotspotLayer( msImage );
var plLayer:PolylineLayer = new PolylineLayer( msImage );

hsLayer.addHotspot( new CustomHotspot( params:Object ) );

plLayer.addSegment( new PolylineSegment( new Point( 1200, 300 ) );

addChild( msImage );
addChild( hsLayer );
addChild( plLayer );

Download the examples for complete code and further explanation. If you happen to find these classes useful or have suggestions for additions and/or changes leave a comment and let me here about it. If you would like to contribute to the project drop a line at ghostinteractive@gmail.com.

// -- String with tab, multiple spaces and newline char
var testString:String = 'here is a tabthere are six spaces      here is a new linennext line';

// -- Test expression
var whitespace:RegExp = /(\t|\n|\s{2,})/g;

trace( 'testString pre-replace: ' + testString );

// -- Re-assign the value of testString to the result of replace() mehtod
testString = testString.replace( whitespace, ' ' );

trace( 'testString post-replace: ' + testString )

The replace() method turns all multiple spaces, tabs and newline characters into single spaces.