skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 1 juin 2010

Convertir du Flash à HTML 5 et JavaScript

Publié par Infinite Loop, à 19 h 35 5 commentaires

Convertir du Flash à HTML 5 et JavaScript automatiquement ? Oui, ça semble possible ! Du moins, c'est la solution proposée par Smokescreen, un convertisseur Flash écrit en JavaScript qui pourrait être une alternative à considérer sur les appareils comme les iPad, iPod et iPhone qui ne supportent pas le Flash (Monsieur Jobs le considère désuet et est à couteaux tirés avec Adobe).

J'étais sceptique face à cette approche car j'avoue avoir une bien mauvaise idée du fonctionnement interne du plugin, de Flash et HTML5 mais je me devais d'aller l'explorer. Après avoir visionné quelques démos, ça semble bien fonctionner, avec un léger ralentissement parfois peu notable. Il ne faut pas s'attendre à ce que ça soit parfait, la librairie Smokescreen est encore au stade de preview avec la version 0.1.3 qui prouve que le concept est réalisable (le code source est minifié pour ne pas en dévoiler tous les secrets).

Comment ça fonctionne ? Avec des fichiers SWF conçus avec Flash 8, certaines animations, le streaming de son, les effets sonores et du ActionScript de base peuvent être supportés par Smokescreen.

Qu'est-ce qui ne fonctionne pas ? Internet Explorer et Opera (reconnaissance trop faible du HTML 5 je suppose. Voir le test de compatibilité HTML 5 des fureteurs).

Pour faire la démonstration, on nous propose quelques bons choix avec les capsules Strong Bad email de HomeStar Runner. Autres démos disponibles ici.



Je suis même allé jusqu'à désactiver le plugin Flash de Firefox pour voir si tout était conforme. Étonnant, ça marche! Mais y a-t-il un tour de passe-passe qui se cache derrière ces fichiers SWF ? Est-ce truqué ? J'ai donc extrait tout le code nécessaire et j'ai tenté ma chance avec un fichier d'animation Flash tiré d'un projet que notre entreprise a réalisé récemment.

J'ai enregistré localement la librarie JavaScript, j'ai déposé mon fichier SWF et j'ai épuré le code HTML du démo comme ceci :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="js/smokescreen.0.1.3-min.js"></script>
<script>
function urlParam(name, _default) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]")
var regexS = "[\\?&]" + name + "=([^&#]*)"
var regex = new RegExp(regexS)
var results = regex.exec(window.location.href)
if (results == null) {
return _default
}
else {
return results[1]
}
}

function embed(container) {
var url = 'swf/mon-animation.swf'
var element = document.getElementById(container)
var size = urlParam('size', 1)
var width = 550 * size
var height = 400 * size
var name = 'animation'
var params = {}
new Smokescreen(url, element, width, height, name, params)
}
</script>
</head>
<body>

<div>
<div id="fljs">
No Smokescreen :(
</div>

<script>
embed('fljs', true)
</script>
</div>

</body>
</html>
J'en conclus que ça fonctionne et plutôt bien! Mais patientez encore un peu, ce sera bientôt lancé en open source prochainement! À surveiller.


Tags: HTML, iPod, JavaScript

5 réponses à "Convertir du Flash à HTML 5 et JavaScript"

  1. Anonyme a dit...
    9 juin 2010 à 05 h 20

    impressionnant, dommage que ce ne soit pas du tout exploitable à cause de cette cochonnerie d'IE qui mange le marché et nivelle par le bas toutes les tentatives des entreprises...

    10TRIBU a dit...
    23 juin 2010 à 05 h 55

    salut j'ai tester de mon coter avec ton code j'ai rien qui fonctionne
    a la place de No Smokescreen :( ...
    peu tu en dire un peux plus svp

    Infinite Loop a dit...
    23 juin 2010 à 06 h 39

    @10tribu Avec quelle version de fureteur ? Quelle version de Flash a été utilisée pour créer le SWF ?

    N'oublie pas que c'est encore en développement de la part des concepteurs, c'est possible que tout ne soit pas 100% compatible (je suis allé voir, pas de nouvelle version depuis).

    Si tu veux, tu peux m'envoyer le code par email, je vérifierai.

    Anonyme a dit...
    8 février 2011 à 13 h 10

    @10tribu
    Tu as peut-être tout simplement eu le même problème que moi : en copiant le code j'ai bêtement oublié d'enlever les numéros de ligne.
    Après que je me sois rendu compte de ma bourde ça a marché nickel.

    Anonyme a dit...
    26 août 2011 à 05 h 00

    Bonjour,

    J'ai tenté de convertir une animation flash avec du action script et qui dépend d'un fichier xml mais cela ne donne rien. Juste un rectangle noir. J'ai cru voir que cela fonctionne avec du code AS mais à priori celui de mon animation est trop complexe.

    Dommage...


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ▼  juin 2010 (42)
        • L'art de l'ordinateur analogique
        • L'effet du deuxième système de Brooks
        • La vérité sur la gestion de projets
        • Simulation de combat - Étape 6
        • Citation no. 88 sur la politique
        • Faire de la musique avec un bonzaï
        • Simulation de combat - Étape 5
        • Musique métal : CTRL+C, CTRL+V
        • Bande-annonce de Java 4-ever
        • Histoire de Saint-Jean-Baptiste
        • Zone réservée aux chaises roulantes
        • Mais qu'est-ce qu'Adobe veut dire ?
        • SOAP en PHP : retourner un objet ou array ?
        • 1er Tweet de Google en binaire
        • Utilisation CSS de @font-face avec OpenType
        • Citation no. 87 sur la dépression
        • Japadog : hot dog à la japonaise
        • Exclure un domaine d'une campagne AdWords
        • Plus aucune raison de croire à ça en 2010 !
        • Décharger les idées de ma tête
        • Ajouter un ancre hash tag dynamiquement
        • Retour sur l'anti-conférence pour un Web musical Q...
        • Deux erreurs d'inattention à l'intégration
        • Chocolat pour les geeks
        • PHP : preg_replace() et le symbole $ comme valeur
        • Un montréalais en tourisme à Montréal
        • Citation no. 86 sur Linux et Windows
        • Trois lois de la robotique d'Asimov
        • Expérimentations Canvas HTML 5 et JavaScript
        • Joke informatique dans un livre
        • Démystifier le dollar américain
        • HTML 5 et CSS - Astuce pour coder plus vite
        • Sac de chips extrêmes format géant
        • Fin du 17ème Mondial de la bière de Montréal
        • Laptop Toshiba - Réinitialisation "out of the box"
        • Citation no. 85 sur l'alcool
        • Branchement Digitech RP155 sur l'ordinateur
        • Réflexion sur la suite de Fibonacci (PHP)
        • Fonction strip_tags pour PostgreSQL
        • C'est là que la chicane a pognée...
        • Illusion d'optique impossible
        • Convertir du Flash à HTML 5 et JavaScript
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft