AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 TUTORIAL EFFETS SPRITE

Aller en bas 
AuteurMessage
Admin
Admin
avatar

Messages : 35
Date d'inscription : 11/06/2008

MessageSujet: TUTORIAL EFFETS SPRITE   Jeu 19 Oct - 22:23


 
   




Quelques explications sur l'effet spritetely

L'effet est réalisé grâce au script [Vous devez être inscrit et connecté pour voir ce lien]
Vous trouverez des infos sur ce site.

Ce script est basé sur 2 méthodes sprite () et pan () .
Qui animent  la propriété css background-image d'un élément.
La différence entre les deux est qu'une image «sprite» contient deux ou plusieurs «cadres» d'animation exemple le fantôme, alors qu'une image «panoramique» contient une image continue qui tourne à gauche ou à droite, puis se répète.exemple les arbres qui défilent dans la bannière du haut.

Vos éléments html doivent déjà avoir la taille correcte pour que l’image apparaisse, mais l'image d'arrière-plan sera généralement plus grande que l'élément html et les méthodes spritely repositionneront l'image d'arrière-plan dans l'élément html.

Exemple avec la chauve souris

L'animation est seulement constituée de 3 chauve souris. (6 pour la version reverse )
C'est ici que l'on voit la zone .spState(1) et .spState(2) que l'on va utiliser dans le script pour changer entre l'état a gauche a droite.


pour avoir


La partie script qui fait "voler" la chauve souris
Code:
$("#ghost2").sprite({fps:8, no_of_frames:3})
       .animate({opacity:'0.8'}, 5000) // ici vous pouvez changer l'opacité
       .spRandom({
         top:650, // Ici La distance de déplacement par rapport au Haut
         bottom:450, // Ici La distance de déplacement par rapport au Bas
         left:-100, // Ici La distance de déplacement par rapport au coté gauche
         right:1400, // Ici La distance de déplacement par rapport au coté droit
         speed:4000, // Ici la vitesse  diminuez la valeur pour augmenter la vitesse
         pause:2000  // le temps de pause

      }).isDraggable().activeOnClick().active();
     $('body').flyToTap();

Détaillé

Code:
$("#ghost2").sprite({fps:8, no_of_frames:3})
Ici on définit l'élément #ghost2 comme sprite avec 8 images par secondes et constitué de 3 images ou frame.*vous pouvez modifiez les FPS attention à ne pas mettre de valeurs trop élevé gourmande en ressource.
Code:
.animate({opacity:'0.8'}, 5000)
ici on règle l'opacité à 0.8 ( on peut mettre de 0.1 à 1 ) et le temps ici 5000 en millisecondes.

Code:
.spRandom
on initialise l'effet de déplacement aléatoire.
Code:
top:650, bottom:450, left:-100,right:1400,
Ici on va définir une zone ou la chauve souris va se déplacer en changeant les différentes valeurs.
Par exemple pour quelle vole en ligne sur une petite zone mettez top:150, bottom:152, elle restera en haut de page en ligne...
Code:
speed:4000,
 
Ici la vitesse  diminuez la valeur pour augmenter la vitesse en millisecondes.

Code:
pause:2000
le temps de pause en millisecondes.
Code:
.isDraggable().activeOnClick().active();
La méthode isDraggable () permettra à un sprite d'être déplacé vers n'importe quel point de l'écran.
La méthode active () rend ce sprite actif au lancement sinon un sprite avec activeOnClick () ne devient actif que lorsque vous cliquez dessus.

Code:
$('body').flyToTap();
Recherche un clic sur la page à partir de laquelle le sprite se déplace vers l'emplacement cliqué après la fin d'un déplacement en cours.

Partie concernant les boutons et changement de direction
Code:
$("#monster").click(function() {
  jQuery("#ghost2").animate({opacity:"0.7"}, 5000).spState(2);
});
$("#monster1").click(function() {
  jQuery("#ghost2").spState(1);
});
$("#monster2").click(function() {
  jQuery("#ghost2").spToggle();
});
$("#click").click(function() {
  $("#panel").toggle(1000);
});

Détaillé

Code:
$("#monster").click(function() {
  jQuery("#ghost2").animate({opacity:"0.7"}, 5000).spState(2);
});

Ici l'id #monster correspond au bouton RIGHT quand on clic l'id #ghost2 qui correspond à la chauve souris elle prend une opacité de 0.7 en 5000 millisecondes et change pour passer
à l'état 2   >>  .spState(2)

Pour changer la direction des sprites, vous devez utiliser une méthode différente, $ .spState (), et vous avez besoin d'une image différente, avec plusieurs lignes d'images, une ligne pour chaque état.





A suivre....
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://antonyadam.kanak.fr
 
TUTORIAL EFFETS SPRITE
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» TUTO MAO : GUITAR RIG 4 PRO NATIVE INSTRUMENTS PARTIE 1
» Réglages des effets sur Audacity
» Alim pour pédales d'effets?
» multi effets guitare BOSS me50
» Soulseek et son tutorial pour accéder à la room Techno World

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: EFFETS SPRITE HALLOWEEN :: TUTORIAL SPRITE EFFECT-
Sauter vers: