Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1] 2   En bas

Auteur Sujet: Créer drapeau qui flotte  (Lu 17501 fois)

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« le: juin 12, 2007, 10:43:43 am »

J'aimerais créé un drapeau de ce style la :

http://www.flash-france.com/fla.php?op=viewfilm&film_id=175

ou

http://www.19.5degs.com/element/463.php%20%5Bhttp://www.19.5degs.com/element/463.php

Est réalisable avec flash ou un autre logiciel, si oui comment ?

Merci.
IP archivée

Jean-Francois Delforge

  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 915
    • Voir le profil
Créer drapeau qui flotte
« Réponse #1 le: juin 12, 2007, 11:00:08 am »

C'est du Flash pour les deux.
Mais pour le faire, il faut décomposer tout le mouvement en images non ?
IP archivée
JF

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
Créer drapeau qui flotte
« Réponse #2 le: juin 12, 2007, 11:50:13 am »

tu n'est pas obliger de décomposer ton image, il "suffit" d'utiliser les classes filters.DisplacementMapFilter; sur un ton objet transformer en bitmap via  display.BitmapData et de régler les paramettre de ton DisplacementMapFilter  avec .perlinNoise(tout les paramettre) et après si tu est bon tu peux faire ce genre de choses http://www.pixelfumes.com/blog/feb07/waterText.html (c'est pas de moi mais j'ai fait des truc sympa avec çà je t'encourage a jeter un oeil a la source c'est pas sorcier)
IP archivée

Jean-Francois Delforge

  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 915
    • Voir le profil
Créer drapeau qui flotte
« Réponse #3 le: juin 12, 2007, 12:14:16 pm »

Encore une fois merci T_bo.
J'espère que cela va aider aussi notre ami sensei.
IP archivée
JF

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« Réponse #4 le: juin 12, 2007, 12:25:14 pm »

Ouai merci, le resultat est sympa de ton site T_bo mais je connais pas du tout le principe dont tu parles. J'utilise surtout flash pour faire des petits sites. Je suis plutot limité :p

Mais je vais faire des recherches sur les  classes filters.DisplacementMapFilter.
IP archivée

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« Réponse #5 le: juin 12, 2007, 13:10:26 pm »

J'ai trouvé ca sur le net :

http://jeanphiblog.media-box.net/dotclear/index.php?2005/11/11/177-flash-8-perlinnoise-vagues

Mais je sais pas ou mettre le code, ni ce qu'il faut modifier car je connais peu l'action script.

SI quelqu'un si cnnait bien

Merci.
IP archivée

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
Créer drapeau qui flotte
« Réponse #6 le: juin 12, 2007, 13:17:07 pm »

petite explication de texte (de code plutôt pour t'aider), il s'agit du code de l'animation que je t'ai linker au dessus que je t'ai abondamment commenté pour plus de compréhension (et j'ai changer quelques valeurs pour que l'animation ressemble plus à un drapeau qu'a un fond marin ;-) ) . je te conseil de le coller dans une animation (flash 8 obligatoire) et d'y mettre un clip nomme monclip et de voir ce que ça donne après modifie le code à ta convenance mais tu devrais déjà avoir un drapeau à peu prés convaincant.

/*
Les displacement map de flash comme celle de toshop si tu les connais,  permettent de déformé une image
en fonction d'une autre image. En très gros c'est plus ou moin des images du relief où le gris neutre correspond au niveau
de la mer, le blanc au montagnes et le noir aux failles abyssales.
Le principe ici est de créé une displacement map à partir d'une image noir à laquelle on applique un filtre paramétrable
(un peu comme le filtre nuage de photoshop mais en plus controlable et en code) de maniere a obtenir des valeur de blanc gris et noir
plus ou moins aléatoire mais qui donnerons un effet naturel au final
*/


// import des classes nécessaire

import flash.display.BitmapData;
import flash.geom.Point;
import flash.filters.DisplacementMapFilter;

//définition des variable pour le perlin noise plus facile comme çà pour 'bidouiller' l'effet perlin
//Je suis pas physicien je peux pas tout t'explique mais le bruit perlin a besoin de pas mal de parametre
//regarde la doc de flash pour savoir ce qu'il font dans la details ou mieux renseigne toi sur les travaux de Perlin
//wikipedia est ton amis sur ce coup la
var warpBaseX:Number = 100
var warpBaseY:Number = 100
var warpNumOctaves:Number = 2
var warpRandomSeed:Number = Math.random()*10;
var warpStitch:Boolean = true;
var warpFractalNoise:Boolean = true
var warpChannelOptions:Number = 1;
var warpGrayScale:Boolean = false;

/* position des point qui serviront à applique le perlin noise ce sont des tableau de coordonné ainsi qd tu retrouve
 plus loin perlinOffset[0] on parle de p1 si tu veux en mettre plus ton p3 sera référencé [2]
(c'est toujours comme ca en flash le premiere ligne d'un tableau c'est la ligne 0
*/
var p1 = new Point(45, 34);
var p2 = new Point(50, 60, 1);
perlinOffset = new Array(p1, p2);

// pour plus de commodité je vais te détailler les lignes suivantes après leur appel

warpBMP = new flash.display.BitmapData(400,300,true,0x00000000, 1);
// crée warpBMP qui de part sa définition est un display.BitmapData de 400 de large 300 de ht, transparent //(paramettre true) avec un fond noir)
// il servira de displacement map par e suite. D'ou son nom de warp...

this.onEnterFrame = function (){
//pour l'animation du bruit Perlin l'auteur utilise ici un onEnterFrame tu peux utiliser la méthode que tu veux celle là
//est suffisante dans ce cas car l'animation est simple
    perlinOffset[0].y-=2;
    perlinOffset[0].x-=2;
    perlinOffset[1].x+=1;
    perlinOffset[1].y+=1;
//qui a chaque nouveau frame modifie la position des points d'application
    warpBMP.perlinNoise(warpBaseX, warpBaseY, warpNumOctaves, warpRandomSeed, warpStitch, warpFractalNoise, warpChannelOptions, warpGrayScale, perlinOffset);
// on applique le perlinNoise à ton warpBMP en lui passsant les valeurs definit plus haut dans les variables
    dmf = new DisplacementMapFilter(warpBMP, new Point(0, 0, 1), 1, 1, 20, 20, "color");
//on crée le filtre DisplacementMapFilter perso en lui passant warpBMP créé et animé au dessus comme map, ainsi que les autres parametres
//de position et d'echelle, la chaine "color" definit ici le mode de fusion de l'effet a couleur pour eviter les artefact
//dans ce cas.
    monClip.filters = [dmf];
//on applique le filtre au clip...
}
edit oups j'ai été trop long pas le temps de regarder le code de l'excelent jeanphil... Pour celui du dessus il suffit de le mettre dans la timeline (de preference dans un calque dedié et de nommer l'occurence de ton drapeau monClip si tu es vraiment alergique au code...

re edit fait gaffe le passage par le forum à un peu détraquer les balises de commentaires verifie bien que les commentaire aparaissent en gris dans flash sinon tu vas avoir des erreurs.
IP archivée

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« Réponse #7 le: juin 12, 2007, 13:24:33 pm »

Merci sympa pour le détail T_bo, je vais analyser tout ca :p

Petite remarque : le code il faut le mettre sur la timeline de la scene principal ou dans le clip ?

Merci encore.
IP archivée

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
Créer drapeau qui flotte
« Réponse #8 le: juin 12, 2007, 13:34:54 pm »

dans la timeline de la scène principal de préférences dans un calque qui ne sert qu'a ça (c'est plus facile pour si retrouver que de mettre du code un peu partout et çà fait partie des "bonnes pratiques").
Autre précision je bosse toujours à au moins 25-30 frames par seconde si tu laisse sur 12 (valeur par défaut de flash pour les nouveaux documents tu risque d'être déçu)
IP archivée

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« Réponse #9 le: juin 12, 2007, 13:54:01 pm »

J'ai mis mes fichiers ici, j'ai essayé de suivre o mieu tes conseils mais ca donne pas grand chose apparement :

http://jippe13.free.fr/flash/

Si quelqu'un veut y jeté un coup d'oeil...
IP archivée

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
Créer drapeau qui flotte
« Réponse #10 le: juin 12, 2007, 14:01:29 pm »

Tu n'as pas nommé ton occurence de drapeau c'est pour ça que ca ne marche pas...
Et attention action script est sensible à la casse monclip différent de monClip.
IP archivée

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« Réponse #11 le: juin 12, 2007, 14:04:55 pm »

A oui exact, ca fait quelques temps que je n'utilise pas Flash... :p

Ca marche, merci T_bo, vraiment sympa.
IP archivée

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
Créer drapeau qui flotte
« Réponse #12 le: juin 12, 2007, 14:12:17 pm »

ps tu devrais refaire un clip qui ne contient que le drapeau auquel tu applique le dmf et un autre pour le mat ce sera plus naturel...
IP archivée

sensei

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 24
    • Voir le profil
Créer drapeau qui flotte
« Réponse #13 le: juin 12, 2007, 14:52:00 pm »

Oui c'est ce que j'ai fais ensuite, c'est clair que ca fait mieux. :)
IP archivée

antoine

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 27
    • Voir le profil
Créer drapeau qui flotte
« Réponse #14 le: juin 12, 2007, 18:24:17 pm »

L'effêt est vraiment intéressant bien que gourmant en ressources. Je suis encore débutant en Action Script donc tout ce que vous dites me dépasse un peu mais ca me donne encore plus envie de m'y mettre. ;)
IP archivée
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum