Flash Site Design - Input box design attributes

Author

Input box design attributes

webp0ser

2005-08-25, 7:30 pm

I am using input boxes for a login form. I would like to add design attached to
the boxes for overall design much in the same way that css effects html input
boxes. I would also like to add effect for onFocus events - for instance have a
glow around the input box with focus. I can't seem to find anything on how to
do this.

Any help is appreciated. Thank you.

Hudey

2005-08-25, 11:25 pm

Wow, this one is tough. The only way I figured out to hack this one is to tie
the glow movie to the position of the mouse, so that when you put the mouse
over the input field the glow starts. When you move the mouse out of the
designated area, the glow stops. Seems weird that we can't find a way to change
this in Flash without tricking it somehow. :)

http://mike.hudak.com/Flash/form_glow.swf
http://mike.hudak.com/Flash/form_glow.fla

phastari

2005-08-28, 7:27 pm

I would do as Hudey suggest but add just a little thing so that you don't need
the mouse to be over the inputbox for it to show the glow.

Place the input box within a movieclip and make the movieclip itself a button
by adding on (release), on (rollOver) etc.

Then have a variable that sets the state of the movieclip, so that if you
select it (on (release)) set the variable to "1" with an if statement so that
it only works when the variable is 0 (if (variable == 0) {itemselected = 1;})
then on (on (rollOut)) make the variable change to "2" if the input box has
been selected (if (variable == 1))

on (release) {
if (variable == 0) {
variable = 1;
this.gotoAndStop(2);
}
}
on (rollOut) {
if (variable == 1) {
variable = 2;
}
}

And finally use a listener to onMouseUp to know when the input box is
deselected.

inputbox.onMouseUp = function() {
if (variable == 2) {
variable = 0;
inputbox_mc.gotoAndStop(1);
}
}

on frame 1 in the movieclip you would have the inputbox without the glow, and
on frame 2 you would have the inputbox with the glow.

I hope this helps, I'm at work so it might not be 100% correct, but I hope you
get the idea....

GoodLuck.