Flash vs. substance

Sole Searching

A few weeks ago, Rachel Sugar, one of my coworkers, had an idea—based on a book called Jews and Shoes—to present some illustrated factoids about footwear in Jewish tradition. Staff favorite Vanessa Davis was nominated for the art portion of the project, and I asked if she’d be interested in working on what was then still a very vague idea. She was game, fortunately, because she rocks.

We were originally thinking that there’d be just a drawing of a shoe with callouts to Rachel’s notes, but when she pulled together the actual text, few of the factoids corresponded to a particular part of a shoe or foot. So it seemed more sensible—and a better use of Vanessa’s talent—to have a shoe surrounded by bunch of vignettes.

I didn’t get the draft of Rachel’s text until just over a week ago, so I was afraid Vanessa wouldn’t have time to do the drawing after all—I try to give artists at least ten weekdays’ turnaround, and our office is now closed every couple of days for various Jewish holidays. Some of the shoe-related traditions relate to Yom Kippur, which is this Thursday, and the story was pegged to that date. Vanessa came through, however, toiling over the weekend for us. She sent a sketch late on Saturday night, which I approved on Sunday, and the final artwork arrived on Monday evening.

The problem with all this fast turnaround was that I didn’t have much time to figure out how to present the piece. Some of Rachel’s notes were long—too long to have Vanessa write them out by hand, I thought, even if they had been fully edited before the weekend. They’d also take up a lot of room on the page. So we needed the chunks of text to pop up when a mouse was rolled over the images, I decided—but how? Our freelance Web developer uses JavaScript for this kind of thing, but I’m not a big fan of JavaScript, and I don’t know how to code in it, anyway. It seemed to me that one ought to be able to make rollovers using just HTML and CSS, and after a bit of Googling around, my guess was confirmed.

Well, sort of.

Yes, you can make text pop up when you roll over an image, using nothing but pure, clean, fresh HTML and CSS. Does it display properly in any version of Internet Explorer, though? Not according to Browsershots it doesn’t. Besides which, I couldn’t get the layers to stack in the right order. (Does anybody know a workaround for this problem? I had an image split into nine rectangles, with the z-index on each set to zero, and then a text rollover on each using Eric Meyer’s method, with the z-index set to 100. Theoretically, all the images should be under all the text rollovers. In practice, however, each rollover was stacked beneath whatever image chunks appeared further down in the code.)

Bummer. Then, rather than ask our Web developer to do the thing in JavaScript, I thought, Well, I have this Flash authoring thing that comes with Creative Suite . . . So I opened that up and started poking around. I was able to get the gist of it before I headed to class that evening, and I thought I’d finish the code at home when I got the final artwork from Vanessa.

Oops—I don’t have the Flash program at home, because I got the standard version of Creative Suite 3. (I did discover the free, Web-based Flash tool Sprout Builder, but I didn’t have the energy to learn another new piece of software at 10 pm, when I got home.)

So I spent the morning today finishing the thing: cutting up and swapping in the final art, figuring out how to style the pop-up window the way I wanted it (mostly—I didn’t have time to figure out how to embed fonts), figuring out how to make the pop-up window usually disappear when you mouse off of the image. None of this would have been possible if I hadn’t spent the last month learning Processing, a programming language that’s almost identical to Actionscript. Look! My grad school education is already paying off!

And then I lost another hour of my life to making a header for the home page that incorporated both Vanessa’s drawing and the awkward artwork for today’s other feature.

Finally, at 3 pm, everything was posted. Then lunch, then class.

The end.

Go play with it!

3 thoughts on “Flash vs. substance

  1. Thanks. Sorry this is such a badly written post.

    When I say, “Theoretically, all the images should be under all the text rollovers,” what I mean is, Theoretically, in the way that I would like CSS to work. I do understand (or, at least, I think I do) why the z-index settings apply only to each individual slice of the image; I just wish it didn’t work that way, for this particular project.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.