Créer une animation (sans Flash) pour le web.Résolu/Fermé

Question

Bonjour, 

Je suis «novice» dans le domaine, je me débrouillais pas si mal avec Flash pour des animations simples... mais voilà qu'on «m'interdit» de l'utiliser vu que ça ne fonctionne pas sur les iphones & cies. Quelles sont les autres options pour faire de petites animations (à part les .gif biensur) sur un site? J'ai vu un tutorial d'animation en DHTML, mais j'ai comme l'impression que ma version Dreamweaver CS3 est trop ancienne... je me trompe? oO 

Configuration: Mac OS X / Firefox 3.6.25

vincebzh · Accepted Answer

Salut. 

Adobe travail sur un logiciel permettant de créer des animations HTML5.
https://www.adobe.com/products/catalog.html

La dernière fois que j'ai testé, ça consistait à faire bouger un div (avec border-radius on non) selon une timeline. Ça fonctionne plutôt bien mais c'est vraiment limité.

Sinon il y a sencha Animator, qui semble être plus poussé que Edge. Le gros problème, c'est qu'il est uniquement compatible avec webkit (iOS, Chrome, Safari).

Il y a aussi des convertisseurs Flash vers HTML, comme Wallaby (d'Adobe aussi - https://helpx.adobe.com/animate/using/creating-publishing-html5-canvas-document.html ). Ça fonctionne pas trop mal pour des animations simple.
Google à tenté de faire la même chose avec Swiffy ( http://www.google.com/doubleclick/studio/swiffy/ ).
Même constat que pour Wallaby, les animations simple passent pas trop mal mais faut pas trop lui en demander.

A toi de voir ce qu'il te correspond le plus.

Après, le mieux est de coder toi même tes propres animations en utilisant des interpolation de mouvements (comme dans l'exemple de weetabix40) ou des canvas (comme dans l'exemple de RAD ZONE) ou bien les deux en même temps.

weetabix40 · Answer

Salut,

Regarde du coté de html5 + CSS3
ex : http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/

Cordialement,
Weet

Safrancrush · Answer

Merci bien!

RAD ZONE · Answer

Salut 

en y rajoutant du js on peu aller assez loin dans l animation , 
voila un exemple , ( experimental a ne pas mettre sur un site vue la charge pour les UC des visiteurs ), mais pour te montrer les possibilites , 
Exemple canvas HTML5 + CSS3 + JS  
cela dis je ne pense pas que ca passe sur beaucoup de mobile , et ne passera pas sur IE Inferieur a 9, d ou la mise en place du fallback  en "flashcanvas" ;-))
meme des jeux !( pas sur qu il passe sur mobile )
2 petits exemples 
Voitures

Clicker les Fruits

a+

Safrancrush · Answer

Merci à vous pour toutes ces infos!! Je vais regarder tout ça demain!
Je suis designer graphique à la base, alors j'suis plus à l'aise avec le wysiwyg que les codes. ;)

Je viens de voir une petite application web HYPE (pour Mac), https://tumult.com/hype/ ,  quelqu'un connait?

Safrancrush · Answer

En fait je viens d'essayer les convertisseurs de vincebzh...Sauf quelques petites différences (option dans Flash à eviter) ça fonctionne assez bien oui.  

You-ouuu! MERCI encore! o/

Rikon85 · Answer

Salut, 

Désolé de répondre si tard, mais ta question a attiré mon attention. Mais plus nous avançons dans le temps et plus l'HTML5 et les outils qui permettent de l'éditer évoluent. 
Pour te permettre de créer des animations sans Flash, tu as des outils dédiés qui ont fait leur apparition comme l'a expliqué vincebzh. Je voulais ajouter celui-ci :  l'A5 HTML5 Animator qui est sorti récemment, voici la version test à télécharger : http://www.todate.fr/solutions/a5-html5-animator/version-devaluation/index.php. Il est nouveau et l'occasion de le comparer avec les autres. 

A plus !

Créer une animation (sans Flash) pour le web.

7 réponses

Discussions similaires

Newsletters