Just a simple one this time, but now I use it in almost every website search field I make. [kml_flashembed movie="http://showcase.laurei.com/wp-content/uploads/2008/07/searchbox1.swf" height="80" width="250" fversion="8" scale="exactfit" useexpressinstall="true" /] What you see in the video is an <input type=”text” /> box, but with the label actually inside it, instead if needing to take up space on the outside, what happens is when you click on or focus the text-box the label slowly removes its self and the text box is highlighted. A user can then type their search string unhindered by the label that was once inside it. When the person click off the search box the highlighting disappears and label is restored.I have already thought of a few things I can do for the 2.0 version, but as always let me know.

/*
@AUTHOR:LAUREI
@NAME:SEARCHFIELD
@INSTRUCTIONS: Just default your input field to say “Keyword Search” and include this ‘onBlur=”searchMage(this,0);” onFocus=”searchMage(this,1)”‘ inline into your input feild
This won’t need to be edited, probably just find and replace the actual starting string so don’t whine about it being minified
*/
searchOverride=true;

function searchMageDown(x) {
x.style.backgroundColor=”yellow”;
var substrx=’Search the website’;
var interx=setInterval(function() {
x.value=x.value.substring(0,x.value.length-1);
if(x.value.length==0){
clearInterval(interx);
};
},40);
}

function searchMageUp(x) {
var substrx=’Search the website’;
var kwsnum=0;
var interx=setInterval(function() {
x.value=substrx.substring(0,kwsnum);
kwsnum++;
if(x.value==substrx) {
clearInterval(interx);
x.style.backgroundColor=”transparent”;
};
},40);
}

function searchMageDownUp(x) {
setTimeout(function() {
if(stillValid) {
stillValid=false;
}
else {
var substrx=”Search the website”;
var interx=setInterval(function() {
x.value=x.value.substring(0,x.value.length-1);
if(x.value.length==0) {
clearInterval(interx);
searchMageUp(x);
};
},40);
}
},1576);
}

function searchMage(x,z){
if(z) {
stillValid=true;
searchMageDown(x);
}
else {
stillValid=false;
if(x.value.length>0) {
searchMageDownUp(x);
}
else {
searchMageUp(x);
}
}
}

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

1. Create or select a “flow” – Because the Humaniser can be used in multiple instances, by multiple clients, each instance is called a flow, you can name your own flow and come back to it later.
2. Think of what you want to say; you will need to pre-plan what you say to get the most out of the flow.
3. ACROSS: Start typing your first flow. In each field you can put as many or as few words as you want, each field represents a different part of the flow that will be randomised.
4. DOWN: Now for each field you will supply a number of alternatives, some fields may not need an alternative, but some will benefit from dozens, in this stage remember that the random options are not line by line, or even word by word, but are field by field.

Play with the Humaniser prototype and leave us some