In deze tut zal ik demonstreren hoe een dynamische fotogalerij te bouwen met behulp van de Flickr API. Om een beetje extra flair toe te voegen, gebruiken we de kracht van Away3D en tonen we de foto's in een 3D-omgeving.
Er is genoeg te bespreken, dus laten we verder gaan!
Stap 1: de Flickr API bekijken
Deze toepassing haalt foto's van Flickr op om in een 3D-ruimte te worden weergegeven. In het kort, het proces van het downloaden van foto's van Flickr is als volgt:
Er is een Flickr API-sleutel verkregen.
De ActionScript-bibliotheken AS3Flickr en AS3CoreLib worden gedownload en verwezen vanuit Flex Builder.
De Flickr-beleidsbestanden voor crossdomeinen worden geladen om Flex toegang te verlenen tot afbeeldingen van externe domeinen.
Er wordt een zoekopdracht op Flickr uitgevoerd.
De resultaten worden gebruikt om de URL van de Flickr-afbeeldingen te vinden.
De afbeeldingen zelf worden gedownload en opgeslagen / weergegeven.
Dit proces wordt uitgebreid behandeld door een eerdere zelfstudie die je hier kunt vinden. Ik raad u ten zeerste aan om die zelfstudie te lezen als u niet bekend bent met de AS3Flickr-bibliotheek, omdat deze punten in deze zelfstudie slechts kort worden genoemd.
Stap 2: Een inleiding tot Away3D Lite
De Flash-runtime heeft de afgelopen jaren een indrukwekkende vooruitgang geboekt. De wijdverspreide implementatie van de Flash-runtime, zowel met Adobe AIR als browser-plug-ins, samen met de prestatieverbetering in latere versies, betekent dat Flash een zeer divers ecosysteem van bibliotheken en toepassingen heeft. Het is veranderd van een animatietool naar een ontwikkelingsplatform voor algemene doeleinden voor games, bedrijfstoepassingen, 3D-visualisaties, videospelers en meer.
3D-engines zijn al enige tijd samen met Flash ontwikkeld, van nieuwsgierigheid tot volledig uitgeruste en zelfs commerciële bibliotheken. Away3D is een van de meer populaire gratis Flash 3D-engines en onlangs werd een kleinere, snellere versie van Away3D uitgebracht genaamd Away3D Lite. Hoewel Away3D Lite wat van het aanwezige eye-candy mist in de meer gecompliceerde 3D-engines, betekent de focus op eenvoud dat het perfect is voor een eenvoudige toepassing zoals een 3D-fotoalbum.
Stap 3: Get Away3D Lite
U kunt hier gratis een exemplaar van Away3D Lite 1.0 downloaden van deze webpagina. Download en pak de broncode van de motor uit naar een handige locatie.
Stap 4: Download de Greensock TweenMax-bibliotheek
De beweging van de camera binnen de 3D-fotogalerij wordt uitgevoerd met behulp van de Greensock TweenMax-bibliotheek, die u op deze pagina hier kunt vinden. Nogmaals, download en extraheer de bibliotheek naar een handige locatie.
Stap 5: Verkrijg AS3Flickr en AS3CoreLib
De AS3Flickr- en AS3CoreLib-bibliotheken worden gebruikt om contact op te nemen met de Flickr-webservice. U kunt details over deze bibliotheken vinden in het artikel Bouw een Photo Viewer met Flex en de Flickr API.
Stap 6: Maak een nieuw project
Maak een nieuw Flex-project en voeg de bibliotheken Away3D Lite, TweenMax, AS3Flickr en AS3CoreLib toe aan het Flex-bouwpad.
Stap 7: Definieer de Application Attributes
applicationComplete = "AppComplete ()" Hiermee wordt ingesteld dat de appComplete-functie wordt aangeroepen wanneer de toepassing is geïnitialiseerd en als het ingangspunt voor onze code fungeert.
frameRate = "100" Hiermee wordt de framerate voor de toepassing ingesteld op 100 frames per seconde. De standaardinstelling is 24 en als u dit verhoogt, wordt de toepassing vloeiender.
width = "600" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 374040]" Deze kenmerken bepalen de grootte en achtergrondkleur van de Flex-toepassing.
Uw Application-tag moet er ongeveer zo uitzien als de onderstaande code:
Stap 8: voeg een aantal besturingselementen toe
Voeg de volgende tags toe aan de Application-tag.
We geven de gebruiker de mogelijkheid om Flickr te doorzoeken en de resultaten tijdens runtime weer te geven in onze 3D-fotogalerie. Deze twee tags voegen een tekstvak toe, waar de zoekterm kan worden ingevoerd, en een knop om het zoeken te starten.
De klikgebeurtenis voor de knopoproepen applicationManager.flickrSearch (this.txtSearch.text). De ApplicationManager wordt in latere stappen gemaakt en de flickrSearch-functie zal de code bevatten om contact op te nemen met Flickr en de foto's te downloaden.
Stap 9: voeg wat code toe
Voeg een Script-tag toe aan de Application-tag. Hier wordt de ActionScript-code geschreven.
Stap 10: voeg de variabelen toe
Voeg de volgende variabele toe aan de Script-tag.
private var applicationManager: ApplicationManager = null;
De klasse ApplicationManager is verantwoordelijk voor het initialiseren van de Away3D-engine, het laden van de Flickr-afbeeldingen en het verplaatsen van de camera. We houden er een verwijzing naar in de variabele applicationManager zodat de knop die in stap 8 is gemaakt de functie flickrSearch kan oproepen.
Om toegang te krijgen tot de afbeeldingen op de Flickr-servers, moeten de beleidsbestanden voor het cross-domein worden geladen. Dit wordt in meer detail behandeld in het artikel Build a Photo Viewer met behulp van Flex en de Flickr API.
Stap 12: De app Complete-functie
Voeg een nieuwe functie toe, appComplete.
private function appComplete (): void applicationManager = new ApplicationManager (); this.addChildAt (nieuwe SpriteUIComponent (applicationManager), 0);
Deze functie wordt aangeroepen wanneer de Flex-toepassing is geladen en geïnitialiseerd. Hier maken we een nieuw exemplaar van de klasse ApplicationManager en voegen dit toe als een onderliggende controle. Merk op dat we een instantie van een klasse genaamd SpriteUIComponent daadwerkelijk doorgeven aan de functie addChildAt.
Zoals u in latere stappen zult zien, breidt ApplicationManager één van de sjabloonklassen uit de Away3D Lite API uit. Deze sjabloonklassen breiden zelf de klasse Flex Sprite uit. Hoewel de functie addChildAt een Sprite accepteert, wordt tijdens runtime een uitzondering gegenereerd. Dit komt omdat alleen klassen die de UIComponent-klasse uitbreiden een child-besturing van een Flex-toepassing kunnen worden toegevoegd. Om deze beperking te omzeilen, breidt de SpriteUIComponent de UIComponent-klasse uit en voegt een Sprite als zijn eigen kind toe.
Stap 13: De SpriteUIComponent-klasse
pakket import flash.display.Sprite; importeer mx.core.UIComponent; public class SpriteUIComponent breidt UIComponent uit public function SpriteUIComponent (sprite: Sprite) super (); explicitHeight = sprite.height; explicitWidth = sprite.width; addChild (sprite);
Zoals hierboven vermeld, breidt de klasse SpriteUIComponent de UIComponent-klasse uit (wat betekent dat deze kan worden toegevoegd als een kind van een Flex-toepassing) en voegt vervolgens het geleverde Sprite-object toe als zijn eigen kind.
Definieer de klasse ApplicationManager als uitbreiding van de klasse BasicTemplate.
public class ApplicationManager breidt BasicTemplate uit
Een nieuwe functie die wordt meegeleverd met Away3D Lite zijn de sjabloonklassen. Bijna elke Away3D-toepassing moet dezelfde onderliggende klassen initialiseren, zoals een camera en een weergave, en ook gebeurtenislisteners instellen voor frame-evenementen. Deze algemene stappen, die vroeger handmatig door elke ontwikkelaar moesten worden gecodeerd, worden nu uitgevoerd door een van de verschillende sjabloonklassen. We zullen een van deze sjabloonklassen, BasicTemplate, uitbreiden met de ApplicationManager.
Stap 16: Definieer de constanten
De ApplicationManager heeft een aantal constante variabelen die het uiterlijk en de functie van de klasse bepalen.
Deze drie constanten hebben betrekking op de Flickr-webservice.
privé statische const PHOTO_HEIGHT: Number = 50; privé statische const PHOTO_WIDTH: Number = PHOTO_HEIGHT * 1.618;
Deze twee variabelen bepalen de grootte van de foto's in de 3D-ruimte. De breedte wordt gedefinieerd ten opzichte van de hoogte met behulp van de gouden rechthoekverhouding, die een rechthoek produceert waarvan de vorm over het algemeen als esthetisch aangenaam wordt beschouwd.
privé statische const PHOTO_CLOUD_WIDTH: Number = 1000; privé statische const PHOTO_CLOUD_HEIGHT: Number = 1000; private static const PHOTO_CLOUD_DEPTH: Number = 3000;
Deze drie variabelen bepalen het gebied waarin alle foto's zich bevinden.
privé-statische const NUMBER_PHOTOS: int = 300;
Deze variabele definieert hoeveel afzonderlijke foto's in het hierboven gedefinieerde gebied worden gemaakt.
privé statische const CAMERA_JUMP_TIME: Number = 3; private static const CAMERA_DIST_FROM_PHOTO: Number = 30; private static const CAMERA_DIST_JUMP_BACK: Number = 100;
Deze variabelen bepalen de beweging en snelheid van de camera terwijl deze van de ene foto naar de volgende springt. De camera volgt een bezier-curve, waarbij de start van de curve 30 eenheden van een foto is, naar een punt 100 eenheden terug beweegt en dan eindigt op een punt 30 eenheden terug van de volgende foto.
De afbeeldingen die worden weergegeven, zijn allemaal afkomstig van Flickr, wat betekent dat er een eerste vertraging optreedt wanneer de foto's worden opgehaald. In de tussentijd wordt een in het SWF-bestand ingesloten afbeelding weergegeven om de gebruiker iets anders dan witte rechthoeken te laten zien.
Stap 18: De variabelen toevoegen
beschermde var-texturen: ArrayCollection = new ArrayCollection (); beschermde var foto's: ArrayCollection = new ArrayCollection (); beschermd var loadedTextures: int = 0;
De afbeeldingen die van Flickr worden teruggestuurd, worden opgeslagen in de texturencollectie. De Away3D Lite-netten waarmee de afbeeldingen worden opgeslagen in de fotocollectie. De variabele loadedTextures houdt een track bij van hoeveel afbeeldingen zijn geladen van Flickr, zodat ze kunnen worden opgeslagen op de juiste positie in de texturencollectie.
Stap 19: De ApplicationManager initialiseren
Voeg een nieuwe functie toe met de naam onInit.
override protected function onInit (): void
Zodra het onderliggende BasicTemplate-object zichzelf heeft geïnitialiseerd, wordt de onInit-functie aangeroepen. Hier initialiseren we de uitbreidingsklasse.
for (var i: int = 0; i < MAX_RESULTS; ++i) addTexture(Cast.bitmap(DefaultTexture));
Eerst maken we een verzameling texturen voor onze 3D-mazen om te gebruiken, allemaal aanvankelijk met de standaardafbeelding die we in stap 17 hebben ingesloten. Cast is een utiliteitsklasse van Away3D Lite, en hier gebruiken we het om de ingesloten afbeelding in een BitmapData te transformeren object, dat wordt geleverd aan de functie addTexture.
voor (var j: int = 0; j < NUMBER_PHOTOS; ++j) createPlane();
Nu maken we de mazen die de foto's zullen weergeven. De 3D-foto's zijn in feite vlakken: 2D-rechthoeken zonder diepte die naar de camera wijzen.
flickrSearch (SEARCH_STRING);
Vervolgens starten we een standaardzoekopdracht in de Flickr-afbeeldingsdatabase door flickrSearch aan te roepen om de gebruiker een aantal afbeeldingen te geven voordat deze zelf een zoekopdracht uitvoeren..
this.debug = false;
De eigenschap voor foutopsporing van de klasse BasicTemplate is ingesteld op false, waardoor het standaard foutopsporingsstatistiekenscherm wordt uitgeschakeld dat normaal wordt weergegeven met een Away3D Lite-toepassing.
Standaard plaatst de BasicTemplate-klasse de camera langs het negatieve uiteinde van de z-as, terugkijkend naar de oorsprong langs een positieve z-as. Wanneer de vlakken worden gemaakt door de functie createPlane, worden ze ook gemaakt met hun voorkant langs de positieve z-as. Dit betekent dat de camera standaard naar de achterkant van de vliegtuigen kijkt.
Meestal zijn in 3D-toepassingen polygonen met hun rug naar de camera niet zichtbaar (dit wordt back face culling genoemd), dus om de vlakken te zien die we nodig hebben om de camera het positieve uiteinde van de z-as te laten bewegen en dan terug te kijken naar de oorsprong langs een negatieve z-as.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) als mesh;
We krijgen vervolgens een verwijzing naar een willekeurig vlak dat is opgeslagen in de verzameling foto's.
De camera staat dan iets voor dit willekeurige vlak. Dit is de eerste foto die de gebruiker bekijkt wanneer de toepassing wordt geladen.
bezierJump ();
Eindelijk starten we de TweenMax tweening-bewerking die de camera van de huidige foto zal verplaatsen om een nieuwe willekeurige foto te bekijken.
Stap 20: De functie addTexture
Voeg een nieuwe functie toe met de naam addTexture.
beschermde functie addTexture (data: BitmapData): void var texture: BitmapMaterial = new BitmapMaterial (data); texture.smooth = true; textures.addItem (textuur);
De functie addTexture, genoemd door onInit in stap 19, maakt een nieuwe BitmapMaterial-klasse (de klasse die de textuur van een 3D-foto's definieert) met behulp van de meegeleverde BitmapData, stelt de eigenschap smooth in op true en voegt deze toe aan de verzameling texturen.
De createPlane-functie, aangeroepen door onInit in stap 19, maakt een nieuw vlak met behulp van de dimensies die zijn gedefinieerd door de constanten in stap 16 en getextureerd met een willekeurig BitmapMaterial uit de verzameling texturen, plaatst ze willekeurig in het gebied "fotowolk", voegt ze toe aan de scène (een Away3D-object uit de klasse BasicTemplate) zodat ze zichtbaar zijn en worden toegevoegd aan de verzameling foto's, zodat we ze later gemakkelijk kunnen raadplegen.
Stap 22: afbeeldingen ophalen van Flickr
Voeg twee nieuwe functies toe, de ene flickrSearch genaamd en de andere onPhotosSearch.
publieke functie flickrSearch (zoeken: String): void var service: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", zoeken, "any", "", null, null, null, null, -1, "", MAX_RESULTS, 1); beschermde functie onPhotosSearch (event: FlickrResultEvent): void voor elk (var foto: Photo in 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, function (event: Event): void var texture: BitmapMaterial = textures.getItemAt (loadedTextures) als BitmapMaterial; texture.bitmap = event.currentTarget.content.bitmapData; ++ loadedTextures; loadedTextures % = MAX_RESULTS;); loader.load (nieuwe URLRequest (imageURL));
Beide functies worden bijna als regel genomen vanuit Build a Photo Viewer met behulp van Flex en de Flickr API. Het enige verschil is dat bij het laden van de afbeeldingen vanaf Flickr hun BitmapData wordt toegewezen aan de bitmapeigenschap van de Bitmap Material-objecten die zijn opgeslagen in de texturencollectie. Dit verandert op zijn beurt het beeld dat op de vlakken in de 3D-scène wordt weergegeven.
Op deze manier kunnen we de 3D-foto's die worden weergegeven met meerdere oproepen dynamisch bijwerken naar de flickrSearch-functie wanneer de gebruiker een zoekopdracht uitvoert vanuit de hoofd-GUI.
Stap 23: De bezierJump-functie
De bezierJump-functie wordt herhaaldelijk aangeroepen om de camera van de ene naar de andere foto te laten springen.
beschermde functie bezierJump (): ongeldig
Bezier-curven zijn een handige manier om de camera soepel langs de curve te verplaatsen die wordt gedefinieerd door slechts 3 referentiepunten: de huidige positie van de camera voor een foto, een positie achter de camera en de eindbestemming voor een nieuwe foto.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) als mesh;
Eerst wordt uit de verzameling foto's een nieuwe willekeurige foto geselecteerd om naartoe te gaan.
Vervolgens gebruiken we TweenMax om de camerapositie (zoals gedefinieerd door de eigenschappen x, y en z) te verplaatsen naar vlak voor de positie van de willekeurig geselecteerde bestemmingsfoto ...
vertraging: 2,
na een eerste vertraging van 2 seconden (wat betekent dat de gebruiker elke foto gedurende 2 seconden bekijkt) ...
langs een bezier-curve die wordt beïnvloed door een punt net achter de huidige positie van de camera ...
onComplete: bezierJump);
recursief de bezierJump-functie aanroepen zodra de verplaatsing is voltooid.
Op deze manier gaat de camera naar een foto, bekijkt deze gedurende 2 seconden, springt naar de volgende foto en start het proces opnieuw. Over het algemeen is het recursief aanroepen van tweening-functies een uitstekende manier om bewegingen in Flex-toepassingen te scripten.
Conclusie
Ik denk dat je het ermee eens zult zijn dat een 3D-fotoalbum een opvallende manier is om foto's weer te geven. Hoewel we hier openbaar beschikbare Flickr-afbeeldingen gebruiken als de bron van de foto's, kan deze applicatie eenvoudig worden aangepast om uw eigen afbeeldingen weer te geven, ofwel gehost op Flickr of gedownload van elders.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Share
Accentsconagua
