I've been working on integrating a Sitepal talking animated character into a client's website, and would like some technical assistance so that I can achieve a certain effect when my "Preview" button is clicked.
Here's the URL: http://www.simplfly.com/funke.cfm
You'll notice that when you type some text into the "Message" text box and then click on the "Preview" button, that after a few seconds, the character says what you typed in using Text-To-Speech.
1) Dim / lower the opacity of the entire page
2) Change the cursor to an hourglass
3) Display a "loading" animated GIF (transparent) in the middle of the screen (in a layer, etc)
4) Temporarily hide the flash animation (to get around issues pertaining to z-index heirarchy)
(The reason for this is so that folks are aware that their message is being processed, and so that they don't impatiently keep clicking the preview button.)
I tried to apply this effect this last night and had some success, .. but every time I click on the Preview button - in addition to the page being dimmed, - the Sitepal animation RELOADS ITSELF - almost as though the page is being refreshed (?!?!?) Can anyone here think of a reason why that might be happening? Better yet -- does anyone have any code they could share with me that would achieve an effect similar to what I've described?
Perhaps the trick is to show/hide a layer when the preview button is clicked to create the appearance of dimming the page (but in actuality, it'd just be a white layer with the opacity turned down). Any thoughts?
My final challenge will be to figure out how to tell the page when the message has been processed (and is about to start playing) so that I can restore the page's opacity to 100%, .. hide the loading animation, // change the cursor back to a pointer, .. and reveal the flash animation again. If anyone has any tips they could share with me on how I might achieve that, it'd be most grateful.
Full source code is available via View Source
Thanks in advance,