Images avec ombre et rotation via flash

Bon, on sait que je n’adore pas le dieu Flash. C’est souvent mal implémenté et donc casse l’accessibilité et l’utilisabilité.

Toutefois, il existe des cas concrets où le flash a des avantages non négligeables.

On connaissait SIFR – qui permet de changer les typos de texte à l’aide de javascript, de css et de flash – ses avantages et ses inconvéniants (sur des grosse pages pleines de titres, le contenu est parfois vraiment long à s’afficher sur un vieux pc).

Dans la même optique, vient d’arriver swfIR pour swf Image Replacement.

Exemple de rendu d'image traitée par swf Image Replacement

Il permet d’ajouter des ombres portées, des bords arrondis et des rotations (choses qu’on ne peut pas faire en css/javascript) à vos images sans devoir passer par votre éditeur d’image favori.

Pour cela, on a juste besoin d’insérer un javascript dans sa page, d’avoir le fichier .swf adéquat dans sa page et d’appeler une fonction javascript qui remplacera votre image par le fichier flash en question.

sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "#fff");
sir.specify("src", "/swfir.swf");
sir.swap("#example img");

Les méthodes specify définissent les propriétés de l’image et la méthode swap remplace l’élément passé en paramètre (via la méthode DOM document.getElementsBySelector – que je ne connaissais pas)

Je pense qu’on va voir cette méthode fleurir aux quatres coins du web.

Liens relatifs

Posté le 27/02/2007 à 11h39 dans :
Flash, html, javascript

11 commentaires 

Comments

11 commentaires à “Images avec ombre et rotation via flash”

  1. ali_o_kan le 27/02/2007 à 12h08.

    J’ai pas trouvé sous quelle licence c’était distribué. :s

  2. Marin le 27/02/2007 à 12h39.

    La license de distribution est le CC-GNU LPGL.

    Tu peux voir le lien dans le pied de page du site swfIR.

  3. Laurent le 27/02/2007 à 13h48.

    et ca marche avec tout les formats de fichiers ou uniquement les png comme dans ton essais?

    sinon, cela semble à nouveau très élégant et génial

  4. Marin le 27/02/2007 à 14h00.

    Hello Laurent,
    swfIR marche avec jpg, png, gif (les formats d’images supportés par flash). Une seule contrainte apparemment, il faut que l’image et le flash soit sur le même serveur.

  5. Vinch le 27/02/2007 à 17h09.

    Vive le système swfIR !

  6. pim le 01/03/2007 à 04h57.

    Ca flingue, j’adore … me suis justement mis hier à sIfr … quand je pense qu’on avait déja inventé ce système (sIfr) à l’époque de SixFlags .. aaahhhhh 🙂
    Je sens que ça me servir cette affaire ;))
    Comment qu’il fonctionne l’exemple où il y a des boutons à côté pour ajouter ombre, rotation etc en temps réel (sur la home du site)?
    C’est prévu dedans ou c’ est de la bidouille ?
    P.

  7. Marin le 01/03/2007 à 08h01.

    Hello Pim 🙂

    C’est pas standard dans le code d’ajouter les différentes options sur l’image, l’équipe swfIR a du scripter un petit peu.

    Je suis pas là auj. mais je t’explique si tu veux par MSN 🙂

  8. Fred le 05/03/2007 à 17h39.

    C’est l’outil que j’attendais pour mettre mes annonces en dynamique !
    Je vais le faire sur mon site Alexandra Lloyd Properties. Et je pourrais donner le même effet d’ombre avec la fonction”shadow-angle”.
    Et j’attend de pouvoir supperposer les images pour mon autre site (voir mon profil).
    Fred

  9. Chris le 09/03/2007 à 15h48.

    Très intéressant, un must dans le genre.

  10. David le 22/02/2009 à 22h53.

    salut, pas mal ce flash je vais l’essayer, mais on peut le faire en css et javascript http://www.netzgesta.de/instant/

  11. florian lavoux le 14/05/2010 à 20h22.

    “”via la methode dom document.getelementsbyselector – que je ne connaissais pas””,, hum hum 🙂

Laissez un commentaire