Dans ce tutoriel, je montrerai comment construire une galerie de photos dynamique à l'aide de l'API Flickr. Pour ajouter un peu plus de talent, nous allons exploiter la puissance d'Away3D et afficher les photos dans un environnement 3D..
Il y a beaucoup à discuter, alors passons à autre chose!
Étape 1: révision de l'API Flickr
Cette application récupérera les photos de Flickr pour les afficher dans un espace 3D. En bref, le processus de téléchargement de photos à partir de Flickr est le suivant:
Une clé d'API Flickr est obtenue.
Les bibliothèques ActionScript AS3Flickr et AS3CoreLib sont téléchargées et référencées à partir de Flex Builder..
Les fichiers de stratégie interdomaines Flickr sont chargés pour permettre à Flex d’accéder aux images de domaines distants..
Une recherche de Flickr est effectuée.
Les résultats sont utilisés pour trouver l'URL des images Flickr.
Les images elles-mêmes sont téléchargées et sauvegardées / affichées.
Ce processus est couvert en détail par un précédent tutoriel que vous pouvez trouver ici. Je vous recommande fortement de lire ce tutoriel si vous n'êtes pas familiarisé avec la bibliothèque AS3Flickr, car ces points ne seront que brièvement mentionnés dans ce tutoriel..
Étape 2: Une introduction à Away3D Lite
L'exécution de Flash a fait des progrès impressionnants au cours des dernières années. Le déploiement généralisé du moteur d'exécution Flash, à la fois avec Adobe AIR et les plug-ins de navigateur, ainsi que l'augmentation des performances dans les versions ultérieures, permettent à Flash de disposer d'un écosystème très diversifié de bibliothèques et d'applications. Il est passé d’un outil d’animation à une plate-forme de développement polyvalente pour les jeux, les applications professionnelles, les visualisations 3D, les lecteurs vidéo, etc..
Les moteurs 3D ont évolué parallèlement à Flash, passant d’une curiosité à une bibliothèque complète et même commerciale. Away3D est l'un des moteurs Flash 3D les plus populaires et gratuits. Récemment, une version plus petite et plus rapide d'Away3D, Away3D Lite, a été publiée. Alors qu'Away3D Lite manque d'une partie du bonbon pour les yeux présent dans les moteurs 3D plus complexes, son accent mis sur la simplicité signifie qu'il est parfait pour une application simple comme un album photo 3D..
Étape 3: Obtenez Away3D Lite
Vous pouvez télécharger gratuitement une copie de Away3D Lite 1.0 depuis cette page Web ici. Téléchargez et extrayez le code source du moteur dans un emplacement pratique.
Étape 4: Récupérez la bibliothèque Greensock TweenMax
Le mouvement de la caméra dans la galerie de photos 3D sera effectué à l'aide de la bibliothèque Greensock TweenMax, que vous pouvez obtenir à partir de cette page ici. Encore une fois, téléchargez et extrayez la bibliothèque dans un emplacement pratique.
Étape 5: Obtenez AS3Flickr et AS3CoreLib
Les bibliothèques AS3Flickr et AS3CoreLib permettent de contacter le service Web Flickr. Vous pouvez trouver des détails sur ces bibliothèques à partir de l'article Construire une visionneuse de photos à l'aide de Flex et de l'API Flickr.
Étape 6: Créer un nouveau projet
Créez un nouveau projet Flex et ajoutez les bibliothèques Away3D Lite, TweenMax, AS3Flickr et AS3CoreLib au chemin de construction Flex..
Étape 7: Définir les attributs de l'application
applicationComplete = "appComplete ()" Ceci définit la fonction appComplete à appeler lorsque l'application est initialisée et servira de point d'entrée pour notre code..
frameRate = "100" Ceci fixe la limite de fréquence d'images pour l'application à 100 images par seconde. La valeur par défaut est 24, ce qui augmentera l'apparence de l'application plus fluide..
width = "600" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 374040]" Ces attributs définissent la taille et la couleur d'arrière-plan de l'application Flex..
Votre balise d'application devrait ressembler au code ci-dessous:
Étape 8: Ajouter des contrôles
Ajouter les balises suivantes à la balise Application.
Nous donnerons à l'utilisateur la possibilité de rechercher Flickr et d'afficher les résultats dans notre galerie de photos 3D au moment de l'exécution. Ces deux balises ajoutent une zone de texte dans laquelle la phrase de recherche peut être entrée et un bouton permettant de lancer la recherche..
L'événement de clic pour les appels de bouton applicationManager.flickrSearch (this.txtSearch.text). ApplicationManager sera créé à une étape ultérieure et la fonction flickrSearch contiendra le code permettant de contacter Flickr et de télécharger les photos..
Étape 9: Ajoutez du code
Ajoutez une balise de script à la balise d'application. C'est ici que le code ActionScript sera écrit.
Étape 10: Ajouter les variables
Ajouter la variable suivante dans la balise Script.
private var applicationManager: ApplicationManager = null;
La classe ApplicationManager sera chargée d'initialiser le moteur Away3D, de charger les images Flickr et de déplacer la caméra. Nous en avons une référence dans la variable applicationManager afin que le bouton créé à l'étape 8 puisse appeler la fonction flickrSearch..
Étape 11: Chargement des fichiers de stratégie interdomaines
Pour accéder aux images sur les serveurs Flickr, les fichiers de stratégie interdomaines doivent être chargés. Ceci est couvert plus en détail dans l'article Créer une visionneuse de photos à l'aide de Flex et de l'API Flickr.
Étape 12: La fonction appComplete
Ajouter une nouvelle fonction appelée appComplete.
fonction privée appComplete (): void applicationManager = new ApplicationManager (); this.addChildAt (nouveau SpriteUIComponent (applicationManager), 0);
Cette fonction est appelée lorsque l'application Flex est chargée et initialisée. C'est ici que nous créons une nouvelle instance de la classe ApplicationManager et l'ajoutons en tant que contrôle enfant. Notez que nous passons actuellement une instance d'une classe appelée SpriteUIComponent à la fonction addChildAt.
Comme vous le verrez dans les étapes suivantes, ApplicationManager étend l'une des classes de modèles de l'API Away3D Lite. Ces classes de modèles étendent elles-mêmes la classe Flex Sprite. Bien que la fonction addChildAt accepte un Sprite, une exception sera déclenchée à l'exécution. En effet, seules les classes étendant la classe UIComponent peuvent être ajoutées à des contrôles enfants d'une application Flex. Pour contourner cette limitation, SpriteUIComponent étend la classe UIComponent, puis ajoute un Sprite en tant que son propre enfant..
Étape 13: La classe SpriteUIComponent
package import flash.display.Sprite; import mx.core.UIComponent; Classe publique SpriteUIComponent étend UIComponent fonction publique SpriteUIComponent (sprite: Sprite) super (); explicitHeight = sprite.height; explicitWidth = sprite.width; addChild (sprite);
Comme mentionné ci-dessus, la classe SpriteUIComponent étend la classe UIComponent (ce qui signifie qu'elle peut être ajoutée en tant qu'enfant d'une application Flex), puis ajoute l'objet Sprite fourni en tant que son propre enfant..
Définir la classe ApplicationManager comme extension de la classe BasicTemplate.
Classe publique ApplicationManager étend BasicTemplate
Une nouvelle fonctionnalité incluse dans Away3D Lite est les classes de modèles. Presque toutes les applications Away3D doivent initialiser les mêmes classes sous-jacentes, telles qu'une caméra et une vue, et également configurer des écouteurs d'événement pour les événements de cadre. Ces étapes communes, qui devaient être codées manuellement par chaque développeur, sont maintenant exécutées par l'une des classes de modèles. Nous étendrons l'une de ces classes de modèles, BasicTemplate, avec ApplicationManager..
Étape 16: Définir les constantes
ApplicationManager aura un certain nombre de variables constantes qui définissent l'apparence et la fonction de la classe..
Ces trois constantes concernent le service Web Flickr.
Const statique privée PHOTO_HEIGHT: Number = 50; Const statique privée PHOTO_WIDTH: Number = PHOTO_HEIGHT * 1.618;
Ces deux variables définissent la taille des photos dans un espace 3D. La largeur est définie par rapport à la hauteur à l'aide du ratio rectangle d'or, ce qui donne un rectangle dont la forme est généralement considérée comme esthétique..
Const statique privée PHOTO_CLOUD_WIDTH: Number = 1000; Const statique privée PHOTO_CLOUD_HEIGHT: Number = 1000; Const statique privée PHOTO_CLOUD_DEPTH: Number = 3000;
Ces trois variables définissent la zone dans laquelle toutes les photos seront contenues..
Const statique privée NUMBER_PHOTOS: int = 300;
Cette variable définit combien de photos individuelles seront créées dans la zone définie ci-dessus.
const statique privée CAMERA_JUMP_TIME: Number = 3; Constante statique privée CAMERA_DIST_FROM_PHOTO: Number = 30; Const statique privée CAMERA_DIST_JUMP_BACK: Number = 100;
Ces variables définissent le mouvement et la vitesse de l’appareil photo lorsqu’il passe d’une photo à l’autre. La caméra suivra une courbe de Bézier, le début de la courbe remontant à 30 unités d'une photo, se dirigeant vers un point situé à 100 unités, puis se terminant à un point situé à 30 unités de la photo suivante..
Les images qui seront affichées proviennent toutes de Flickr, ce qui signifie qu’il y aura un retard initial lors de la récupération des photos. En attendant, une image intégrée au fichier SWF sera affichée, pour donner à l'utilisateur quelque chose à regarder autre que des rectangles blancs.
Étape 18: Ajout des variables
textures var protégées: ArrayCollection = new ArrayCollection (); photos var protégées: ArrayCollection = new ArrayCollection (); protected var chargéTextures: int = 0;
Les images renvoyées par Flickr sont stockées dans la collection de textures. Les mailles Away3D Lite qui afficheront les images sont stockées dans la collection de photos. La variable LoadTextures garde une trace du nombre d'images chargées sur Flickr afin qu'elles puissent être stockées à l'emplacement approprié dans la collection de textures..
Étape 19: initialisation de ApplicationManager
Ajouter une nouvelle fonction appelée onInit.
remplacer la fonction protégée onInit (): void
Une fois que l'objet BasicTemplate sous-jacent s'est initialisé, la fonction onInit sera appelée. C'est ici que nous initialisons la classe d'extension.
pour (var i: int = 0; i < MAX_RESULTS; ++i) addTexture(Cast.bitmap(DefaultTexture));
Tout d'abord, nous créons une collection de textures que nos maillages photo 3D peuvent utiliser, initialement à l'aide de l'image par défaut que nous avons incorporée à l'étape 17. Cast est une classe d'utilitaires fournie par Away3D Lite. Nous l'utilisons ici pour transformer l'image incorporée en BitmapData. objet fourni à la fonction addTexture.
pour (var j: int = 0; j < NUMBER_PHOTOS; ++j) createPlane();
Nous créons maintenant les maillages qui afficheront les images photo. Les photos 3D seront en fait des plans: des rectangles 2D sans profondeur qui feront face à la caméra.
flickrSearch (SEARCH_STRING);
Nous lançons ensuite une recherche par défaut dans la base de données d'images Flickr en appelant flickrSearch, afin de donner à l'utilisateur des images à regarder avant d'effectuer sa propre recherche..
this.debug = false;
La propriété debug de la classe BasicTemplate est définie sur false, ce qui désactive l'écran de statistiques de débogage par défaut normalement affiché avec une application Away3D Lite..
Par défaut, la classe BasicTemplate place la caméra au bas de l'extrémité négative de l'axe z, en regardant vers l'arrière le long d'un axe z positif. Lorsque les plans sont créés par la fonction createPlane, ils sont également créés avec leur front dirigé le long de l'axe z positif. Cela signifie que la caméra regardera par défaut la face arrière des plans..
Généralement, dans les applications 3D, les polygones orientés vers l'arrière de la caméra ne sont pas visibles (cela s'appelle le retrait de la face arrière). Pour voir les plans, nous devons donc déplacer la caméra vers le haut de l'extrémité positive de l'axe z, puis regarder l'origine un axe z négatif.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) en tant que Mesh;
Nous obtenons ensuite une référence à un plan aléatoire stocké dans la collection de photos..
La caméra est alors positionnée légèrement devant ce plan aléatoire. Il s’agit de la première photo que l’utilisateur examinera lors du chargement de l’application..
bezierJump ();
Enfin, nous commençons l’opération d’interpolation TweenMax qui déplacera l’appareil photo de la photo en cours pour afficher une nouvelle photo au hasard..
Étape 20: La fonction addTexture
Ajouter une nouvelle fonction appelée addTexture.
fonction protégée addTexture (data: BitmapData): void texture var: BitmapMaterial = new BitmapMaterial (data); texture.smooth = true; textures.addItem (texture);
La fonction addTexture, appelée par onInit à l'étape 19, crée une nouvelle classe BitmapMaterial (la classe qui définit la texture d'une photo 3D) à l'aide du BitmapData fourni, définit sa propriété smooth à true et l'ajoute à la collection de textures..
Étape 21: La fonction createPlane
Ajouter une nouvelle fonction appelée createPlane.
fonction protégée createPlane (): void var mesh: Plan = nouveau Plan (textures.getItemAt (Math.random () * (MAX_RESULTS - 1)) en tant que BitmapMaterial, PHOTO_WIDTH, PHOTO_HEIGHT, 1, 1, false); mesh.x = Math.random () * PHOTO_CLOUD_WIDTH; mesh.y = Math.random () * PHOTO_CLOUD_HEIGHT; mesh.z = Math.random () * PHOTO_CLOUD_DEPTH; scene.addChild (mesh); photos.addItem (mesh);
La fonction createPlane, appelée par onInit à l'étape 19, crée un nouveau plan en utilisant les dimensions définies par les constantes à l'étape 16 et texturées avec un BitmapMaterial aléatoire de la collection de textures, les positionne de manière aléatoire dans la zone "nuage photo", les ajoute à la scène (un objet Away3D de la classe BasicTemplate) afin qu'elles soient visibles et les ajoute à la collection de photos afin que nous puissions facilement les référencer ultérieurement.
Étape 22: Obtenir des images à partir de Flickr
Ajoutez deux nouvelles fonctions, l'une appelée flickrSearch et l'autre appelée onPhotosSearch.
fonction publique flickrSearch (search: String): void service var: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", recherche, "tout", "", null, null, null, null, -1, "", MAX_RESULTS, 1); fonction protégée onPhotosSearch (événement: FlickrResultEvent): void pour chaque (var photo: photo dans event.data.photos.photos) var imageURL: String = 'http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg'; var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, fonction (event: Event): void texture var: BitmapMaterial = textures.getItemAt (LoadTextures) en tant que BitmapMaterial; texture.bitmap = event.currentTarget.content.bitmapData; chargée LoadTextures; % = MAX_RESULTS;); loader.load (nouvelle URLRequest (imageURL));
Construire une visionneuse de photos à l’aide de Flex et de l’API Flickr, ligne par ligne. La seule différence est que, lors du chargement des images à partir de Flickr, BitmapData est affecté à la propriété bitmap des objets BitmapMaterial stockés dans la collection de textures. Cela modifie à son tour l'image affichée sur les plans de la scène 3D..
De cette manière, nous pouvons mettre à jour de manière dynamique les photos 3D affichées avec plusieurs appels à la fonction flickrSearch lorsque l'utilisateur effectue une recherche à partir de l'interface graphique principale..
Étape 23: La fonction bezierJump
La fonction bezierJump est appelée à plusieurs reprises pour faire passer l'appareil photo d'une photo à l'autre..
fonction protégée bezierJump (): void
Les courbes de Bézier constituent un moyen pratique de déplacer la caméra en douceur le long d'une courbe définie par 3 points de référence: la position actuelle de la caméra devant une photo, une position derrière la caméra et la destination finale devant une nouvelle photo..
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) en tant que Mesh;
Tout d'abord, une nouvelle photo aléatoire à déplacer est sélectionnée dans la collection de photos.
Nous utilisons ensuite TweenMax pour déplacer la position de la caméra (définie par les propriétés x, y et z) juste devant la position de la photo de destination sélectionnée au hasard…
délai: 2,
après un délai initial de 2 secondes (ce qui signifie que l'utilisateur visualise chaque photo pendant 2 secondes)…
le long d'une courbe de Bézier influencée par un point situé juste derrière la position actuelle des caméras…
onComplete: bezierJump);
appel récursif de la fonction bezierJump une fois le déménagement terminé.
De cette manière, l'appareil photo passe à une photo, l'affiche pendant 2 secondes, passe à la photo suivante et relance le processus. En général, l’appel récursif aux fonctions d’interpolation est un excellent moyen de consigner les mouvements dans les applications Flex.
Conclusion
Je pense que vous conviendrez avec moi qu'un album photo 3D est un moyen accrocheur d'afficher des photos. Bien que nous utilisions ici des images Flickr disponibles publiquement comme source des photos, cette application pourrait facilement être modifiée pour afficher vos propres images, qu'elles soient hébergées sur Flickr ou téléchargées ailleurs..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Share
Accentsconagua
