Share
In deze zelfstudie zal ik uitleggen hoe ik de weergavelijst kan openen en gebruiken terwijl ik een XML-gebaseerde afbeeldingengalerij met ActionScript 3.0 maak.
Met XML zullen we dynamisch informatie laden en verkrijgen over de afbeeldingen, ze een willekeurige middenpositie geven, een frame toevoegen, slepen toevoegen en als laatste gebruiken we een tween om de zoomanimatie te verwerken.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Stel de werkgebiedgrootte in op 600x350 en voeg een grijs radiaal verloop toe (#EEEEEE, #DDDDDD).
We gaan een vooraf geladen animatie toevoegen om de gebruiker te laten weten wanneer de inhoud wordt geladen. In dit geval heb ik de door Apple geïnspireerde preloader gebruikt die we eerder hebben gemaakt. Aangezien we alleen de animatie gaan gebruiken, is het niet nodig om de klasse te importeren of een export-ID te gebruiken.
Plaats de preloader op het podium en centreer het.
We gaan een lettertype insluiten, een supereenvoudige taak bij het toevoegen van een tekstveld aan het werkgebied in de Flash IDE, maar een beetje anders met ActionScript.
Open het Bibliotheekpaneel en klik met de rechtermuisknop in het itemgebied zonder er een te selecteren, er verschijnt een contextueel menu.
Klik op "Nieuw lettertype" om een dialoogvenster te openen, geef een naam aan uw lettertype en selecteer degene die u wilt gebruiken zoals getoond in de volgende afbeelding.
Hiermee wordt een klasse gemaakt van het lettertype dat je hebt geselecteerd. We starten dit in stap 9.
Laten we het XML-bestand maken.
Open de door u gewenste XML- of teksteditor en schrijf:
Als u klaar bent, slaat u het op als "images.xml" in uw XML-map.
De code die we zullen gebruiken zal worden geschreven in een enkele klasse die zal worden gebruikt als de documentklasse in het FLA-bestand.
Maak een nieuw ActionScript-bestand (Bestand> Nieuw)
Sla het op als "Main.as".
We beginnen met:
pakketlessen
De pakket Met sleutelwoord kunt u uw code indelen in groepen die kunnen worden geïmporteerd door andere scripts, het wordt aanbevolen deze een naam te geven die begint met een kleine letter en intercaps te gebruiken voor volgende woorden, bijvoorbeeld: galleryClasses.
Als u uw bestanden niet in een pakket wilt groeperen of als u slechts één klasse heeft, kunt u deze rechtstreeks uit uw bronmap gebruiken, maar het idee is om georganiseerd te zijn.
import flash.display.Sprite; import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import flash.filters.BitmapFilter; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import flash.text.TextField; import flash.text.AntiAliasType; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent;
Dit zijn de lessen die we nodig hebben om deze galerij te maken. Als je hulp nodig hebt bij een specifieke klas, gebruik dan de Flash Help (F1).
public class Main breidt MovieClip uit
De strekt keyword definieert een klasse die een subklasse van een andere klasse is. De subklasse erft alle methoden, eigenschappen en functies, op die manier kunnen we ze in onze klasse gebruiken.
We gaan MovieClip-specifieke methoden en eigenschappen gebruiken, dus we breiden deze uit met de MovieClip-klasse.
var xml: XML; // Het XML-object dat het XML-bestand zal parseren var images: Array = new Array (); // Deze array zal de geladen afbeeldingen opslaan var imagesLoaded: int = 0; // Een teller telt de geladen afbeeldingen var imagesTitle: Array = new Array (); // De titeleigenschappen van het XML-bestand var tween: Tween; // Behandelt de animatie var ingezoomd: Boolean = false; // Controleert of een afbeelding is ingezoomd, standaard false var canClick: Boolean = true; // Controleert of de gebruiker op een afbeelding kan klikken om in te zoomen, standaard true var lastX: int; // Slaat de x-eigenschap op van de laatste afbeelding waarop is geklikt var lastY: int; // Slaat de y-eigenschap op van de laatste afbeelding waarop is geklikt var textformat: TextFormat = new TextFormat (); // Een scherm van TextFormat Object var: Sprite = new Sprite (); // Een zwart scherm om te focussen op de actieve afbeelding var-indeling Font: Avenir = nieuwe Avenir (); // Dit is het ingesloten lettertype
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse. Deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wanneer u de documentklasse gebruikt.
In deze functie stellen we de eigenschappen in van het TextFormat-object dat we gebruiken om een titel of een beschrijving van elke afbeelding weer te geven. Maak het zwarte scherm dat verschijnt wanneer de gebruiker op een afbeelding klikt en de functie oproept die het gewenste XML-bestand laadt.
public function Main (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Gebruik dezelfde grootte die u hebt gebruikt bij het insluiten van het lettertype in het bibliotheekscherm.graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); loadXML ( "xml / images.xml");
Met deze functie wordt het XML-bestand geladen dat wordt geboden door de parameter "bestand". We voegen ook een listener toe om te verwerken wanneer de belasting is voltooid.
private function loadXML (file: String): void var urlLoader: URLLoader = new URLLoader (); var urlReq: URLRequest = nieuwe URLRequest (bestand); URLLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);
Hier converteren we het geladen XML-bestand naar een geldig XML-object met behulp van de parameter "data" van de URLLoader. Vervolgens gebruiken we een "voor" -instructie om een Loader te maken voor elke afbeelding in de XML. Aanvullende informatie is te vinden in het commentaar.
private function handleXML (e: Event): void xml = nieuwe XML (e.target.data); for (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(String(xml.children()[i].@src))); images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
Wanneer een Loader een afbeelding uit de XML heeft geladen, wordt de volgende code uitgevoerd:
privéfunctie geladen (e: Event): void imagesLoaded ++; // Voegt een toe aan de imagesLoaded variabele if (xml.children (). Length () == imagesLoaded) // Wanneer alle afbeeldingen zijn geladen ... removeChild (preloader); // Verwijdert de Preloader MovieClip-voorbereidingImages (); // Deze functie wordt in de volgende stap uitgelegd
Met deze functie wordt het frame toegevoegd, het TextField om de titel of beschrijving weer te geven, de zwarte achtergrond die daarvoor wordt gebruikt en een schaduwfilter. Laten we het in delen nemen.
private function prepareImages (): void for (var i: int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow var frame:Sprite = new Sprite(); //The Frame Sprite var infoArea:Sprite = new Sprite(); //The TextField background var infoField:TextField = new TextField(); //The TextField
Dit creëert een wit kader rond de afbeelding.
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, afbeeldingen [i] .breedte + 40, afbeeldingen [i] .hoogte + 80); frame.graphics.endFill ();
De rechthoek wordt geplaatst onder de afbeelding om als kader te worden gebruikt.
Hiermee wordt een zwarte rechthoek in het onderste gedeelte van de afbeelding gemaakt, waar het TextField zal zijn.
infoArea.graphics.beginFill (0x111111, 0.75); infoArea.graphics.drawRect (0, 0, images [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = afbeeldingen [i] .hoogte - 60;
De volgende code stelt de TextField-eigenschappen in en voegt de inhoud toe.
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // U moet dit toevoegen om het ingesloten lettertype infoField.antiAliasType = AntiAliasType.ADVANCED te gebruiken; // Deze eigenschap zal de tekst duidelijker weergeven infoField.width = images [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // De inhoud, verkregen uit de XML en opgeslagen in de array
Hier stellen we de gewenste schaal van de afbeeldingen in. Omdat alles zich in de Container Sprite bevindt, hoeven we het alleen maar te verkleinen.
container.scaleX = 0,3; container.scaleY = 0,3;
De afbeeldingen hebben een willekeurige positie op basis van het midden van het werkgebied. Daar gebruiken we Math voor.
container.x = stage.stageWidth / 4 + Math.floor (Math.random () * (stage.stageWidth / 4)); container.y = stage.stageHeight / 5 + Math.floor (Math.random () * (stage.stageHeight / 5));
Hiermee wordt een schaduwfilter gemaakt.
var shadowFilter: BitmapFilter = new DropShadowFilter (3, 90, 0x252525, 1, 2, 2, 1, 15); // Afstand, hoek, kleur, alpha, vervaging, sterkte, kwaliteit var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Pas het filter toe
Tijd om de kinderen toe te voegen, de volgorde waarin we ze toevoegen, is de volgorde die ze in de weergavelijst zullen innemen, dus zorg ervoor dat je ze op deze manier toevoegt.
infoArea.addChild (infoField); // Voegt het TextField toe aan de TextField Background container.addChild (frame); // Voegt het frame toe aan de container container.addChild (afbeeldingen [i]); // Voegt de afbeelding bovenop het frame toe in de containerinfoArea.visible = false; // We hebben de afbeeldingsinformatie standaard onzichtbaar gemaakt container.addChild (infoArea); // Voegt het informatiegebied toe bovenaan alles
Hoewel we de luisteraars eerder aan elke Sprite konden toevoegen, voeg ik ze toe nu ze in de container staan om u te laten zien hoe de displaylijst werkt.
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Dit is de afbeelding geladen door de XML, dit is het Loader-object container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Dit is de Frame container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Frame addChild (container); // Ten slotte voegen we de container toe aan het werkgebied
In de vorige stap hebben we twee luisteraars toegevoegd aan het frame van de afbeeldingen. Deze functies zorgen voor het slepen.
We gebruiken 'bovenliggend', omdat we alle objecten willen slepen, omdat het 'doel' de framespits is, het bovenliggende object de container.
privéfunctie dragImage (e: MouseEvent): void e.target.parent.startDrag (); private function stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Deze functie zorgt voor in- en uitzoomen. De luisteraar bevindt zich in het werkelijke beeld, dus klikken in het kader zal deze functie niet oproepen.
Opmerking van de uitgever: Om een of andere reden, de anders als () verklaring binnen deze zoomHandler-functie deed onze syntaxis markeerstift crashen. Omdat het niet op de pagina wil weergeven, heb ik de functie beschikbaar gemaakt voor downloaden. Excuses voor het eventuele ongemak, Ian.
Sommige acties moeten worden uitgevoerd wanneer de Tweens zijn voltooid, dit zijn die acties.
privéfunctie zoomInFinished (e: TweenEvent): void zoomed = true; // Wijzig de variabelen volgens de gebeurtenis canClick = true; tween.obj.getChildAt (2) .visible = true; // Stelt het informatiegedeelte in op visible private function zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (screen); // Hiermee wordt het zwarte scherm verwijderd tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Hiermee voegt u de luisteraar voor slepen terug naar de Sprite-frame
Ga terug naar de FLA en voeg toe Hoofd als de documentklasse in het eigenschappenvenster. Als u uw klas in een pakket opslaat, moet u ook de naam van het pakket toevoegen, bijvoorbeeld: yourpackage.Main
Test uw bestand en zie uw galerij aan het werk!
Probeer zoals altijd verschillende dingen in uw code om de galerij te maken zoals u wilt.
Ik hoop dat je deze tut leuk vond, bedankt voor het lezen!
Accentsconagua