How in the flash is this going to work?

April 7, 2008 11:58 AM

[ Flash Filter ] Ok. So after sketching out my client's site, they have informed me that they want the white cross (with the blue gradient) to basically fade, from the outside in to the center, and perhaps have a little sparkle and 'ding' noise as the animation completes. As far as I can come up with, flash is the only way this is going to happen. My question is, how am I going to make this work?

The animation would basically stretch the whole page (I really don't want a huge flash file - but as far as I can tell, that is going to be inevitable). Everything else is going to be straight HTML and images. Can I use z-index to make this work possibly? The only other way I can come up with is 3 separate flash files (1 logo, one left, one under menu), but can I be sure that they will all play in unison?

Any other ideas you guys have for me? All feedback is welcome and appreciated.

posted by B(oYo)BIES to computers & internet (33 comments total)

Could the white cross be one big image file, which is actually an animated gif? Then you can just set the gif to play only once (at page load time) and no flash required. You'd have to deal with the sound separately, but I highly recommend against that anyway, no one wants their webpages making noises at them unless they're watching video.
posted by zachlipton at 12:03 PM on April 7, 2008

(psst! "Emergencies")

I think this is one of those times when I'd question the client's art direction. Honestly, what does a dinging vanishing cross have to do with excellent orthodontics? Ask them what they want the design to accomplish instead of how they want it accomplished, allowing you the latitude to make design-, technology- and budget-appropriate decisions about the execution of their project.
posted by mumkin at 12:09 PM on April 7, 2008

Talk to them about all the accessibility problems that come with a flash website. Google can't index your page, people on Dial up or most mobile phones are screwed, they eliminate the 10% or so of people that don't have flash, etc.
posted by chrisamiller at 12:25 PM on April 7, 2008

This is a time when it's your job to advise the client that it's going to be a better use of their time and resources, and your own, to focus on the content of the site and good design over "fancy" design. Even if you can do this, the focus you'll have to spend on it to achieve an adequate result that works *most* of the time (it will never work for everyone) will take away from the focus you could be spending on other important aspects of the site.

There's no reason the client shouldn't ask for cool things, but if you don't let them know what is and isn't practical, who will?
posted by amtho at 12:33 PM on April 7, 2008

I completely agree with both of you (zachlipton & mumkin) about the animation and sounds. However, I have got the client to tone it down quite a bit. (see? - And yes, it currently plays on EVERY page you load.) Their reason for the animation is for 'a little flare' and the 'sparkle would signify a glimmering smile.' This isn't to say that I am not willing to try to get them to budge further. I think, personally, that the same effect can be accomplished without flash. If it gets too difficult, the price will rise and I am sure they would probably do without it. (on preview, amtho's just his my last point.)

As far as chrisamiller's point, the site would not be fully comprised of flash. The client is very SEO conscious, and I have let them know that that a site fully comprised of flash would not help in the SEO department.
posted by B(oYo)BIES at 12:37 PM on April 7, 2008

A subtle little animated "star wink" gif wouldn't be too invasive. But cosmetic flash animations on a medical page is just unprofessional. "Creativity" isn't the image an orthodontist wants to convey, right?

why is there a choo-choo train? is it another "straight line ortho." visual pun? might want to warn the client not to be too clever with the design. If they want to personalize things, a nice logo and photos of the clinic/personnel would be just as visually interesting.
posted by cowbellemoo at 12:38 PM on April 7, 2008

I think if it were me I'd try to do the cross animation on a transparent bg in Flash and then position the SWF with CSS. Shouldn't be too hard, really.
posted by Guy_Inamonkeysuit at 12:38 PM on April 7, 2008

why is there a choo-choo train? is it another "straight line ortho." visual pun?

Yes! (google your quotes) And I have zero control over that. lulz.

As for not being too clever with the design, this is the main suggestion coming out of this askme, and I am taking that into deep consideration.
posted by B(oYo)BIES at 12:47 PM on April 7, 2008

In flash:
Draw the initial picture.
Draw the final picture.
Place the initial picture on a more forward layer on top of the final picture.
The initial picture is a motion-tween in which the alpha fades from 100% to 0%.
posted by Class Goat at 1:03 PM on April 7, 2008

I think your best bet is to go with a 'play once' animated gif and get them to budge on the 'ding'.
Flash *might* work for this but its really not worth the effort involved when the only thing you'll really gain over an animated gif is a 1 second sound file.
posted by missmagenta at 1:39 PM on April 7, 2008

Oh, man, ok, now I've seen their current site... well, if nothing else I expect it to be an affordable orthodontic experience. I hope that's the primary message he wants it to convey, because if he wants it to speak to his professionalism or competency as a medical practitioner I don't think it's accomplishing that goal. Not necessarily working against him, depending on the audience, but not, I think, doing him any favors in that department. And I say this as someone with a higher tolerance for over-extended, tortured metaphor than most.

You think they might scale back from the giant fading, dinging cross thing to just the sparkly bits at the intersection that say "nice teeth"? Because that wouldn't suck too badly. If it were silent. On preview, I see missmagenta has anticipated me. An animated gif would work, degrade nicely, be cheap to implement, etc. Though no solution can really be cheap to implement, insofar as any billable thinking you've done about it is overthinking.
posted by mumkin at 1:51 PM on April 7, 2008

I think if it were me I'd try to do the cross animation on a transparent bg in Flash and then position the SWF with CSS. Shouldn't be too hard, really.


if you have a largely fixed layout, this would be my first tack. Be aware that z-indexes and flash can be a tricky thing to tangle with; Flash almost always wants to sit on top of everything. In theory, the transparency setting SHOULD make this work, but this is definitely something you need to test, because it has the potential for making the site rather inaccessible to some users. I would use Class Goat's suggested technique with a circular mask that shrinks over time so that you get both a fade in and a regular progression on the drawn lines. As to billable hours, this shouldn't take someone who knows what they're doing more than an hour or so.

I'd definitely advise them that what they are requesting is rather out of fashion (and probably was never in), and that playing audio without user interaction is not something well liked by most users, but it should be technically simple to accomplish this.

I'm not sure an animated gif will work for you because gifs are typically very poor at doing gradients (and gradients are the surest way to produce a gif file with a huge filesize).

The Flash filesize in theory should not be huge -- something like this should be well under 100k. The display size, however, will be large and it WILL look unpleasant if the user does not have Flash, but that is an edge case these days.


Talk to them about all the accessibility problems that come with a flash website. Google can't index your page, people on Dial up or most mobile phones are screwed, they eliminate the 10% or so of people that don't have flash, etc.

That's an accessibility problem when your ENTIRE website is in Flash. The only issue I can see here is the potential for a normal right click behavior to be somewhat impeded depending on how layered Flash gets treated by the browser.
posted by fishfucker at 2:03 PM on April 7, 2008

I am going to try to get them to forgo the animation and audio all together, but if they chose not to, would you z-index the big ass GIF/SWF to the back, or what are the thoughts on the best way to do this?
posted by B(oYo)BIES at 2:03 PM on April 7, 2008

And fishfucker answers my question.

Thank you for the feedback everybody. I know what I need to do.
posted by B(oYo)BIES at 2:06 PM on April 7, 2008

Most browsers play flash on top of everything regardless of Z-index, so that is not really an option. You can't really run flash "behind" other HTML elements.
posted by toomuchpete at 2:08 PM on April 7, 2008

Most browsers play flash on top of everything regardless of Z-index, so that is not really an option. You can't really run flash "behind" other HTML elements.

I wondered about this myself, so I used my leet skills to develop this demo:
http://www.fishfucker.com/flashpoo

The text is on top for me in FF 2 and IE7. Look for the "white text" under the line to appear over the black animation. I'm too lazy to start up VPC to see how IE6 sees it, but I suspect it is probably wrong.. All you need to do is make sure your clients have one of these browsers.

As far as being fully standards and cross-browser compatible, well, they gave that up when they asked you to do something so silly. Meanwhile, I don't think that you would really NEED to worry about layering too much anyways, as long as the SWF is properly transparent, there are no layer conflicts between your content and the SWF if you animate it carefully (and personally, I would whip something out in actionscript rather than use the Flash tween stuff, but if you're not familar with AS it'll probably be faster for you to jerry rig something in the timeline).
posted by fishfucker at 2:28 PM on April 7, 2008

huh, interesting: in firefox at least the right-click context is correct if you're in one of the absolute divs.

a couple of notes:

* in the demo I set the body to have a z-index of 0, and then absolutely positioned the two text divs with a z-index of 10. This is a less than ideal way to do things. I would try to do what guyinamonkey sorta suggested and wrap your swf in a div with a low z-index and absolutely position (or float) it, then leave all the rest of your markup unchanged. Not positive that will work (this is where I suspect the layering will get a little dicey), but if it doesn't then you get to redo your layout in absolute terms. fun!

* apologies for the inline CSS -- i just modded the default html that flash spit out.
posted by fishfucker at 2:33 PM on April 7, 2008

I've never been able to get that to work, and I've tried numerous times. My guess is that there's something in AC_RunActiveContent.js that makes this magic happen, just using standard HTML and embed tags isn't going to work.
posted by toomuchpete at 2:40 PM on April 7, 2008

If it were me, and the client insisted on some animation, I'd probably end up splitting the page with tables (yes, deal with it) and just animating the _horizontal_ line of the big cross, as a simple GIF. That could even be tasteful -- you could have the whitest part move from one side to the other and then stop. Depending on the client, I might describe this as "kind of like KIT in 'Knight Rider'".
posted by amtho at 2:46 PM on April 7, 2008

http://www.fishfucker.com/flashpoo/nojs.html

I'm pretty sure there is something in there that makes me THA BOMB


more seriously, maybe it's a flash 9 thing? Or maybe you had to support IE6, which is the browser that seems to be most susceptible to bad layering.

I'm actually as surprised as you that it works, because I've had to troubleshoot a bunch of flash banners that were jumping over layers and it was a PITA. but yeah, the activecontent thing is adobe's version of swfobject for IE, from what i understand. no other magic involved.
posted by fishfucker at 2:51 PM on April 7, 2008

hmm, just tested and it works in IE6 too. Maybe it's an absolute vs. floats thing -- i might test that later.
posted by fishfucker at 2:53 PM on April 7, 2008

Fishfucker's got it, this is possible in theory, but some browsers will probably bork it up because flash doesn't take kindly to layers. Definitely try this in multiple browsers. Safari probably won't like it.

Or, do the right thing and tell them to fuck off. This is exactly the kind of crap that cheapens the entire profession.
posted by kpmcguire at 2:59 PM on April 7, 2008

I can't get my own flash to go underneath text or images for anything... the only thing I can't test with my setup is whether or not putting the SWF in a DIV ruins the layering. That, and my flash was created in MX, which may also screw things up.

But this thread isn't [supposed to be] about me.

/derail
posted by toomuchpete at 3:10 PM on April 7, 2008

Or, do the right thing and tell them to fuck off. This is exactly the kind of crap that cheapens the entire profession.

What "cheapens the entire profession" is people who act like jerks to their clients. I wish I had a dollar for every design decision I implemented because, despite my protestations, that's what the client wanted.

Actually, I do, and nobody's any worse for it except (maybe) the companies who desperately wanted ugly things on their websites... but they got a website they liked, which is what they were paying for.

You don't have to put your name on the site or include it in your portfolio, but you should remember who the client (A.K.A. customer) is.
posted by toomuchpete at 3:15 PM on April 7, 2008 [2 favorites]

I'm not sure if this is the kind of animation you want but this is easy to do with javascript and would look marginally less jacked up for people with it disabled:

jabascraps demo

I only did the horizontal part but it's exactly the same stuff for the other part.
posted by moift at 3:15 PM on April 7, 2008

Indeed that doesn't appear to be the kind of animation you want. Carry on.
posted by moift at 3:16 PM on April 7, 2008

yeah, the key seems to be the absolute positioning on the text divs. With floats it doesn't work so nicely. I have to stop nerding out now and do real work, but I might revisit this later. very curious.

http://www.fishfucker.com/floatpoo/floatsgounder.html
posted by fishfucker at 3:29 PM on April 7, 2008

that would of course, be http://www.fishfucker.com/flashpoo/floatsgounder.html
posted by fishfucker at 3:30 PM on April 7, 2008

Just one more vote for "convince them not to do it".

Just ask them "can you show me any other website in your industry which does something like that?".
posted by AmbroseChapel at 3:40 PM on April 7, 2008

J"can you show me any other website in your industry which does something like that?".

No. We're innovative. We're thinking outside the... yadda. Some people can not be talked out of something they're emotionally attached to. Make theirs, and if you have time (and care that much about their stupid business other than what they're paying you), make the version you would prefer. Show them both.
posted by ctmf at 5:05 PM on April 7, 2008 [1 favorite]

I agree with everyone here who says, "NO, DON'T DO IT!!!" That aside, if I HAD to do it, I'd go ahead and do the whole thing in Flash. IF you have basic Actionscript skills (or can find someone who does), making that page (including the animation and the ding) would be a couple hours work. And since it would all be Flash, it would all play nicely with itself.

I'm not arguing that this is a good idea -- just that it's possible, easy and -- given what the client demands -- it may be the simplest route.
posted by grumblebee at 5:11 PM on April 7, 2008

Even if moift's solution isn't exactly what was requested, I think it's a good solution.
posted by amtho at 5:20 PM on April 7, 2008

Be aware that z-indexes and flash can be a tricky thing to tangle with; Flash almost always wants to sit on top of everything.

On Linux, flash will ALWAYS sit on top of everything else, due to bugs in Adobe's linux version. Watch out for older browsers too, and try to come up with something that degrades gracefully.
posted by chrisamiller at 8:30 PM on April 7, 2008