Sujets sur : Flash 3D

Créer une sphère en 3D dans Flash avec Away3D – partie 2

2 questions

Ecrit le 6 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 3D

Continuons à apprendre à utiliser de la 3D dans Flash.

Le précédent Cours ActionScript abordait l’implémentation du moteur 3D : Away3D.

Dans ce Cours AS3, nous allons créer la fameuse sphère en 3D, la planète terre qui tourne sur un axe.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Comment implémenter et utiliser l’API Away3D dans une application flash.
  • Le code complet pour créer une sphère en 3D à partir d’une image chargée à la volée ou dans votre swf.
  • Les fonctionnalités primitives de Away3D.
  • Un parcours de l’API Away3D avec la découverte de plusieurs classes.
  • Et encore plein d’autres possibilités… le moteur Away3D regorge de fonctionnalités 😉

Cette formation vous permettra de découvrir l’API Away3D et de créer une application flash en 3D.

Tout au long de l’année, plusieurs cours ActionScript sont entièrement consacrés au moteur Away3D.

Sphère avec Away3D

[spoiler]

Bonjour à tous ici Matthieu pour actionscript-facile.com

 

Dans la vidéo du cours dernier en action script, nous avons commencé à découvrir le moteur 3D away3D.

 

Et bien, dans ce tutoriel, nous allons voir comment créer la fameuse sphère en utilisant ce moteur.

 

C’est-à-dire que nous allons créer une sphère, comme une planète, en utilisant une image l’image.

 

Soit vous l’importée dans votre SWF ou vous la chargez dynamiquement.

 

Passons tout de suite à un exemple pratique pour découvrir de nouvelles fonctionnalités d’away3D.

 

Alors, comme d’habitude, nous partons à partir de notre classe main qui étend Sprite.

 

Je vous ai préparé une classe globe qui contient tout ce qu’il faut, il y a juste à l’instancier, l’ajouter sur la scène et lancer sa méthode d’initialisation.

 

Passons tout de suite à la classe globe.

Donc on va utiliser une texture pour le globe et ce sera une image PNG qu’on importe directement dans notre fichier SWF.

 

Bien évidemment si vous préférez vous avez la possibilité de charger dynamiquement cette image PNG.

 

Donc soit, elle est stockée avec d’autre image dans un fichier SWF, soit vous la chargez dynamiquement directement.

Je vais vous montrer.

 

Donc c’est cette image PNG vaines de 700 pixels par 300 pixels à peu près et c’est celle là qui va constituer notre sphère.

Ce sera la texture de notre sphère donc c’est le reste de nos variables.

 

On commence comme tout à l’heure.

Comme le dernier cours, on initialise notre moteur : les textures, les objets, les lumières et les écouteurs.

 

Création de notre scène en 3D, donc on instancie la classe scène 3D, la caméra 3D.

On fait un petit zoom arrière pour permettre de voir la sphère entièrement.

On créé une nouvelle vue en 3D, on lui affecte la scène et la caméra.

Et on ajoute source URL, c’est-à-dire dans le menu contextuel quand vous ferez clic droit ça renvoie sur cette URL.

Et on ajoute notre vue sur la scène.

 

Pour les textures, on utilise donc cette classe qui demande en entrée un bitmap Data et un objet.

 

Donc on utilise cast.Bitmap la classe earth image.

La classe earth image, c’est notre image que nous avons embarquée.

Si vous la chargez dynamiquement, vous pouvez directement lui passer une instance bitmap et les paramètres.

 

Ensuite, on créé nos objets de la scène.

Donc on créé une nouvelle sphère, on lui passe la texture.

C’est notre image le diamètre de la sphère, radius le segment W.

En fait, segment W, c’est le nombre de lignes ou de segments qui composent la largeur de la sphère.

Et segment H, c’est nombre de segment qui compose la hauteur de la sphère.

 

Vous verrez quand vous changerez ce chiffre si je mets 3 ici et 1 là, ça me fera un carré.

Je peut faire un carré , ben on va le faire je vais mettre 4 et 1 ici et je vais lancer la compilation.

 

Et nous obtiendrons un carré parce qu’il n y a pas beaucoup de côté.

C’est le nombre d’éléments qui composent la surface si je puis dire.

 

Donc vous voyais, ça nous fait une sphère vraiment pas terrible du tout si je ne met pas beaucoup de segments.

 

Si vous voulez appliquer de la texture sur un carré, il faut utiliser une autre classe.

Pour cela, il suffit de regarder dans le Framework primitif dont je le fais en direct la le cours.

 

Je pense que ça doit être cube donc on va essayer tout de suite.

On va créer un nouveau cube là faut le changer en cube.

Évidemment il n’a pas radius.

 

Qu’est ce qu’il a lui comme paramètres le cube ?

Segment D à la place et donc je modifie ça.

Donc comme vous voyez je prends la classe cube, je m’adapte, je met le nombre de segments sa largeur.

Je peux même définir sa hauteur, là ça va nous faire un petit peu un rectangle.

 

Je lance la compilation et on obtiendra un cube.

Voilà le résultat bon c’est pas trop le thème de ce cours, c’est pour vous montrer.

Donc sur toutes les faces il y a mon logo que l’on peut voir tout en 3D.

 

Repassons au thème du cours où nous allons construire une sphère.

Donc pour cela je reviens en arrière dans le code voilà.

Je remets la sphère, vous avez d’autres primitifs.

Ce sera à vous de les découvrir plain skybox etc… tout un tas de possibilités pour construire plus rapidement vos objets en 3D.

 

J’espère que vous avez compris ce que représenté segment W et segment H.

Je crée un nouveau objet container en 3D, je lui affecte la sphère.

Et sur la scène j’ajoute le container de la sphère tout simplement.

Je crée mes lumières pour permettre de voir la sphère donc des lumières en 3D avec un vecteur en 3D.

Et l’ambiance, j’ajoute les lumières sur la scène.

Ensuite mes écouteurs, c’est-à-dire sur chaque frame par seconde, je ferais des événements au moment où la souris est appuyée.

 

Donc clic sur le bouton gauche de la souris, relâchement du bouton gauche de la souris, j’enverrais des événements.

Et sur l’événement resize, des événements donc sur un onEnterFrame.

Par défaut, je fais tourner la sphère automatiquement de plus 1 pixel à chaque fois.

 

Si l’utilisateur bouge la souris je mets à jour et je fais tourner la sphère sur l’axe des X et Y.

Renderer, ça met à jour le rendu de ma vue sur chaque image par seconde.

Donc quand on appuie sur le bouton de la souris, on récupère les coordonnées de la souris.

Et on met à jour la rotation de la sphère tout simplement.

 

Je vais lancer la compilation de ma sphère et le debug.

 

Vous allez voir un petit peu le résultat.

Après libre à vous, ça c’est juste un exemple du cube, de la sphère d’autre primitive de ce que l’on peut faire.

Après libre à vous de créer vos bannières.

Les bannières animées en 3D ou de l’intégrer dans des jeux en 3D tout en sachant que pour l’instant en attendant la version 11 du player flash les performances sont très très importantes.

 

Donc il faut vraiment optimiser son code pour gérer et fournir des performances correctes à vos internautes.

Voici la sphère qui en train de se construire.

Voilà, nous avons notre image qui est parfaitement appliquée sur notre sphère en bougeant la souris.

 

C’est-à-dire en appuyant sur le bouton de la souris et en bougeant, nous voyons bien toute notre sphère complète.

Et elle tourne toute seule donc ça prend 10 méga de ressources mémoire.

 

Moi ça ne tourne pas parce que mon PC est très lent.

Voici donc c’est un exemple très basic.

Cela vous permet de découvrir comment utiliser une image une texture et l’appliquer sur une primitive : que se soit un cube une sphère ou autre chose.

 

Ensuite libre à vous de l’appliquer.

Comme vous pouvez le voir le code est très simple.

 

Ca vous connaissez onEnterFrame, la lumière notre objet avec la texture très important.

Et les paramètres change en fonction de la primitive utilisée.

On l’ajoute sur la scène en passant par un container.

 

Après si vous êtes curieux, vous pourrez regarder le code source et regarder à quoi sert objet container.

 

Il y a tout ce qu’il faut, il y a les commentaires sur la source, notre initialisation du moteur de la scène 3D, de la caméra, notre vue.

Donc notre rendu.

 

 

Voilà un petit peu, nous avons vu comment utiliser une nouvelle facette du moteur away3D.

 

Comme d’habitude, vous pouvez télécharger le code source de cet exemple directement sous cette vidéo.

 

Et vous de votre côté quel est le rendu que vous arrivez à obtenir avec ce moteur away3D ?

 

Je serais très curieux de voir vos applications ce que vous avez réussi à faire : que se soit des bannières ou utiliser des objets 3DSMax etc. etc.

 

De toute manière dans les prochaines semaines, je continuerai de poster des cours ActionScript sur ce moteur 3D que je trouve très sympathique.

 

Et en attendant je vous dis à très bientôt sur actionscript-facile.com

[/spoiler]

Version démonstration

Ci-dessous un exemple tout simple d’utilisation de la 3D dans flash !

Télécharger le code source du cours AS3

Et voici la Sphère en 3D créée avec le moteur Away3D.

Télécharger “Away3D Sphère”

away3d-sphere-ex2.zip – Téléchargé 840 fois – 1 017,19 Ko

Téléchargez la dernière version du moteur Away3D.

Vous pouvez consulter la documentation complète de l’API Away3D.

Et voici les sources ActionScript Away3D sur Google Code.

Et vous, quels rendus obtenez-vous avec Away3D ?

Postez les liens de vos applications dans les commentaires.

Comment utiliser la 3D dans Flash avec Away3D – partie 1

1 question

Ecrit le 4 octobre par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Flash 3D

Le Cours AS3 de cette semaine aborde un sujet qui prend de plus en plus d’importance  : la 3D dans Flash.

Effectivement, le Flash Player 11 est orienté 3D avec une amélioration significative des performances et une utilisation du GPU (processeur de la carte graphique).

Pour exploiter ces nouvelles possibilités de Flash, nous allons nous intéresser au moteur 3D : Away3D.

Un moteur open source, très performant, avec une version optimisée pour le Flash Player 11 (qui sort prochainement).

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Comment implémenter et utiliser l’API Away3D dans une application flash.
  • Le code complet pour créer un effet 3D sur un champ texte en utilisant des polices dynamiques (chargement à la volée).
  • Les principales fonctionnalités de Away3D.
  • Les possibilités offertes par la version 11 du Player Flash avec ce moteur 3D !
  • Un parcours de l’API Away3D avec la découverte de plusieurs classes : création d’une scène 3D, gestion de la caméra, du rendu d’une vue en 3D, l’import / export de fichiers…

 

  • Et encore plein d’autres possibilités… le moteur Away3D regorge de fonctionnalités 😉

Cette formation vous permettra de découvrir l’API Away3D et de créer votre première application flash en 3D.

Tout au long de l’année, plusieurs cours ActionScript sont entièrement consacrés au moteur Away3D.

Le moteur Away3D

Version démonstration

Ci-dessous un exemple tout simple d’utilisation de la 3D dans flash !

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation du moteur Away3D dans vos applications flash.

Télécharger “Away3D Effet Texte”

away3D-text-effect-ex1.zip – Téléchargé 794 fois – 969,49 Ko

Téléchargez la dernière version du moteur Away3D.

Vous pouvez consulter la documentation complète de l’API Away3D.

Et voici les sources ActionScript Away3D sur Google Code.

Et vous, quel moteur 3D utilisez-vous dans vos applications flash ? Away3D, Sandy 3D, Parpervision3D ?

Dites-moi votre moteur 3D préféré et pourquoi celui là dans les commentaires.

Interview : Comment Damien a découvert l’ActionScript 3 pour en faire son métier

Commentaires fermés sur Interview : Comment Damien a découvert l’ActionScript 3 pour en faire son métier

Ecrit le 18 août par Matthieu
Publié dans le(s) sujet(s) Flash 3D |Interview

Cette nouvelle interview est consacrée à Damien Buchet : Développeur ActionScript 3 avec PaperVision 3D.

Voici ce que vous allez découvrir :

  • Comment Damien a débuté la programmation ActionScript.
  • Quelles sont les ressources, sa méthodologie pour améliorer sa programmation ActionScript.
  • Comment Damien a perfectionné sa connaissance de l’ActionScript 3 avec Google et des tutoriels.
  • Comment et en combien de temps il a pu développer son premier projet en 3D Flash.
  • Son point de vue sur l’utilisation des Frameworks ActionScript.
  • Comment structurer ses projets ActionScript.
  • Quelle organisation adopter pour son application Flash.
  • Damien vous fournit même un exemple simple pour découvrir l’utilisation de PaperVision 3D.

 

Exemples SWF Flash avec PaperVision 3D

Voici l’application flash qui utilise PaperVision 3D pour le déplacement du cube.

Les exemples ci-dessous utilisent les tweens de Grant Skinner.

Utilisez les touches directionnelles et votre souris pour changer la position de la caméra.

Ci-dessous, l’exemple de Damien avec une petite modification sur la gestion des touches directionnelles.

Télécharger “Exemple Papervision 3D”

ex-papervision-3D-interview.zip – Téléchargé 604 fois – 748,72 Ko

Téléchargez le Framework Tweens de Grant Skinner.

Téléchargez le Framework 3D Flash Papervision 3D.

Allez visiter le site de Damien Buchet. Vous découvrirez les projets ActionScript qu’il a développé.

Avez-vous déjà utiliser la 3D dans Flash ?

Avec Papervision 3D, Sandy 3D Engine ou un autre Framework ?

Partagez vos exemples d’application et retour d’expérience dans les commentaires ci-dessous.