A client was looking for a solution to seamlessly zoom into images on a website, we looked on every search engine, exhausted every link, and screwed around everywhere searching keywords such as “flash image zoomer”, “image resizer”, and just about every other combination, and we just couldn’t find one that fit the bill – so the “Flash Image Zoomer” was born. It’s the second Actionscript widget I have done in my life, I’m not really into flash because flash is not exactly open source but what it can do is awesome, wouldn’t you agree? I was originally going to try and reverse engineer a proprietry one I’d seen but after a while it seemed like it was getting nowhere so I whipped a version one, now I’ve revisited it, and developed a rich set of features to add on which are as follows.

[kml_flashembed movie="http://testtube.creativearm.com/imgzoom/imgzoom.swf?thumbf=3&thumbi=http://www.jpl.nasa.gov/wallpaper/art/pia06890-1600-1200.jpg&imagebig=http://www.jpl.nasa.gov/wallpaper/art/pia06890-1600-1200.jpg&w=400&h=300&l=1&col=0xffffff&z=6&u=0&o=50&ez=3" height="300" width="400" fversion="8" scale="exactfit" useexpressinstall="true" /]Solar System

[kml_flashembed movie="http://testtube.creativearm.com/imgzoom/imgzoom.swf?thumbi=http://jadedcadence.com/cadenceweb.jpg&imagebig=http://jadedcadence.com/cadenceweb.jpg&w=480&h=480&l=1&col=0x000000&z=4" height="480" width="480" fversion="8" scale="exactfit" useexpressinstall="true" /] JadedCadence

Open source image zoomer features

• Compatible with AS1, AS2, AS3, (actionscript1, actionscript 2, actionscript 3), (although according to Doug Crockford Actionscript is not ECMA script complient like javascript)
• Customizable zoomer window colours
• Multiple zoom steps, backwards and forwards
• Smooth logarithmic easing (I think it’s set to quadratic at the moment)
• Can be seamlessly dropped in anywhere there is a normal image
• You don’t need to open flash to play with it, it’s all from the query string
• No need to use xml
• Works great with flash swfobject or kmlembed
• Popup thumbnail
• Click anywhere on the image or the thumbnail to move the picture
• Dimensions of thumbnail are the same as the main picture
• You never see whitespace

If anyone has any suggestions, or requests, hit me up I’d be happy to help, I know just how hard it is to find this, I already have a few for version 2

How much time and money have I saved you?

Sharing is caring, and free open source software is not cheap I’m sure you all have Paypal, or Google checkout, consider taking 2 minutes, click on the button, and spend a dollar equivalent  percentage of the time you would have saved on developing this baby yourself.

Implementation

• please note: attribute ‘scale’ when embedded must = “exactfit”

query string switches:

• thumbf:thumbnail size  (set to 0 for off, 5 for 1/5th of the screen or 10 for 1/10th of the screen etc)
• thumbi:thumbnail image url
• imgbig:large image url
• w:image width
• h:image height
• l:reserved for future compliancy
• z:zoom multiplication factor (1-infinity)
• u:reserved for future compliancy
• col:colour of thumbnail window (in hex 0×000000 to 0xffffff)
• o:opacity of thumbnail (0-100)
• ez: easing type
  • 1 simple linear tweening – no easing, no acceleration
  • 2 quadratic easing in – accelerating from zero velocity
  • 3 quadratic easing out – decelerating to zero velocity
  • 4 quadratic easing in/out – acceleration until halfway, then deceleration
  • 5 cubic easing in – accelerating from zero velocity
  • 6 cubic easing out – decelerating to zero velocity
  • 7 cubic easing in/out – acceleration until halfway, then deceleration
  • 8 quartic easing in – accelerating from zero velocity
  • 9 quartic easing out – decelerating to zero velocity
  • 10 quartic easing in/out – acceleration until halfway, then deceleration
  • 11 quintic easing in – accelerating from zero velocity
  • 12 quintic easing out – decelerating to zero velocity
  • 13 quintic easing in/out – acceleration until halfway, then deceleration
  • 14 sinusoidal easing in – accelerating from zero velocity
  • 15 sinusoidal easing out – decelerating to zero velocity
  • 16 sinusoidal easing in/out – accelerating until halfway, then decelerating
  • 17 exponential easing in – accelerating from zero velocity
  • 18 exponential easing out – decelerating to zero velocity
  • 19 exponential easing in/out – accelerating until halfway, then decelerating
  • 20 circular easing in – accelerating from zero velocity
  • 21 circular easing out – decelerating to zero velocity
  • 22 circular easing in/out – acceleration until halfway, then deceleration

  imgZoom.zip – source code and examples

Recently a rather creative friend, Steven Packer needed some help with an assignment to do with tangible media. The basis of the assignment was to control media with alternative human interface devices. While Steven and his team built the interactive hardware (an elastic handle suspended from the ceiling to control an Arduino board), it was up to me to code a flash document using Action Script to make the letters random poems rotate in an orbital fashion. Coding in Action Script wasn’t easy, especially whilst emulating the laws of physics, but I pulled it off and gave him some documentation and variables to play with. Steven customised the view of the document to better fit his needs, and his team won an award for the whole setup, nice work.

Here is the Elastic Text Engine. In this example the arduino board (human interface) has been replaced with the X and Y coordinates of your mouse, when you reach the sweet spot for each line of the poem, it will change colour, when all 3 lines change colour another poem will load.

Here is Stevens Packers report on Tangible Media