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.


    Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    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)

    Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par artkabis le Sam 18 Avr - 3:31

    cube 3D animé et intéractif


    Bonjour à tous, comme on m'a sollicité aujourd'hui pour créer un petit tuto sur l'utilisation de swift 3D, je me suis dit que je ne devais pas laisser passer cette superbe idée. Me voici donc prêt, pour vous présenter un petit tuto plutôt sympa, puisqu'il vous permettra de créer une animation 3D avec swift 3D, mais ce n'est pas tout, en effet nous allons ensuite rendre tout ceci interactif grâce à flash CS4.

    Le projet final:
    Vous aurez un joli cube 3D muni d'un material importé (un bitmap de votre choix), puis la possibilité de déclencher la lecture de cette fameuse rotation de cube 3D

    Pour vous donner un petit aperçu de la chose, voici la finalité de ce tutoriel, en live bien sûr !!!

    (Passez sur le cube pour voir le mouvement)



    Dans cet exemple, vous pouvez vous rendre compte que j'ai ajouté une barre de préchargement, si vous souhaitez, vous aussi ajouter cette barre, voici ce que vous devez faire:

    Décallez tous les claques d'une frame vers la droite, puis sur le calque "as", de la frame 1, ajoutez simplement ce code et oui, ce préloader est entièrement créé grâce à l'as3, sympa non?

    Le code (frame1):
    Code:

    stop();

    var filtre = new GlowFilter(0x65FF00, 1, 10, 10, 1, 3, false, false);
    var barre_charg:MovieClip = new MovieClip();
    var chargement:TextField = new TextField();
    var barr:Shape = new Shape

    addChild (barre_charg);

    chargement.textColor = 0x65FF00;
    chargement.width=28;
    addChild(chargement);


    barr.graphics.beginFill(0x65FF00);
    barr.graphics.drawRect(0,stage.stageHeight/2, 2,4);
    barre_charg.addChild(barr);
    barre_charg.filters = [filtre]

    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, chargement_progress); 
    this.loaderInfo.addEventListener(Event.COMPLETE, chargement_termine);   

    function chargement_progress(event:ProgressEvent):void { 
       var pourcentage:int = Math.round(event.bytesLoaded / event.bytesTotal * 100); 
       chargement.text = pourcentage + "%";
       chargement.y = (stage.stageHeight/2)-8;
       chargement.x = barre_charg.x + barre_charg.width+5;
       barre_charg.width = stage.stageWidth /100 * pourcentage; 

     
    function chargement_termine(event:Event):void { 
       this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, chargement_progress); 
       this.loaderInfo.removeEventListener(Event.COMPLETE, chargement_termine); 
       removeChild( chargement );
       chargement = null;
       removeChild( barre_charg );
       barre_charg = null;
       nextFrame(); 
    }

    Voici donc la source de ce tutoriel, elle contient un zip comprenant:
    •Le projet swift 3D
    •L'animation swf du projet swift avec javascript et html
    •L'animation au format png générer par swift 3D
    •La source de l'animation final (fla)

    Vous pouvez télécharger ce pack, ici :Tuto_anim_cube_3D.zip


    Le tutoriel Partie 1 (création de l'animation 3D avec swift3D):



    Le tutoriel Partie 2 (mise en place de l'iteractivité avec Flash cs4):

    desperadisse
    Ceinture jaune
    Ceinture jaune

    Messages : : 218
    Age : : 35
    Logiciels : Logiciels : : Photoshop CS3, Flash CS3, Dreamweaver CS3, NotePad ++, Wampserver, Flash CS4, Photoshop CS4, Camtasia 6, Adobe Captivate 3.
    Date d'inscription : 07/03/2009

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par desperadisse le Sam 18 Avr - 5:22

    Excellent, Merci pour ce magnifique tutoriel ... Tu t'es couché tard à ce que je vois ^^

    Bien jouer et merci pour le tuto

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par megalex le Sam 18 Avr - 9:14

    merci pour ce tuto, bien que je n'utilise pas swift3D sa m'a donné des idées d'animations ^^

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par artkabis le Sam 18 Avr - 10:28

    Pour desperadisse:

    En effet on c'est tappé nuit blanche, apèrot et boite à rythme, bref fatigué mais c'était bien sympa !!!


    _________________
    J'me fais de la pub et na tongue

    Lilwarre A.K.A. Prod
    Ceinture verte
    Ceinture verte

    Messages : : 631
    Age : : 26
    Logiciels : Logiciels : : Adobe Master Collection CS4!
    Date d'inscription : 31/12/2008

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par Lilwarre A.K.A. Prod le Sam 18 Avr - 11:00

    Merci pour le partage je vais ouvrir ce log Smile

    MaSenCo
    Nouveau membre
    Nouveau membre

    Messages : : 13
    Age : : 29
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Adobe suite CS4.
    Date d'inscription : 28/02/2010

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par MaSenCo le Ven 19 Mar - 13:37

    Tutoriel sympas ,) .

    Quelques notions en plus que j'avais besoin.

    Dommage que le zip soit corrompu =/

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par artkabis le Ven 19 Mar - 15:34

    Le zip a été mis à jour et ne devrait plus poser problème Wink


    _________________
    J'me fais de la pub et na tongue

    MaSenCo
    Nouveau membre
    Nouveau membre

    Messages : : 13
    Age : : 29
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Adobe suite CS4.
    Date d'inscription : 28/02/2010

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par MaSenCo le Ven 19 Mar - 15:39

    Oh ,) Merci.

    Bien pratique d'avoir les sources quand on a 5h de train à tuer. De Quoi Passé le temps. ,)

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par artkabis le Ven 19 Mar - 15:40

    Pas de quoi.
    Et bien bon voyage (et bon tuto alors) !!!


    _________________
    J'me fais de la pub et na tongue

    BZT
    Nouveau membre
    Nouveau membre

    Messages : : 17
    Age : : 27
    Logiciels : Logiciels : : Adobe Flash Pro CS5
    Date d'inscription : 03/05/2010

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par BZT le Mer 5 Mai - 15:05

    BONJOUR!!

    Super tuto !
    Moi qui débute... ça me plait vraiment..

    Petit problème:
    Je suis le tuto, parfait, aucune erreur et la PAF impossible d'exporter mon beau cube car j'ai tout simplement...
    une version d'essai de Swift 3D !

    Je me rend sur le site officiel et là, je vois, prix: 249$ ?????????
    190 euros???

    C'est une erreur, une blague ou ... ?

    Y a t il moyen de l'acheter moins cher?

    Ou alors existe t il un logiciel autre, et tout aussi performant?

    Help me please ^^ je suis dégôutéééééééééééééééééée

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par Demeter le Mer 5 Mai - 15:35

    Bonjour BZT
    Alors, il y à blender 3D qui est gratuit et qui et simple à prendre en main
    pour blender ici : http://www.blender.org/
    pour le tuto pour apprendre Blender 3D ici plusieur adrresses pour des tutos
    et un que j'aime bien pour apprendre les bases ici : http://perso.numericable.fr/furyjin/blender.php

    BZT
    Nouveau membre
    Nouveau membre

    Messages : : 17
    Age : : 27
    Logiciels : Logiciels : : Adobe Flash Pro CS5
    Date d'inscription : 03/05/2010

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par BZT le Mer 5 Mai - 16:08

    Salut DEMETER et merci !!
    Je vais télécharger et étudier tout ça!

    J'vais y arriver !!! Je VEUX mon cube 3D

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par Demeter le Mer 5 Mai - 16:15

    De rien BZT et bon apprentissage

    BZT
    Nouveau membre
    Nouveau membre

    Messages : : 17
    Age : : 27
    Logiciels : Logiciels : : Adobe Flash Pro CS5
    Date d'inscription : 03/05/2010

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par BZT le Dim 9 Mai - 15:34

    Me revoilà !!!
    Après aide de mon expert de cousin... je suis parvenue à mes fins avec SWIFT (puisque BLENDER me pose problème, à cause d'un bug...)

    Je tenais donc à partager ma création, même si, bon, c'est pas du grand Art ^^

    Pour info, cube sorti direct de SWIFT, pas encore édité sous FLASH CS5 ..
    mais j'étais tellement fière d'avoir ENFIN pu le créer...

    http://moe.mabul.org/up/moe/2010/05/09/swf-1733221vunp.swf.html

    MERCI ARTKABIS

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par Demeter le Lun 10 Mai - 0:55

    bravo très beau travail pour une première je te félicite BZT.
    Bonne continuation.

    BZT
    Nouveau membre
    Nouveau membre

    Messages : : 17
    Age : : 27
    Logiciels : Logiciels : : Adobe Flash Pro CS5
    Date d'inscription : 03/05/2010

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par BZT le Lun 10 Mai - 9:15

    MERCI


    Et voilà le résultat final après passage dans FLASH :

    http://moe.mabul.org/up/moe/2010/05/10/swf-111420s4rti.swf

    arobase50240
    Nouveau membre
    Nouveau membre

    Messages : : 45
    Age : : 54
    Logiciels : Logiciels : : Photoshop,Flash,dreamweaver,After-effect,Cinéma 4D , Sony Vegas , pour ne citer que les principaux.
    Date d'inscription : 07/10/2009

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

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par arobase50240 le Sam 12 Juin - 2:45

    http://informeric.free.fr/prestations.html Voila ce que ceci donne sur ma page.Merci ART

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par Demeter le Sam 12 Juin - 22:25

    très réussi arobase50240.
    Bonne continuation arobase

    joretapo
    Nouveau membre
    Nouveau membre

    Messages : : 14
    Age : : 48
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 29/06/2010

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par joretapo le Ven 11 Mai - 11:52

    Super tuto ! Smile

    une remarque : visiblement ce logicile Swift 3d une fois installé ne nous permet pas d'aller plus loin que l'exportation des frames. En effet, quand on arrive à ce stade il faut acheter le logiciel ! Dommage !

    Comment as-tu fait pour faire ton tuto puisque tu vas au-delà ? Tu as acheté le logiciel ? Petit veinard...Razz

    JORETAPO

    joretapo
    Nouveau membre
    Nouveau membre

    Messages : : 14
    Age : : 48
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 29/06/2010

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par joretapo le Mer 30 Mai - 14:46

    Bonjour à tous,

    Est-il possibble dans Blender 3d d'exporter des images dans Flash pour en faire un Fla et un Swf (comme dans Swift 3D que je n'ai pas pu testé car à ce stade il faut acheter le logiciel) ? Si oui comment fait-on ? J'espère que je m'exprime clairement : ce que je souhaite c'est utilisé Blender 3D, récupérer des images que j'importe dans Flash en tant qu'images clés mais pour réaliser des animations exemple rotation d'un cube.

    Merci à vous et au plaisir Smile

    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: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par artkabis le Dim 14 Avr - 7:34

    En effet ce log est en version évaluation et est payant ensuite.Concernant le prix j'avoue que pour un utilisateur lambda il est inconcevable de débourser une telle somme, mais n'oublions pas qu'Adobe propose une gamme de logiciels tout aussi onéreux (mais qui peux s'expliquer de part sa qualité et de son utilisation globalisé). Ce tuto est donc destiné aux personnes ayant besoin de créer un élément 3d rapidement (le temps de la durée d'évaluation), ou à ceux ayant le logiciel en version complète cherchant à avoir quelques bases.


    _________________
    J'me fais de la pub et na tongue

    Contenu sponsorisé

    Re: Le tuto de la semaine: cube 3D animé et intéractif (swift3D et flash CS4)

    Message par Contenu sponsorisé Aujourd'hui à 16:32


      La date/heure actuelle est Sam 10 Déc - 16:32