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):