Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par artkabis le Mar 28 Avr - 15:48

    Bonjour à tous !!! Aujourd'hui j'ai décidé de vous préparer un tutoriel qui m'a été demandé par un membre. Nous allons donc nous amuser à créer un effet d'onde sans la moindre ligne de code, vous allez voir que ceci ce fait en quelques secondes.

    Le résultat:


    Le tutoriel:


    Le fichier source:


    .

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par megalex le Mar 28 Avr - 17:17

    merci pour ce tuto Wink

    enfait c'est très simple ^^ par contre pour le reflet dynamique je ne sais toujours pas Razz sa me parais super dur ^^'

    ps: peut-être faire une copie de la scène et la coller en dessous avec un retournement vertical? bon bref merci Wink

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par artkabis le Mer 29 Avr - 7:15

    Pour le reflet dynamique, c'est le même principe, seul le masque change, il faut faire des sortes de vagues (3-4) et les aligner horizontalement


    _________________
    J'me fais de la pub et na tongue

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par megalex le Mer 29 Avr - 10:41

    non tu n'as toujours pas compris, je voudrais que par exemple dans la partie haute de mon animation il y ait la date qui s'affiche, et que dans la partie en bas, il y ait aussi la date, mais inversée verticalement.

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par artkabis le Mer 29 Avr - 12:02

    Tu dois mettre ce script et créer un champ de texte dynamique avec comme nom d'occurrence "laDate" :

    Code:

    var instantT:Date = new Date();
    var jours:Array=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
    var mois:Array=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");

    laDate.text=jours[instantT.getDay()]+" "+instantT.getDate()+" "+mois[instantT.getMonth()]+" "+instantT.getFullYear();
    Mais pour ce qui concerne l'effet miroir sur du texte dynamique et bien je pense que tu va galérer, car dès que le texte subit une rotation, celui-ci devient invisible, regardes si tu fais :
    Code:
    laDate.rotation = 180;
    ou même si tu le fais manuellement, tu verras que ton texte n'est plus apparent, perso j'ai pas encore trouvé de soluc à ce bug...

    Par contre, la prochaine fois, créais un nouveau sujet, car on est dans la section tuto ici.


    _________________
    J'me fais de la pub et na tongue

    COLERE
    Nouveau membre
    Nouveau membre

    Messages : : 22
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 01/11/2008

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par COLERE le Dim 7 Juin - 16:09

    Merci , ce tuto m'as permis , après 2 mois de problème de reprendre Flash.

    Cr@zy
    Nouveau membre
    Nouveau membre

    Messages : : 48
    Age : : 36
    Logiciels : Logiciels : : Photoshop & flash cs3
    Date d'inscription : 17/07/2009

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par Cr@zy le Mer 16 Sep - 11:47

    je connaissais pas artkabis il et sympa merci pour ce tuto Wink

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par artkabis le Mer 16 Sep - 13:02

    Merci cr@zy


    _________________
    J'me fais de la pub et na tongue

    Manip
    Nouveau membre
    Nouveau membre

    Messages : : 24
    Age : : 40
    Logiciels : Logiciels : : photoshop CS4, Illustrator CS4, FLash CS4, After Effects CS4, premiere CS4, Dreamweaver CS4, InDesign CS4, 3DS Max 2009, Zbrush 3, notepad++ :D ...
    Date d'inscription : 03/10/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par Manip le Mer 7 Oct - 19:58

    Mais pour ce qui concerne l'effet miroir sur du texte dynamique et bien je pense que tu va galérer, car dès que le texte subit une rotation, celui-ci devient invisible, regardes si tu fais :

    Code:
    laDate.rotation = 180;


    ou même si tu le fais manuellement, tu verras que ton texte n'est plus apparent, perso j'ai pas encore trouvé de soluc à ce bug...

    je ne veut pas passer pour un pinailleur mais si tu fait une rotation de toute façon ton reflet ne sera pas bon car tu fait passer certe passer le haut en bas mais tu fait aussi passer la droite vers la gauche ce qui nuit grandement a la crédibilité le dit reflet....

    un
    Code:

    laDate.ScaleY =-1;

    serai certainement plus approprié ne croit tu pas?

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par artkabis le Mer 7 Oct - 20:57

    Ce n'était qu'un exemple pour dire qu'un texte ne peut subir aucune rotation ou torsion sans perdre son contenu. Après pour créer un véritable reflet sur un texte, je ne connais pas de véritable technique à part celle qui consiste à utiliser un conteneur de type MovieClip accompagné d'une classe de réflexion (il y en a pas mal sur la toile). Concernant le laDate.scaleY (on ne met pas de majuscule), tu as raison car pour avoir une véritable copie inversé on utilisera plus l'attribut scaleY, voici d'ailleurs un exemple concret:


    Dans cet exemple on est obligé de créer un dégradé pour que le reflet soit crédible, ce qui n'est pas le cas si on utilise une classe prévu à cet effet.

    Voici le code utilisé:
    Code:


    var instantT:Date = new Date();
    var jours:Array=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
    var mois:Array=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");

    laDate.text=jours[instantT.getDay()]+" "+instantT.getDate()+" "+mois[instantT.getMonth()]+" "+instantT.getFullYear();
    laDate2.text = String(laDate.text);
    laDate2.scaleY = -1

    Et le fichier source


    _________________
    J'me fais de la pub et na tongue

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par megalex le Jeu 8 Oct - 8:06

    j'ai pas compris comment tu a fais pour que le texte s'afiche, mais je vais bien étudier ton code, merci ^^

    EDIT: j'ai regardé sa de plus près, mais comment se fait-il que laDate2 puisse être tourné? O.o c'est tout de même un texte dynamique!

    REEDIT: bah ensuite j'ai changé le script pour faire s'afficher l'heure, et là sa n'a pas marché, l'heure s'est affichée correctement sur le texte en haut mais ne s'est pas transmise au texte du bas (alors qu'il y avait toujours la partie de ton code qui gérait ca.

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par artkabis le Jeu 8 Oct - 12:27

    Alors il est possible que tu es donné le même nom d'occurrence à tes deux textes dynamique. Moi j'utilise deux éléments bien distinct que je remplis indépendamment.


    _________________
    J'me fais de la pub et na tongue

    gawel
    Nouveau membre
    Nouveau membre

    Messages : : 18
    Age : : 27
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 18/06/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par gawel le Jeu 1 Juil - 13:09

    Bonjour à tous et merci pour ce tutoriel. Y-a-til possibilité de déclencher l'animation au passage de la souris sur celle-ci ?

    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par Demeter le Jeu 1 Juil - 13:39

    Il te suffit de l'enregistrer dans un petit swf que tu feras apparaître dans ton swf principal.
    Pour cela tu dois jouer un loader ton swf en écrivant ce script et les noms correct sur le calque action de ta première image.
    Code:
     1.
    // création du conteneur de l'image ou du swf
    var conteneurImage:Loader = new Loader();
    // url de l'image ou du swf à charger
    var image:URLRequest = new URLRequest("images/tannoy.gif");
    // chargement de l'image ou du swf dans le conteneur
    conteneurImage.load(image);
    // affichage du conteneur
    this.addChild(conteneurImage);
    Qui fera apparaitre dans ton fla principal.
    Alors, pour ce qui est de jouer l'animation au passage de la souris tu fais ceci comme donc comme nom d'occurrence je donne monBouton.
    Tu dois mettre un stop(); sur l'image une puis tu joues l'animation à partir de l'image 2 à chaque passage de la souris il va jouer une fois l'animation puis se s'arrêter sur l'image une sauf si la souris et au-dessus.
    Code:

    monBouton.addEventListener(MouseEvent.MOUSE_OVER, activation);
    function activation(pEvt:MouseEvent):void{
    gotoAndPlay(2);
    }

    gawel
    Nouveau membre
    Nouveau membre

    Messages : : 18
    Age : : 27
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 18/06/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par gawel le Jeu 1 Juil - 14:04

    Merci beaucoup de ta réponse. J'ai réussi à charger l'animation dans un nouveau fla par contre je n'ai pas compris quel élément correspond à mon bouton étant donné que l'animation doit se déclencher au passage de la souris sur celle-ci...

    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par Demeter le Jeu 1 Juil - 17:29

    Re bonjour gawel en fait tu dessines un grand carré dans ton fla que tu importes, tu le sélectionnes tu fais F8 pour le transformer au format bouton.
    Une fois transformé tu vas les propriétés du bouton tu lui donnes une opacité a 0 %, ensuite tu donnes un nom d'occurrence monBouton exemple c'est lui que tu appelles à chaque fois que ta souris passe sur le swf donc ce code tu dois le mettre dans swf que tu charges.
    Voilà j'espère que je suis compréhensible bonne soirée Gawel

    gawel
    Nouveau membre
    Nouveau membre

    Messages : : 18
    Age : : 27
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 18/06/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par gawel le Ven 2 Juil - 12:58

    Merci beaucoup de tes réponses Déméter mais j'ai réussi à trouver la solution. Je vais d'ailleurs en parler tout de suite pour ceux qui seraient confrontés au problème :

    - Dans un premier temps l'image de fond doit être converti en symbole -> "Bouton". Ensuite cliquer sur votre image puis Propriétés -> Nom et taper "bouton".

    -Ensuite, ouvrir "Actions-Bouton" Puis coller le code suivant
    Code:
    on(press){
       getURL("Votre URL","_blank");
    }

    Votre URL doit être remplacée par l'url où votre bouton va mener.


    -Puis, renommez le clip vague en cliquant dessus sur la scène principale, puis Propriétés -> Nom : "clip_vague";

    -Ensuite ouvrir le clip de la vague et se placer sur la première image, puis, dans "Action-Image", insérer le code suivant :
    Code:
    gotoAndStop(50);

    -Revenir sur la séquence en général puis, créer un nouveau calque que vous allez nommer "actions".

    -Allez dans "Action-Image" puis entrez :
    Code:
    bouton.onRollOver=function(){
       clip_vague.gotoAndPlay(2);
    }

    bouton.onRollOut=function(){
       clip_vague.gotoAndStop(50);
    }

    Normalement Votre animation se déclenchera quand votre souris passera sur le bouton et s'arrêtera lorsque celle-ci sera hors du bouton.

    Bien cordialement

    super-pignoufette
    Nouveau membre
    Nouveau membre

    Messages : : 9
    Age : : 22
    Logiciels : Logiciels : : gimp,illustrator,flash,photoshop,sketchbook
    Date d'inscription : 16/01/2011

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par super-pignoufette le Mer 19 Jan - 20:39

    salut , vraiment sympa le tuto ...mais j'ai un petit problème, j'en suis aux cercles et quand je crée un nouveau calque sa me fais sa :
    c'est un peu bizarre
    ce qui fais qu'après je ne peu pas faire "l'interpolation de forme"

    philippides
    Ceinture blanche
    Ceinture blanche

    Messages : : 154
    Age : : 48
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 03/02/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par philippides le Jeu 20 Jan - 8:53

    ton calque est vide tu as du mettre ton rond dans un autre calque et sans rond pas d'interpolation

    gingebean
    Modérateur

    Messages : : 1901
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? photoshop illustrator,SWIFT 3D,dreamweaver
    Date d'inscription : 23/03/2009

    Capacités en graphisme
    Capacité graph:
    7/10  (7/10)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par gingebean le Jeu 20 Jan - 9:53

    Salut
    je pense que a du loupe quel que chose

    je pas fais ce tuto mais je regarder le fichier source et ca ne ressemble pas de tout a ton image

    un conseil avant de faire un tuto regarde le fichier source ... regarder le tuto un fois sans le faire.
    étudier a nouveaux fichier source encore ..... fais le tuto avec fichier source ouvrir pour référence

    bon courage
    GB


    _________________

    Pensez à votre forum favori, un petit vote au WEBORAMA, quelques minutes et ca fait progresser le forum en réputation

    narpa
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 44
    Logiciels : Logiciels : : Quels logiciels utilisez-vous ?
    Date d'inscription : 19/06/2011

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par narpa le Lun 11 Juil - 13:34

    yo merci pour le tuto sur les masques,

    Suzy64
    Nouveau membre
    Nouveau membre

    Messages : : 8
    Age : : 36
    Logiciels : Logiciels : : photoshop, illustrator, indesign, dreamwer, flash..
    Date d'inscription : 22/08/2011

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par Suzy64 le Jeu 8 Sep - 12:41

    Super merci pr ce tuto, simple et efficace ! Fallait y penser Smile

    Contenu sponsorisé

    Re: Des ondes dans l'eau ou effet pavé dans la marre (débutant)

    Message par Contenu sponsorisé Aujourd'hui à 8:02


      La date/heure actuelle est Dim 11 Déc - 8:02