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

Résolu
Safrancrush Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
Rikon85 Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -
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

A voir également:

7 réponses

vincebzh Messages postés 137 Date d'inscription   Statut Contributeur Dernière intervention   29
 
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.
2
Rikon85 Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   1
 
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 !
1
Safrancrush Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
Merci bien!
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Safrancrush Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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?
0
Safrancrush Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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/
0
weetabix40 Messages postés 9583 Date d'inscription   Statut Contributeur Dernière intervention  
 
Salut,

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

Cordialement,
Weet
-1