Avatar virtuel animé

Bonjour à tous et à toutes.
Je suis nouveau sur ce forum, j’espère donc posté au bon endroit . Si jamais mon post fais redondance avec un autre sujet je suis désolé, j'ai dût mal à exprimer mon problème actuel, et donc à faire des recherches dessus.

Je vais essayer d'expliquer mon problème le plus clairement possible.Je travaille actuellement sur un site de vente en ligne. Les clients viennent sur ce site, ont accès à des catalogues, peuvent choisir un produit, et une fois choisis se retrouve sur des formulaires à remplir afin de passer commande.

J'aurais aimé rendre le site plus attractif/plus vivant en ajoutant une mascotte qui serait animé. Je ne parle pas d'un simple gif animé, j'aurais aimé que la mascotte, lors de la première visite d'un utilisateur apparaissent sur l'écran, explique un peu le site , ce qu'on y vend,...
(Pour le moment il n'est pas encore défini si les explications seront textuels ou sonores).

Pareil, au moment de remplir un formulaire cette mascotte ré-apparaîtrait a nouveau afin d'expliquer comment remplir le formulaire. Je ne désire pas que cette mascotte soit en fait une succession de page HTML avec de simples images, j'aurais aimé quelque chose de dynamique.

Le must aurait été de pouvoir "fermer la mascotte" si on ne veut pas de son aide, la "rappeler" à l'aide d'un bouton si au contraire on a besoin d'aide, et si la mascotte disait une bulle d'informations, pouvoir mettre dans cette bulle certain "lien" qui permettront de discuter avec la mascotte.
Par exemple:
"Bonjour comment allez vous:
-Bien
-Mal"

En fonction du choix on aurait une autre réponse.

Donc voici en gros mon problème.

Solution écarté:
le flash: je ne veux vraiment pas de flash (1 je n'aime pas, 2 je ne connais pas assez,3 pas compatible avec les tablettes)

Solution envisagé:
Canvas: j'avais effectivement pensé à faire un Canvas en html, cela m'aurait permis de déplacer assez facilement notre mascotte. Cependant je ne sais pas si il est possible d'afficher un Canvas par-dessus un site internet sans pour autant le cacher (l'idée serait d'avoir un Canvas de la taille de la fenêtre, pouvant permettre à la mascotte de se déplacer un peu partout, le canvas n'aurait pas de fond, permettant de voir en arrière plan le site internet et de continuer à interagir avec).

Je ne sais pas si c'est possible. Si jamais vous avez d'autre suggestions, idées,.. je suis preneur.

Merci d'avance

un début de solution est envisageable du coté de l'animation de sprite en javascript, voila deux lien qui te permettrons de mieux comprendre le concept

http://www.createjs.com/#!/EaselJS/demos/spritesheet
http://www.spritely.net/
Modifié par tazzkiller (23 Apr 2013 - 12:52)

Merci, je vais regarder du côté de spritely pour voir si les character peuvent être animé par dessus la page sans la rendre inutilisable pour autant.

Edit: en cliquant sur le bouton download l'oiseau se déplace vers nous. Cela à l'air de convenir comme début de solution
Modifié par Ciclarion (23 Apr 2013 - 13:32)

A toi de jouer alors !!

Bon après quelques essai on peut effectivement faire bouger le sprite par dessus la page, cependant si ce dernier se trouve être sur un lien ou quelque chose de cliquable, on ne peut cliquer.
Je vais quand même voir ce que je peux faire avec. Mais je ne sais pas non plus si je pourrais faire quelque chose d'interactif avec ça.
Mais je pense que ça va quand même m'aider ^^

tu devrais pouvoir réussir a l'utiliser en intégrant le sprite a une div que tu manipule en javascript qui demarre l'animation de celle ci et du sprite au même moment ou avec un delay ..


tu as aussi ce styel de script que je trouve super efficace : http://heelhook.github.io/chardin.js/
Modifié par tazzkiller (23 Apr 2013 - 16:20)

Merci. Je vais voir ce que je vais réussir à faire comme ça. Je pense que je risque de rencontrer des problèmes au niveau des "dialogues" maintenant (faire qu'en fonction d'une réponse choisis cela fasse tel ou tel chose,...).

Va également falloir que je regarde pour faire passer l'animation par dessus l'overlay de Chardin.js, de cette manière en couplant les eux je pourrais donner l'impression que c'est l'avatar qui explique ce qui est inscrit sur l'overlay =D

Encore merci pour ton aide jusque là ^^

Edit: je n'ai pas encore chercher a voir pour coupler les 2 plugins. Pour l'instant je suis encore sur spritely et commence à mettre en forme 2/3 truc. J'ai un problème, c'est que je souhaiterais lancer une fonction javascript lorsque l'animation de mon sprite est terminé. Cependant je ne sais pas comment faire pour que la fonction se lance automatiquement lorsque mon div (déplacé en javascript) se trouve en une certaine position (left:500px en position absolute). Une idée ?

Edit 2: Ok avec la bonne version du script spritely ça va déjà mieux xD Grâce à l'event des frames je met donc une vérification qui regarde la position, et qui, si bonne, me met le script correspondant. Problème: cela me fait donc une vérification "continu". Cela ne risque-t-il pas d'être lourd pour le navigateur à force?
Modifié par Ciclarion (24 Apr 2013 - 09:49)