AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.



12 résultats trouvés pour animation

Shoki

Animations simples en CSS3 - Sam 27 Aoû 2016 - 13:19



Animations simples en CSS3


Bien le bonjour, cher curieux ! Je poste mon premier tutoriel de codage pour... parler d'animations. Et attention, j'ai dit "animations", pas "transition" ou "transformations". D'ailleurs, vous n'aurez pas besoin de ces derniers pour comprendre ce tutoriel, je ne vais parler que des animations.

 
Tu peux pas donner un exemple au lieu de parler d'"animations" ?


En effet, ça serait plus pratique. Voici donc un petit exemple d'animation : clique ! N'est-ce pas magnifique ? En général, les animations se font avec des langages comme le JavaScript, mais ici nous allons en réaliser des simples rien qu'avec le CSS3 ! Tu veux faire la même chose ? Dans ce cas, il te suffit de suivre ce tutoriel !

 
Je précise que j'ai déjà fait ce tutoriel sur un autre forum, même si je vais remanier mes explications pour ici.
Au passage, je m'excuse s'il y avait déjà un tutoriel sur ça x:


 
Ne fonctionne pas sur les versions d'Internet Explorer (Microsoft Edge) antérieures à la 10 ! Bien veiller à mettre des préfixes. Tutoriel sur les préfixe : ici.


Comment ça marche ?


Reprenons notre petite animation de plus haut, à savoir celle-ci. Mais que se cache donc derrière ce carré qui change de couleur ? Regardons de plus près le CSS, ainsi que le HTML (il faut bien intégrer votre code quelque part, tout de même) :
Code:
/***CSS***/
/*Firefox 5.0*/
-moz-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Opera 12.0*/
-o-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Standard*/
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
div {
   width: 300px;
   height: 300px;
  /*Syntaxe avec super-propriété "animation"*/
  -moz-animation: nuxemple 3s linear 0s infinite alternate;
  -webkit-animation: nuxemple 3s linear 0s infinite alternate;
  -o-animation: nuxemple 3s linear 0s infinite alternate;
  animation: nuxemple 3s linear 0s infinite alternate;
}


<!-- HTML -->
<div></div>


Pourquoi je n'ai aucune class (ou id) dans mon HTML ? Tout simplement parce que j'ai sélectionné toutes les divs de mon code, donc ici la seule div que j'ai. Mais passons au CSS. Vous remarquerez qu'un drôle d'élément a fait son apparition et que la fin du CSS est incompréhensible. Mais pas de panique, je la décortique pour vous !

Partie avec le @keyframes


Je vais m'attarder ici uniquement sur la syntaxe "standard", tout simplement parce que c'est exactement la même chose pour les syntaxes préfixées (avec le préfixe en plus). Observons donc ceci :
Code:
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}

Ma propriété ici est @keyframes, suivit du nom de l'animation (ici, nuxemple, mais vous pouvez lui donner n'importe quel nom, du moment que vous mettez exactement le même -à la lettre près- partout). Jusque-là, pas vraiment de problèmes. C'est la suite qui se complique. Ici, notre bloc changera quatre fois de couleur. C'est vrai, c'est évident, mais je suis sûr que les deux messieurs au fond sont en train de se demander comment ça se passe.
Imaginons, la durée de mon animation est de 100%. A 0%, donc au début, mon carré est bleu. A 25% de l'animation, il devient rouge. Puis à 25%, sa couleur vire au jaune et à 100% (à la fin donc), je me retrouve avec un carré vert. Simple, non ? Sachez tout de même que si vous ne spécifiez pas le nombre de fois où l'animation se répète, vous vous retrouverez avec un carré vert à la fin, puis de nouveau bleu et... et c'est tout. Par chance, il existe quelques astuces pour contrer cela, mais nous verrons ceci plus tard.

Vous organisez comme vous le sentez vos nombre de changement de couleur et pourcentages, en sachant que lorsque vous ne voulez que deux couleurs, il faut coder ceci :
Code:
@keyframes nuxemple {
from { background: red; }
to { background: yellow; }
}

Ici, mon élément passera de rouge à jaune, ce qui vous donne quelque chose de ce genre. Bien sûr, ici j'ai usé de ma petite tactique de triche pour ne pas que ça s'arrête brusquement.

 
J'ai pas envie de me contenter de changer uniquement la couleur de fond...

Justement, j'allai en venir à ce point-ci : on peut aussi faire bouger notre carré, comme ceci ! J'avoue avoir utilisé ma petite technique pour ne pas avoir un arrêt brutal. Et voici le petit code pour arriver à ce petit miracle :

Code:
/*Standard*/
@keyframes nuxemple {
  0% {background: blue; left: 0px; top: 0px;}
  25% {background: red; left: 100px; top: 0px;}
  75% {background: yellow; left: 100px; top: 100px;}
  100% {background: green; left: 0px; top: 0px;}
}

div {
   width: 300px;
   height: 300px;
      position: relative; /*PENSEZ A METTRE VOTRE ELEMENT EN POSITION RELATIVE, FIXE OU ABSOLUE SI VOUS VOULEZ QUELQUE CHOSE QUI BOUGE*/
  /*Syntaxe avec super-propriété "animation"*/
  animation: nuxemple 3s linear 0s infinite;
}


En plus de la propriété background, j'ai ajouté une des propriété pour déterminer une position (top, left, right, bottom). Puis j'ai mis mon petit carré en position relative (très important si vous souhaitez que votre bloc bouge, mais ça marche aussi en fixe et en absolue), et j'ai laissé la magie opérer !

 
Ouais, c'est joli ton truc, mais la second partie du code, c'est quoi ?

Justement, je vais l'expliquer de ce pas ~

Partie avec la (super)propriété animation


 
Je vais tout d'abord expliquer ce que j'appelle une super-propriété : c'est une propriété... qui réunit d'autres propriétés en une seule ! Exemple flagrant : margin. Au lieu de taper :
Code:
margin-top: 10px;
margin-right: 50px;
margin-bottom: 20px;
margin-left: 45px;

ce qui peut s'avérer barbant à la longue, on réunit ces quatre propriétés en une seule, margin, et on obtient ceci :
Code:
margin: 10px 50px 20px 45px; /*traduction : margin: haut droite bas gauche*/

Pratique pour économiser des lignes, non ? Il existes d'autres super-propriétés, comme background, padding et... animation.


Voici donc la seconde partie de notre CSS
Code:
animation: nuxemple 3s linear 0s infinite alternate;

Vu comme ça, c'est vraiment du charabia, n'est-ce pas ? Mais chaque valeur correspond à une propriété. Je vais donc remplacer toutes ces valeurs par leurs propriétés correspondantes :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction


Ça fait beaucoup à retenir, surtout que certaines on un nom assez obscure... Mais pas de panique, je vais vous expliquer à quoi correspond chaque propriété !

  1. animation-name :Ici, pas très compliqué à comprendre : le nom de l'animation (ici nuxemple)

  2. animation-duration : Là non plus, pas trop de difficultés : la durée de l'animation (5s, 700ms... valeur par défaut: 0). A DÉFINIR ABSOLUMENT. (ici 3s, soit 3 secondes)

  3. animation-timing-function : Là, c'est un peu plus obscure : il s'agit de la "vitesse" de l'animation (linear, ease... par défaut : ease. Plus de détails plus bas.) (ici linear)

  4. animation-delay : Là, pas vraiment difficile à comprendre non plus, c'est le délai de l'animation ; si elle commence au bout de 5s, 400ms... Valeur par défaut : 0s. (ici 0s, donc la valeur par défaut)

  5. animation-iteration-count : Un nom compliqué pour définir une chose simple : ceci définit le nombre de fois où l'animation va se "répéter" ; une fois ce nombre écoulé, l'animation s'arrête (si vous mettez "3", l'animation va se répéter 3 fois avant de s'arrêter). Par défaut, c'est une fois. Possibilité de mettre infinite en valeur pour qu'elle se déroule indéfiniment. (ici infinite)

  6. animation-direction : Un nom un peu flou ; cette propriété a deux valeurs : reverse et alternate. reverse va "inverser" l'animation (par exemple, mon bloc doit d'abord être bleu, puis rouge puis vert ; là il va d'abord être vert, puis rouge et enfin bleu) et alternate va "alterner" l'animation, grosso-modo la faire dans l'ordre défini (par exemple rouge, vert, bleu) puis inverser (bleu, vert, rouge si je reprends mon exemple) et ce, durant tout le temps de l'animation. Attention, si tu as, par exemple, définit que l'animation se déroulera trois fois, la première fois sera "normale", la seconde "alternée" et la dernière normale. (ici alternate)


Voici donc notre fameux code avec toutes ces propriétés :
Code:
div {
/*...*/
animation-name: nuxemple;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s; /*Je pouvais carrément enlever cette partie, car la valeur par défaut est 0*/
animation-iteration-count: infinite;
animation-direction: alternate
}

La super-propriété raccourci bien le code, n'est-ce pas ? Néanmoins, sachez que ce code plutôt long a le même effet que la super-propriété.

   
C'est quoi les valeurs de "animation-timing-function" ? Avec des détails si possible.

Avant d'expliquer cela, il faut savoir qu'on retrouve ces timing-function dans les transitions
ease : Début rapide, ralenti sur la fin. Valeur par défaut.
linear : Vitesse constante sur toute la transition.
ease-in : Début lent, s'accélère de plus en plus.
ease-out : Début rapide, ralenti de plus en plus.
ease-in-out : Début et fin de la transition lents.


Après la théorie, la pratique !


Après une séance de décorticage, nous passons maintenant à... bah, la pratique. Mais soyez sans crainte, je vais vous aider pas à pas ~

Ce que nous allons donc faire, c'est un rond normalement violet qui va devenir rouge, rose jaune et orange. Et parce que j'aime bien compliquer les choses, notre rond va bouger. Dit comme ça, ça à l'air simple, mais attendez voir...

Je n'utilise pas les préfixes pour cet exemple, mais n'oubliez pas de les mettre !


Pour commencer, ouvrez votre feuille de style CSS ou de tout autre endroit où vous pourrez mettre le CSS. Une fois fait, nous allons ouvrir notre... aller, on a vu ça plus haut... ah, la dame du deuxième rang... Oui ! Exactement ! Nous allons donc introduire notre CSS par notre fameux @keyframes ! Mais pas que. Il vous faut aussi quelque chose d'important... Mais si, vous savez quoi. C'est pas suffisant le @keyframes, il faut... nommer l'animation ! Vous l'appelez comme vous le souhaitez, moi je vais l'appeler... nu-exo. On ne me juge pas, s'il vous plaît. Donc, notre CSS ressemble à ceci.

Code:
@keyframes nu-exo {

}


Je laisse un espace exprès pour pouvoir mettre la suite du code. Une fois ceci fait, il nous faut mettre des propriétés à l'intérieur. Rappelez-vous, nous (enfin, je) voulons un rond violet qui devient successivement rouge, rose, jaune et orange. Nous allons donc utiliser... les pourcentages vus au début.
Code:
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

Comme vous pouvez le voir, j'ai mit un peu ce que je voulais dans les pourcentages, mais sachez que vous devez obligatoirement avoir 0% au départ et 100% à la fin. Si vous préférez avoir 3 couleurs, 6 couleurs ou même une dizaine, adaptez les pourcentages en fonction de ce que vous souhaitez. Rappelez-vous que pour deux couleurs, le code est le suivant :
Code:
@keyframes nu-exo {
from {propriété: valeur;}
to {propriété: valeur;}
}


Je veux pas mettre du rose, c'est pas viril...

Pas de problème ! Si vous souhaitez avoir d'autres couleurs, vous avez deux choix : soit utiliser les noms de couleurs anglais (red, yellow, green, blue...) ou, beaucoup moins limité, les couleurs hexadécimales. Comme il est impossible de savoir à vu de nez ce que fera #56AEBC par exemple, vous pouvez aller sur ce site et choisir vos couleur en toute tranquillité ~ Vous pourrez également constater que les couleurs que j'ai prise pour cet exemple sont effectivement du violet, du rouge, du rose et du orange, et que la couleur que j'ai "composé" totalement au hasard (à savoir #56AEBC) correspond à du bleu.
Mais revenons. Dans la fameuse seconde partie du code, nous allons donner une class à notre rond (pour moi, ça sera "rond". Effectivement, je ne vais pas chercher très loin xD) et nous allons lui mettre des propriétés :

Code:
.rond {
width: 150px;
height: 150px;
border-radius: 150px; /*arrondi les bords et forme ici un rond*/
background: #A93A8C; /*important si vous ne voulez pas vous retrouver avec un rond invisible à la fin de l'animation*/
animation-name: nu-exo;
animation-duration: 3s; /*vous pouvez mettre plus longtemps. Sachez qu'il est important de définir une durée !*/

Il ne reste plus qu'à intégrer tout ça dans le HTML...

Code:
<div class="rond"></div>
<!-- Si ça vous chante, vous pouvez écrire un mot d'amour dans votre cercle ~ -->


Pour le moment, nous avons ceci. Vous pouvez constater que, effectivement, l'animation s'arrête au bout d'un moment.  Niveau code, nous avons cela :
Code:
/*CSS*/
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

.rond {
width: 150px;
height: 150px;
border-radius: 150px;
background: #A93A8C;
animation-name: nu-exo;
animation-duration: 3s;

<!-- HTML -->
<div class="rond"></div>


... Dites, on n'aurait pas oublié quelque chose, par hasard ? ... Mais oui, notre rond doit bouger ! Pour cela, il nous suffit de mettre notre élément en position relative (ou absolute ou fixe) si vous voulez que ça bouge ~  Ensuite, nous retournons dans notre CSS et nous allons donner du mouvement au bloc. Pour cela, rien de plus simple, il suffit d'utiliser les propriétés top, bottom, left ou right suivi d'une valeur en pixels. Un peu comme ici :

Code:
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}

.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
  animation-name: nu-exo;
  animation-duration: 3s;
}


Et nous avons ceci ! Pas mal, non ? ... Comment ça, il y a un détail qui gêne ? L'arrêt brutal ? Nous allons donc masquer cela en utilisant certaines propriétés précédemment vues ! Pour plus de clarté, je vais utiliser la super-propriété puis montrer ce que ça donne avec les propriétés séparées. Nous avons donc une première astuce qui s'ouvre à nous : utiliser infinite. Ce qui nous donnerait :
Code:
animation: nu-exo 3s ease-in-out 0s infinite;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;


Ce qui donne ça. Si ça ne vous va toujours pas, vous pouvez toujours taper ceci :
Code:
animation: nu-exo 3s ease-in-out 0s infinite alternate;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;


Et pourquoi à un endroit ça va plus vite qu'un autre ? Je vais expliquer ça en donnant un exemple tout bête. Imaginez que votre animation soit un facteur qui doit livrer ses courriers/colis/lettres dans un temps limite, ici 1 minute, soit 100%. Il commence donc à 0%, soit au début, et dépose son premier colis à 32% du temps. Bon, il a le temps, ça va. Le second paquet, il a pris plus de temps et du coup, il le livre quand il est à 64% du temps. Du coup, il va accélérer et à 76% du temps, il a livré le troisième colis. Lui restant plus de temps que prévu, notre facteur va livrer son quatrième et dernier colis pile à la fin du temps limite ; il a donc rempli sa mission de tout livrer en une minute. L'animation, c'est pareil. L'élément a un certains temps que vous définissez pour compléter l'animation en entier. Et suivant les pourcentages que vous lui attribuez, elle va aller plus ou moins vite par endroit.

Et voilà, notre animation est finie ! Rien ne vous empêche cependant de rajouter quelques petites touches personnelles. Personnellement, en rajoutant tous les préfixes et tout le tralala, j'ai obtenu ceci :

Code:
/*CSS*/
/*Firefox 5.0*/
-moz-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Opera 12.0*/
-o-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Standard*/
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
      -moz-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -webkit-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -o-animation: nu-exo 3s ease-in-out 0s infinite alternate;
  animation: nu-exo 3s ease-in-out 0s infinite alternate;
}


<!-- HTML -->
<div class="rond"></div>


C'est donc la fin de ce tutoriel. Je ne vous ai ici appris que les bases, mais sachez qu'en creusant un peu, vous pourrez faire de belles choses ! Attention toutefois à ne pas en abuser, vous pourrez faire mal aux yeux de ceux qui regarde votre carré magique ~ Néanmoins, voici les différents points importants à retenir :

• N'oubliez pas de donner un nom à votre animation ;
• Peut importe le nombre de % que vous mettez, une animation doit toujours commencer par 0% et finir par 100% ;
• Pour une animation ne comprenant que deux couleurs (ou autre), écrire
Code:
@keyframes nomAnimation {
from {propriété: valeur;}
to {propriété: valeur;}
}

• Si vous voulez que votre élément bouge durant l'animation, n'oubliez pas de le mettre en position relative, absolue ou fixe ;
• Suivant vos %, l'animation n'ira pas forcément à la même vitesse d'un endroit à l'autre ;
• Arrivé à sa fin, l'animation s'arrête brutalement. Si vous voulez contrer ça, utilisez des méthodes telles que
Code:
animation-iteration-count: infinite;

• Si vous voulez raccourcir au maximum votre code, utilisez la super-propriété animation, qui s'écrit :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

(remplacer les propriétés par des valeurs)

A vous de jouer maintenant !

Okhmhaka

Index - Jeu 4 Juin 2015 - 16:29

Animations - Index





En cliquant sur un tag (mot précédé du dièse "#") indiqué dans chaque tutoriel vous afficherez tous les messages du forum comportant eux aussi le même tag.


Animation de déplacement aller-retour
Voir le tutoriel
Ouvrir un gif animé
Voir le tutoriel

GoldenSun2

Faire une chute de neige avec dispartion - Ven 11 Déc 2009 - 13:12



Ami du Jour, Bonjour. Ami du Soir, Bonsoir !

Noël approche et je me demandais ce que je pouvais bien faire en ce mois de décembre, alors j'ai ouvert flash et je me suis dit "Je pourrais faire une chute de neige, mais pleins de tutos existe déjà sur ça =/", mais après, je me suis dit "Mais aucun tutoriel expliquant comment faire tomber de la neige avec transparence et disparition à la fin =)" alors je me suis lancé dans un codage long long long, de 46 lignes ! *Ok c'est pas long*. Maintenant, lisez la suite et vous saurez comment faire !


1. Créer le flocon :
Pour commencer, ouvrez flash, nouveau document en AS 2.0 de taille au choix. Changer le fond de la scène en noir (Propriétés > Scène) et importé votre flocon dans la bibliothèque ou tout simplement, faite un simple rond blanc et placer celui-ci en dehors de la scène.

Maintenant, nous allons transformé ce simple dessin en clip. Pour cela, 3 manières se propose à vous. Sélectionnez votre flocon, puis Clic Droit > Convertir en symbole, là vous donnez comme nom "flocon" et comme type "Clip" OU Sélectionnez votre flocon, Menu > Modifier > Convertir en symbole, vous donnez le nom "flocon" et comme type "Clip" OU Sélectionnez votre flocon, F8 et là vous donnez le nom "flocon" et comme type "Clip". Voilà les 3 manières possibles.

Votre flocon est converti ? Très bien, maintenant, sélectionnez votre clip, allé dans Propriétés et donné lui comme nom d'occurrence "flocon". Passons maintenant à la duplication du clip =P.


2. La duplication :
Ici on va procéder par plusieurs étapes. Nous allons tout d'abords déclarer nos variables importantes, puis dupliquez le flocon x fois, ensuite déclarer les variables de déplacement et en fin déplacer les flocons.
Code:
//Variables//
var nomClip = "flocon";
var nombreClip = 200;
var sizeClip = 12;
var largeurScene = 550;
var hauteurScene = 400;

Je vais vous donnez une brève explication sur les variables. \"nomClip\" est, comme vous l'avez compris, le nom d'occurrence du clip et non le nom qu'il porte dans la bibliothèque, nombreClip est le nombre de fois que l'on dupliquera le flocon, sizeClip est la taille maximum que peut atteindre le flocon en px, ici, ça taille maximum est de 12px (NB : Le flocon sera toujours carré), largeurScene et hauteurScene sont évidement, comme vous l'avez compris, la largeur et la hauteur de la scène ^^\"

Maintenant, passons à la duplication du clip.
Code:
//Dupliquer le clip//
for (var i = 0; i < nombreClip; i++)
{
   this[nomClip].duplicateMovieClip(nomClip+i, i);
   this[nomClip+i]._x = random(largeurScene);
   this[nomClip+i]._y = random(hauteurScene);
   this[nomClip+i]._width = random(sizeClip);
   if (this[nomClip+i]._width < 5) { this[nomClip+i]._width = 5; }
   this[nomClip+i]._height = this[nomClip+i]._width;
   this[nomClip+i]._alpha = random(101);
   if (this[nomClip+i]._alpha < 20) { this[nomClip+i]._alpha = 20; }
}

La duplication du clip n'est pas compliqué à comprendre du tout (enfin pour moi, je ne sais pas si pour vous ^^\"). Enfin, ici nous allons dupliquer le clip \"flocon\" 200 fois et les flocon dupliqué porterons le nom \"flocon0\", \"flocon1\", . . . Le flocon sera placé 'importe ou sur la scène mais ne sera jamais en dehors. La taille sera aléatoire MAIS si elle est inférieur à 5, le flocon sera directement redimensionné à 5px. Et voilà une nouvelle ligne qui n'apparait pas dans les autres codes.
Code:
this[nomClip+i]._alpha = random(101);

Ce bout de code va juste définir la transparence du flocon. L'effet visuel est juste meilleur ^^ La transparence sera aléatoire MAIS si elle est inférieur à 20 on défini la transparence à 20%. Ben c'est vrai, il faut quand même le voir le flocon =D

Voilà que la duplication du calque est terminé, vous pouvez lancé votre rendu en route, vous verrez tous les petits flocon sur votre scène mais il reste encore le déplacement à faire.


3. Le déplacement
Le déplacement ne se fera que d'un sens, soit vers la droite, soit vers la gauche. Il sera généré par la \"force du vent\", on peut dire ça comme ça, qui variera (augmentera et diminuera). Mais tout d'abords, nous allons déclarer les variables de mouvement.
Code:
//Variables déplacement//
var forceVent = random(20)
if (forceVent < 2) { forceVent = 2; };
var sens = -1;
var ajout = -1;

Bon je vais faire une explication vite fait, bien fait. La force du vent est aléatoire MAIS si elle est inférieur à 2 alors elle sera déclaré à 2 sinon les flocons restes calés dans les coins. Le sens ne fais que changer la direction des flocons par une simple multiplication qui sera présente plus tard. Si le sens vaut 1 alors les flocons iront à droite, si il vaut -1, les flocons iront à gauche. L'ajout ici est simplement fait pour ralentir la vitesse du vent pour qu'elle ne soit pas régulière. Mettez -1 pour que la vitesse varie et 0 pour qu'elle soit régulière. Bien ? Alors passons au déplacement =).

Ce bout de code déplacera juste les flocons par rapport à la force du vent et le sens qu'on lui a donné par rapport au poids du flocon. Comment j'ai calculé le poids du flocon ici ? Ben on va juste dire que si il est plus gros, alors il est plus lourd ^^
Code:
//Déplacer le clip//
onEnterFrame = function ()
{
   forceVent += ajout;
   
   if (forceVent >= 20) {ajout = -1; }
   if (forceVent <= 5) {ajout = 1; }
   
   for (i = 0; i <= nombreClip; i++)
   {
      this[nomClip+i]._x += this[nomClip+i]._height/forceVent*sens;
      this[nomClip+i]._y += this[nomClip+i]._height/5;
      if (this[nomClip+i]._y >= hauteurScene-50) { this[nomClip+i]._alpha += -2; }
      if (this[nomClip+i]._y >= hauteurScene+10) { this[nomClip+i]._y = -20; this[nomClip+i]._alpha = random(101); }
      if (this[nomClip+i]._x > largeurScene+15) { this[nomClip+i]._x = -10; }
      if (this[nomClip+i]._x < -15) { this[nomClip+i]._x = largeurScene+10; }
   }
}

Alors alors, ici on a déjà une ligne de code qui est un peu plus complexe, mais certes, basique. Je vais pas commencé a expliqué la fonction onEnterFrame en détail, je vais juste vous dire que c'est une fonction que ne s'arrête jamais. Tout d'abords, on ajoute la variable ajout à la force du vent qui, selon votre réglage, diminuera la force ou ne fera rien du tout. Ensuite, on regarde si la force du vent n'est pas trop faible. Si elle l'est, alors on change la variable ajout en mettant 1 à la place de moins 1, ce qui augmentera la force du vent. Si elle arrive à 20, alors la on diminue la force du vent en changeant la valeur de \"ajout\" en -1 (NB : Si vous avez réglé l'ajout sur 0, ces conditions de seront pas appliquées mais le code fonctionnera quand même).

Après avoir défini la force du vent, il faut déplacer les flocons par rapport à cette force et on sens qu'on leur à donné. On fait un simple calcul, on regarde la taille du flocon, on le divise par la force du vent et on multiplie le tout par le sens juste pour définir s'il faut allé en arrière sur l'axe x ou en avant (principe du x fois -1 = -x). Même principe pour la descente sur l'axe y, sauf que l'on ne fais que diviser le poids par 5 juste pour ne pas que ça descente trop vite.

Maintenant, juste pour vos yeux (c'est le cas de le dire vu que se sera un effet visuel ^^) nous allons augmenter la transparence quand il sera arrive à un certain niveau. Ici, si le flocon arrive à la hauteur de la scène - 50, alors le flocon commence à disparaitre. C'est tout pour cette explication ^^

Et pour finir, si le flocon disparait de la scène par la droite, il réapparait à gauche, s'il disparait à gauche, il réapparait à droite. Mais bien évidement, il faut bien que la tombé de neige soit continue, alors s'il arrive dans le fond de la scène, on la replace au dessus en remettant la transparence du flocon aléatoire pour ne pas faire croire que c'est le même *Mais chuuuuut, c'est tout à fait le même*. Et puis, si on ne faisait pas ça, au bout d'un moment le flocon disparaitrait totalement =(


4. Code final :
En gros, le code final nous donne cela
Spoiler:
Code:
//Variables//
var nomClip = "flocon";
var nombreClip = 200;
var sizeClip = 12;
var largeurScene = 550;
var hauteurScene = 400;

//Dupliquer le clip//
for (var i = 0; i < nombreClip; i++)
{
   this[nomClip].duplicateMovieClip(nomClip+i, i);
   this[nomClip+i]._x = random(largeurScene);
   this[nomClip+i]._y = random(hauteurScene);
   this[nomClip+i]._width = random(sizeClip);
   if (this[nomClip+i]._width < 5) { this[nomClip+i]._width = 5; }
   this[nomClip+i]._height = this[nomClip+i]._width;
   this[nomClip+i]._alpha = random(101);
   if (this[nomClip+i]._alpha < 20) { this[nomClip+i]._alpha = 20; }
}

//Variables déplacement//
var forceVent = random(20)
if (forceVent < 2) { forceVent = 2; };
var sens = -1;
var ajout = -1;

//Déplacer le clip//
onEnterFrame = function ()
{
   forceVent += ajout;
   
   if (forceVent >= 20) {ajout = -1; }
   if (forceVent <= 5) {ajout = 1; }
   
   for (i = 0; i <= nombreClip; i++)
   {
      this[nomClip+i]._x += this[nomClip+i]._height/forceVent*sens;
      this[nomClip+i]._y += this[nomClip+i]._height/5;
      if (this[nomClip+i]._y >= hauteurScene-50) { this[nomClip+i]._alpha += -2; }
      if (this[nomClip+i]._y >= hauteurScene+10) { this[nomClip+i]._y = -20; this[nomClip+i]._alpha = random(101); }
      if (this[nomClip+i]._x > largeurScene+15) { this[nomClip+i]._x = -10; }
      if (this[nomClip+i]._x < -15) { this[nomClip+i]._x = largeurScene+10; }
   }
}



En passant, j'aimerai remercier Fura qui m'a donné envie de travailler un peut plus mon flash ce qui a pu faire naître ce tutoriel ^^

GoldenSun2

Animation de gravité zero - Mer 11 Fév 2009 - 21:58



Introduction
Donc comme d'habitude, ouvrez Flash et créer un nouveau document
Importé une l'image que vous voulez faire flotté dans la bibliothèque
Convertissé la en clip, allez dans les propriétés donne lui un nom d'occurrence, pour moi, se sera "sable"

Actionscript
Bon, le nom des variables est clair, mais si vous ne comprenez pas, questions et je répondrai dés que possible.
Code:

//===Variables Objets===//
nombreObjet = 500;
nomClip = "sable";
largeurObjet = 4;
//===Fin===//

//===Variables Crea===//
longueurCrea = 500;
largeurCrea = 200;
///===Fin===//

//===Variables Globales===//
force = 5;
ralenti = true;
graviteX = true;
graviteY = true;
//===Fin===//

//On duplique l'étoile x fois
for (i = 0; i <= nombreObjet; i++) {
   this[nomClip].duplicateMovieClip(nomClip+i, i); //On duplique l'étoile en lui donnant comme nom etoile, puis etoile 1... jusqu'à etoile 200
   this[nomClip+i]._x = random(550); //On positionne l'etoile quelque par sur l'axe x
   this[nomClip+i]._y = random(400); //Même chose mas sur l'axe y
   this[nomClip+i]._height = random(largeurObjet); //Ici on définis la hauteur de l'etoile
   this[nomClip+i]._width = this[nomClip+i]._height; //On fait en sorte qu'elle soit carrée
}

onEnterFrame = function () {
   //Si on peu définir un sens de début alors on le fait
   if (ralenti == true) {
      choix = random(2); //On choisit le sens: 0: droite, 1: gauche
      ralenti = false; //On n'empêche la condition de se repeter sinon ça devien du n'importe quoi
      ajout = -1; //Permettra de diminuer la force
   }
   //Ici on va juste déclarer le sens
   if (choix == 0 || choix == 1) {
      //Si le sens va à droite
      if (choix == 0) {
         sens = 1; //Alors on va à droite
      }
      //Si le sens va à gauche
      if (choix == 1) {
         sens = -1; //Alors on va à gauche
      }
      force += ajout; //Ici on ajoute ou retire 1 à la force. Permettra de changer le sens plus bas
      //Si la force est lente
      if (force <= 5) {
         ajout = 1; //Alors j'augmente la force pour que le sens change plus bas
      }
      //Si la force est élevée
      if (force >= 20) {
         ralenti = true; //Alors on dit que le ralenti est vrai et on revient en haut (24e lignes)
      }
   }
   //On crée la boucle qui va permettre de déplace les x duplications
   for (i = 0; i <= nombreObjet; i++) {
      forceX = this[nomClip+i]._height/force*sens; //On déclare la force gravitationnelle X
      forceY = this[nomClip+i]._height/5; //Ici avec Y
      //Si on peut changer le sens vertical, on le fait
      if (graviteY == true) {
         choixGraviteY = random(2); //On choisit le sens de Y: 0: droite, 1: gauche
         graviteY = false; //On n'empêche la condition de se repeter pour Y
         ajout = -1; //Permettra de diminuer la force
      }
      //Ici on va juste déclarer le sens
      if (choixGraviteY == 0 || choixGraviteY == 1) {
         //Si le sens va à droite
         if (choixGraviteY == 0) {
            this[nomClip+i]._y += forceY; //On déplace Y vers la droite
         }
         //Si le sens va à gauche
         if (choixGraviteY == 1) {
            this[nomClip+i]._y += -forceY; //On déplace Y vers la gauche
         }
         //Si la force est élevée
         if (force >= 10) {
            graviteY = true; //Alors on dit que graviteY est vrai et on revient en haut (54e lignes)
         }
      }
      //Si on peut changer le sens horizontal, on le fait
      if (graviteX == true) {
         choixGraviteX = random(2); //On choisit le sens de X: 0: droite, 1: gauche
         graviteX = false; //On n'empêche la condition de se repeter
         ajout = -1; //Permettra de diminuer la force
      }
      //Ici on va juste déclarer le sens
      if (choixGraviteX == 0 || choixGraviteX == 1) {
         //Si le sens va à droite
         if (choixGraviteX == 0) {
            this[nomClip+i]._x += forceX;  //On déplace X vers la droite
         }
         //Si le sens va à gauche
         if (choixGraviteX == 1) {
            this[nomClip+i]._x += -forceX;  //On déplace X vers la gauche
         }
         //Si la force est élevée
         if (force >= 10) {
            graviteX = true; //Alors on dit que graviteX est vrai et on revient en haut (75e lignes)
         }
      }
      //Si l'etoile arrive en bas
      if (this[nomClip+i]._y >= largeurCrea + largeurObjet) {
           this[nomClip+i]._y = 0; //On le replace à 0 sur l'axe Y
        }
      //Si l'etoile arrive en haut
      if (this[nomClip+i]._y <= -largeurObjet) {
         this[nomClip+i]._y = largeurCrea + largeurObjet; //On la replace un peu plus bas que notre animation
      }
         
      //Si l'etoile est toute à droite
      if (this[nomClip+i]._x >= longueurCrea + largeurObjet) {
         this[nomClip+i]._x = 0; //On le replace à 0 sur l'axe X
      }
      //Si l'etoile est toute à gauche
      if (this[nomClip+i]._x <= -largeurObjet) {
         this[nomClip+i]._x = longueurCrea + largeurObjet; //On la remet toute à droite
      }
   }
}


Variables:

    //===Variables Objets===//
  • nombreObjet: Nombre de fois qu'il faut dupliquer l'objet, remplace "x" dans les commentaires
  • nomClip: C'est le nom d'occurrence que vous avez donnez au clip
  • largeurObjet: C'est la largeur maximale de l'objet que vous voulez créer
    //===Fin===//

    //===Variables Crea===//
  • longueurCrea: longueur de la création (peu être plus élevé)
  • largeurCrea: largeur de la création (peu être plus élevé)
    ///===Fin===//


Remarques:

  • L'image utilisée sera toujours carré


Rendu
Ici j'ai pris ma sign Gaara car je trouve que le 0 gravité sur le sable est bien quand il le contrôle ^^


Bon voilà, questions, conseils et suggestions? Postez et je vous répondrai dés que possible ^^

GoldenSun2

Faire un belle chute d'étoile - Mer 11 Fév 2009 - 15:21



Introduction
Pour commencer, ouvrez votre Flash et crée un nouveau document.
Importé votre étoile dans la bibliothèque et convertissé la en clip et donner lui le nom "etoile".
Dans les propriétés du clip, donné lui comme nom d'occurrence "etoile".

Actionscript
Je vais vous donnez le code complet, les commentaires sont avec.
Code:

nombre = 200 //Déclare combien de fois il faut duplique l'étoile
//On duplique l'étoile x fois
for (i = 0; i <= nombre; i++) {
   etoile.duplicateMovieClip("etoile"+i, i); //On duplique l'étoile en lui donnant comme nom etoile0, puis etoile 1... jusqu'à etoile 200
   this["etoile"+i]._x = random(550); //On positionne l'etoile quelque par sur l'axe x
   this["etoile"+i]._y = random(400); //Même chose mas sur l'axe y
   this["etoile"+i]._height = random(20); //Ici on définis la hauteur de l'etoile
   this["etoile"+i]._width = this["etoile"+i]._height; //On fait en sorte qu'elle soit carrée
}

vitesse = 5; //On déclare la vitesse
ralenti = true; //Permettra de changer le sens du vent plus bas

onEnterFrame = function () {
   //Si la vitesse n'est pas trop élevée, alors, on peut changer le sens du vent
   if (ralenti == true) {
      choix = random(2); //On choisit le sens du vent: 0: droite, 1: gauche
      ralenti = false; //On n'empêche la condition de se repeter sinon ça devien du n'importe quoi
      ajout = -1; //Permettra de diminuer la vitesse du vent
   }
   //Ici on va juste déclarer le sens du vent
   if (choix == 0 || choix == 1) {
      //Si le sens va à droite
      if (choix == 0) {
         sens = 1; //Alors on va à droite
      }
      //Si le sens va à gauche
      if (choix == 1) {
         sens = -1; //Alors on va à gauche
      }
      
      vitesse += ajout; //Ici on ajoute ou retire 1 à la vitesse. Permettra de changer le sens du vent plus bas
      //Si la vitesse est lente
      if (vitesse <= 5) {
         ajout = 1; //Alors j'augmenter la vitesse pour que le sens du vent change plus bas
      }
      //Si la vitesse est rapide
      if (vitesse >= 20) {
         ralenti = true; //Alors on dit que le ralenti est vrai et on revient en haut (15e lignes)
      }
   }
   //On crée la boucle qui va permettre de déplace les 200 duplications
   for (i = 0; i <= nombre; i++) {
      vent = this["etoile"+i]._height/vitesse*sens; //On déclare la vitesse DU vent (plus c'est gros, plus vite ca tombe)
      descente = this["etoile"+i]._height/5; //Ici a vitesse à la qu'elle l'etoile tombe (plus c'est gros, plus vite ca tombe)
      this["etoile"+i]._x += vent;  //On on déplace sur l'axe x
      this["etoile"+i]._y += descente; //Même chose pour l'axe y
      //Si l'etoile arrive dans le fond de l'animation + sont, alors
      if (this["etoile"+i]._y >= 420) {
         this["etoile"+i]._y = -20; //On la replace un peu plus haut que notre animation
      }
      //Si l'etoile est toute à droite
      if (this["etoile"+i]._x >= 570) {
         this["etoile"+i]._x = -20; //On la remet toute à gauche
      }
      //Si l'etoile est toute à gauche
      if (this["etoile"+i]._x <= 0) {
         this["etoile"+i]._x = 570; //On la remet toute à droite
      }
   }
}


Remarque:

  • Si vous changer le nom d'occurrence, n'oublier pas de changer le mot "etoile"dans le code
  • Vous pouvez changer la variable "nombre" pour changer le nombre de fois à dupliquer l'etoile. PS: Essayez random(200).
  • Vous pouvez changer l'image (non, sans blague xD) mais ici, elle sera toujours carré


Rendu
Voilà le rendu avec transparence
Spoiler:


Voilà, si vous avez des commentaires, postez et je vous répondrai ^^

Riku Asakura

Animation simple de bouton - Lun 9 Fév 2009 - 1:26



Bonsoir !
Je viens vous proposer un tuto que j'ai d'abord commencé sous photoshop... pour finalement concevoir une vidéo complète sous Flash... ben ouais je voulais tester ce que ça donnait.

Vous me direz ce que vous pensez de la mise en forme ainsi que du contenu du tutoriel. Si jamais ma voix suave de mâle fatiguée par une journée de bricolage ne vous convient pas, je vous fournirais une version imagée.
Tuto Flash

Les images
-----Image base --------- Image hover --------- Image Cliquée
- -

Bonne vidéo Wink

Lien direct: Tutoriel complet (cliquez sur lecture, mettez en pause et laissez charger 5 minutes)
Code:
btn1.onRollOver = function() {
   clip1.gotoAndPlay(2);
};
btn1.onRollOut = function() {
   clip1.gotoAndPlay(21);
};
btn1.onRelease = function() {
        clip1.gotoAndPlay(30);
   getURL("accueil.php");
};


Explications du code
Ligne 1 :Pour l'évènement de survole du "btn1", une fonction aura pour effet de...
Ligne 2 :...d'aller à la frame 2 du "clip1" et de commencer à jouer ce clip
Ligne 3 :fin de la fonction pour le premier évènement
Ligne 4 à 6 :Idem pour l'évènement RollOut (lorsque l'on quitte le bouton)
Ligne 7 à 10 :Répétition de la même fonction pour l'évènement de clic. GetURL permet de rajouter un lien au moment du clic, ici vers "accueil.php" mais vous pouvez mettre n'importe quel lien

Voilà, j'avais promis ce petit tuto à Shin', en espérant qu'il lui soit utile Wink

Edit : Je referais certainement la bande son.... et même la vidéo complète, car en revisionnant la vidéo j'ai l'impression que ce tuto ne s''adresse qu'à ceux qui manipulent déjà pas mal le logiciel... il y a des points de détail que j'omets involontairement.

Bisous

Gold Hawk

Animation de déplacement aller-retour - Dim 14 Déc 2008 - 16:56



Yop!

Donc ce tuto servira surtout aux débutants qui cherchent à faire une animation aller-retour (pas de jeux de mots vaseux svp, merci xD ).
J'utilise Photoshop CS2 et Imageready CS2, donc du coup ce sera un peu différent pour les utilisateurs des versions suivantes mais n'hésitez pas à poser vos questions !
Good luck!






Postez vos rendus ;p
Phoenix Wright, membre de la confrérie des yaourts pourris


icône entourée = icône "avec des ronds" = icône trajectoire

gogeta1995

Animation effet pluie - Sam 16 Aoû 2008 - 23:29



cheers voilà mon tout premier tuto :
Le résultat Final :

Spoiler:


Le tuto :

Spoiler:


Laisser vos com's :lol!: n'oublié pas de me présenter vos créa avec ce tuto car sa me fait plaisir :lol!:

tivolien

Animation effet reflet - Jeu 31 Juil 2008 - 7:09





Le résultat final:




J'avoue que je ne suis pas l'inventeur de ce tuto,
mais en cherchant justement apres un tuto du genre
ce que je trouvait me semblait assez complexe
voila pourquoi je l'ai refais à ma sauce si l'on peut dire

Wasp

Ouvrir un .gif animé - Lun 28 Juil 2008 - 12:18



Vous ne savez pas probablement comment ouvrir votre gif via Photoshop parce que tout simplement c'est pas la même chose qu'ouvrir un simple fichier... Enfin bon, personnellement, j'ai rencontré ce problème & peut-être qie vous aimeriez ausi savoir comment vous y prendre... Hé bie,tata Ryu va vour aider U_U

C'est assez simple mais il faut le savoir :
- ouvrez Photoshop.Direction le menu "Fichier".
Fichier > Importation > Image vidéo dans des calques
- C'est fait pour les vidéos (types .avi etc.) alors vous vous retrouvez donc avec une fenêtre qui ne vous propose pas votre gif (selon votre version de photoshop, il est possible que le gif soit déjà visible. Dans ce cas, tant mieux pour vous). Pour régler ça, dans le compartiment "Nom de fichier" Insérez ces caractères *.* ) & faites charger.... Lààà,vous voyez,vous avez votre fichier qui apparaît ! Il vous suffit ensuite d'ouvrir ledit gif :)


Yataaaa !

tivolien

Animation effet neige - Ven 25 Juil 2008 - 12:40


Cr@zy ^^

[Swish max] Ouvrir les portes - Ven 26 Oct 2007 - 2:27





Rendu Finalllll ^^



mais faite attention co poste faite pas attention au reste ^^

et soyerrr pas tros dur c mon 1er tuto Wink


Revenir en haut

La date/heure actuelle est Mer 22 Nov 2017 - 0:04