Semantic Flash: Slippery When Wet

by Dan Mall

64 Reader Comments

Back to the Article
  1. To reiterate what someone else said early on:

    Rotate 180° + flip y-axis = flip x-axis

    It’s a nitpick, yes, but why do two steps for one?

    Copy & paste the code below to embed this comment.
  2. “Matthew”:http://www.alistapart.com/comments/semanticflash?page=3#28/ :

    I noticed the comments on serverside technology, but that is the problem right there. What happens if you want this technique on a localized kiosk? Working with clients in the corporate training enviroment I found one thing very quickly and that is these modules will never have access to the internet in its normal sense.

    When I say server-side, that doesn’t necessarily mean on the internet. Your content is being served by some sort of CMS. That CMS has to be run by some sort of server, whether it’s accessed across the internet, an intranet, or locally. In all cases there is a serverside language which could modify the image. If there isn’t a CMS, that means that your cotent is completely static and can just prep all of the images before you deploy.

    “Dan”:http://www.alistapart.com/comments/semanticflash?page=3#27

    James: You can certainly accomplish the same end result using other methods, like ImageMagick. However, the true value of doing it client-side is that you’re only styling the content. Much like CSS, the original content (the image) is untouched. If someone wants to download and use your image somewhere else, what good is it if it’s already manipulated server-side with rotation, a shadow and on a less than desirable background?

    That’s a good point, however I think our primary goal as web designers is to make our content as accessible and stylish as possible for as many people as possible. I don’t think our primary goal is to make it simple for users to download and use elsewhere our content. Doing the manipulation serverside allows for every single (graphical—sorry lynx users)  to see the reflection, instead of only those with flash (which, as noted earlier, excludes 64-bit linux users, as well as many mobile users). Now whether something like a reflection for images is valuable is another discussion entirely ;)

    Copy & paste the code below to embed this comment.
  3. Great article. The first time I saw Flash and used it, it was called Future Splash. MSN used it for really cool menus and buttons. In contrast, the Simpson’s site was a full-screen experience.

    Both uses have their place on the web.

    Using Flash as content is how I see it best in most situations. Google, and Yahoo both see this as well as you pointed out.

    The message is to use whatever technology makes it easiest to get the job done. Flash is certainly the easiest way to handle your example for most web designers. Sure, you can do it on the server, but that is not as accessible and easy to use.

    By the way, I’m looking for a full-time designer/developer who thinks this way and uses all technologies to create the best designs. careers@slaughtergroup.com

    Copy & paste the code below to embed this comment.
  4. The message is to use whatever technology makes it easiest to get the job done. Flash is certainly the easiest way to handle your example for most web designers. Sure, you can do it on the server, but that is not as accessible and easy to use.

    The problem is that this technology is less accessible than server side image creation, not more. Since presumably web 2.0 reflections are a useful thing on a site (why else would you go through all this bother?) we want all of our users to see them. With flash only those who have flash can see them, while the rest of your viewers see the plain images. How is this a better result than server-side manipulation, where all of your users will be able to see the images?

    Certainly ease-of-use of any technology is important. However, there is a point where an easy to use technology simply does not get the job done as well as a slightly-more-difficult to use technology. I don’t feel that we should immediately jump on the simplest technology. Instead we need to evaluate the advantages and disadvantages of each, and come up with a conclusion that takes other factors into consideration than just ease of use.

    Copy & paste the code below to embed this comment.
  5. “RE: Booorrriiinnnggg”:http://alistapart.com/comments/semanticflash?page=3#22

    Small screens are an issue I don’t think are adequately accounted for apart from some form of content negotiation. Sure you can save some pixels using the Flash solution when a non-Flash device comes along, but I don’t know that the savings really improves the experience any for people on these devices. On my Cingular 8125 I turn images off completely since they tend to cause loads of problems on almost every site I browse to.

    In the end I think content negotiation, extended support for the media attribute for link elements and the @media CSS selector are the best solutions for handheld devices. But that’s a whole other issue: “ALA – Pockect-Sized Design”:http://alistapart.com/articles/pocket

    Copy & paste the code below to embed this comment.
  6. It never ceases to amaze me how some people will make assumptions about Flash that simply aren’t true.  The best (and perhaps the only good) argument against using this technique is simply saying something like “I’d rather just stick to nice, simple IMG tags”.

    Any talk of content getting “locked away in proprietary formats” is bunk.  First of all, the SWF file format is open… not proprietary.  Second of all, what’s the downside again?  I don’t get it.  You’re complaining because you can’t right-click to download the image you probably don’t even have the rights to?  If the creator wants to let you do this, they can easily add a much more functional right-click menu which allows you to download even a high resolution version of the image (as mentioned by a previous commenter).

    I don’t mind debates like these.  I really don’t.  I just wish naysayers would stick to the points which are actually valid and meaningful in the real world (of which there are always a few).

    Copy & paste the code below to embed this comment.
  7. Checking if flash is installed is not enough. In fact I don’t know if there’s anyway that javascript could check to detect the causes of my problem, where flash is installed, isn’t blocked by anything, but just simply doesn’t work.
    In any case, it’s not future proof. What if Adobe never decide to support 64 bit systems? Unlike using some fancy DOM feature or html tag which all browsers will support eventually (even if it takes 10 years), it’s very possibly that this will remain broken forever.

    Copy & paste the code below to embed this comment.
  8. For specialized cases, (i.e., my employer) I find Flash is a way to break out from the mundane. My company is more than a decade behind the times and just now discovering CSS and Javascript. ALL of my clients are on dial-up and old browsers. Our server is ruled by the IS department on the other side of the building, no server-side technology allowed.

    The only option I currently have to develop better services for my clients comes in the form of Flash (Hooray! We are at a 90% adoption rate for Flash Player 7!) and Javascript. While I was aware of SlideShowPro, sIFR is going to open up a whole new design element for my clients.

    While I see the downsides for those who develop for a general audience, it should also be noted that Flash is a powerful tool and a real, deliverable solution for the few of us remaining in the dark ages of server technology resources.

    Copy & paste the code below to embed this comment.
  9. “Micah Wylde”:#32:

    I think our primary goal as web designers is to make our content as accessible and stylish as possible.

    Really? Stylish? I agree with the first part of that statement, but I definitely don’t feel that a web designer’s goal is to make content stylish. Design is so subjective that, if that was the end goal, we’d all be overworked and underpaid. Design is about communicating effectively, not drawing pretty pictures, but that’s another discussion in itself.

    In “another comment”:#34, you state that:

    The problem is that this technology is less accessible than server side image creation.

    I’m not sure how you came to that conclusion. An HTML image is accessible through its alt text, and the same options can be enabled from within Flash. Accessibility comes from the markup, not from where the image was generated.

    With flash only those who have flash can see them, while the rest of your viewers see the plain images.

    Isn’t that textbook “progressive enhancement”:http://en.wikipedia.org/wiki/Progressive_enhancement?

    Copy & paste the code below to embed this comment.
  10. Isn’t that textbook progressive enhancement?

    How can it be, when people who have Flash blocked in a way, see no images at all?

    Copy & paste the code below to embed this comment.
  11. Isn’t that textbook progressive enhancement?

    How can it be, when people who get their Flash blocked, see no image at all?

    Copy & paste the code below to embed this comment.
  12. There was no way for the browser to tell that the flash file wasn’t being served because the plugin was there…

    I wonder if there is a way for javascript to ask a SWFObject if it’s file was loaded. Then it could have an interval and if the file didn’t load it could unreplace the flash content with the original image file.

    This is an intresting way of doing things. mirroring may not be the best example as this kind of image manipulation is fairly easily done server side, however things like smooth scaleing and complex masking and a whole host of other things that flash can do and HTML can’t do as well make it a technique worth refineing.
    AJAX has done alot for non flash multimedia but it dose not mean that one shouldn’t use flash when it is the best solution.

    Copy & paste the code below to embed this comment.
  13. Just to point that this « trick » could also be achieved with a tiny (tiny… if you work with the mootools framework) javascript. I won’t discuss how gooood/baaad the js way is, but you can check it out at “digitalia.be”:http://www.digitalia.be/software/reflectionjs-for-mootools .

    Copy & paste the code below to embed this comment.
  14. No need for moootools ; sorry. The original script is here (with 5Kb) : “cow.neondragon.net”:http://cow.neondragon.net/stuff/reflection/

    Copy & paste the code below to embed this comment.
  15. Why are so many people here missing the point of the article by nitpicking apart the example? The author has admitted that this was not meant for a production level, but to illustrate the point. While yes, before delivering to a client their should be enhancements made to the JS and the Flash file to add things such as flicker reduction by adding the event when the DOM is loaded and not wait for the page to finish loading, Flash detection, better right click functionality, etc. but I don’t think it’s necessary for an ALA article to give a full production level in order to prove Flash’s benefits.

    That said, I wouldn’t frown upon it if someone took the time to improve on the example so that it was production level. :)

    Copy & paste the code below to embed this comment.
  16. I’m not sure why flash is the best option for many circumstances mentioned by other respondents. One brought up smooth, scalable images. SVG is the way to go there. I’ve always seen Flash’s strong suit being in animations and compact, graphics-intensive web apps (i.e. Google Finance). Maybe it’s because I’m a Linux advocate and don’t like depending on proprietary technologies.

    Copy & paste the code below to embed this comment.
  17. you are doing that the hard way… DOM is DUM with a visual tool such as flash.
    why not build a custom flash file that takes a jpg (from the URL of the swf file object code) and loads it in a movie clip which is flipped and faded?

    thats just what I would do, it would be much simpler, would not involve javascript and would alow the image to be displayed if they don’t have flash installed.

    learn flash properly, you are seriously doing this the hard way but awesome article none the less ;)

    - Oliver

    Copy & paste the code below to embed this comment.
  18. The same effect without any Flash: http://www.busygin.com/noflash/
    The idea of the article (to use Flash solutions where appropriate) is good, but given example is rather doubtful.

     

    Copy & paste the code below to embed this comment.
  19. Just wanted to put my two pen’orth in with regards to Flash and accessiblity.  People with learning disabilities, for example, find improved access when there is richer content such as subtitled video, animations and graphically rich interfaces.

    While much of this can be delivered through XHTML / CSS / JS, Flash provides an excellent way to create a more immersive, responsive and, therefore, accessible user interface for this user group.  That’s not to say that entire flash sites a la fashion houses are a good idea, but that some element of flash on a page can help communicate to a wider audience.

    As has been pointed out, Flash’s accessibility comes down as much to the skill of the programmer as it does the nature of the technology itself and, as this applies to all web design technologies, I don’t see why Flash can’t be regarded as another valid tool in the web designer’s arsenal if implemented properly.

    Copy & paste the code below to embed this comment.
  20. “Mike Davidson claims”:http://www.alistapart.com/comments/semanticflash?page=4#36 that ‘the SWF file format is open”¦ not proprietary’. For what meanings of ‘open’ and ‘proprietary’ is this statement true? The SWF file format is owned by Adobe. They licence it to developers who wish to make software that exports to SWF. “They do not licence it to developers it to people who wish to make SWF players”:http://www.adobe.com/licensing/developer/fileformat/faq/#item-1-8 . That is why GNash (the GNU Flash player) must be produced by a slow and painstaking process of clean room reverse engineering.

    Copy & paste the code below to embed this comment.
  21. One more example. When planning my portfolio site “tarpanova.com (www.tarpanova.com)”:http://www.tarpanova.com , I wanted a synergy between the lightness and usability of web standards and the powerful media display of flash. I am using JavaScript, xml, dynamic flash, and php for the seamless display of all information into one page. It works for several reasons:

    • Portfolio content for both the site’s flash and its accessible no-flash version is updated very easy with php-script xml edits.
    • Images are read, resized, thumbnailed, and added directly from an ftp directory with a php/xml script.

    • Search engines read the content of the entire site into one page, with higher performance in pertinent searches, more than if it was split in several pages.

    • Loading time is much faster since everything is a single page and users browse other sections while the heavier, flash part, loading simultaneously is loaded and ready by the time the visitor gets to that section.

    There are many ways to combine these technologies, and incorporating semantic flash can add some fantastic benefits that cannot be refuted.

    P.S. AmfPHP is another tool that is now used to connect flash with php for CMS and application purporses.

Copy & paste the code below to embed this comment.
  • AJAX is the answers for developers who have no clue of how to interoperate with Flash.

    “locked away in an .swf file.” which world do you live?

    Copy & paste the code below to embed this comment.
  • Well, let’s see what semmantic flash wants to acomplish:

    • In ausence of flash and javascript, static content
    • Standard compliant
    • Search engine friendly
    • Crossbrowser

    It’s this possible?

    Copy & paste the code below to embed this comment.
  • “Yaoltzin Gómez”:#53: If I’m understanding your question correctly, there are many sites out there that can achieve the ability to integrate Flash into a standards site.The “web.burza”:http://web.burza.hr/ site is one example of a site that contains all of the attributes you mentioned. Is that what you mean?

    Copy & paste the code below to embed this comment.
  • I think “Brian”:http://alistapart.com/comments/semanticflash?page=5#45 sums up the point very nicely: swell example, but give us perfect and useful.

    Because I certainly can’t do it myself.

    And that’s ultimately what it comes down to, when you point out the chasm between web and Flash designers.  Many posters have raised the objection that Flash is convoluted.  Poor argument. Stick to the simple fact that it’s hard.

    It would take me at least 6 months to gain proficiency in Flash. And even with that commitment, I may never have the knack for animation or the artistic flare to excel at it.

    Also, it’s expensive. Five years ago, I bought Flash 4 to bulk up my resume. Two-hundred dollars of obsolete, sitting on my shelf.  That skill set is dead, unless I pay for an upgrade and hope that I learn faster than the next version can come out.

    Whereas, the HTML I’ve been using all these years is free to program, and as the “other article from this issue”:http://alistapart.com/articles/whereourstandardswentwrong proves, my crappy code from five years ago is just as relevant as my sleek code of today.

    Deceptively simple evangelizing of Flash obscures the fact that deceptively simple tools like “sIFR”:http://www.mikeindustries.com/sifr/ and “swfIR”:http://www.swfir.com/ took teams of skilled professionals to architect. So when I—the tech guy—want to tweak it, I end up just like “Tor”:http://alistapart.com/comments/semanticflash?page=5#41 is…

    Obviously thrilled with the concept, but reduced to screaming about two minor technical points that I can’t fix myself.

    Copy & paste the code below to embed this comment.
  • Very true and thoughtful analysis of the current love/hate-Flash situation. Completely agree.

    The only point I would add is that Flash’s biggest problem is being a proprietary system. Any way you look at it – Adobe controls it. It is and will be hard a format maintained by just one company to truly become a standard.

    And then there is PDF, also from Adobe, that is somewhat of a standard. So – it’s not hopeless.

    It will be interesting to observe and see how things go. IMHO, current status-quo will be kept. Neither AJAX or Flash (with its Flex wing) be able to win over. Both will stay and people utilizing them smartly in proper cases, will win – just like this article says.

    Copy & paste the code below to embed this comment.
  • We’ve been using Flash as an enhancer to websites for about a year now and are pretty darn happy with the results.  We start with a basic HTML/CSS site and then take blocks of the site and add in Flash elements that include varying levels of interaction.  For users without JS or Flash, they get the fully functional (and still good-looking site), but users with Flash and JS will get the added interaction available in the Flash pieces.

    Here are two sites that we’ve done this way:
    “Moose Racing”:http://www.mooseracing.com
    “Arctiva”:http://www.arctiva.com

    In the past, we’ve felt the pain of building all-Flash sites (SEO, maintainability, etc) and have learned our lesson.  This solution allows us to provide our clients with the best of both worlds.

    Copy & paste the code below to embed this comment.
  • Forgive me if I’ve completely missed the point but using flash just adds something you don’t need. What’s wrong with the javascript approach that everyone else is using. Surely less is more.

    http://cow.neondragon.net/stuff/reflection/

    Copy & paste the code below to embed this comment.
  • Forgive me if I’ve completely missed the point but using flash just adds something you don’t need. What’s wrong with the javascript approach that everyone else is using. Surely less is more.

    Of course you could do this without Flash, but that’s not the point.  Dan is simply showing us that Flash can nicely compliment an XHTML site when applied intelligently.  It’s simply up to us, the designers, to be smart and take advantage of Flash’s strengths.

    Copy & paste the code below to embed this comment.
  • This was said by someone else above but I think it went unnoticed so I’d like to reiterate it.  There’s no need to replace the entire image (in this case) with flash.  Admittedly, since it was an example, in general there may be no other option.  But in this case, and any other case where the “semantic flash” is only adding to the existing content, wouldn’t it be smoother and degrade better if the reflection was added below the regular image?  This would solve the complaints about not being able to right click as well as the blinking replacement.  (Of course, it doesn’t stop someone from downloading the image itself if that’s what you actually wanted.  But that really annoys me so I won’t consider it.)  Of course, you have to make sure that you had a place holder of the same size (could just be a solid background color) so that the page doesn’t have to adjust dramatically (and cause even more confusion for users who don’t care how cool your reflection is).

    Copy & paste the code below to embed this comment.
  • Good article Dan! But, on example wich you use do you can resolve   for another very simple way, without flash, obviously… heheh use it:
    http://cow.neondragon.net/stuff/reflection/

    Regards for all

    Copy & paste the code below to embed this comment.
  • Specialized applications such as google analitics, yes, use flash or whatever means necessary to get the job done. You are more or less is control. “Get the plugin or else find a different solution”. For the the rest stick with xhtml and server site solutions.

    Copy & paste the code below to embed this comment.
  • There is no such thing as “unnecessary use of flash”.  Flash is not against everything the internet was intended for.  It is a front end tool that allows for more dynamic presentation of materials from the simple and flashy (movie websites) to advanced portals (read:  www.rr.com/flash). 

    I would think in 2007 we had gotten passed this anti-Flash debate.  It’s so obviously skewed by a bias against the “hype”, “style” and “flash” (pun intended) that the application brings.

    Copy & paste the code below to embed this comment.
  • Just wanted to throw my hat in the ring.

    Leaving along the issues of when/whether to use Flash, here is how we have been approaching the challenges of semantic static content powering a richer interface
    – http://www.jamesv.org/2007/04/22/semantic-xhtml-for-flash/

    From time to time on client projects we have encountered technology limitations that have constrained us from utilizing a server-side solution. Systems like this have been lifesavers in crunches of that sort.

    Copy & paste the code below to embed this comment.