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);
}
}
}

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

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