Share
In deze zelfstudie leert u hoe u vanuit het niets een eenvoudige Image Rotator maakt met Flash, XML en ActionScript 3.0.
Deze beeldrotator is bijna volledig uit code alleen gemaakt.
Tijdens de eerste stappen zullen we de Fla-bestandseigenschappen instellen en enkele lettertypen insluiten om de beeldinformatie er beter uit te laten zien. We voegen ook een preloader toe om de automatische overgang van de afbeeldingen aan te geven.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3.0).
Stel de stage in op 600 x 300 px en de framesnelheid op 24 fps.
Om onze applicatie beter te kunnen bekijken, maken we gebruik van ingesloten lettertypen.
Open het Bibliotheekpaneel (Cmd + L) en klik met de rechtermuisknop in het itemgebied om een contextmenu te openen.
kiezen Nieuw lettertype en kies een lettertype dat je leuk vindt. Vergeet niet om de werkelijke grootte te selecteren die u in de film gaat gebruiken.
Ik heb Helvetica Bold gebruikt voor de afbeeldingstitel en FFF Harmony voor de beschrijving.
Een preloader MovieClip zal worden gebruikt als een indicatie van de voortgang, dit zal de gebruiker vertellen dat de afbeeldingen automatisch worden afgespeeld.
In dit voorbeeld heb ik de Apple Inspired Preloader gebruikt die we eerder hier op ActiveTuts + hebben gemaakt. We gebruiken de animatie gewoon, dus het is niet nodig om de code te kopiëren. Onze code zal naar de volgende afbeelding gaan telkens als de preloaderanimatie lus.
Het zou geen Image Rotator zonder afbeeldingen zijn, dus kies ze uit je persoonlijke verzameling of download een paar om te testen.
Dit zijn de afbeeldingen van de demo, verkregen van Flickr, allemaal met een Creative Commons-licentie.
Gras 01 van 100kr
diepe impact op de planeetkleur door spettacolopuro
Yosemite: herfstkleuren door tibchris
De grootte van de afbeeldingen is aangepast naar 600x300 px om in de filmgrootte te passen.
Een XML-bestand wordt door de toepassing geladen; dit bestand bevat alle informatie over de afbeeldingen, zoals Titel, URL van de afbeelding en Beschrijving.
Open je favoriete editor en schrijf:
Maak een nieuw ActionScript-document en sla het op als ImageRotator.as.
Dit zijn de vereiste klassen. Raadpleeg de Flash Help voor meer informatie over elke klas (druk F1 binnen Flash).
pakket import fl.transitions.Tween; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent; import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.text.AntiAliasType; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.Event; import flash.events.MouseEvent;
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 zullen onze documentklasse uitbreiden naar Sprite, omdat het geen tijdlijn nodig heeft.
public class ImageRotator breidt
Dit zijn de variabelen die we zullen gebruiken; elk wordt uitgelegd in de opmerkingen.
privé var xml: XML; // Slaat de xml-bestandsinfo op private var urlLoader: URLLoader; // Laadt de URL van het xml-bestand private var imagesVector: Vector.= nieuwe Vector. (); // Slaat de afbeeldingen op die zijn geladen in het Loader-object private var imagesCounter: int = 0; private var tween: Tween; privé var lastTarget: *; // Krijgt de laatstgeklikte afbeelding, in handmatige overgangsmodus private var tweening = false; private var infoCounter: int = 0; // Wijzigt de xml-info om persoonlijke var-infoPanel weer te geven: Sprite = nieuwe Sprite (); private var titleField: TextField = new TextField (); private var description: TextField = new TextField (); private var titleFormat: TextFormat = new TextFormat (); private var descriptionTF: TextFormat = new TextFormat (); privé var timer: Timer; private var preloader: Preloader = new Preloader (); // De Preloader in de bibliotheek private var added: Boolean; // Controleert of de preloader in de fase privé is var titleFont: Helvetica = new Helvetica (); // Instantiate Embedded fonts private var bitmapFont: Harmony = new Harmony ();
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 instantie van een object maakt of met behulp van de documentklasse uitvoert. In dit geval wordt dit de eerste code die wordt uitgevoerd wanneer onze SWF wordt gestart.
De beginparameters hebben standaardwaarden; hierdoor kunnen we de klasse gebruiken als een documentklasse en als een instantie.
De parameters zijn de URL van het XML-bestand en de tijd dat het Timer-object wacht om een overgang tussen afbeeldingen te maken; dit nummer moet zijn hoger dan de duur van de Tween-overgang (standaard een seconde).
public function ImageRotator (xmlPath: String = "images.xml", interval: int = 2000): void
Deze code gaat naar de constructor. Het start de timer, stelt de standaard tekstindeling in voor de tekstvelden en roept de functie loadXML aan.
timer = nieuwe Timer (interval); titleFormat.bold = true; titleFormat.font = titleFont.fontName; titleFormat.color = 0xFFFFFF; titleFormat.size = 14; descriptionTF.font = bitmapFont.fontName; descriptionTF.color = 0xEEEEEE; descriptionTF.size = 8; titleField.defaultTextFormat = titleFormat; titleField.autoSize = TextFieldAutoSize.LEFT; titleField.embedFonts = true; titleField.antiAliasType = AntiAliasType.ADVANCED; description.defaultTextFormat = descriptionTF; description.autoSize = TextFieldAutoSize.LEFT; description.embedFonts = true; loadXML (xmlPath);
Deze functie gebruikt het object URLLoader om het XML-bestand te laden dat is opgegeven in de parameter van de constructor. De parseXML-functie (in de volgende stap) is ingesteld om uit te voeren wanneer de belasting is voltooid.
private function loadXML (file: String): void urlLoader = new URLLoader (new URLRequest (file)); urlLoader.addEventListener (Event.COMPLETE, parseXML);
De xml-gegevens worden toegewezen aan het xml-object en er wordt een functie voor het laden van de afbeeldingen aangeroepen.
private function parseXML (e: Event): void xml = nieuwe XML (e.target.data); laad afbeeldingen();
Een for-statement wordt gebruikt om het aantal afbeeldingen in de XML te verkrijgen, laad de afbeeldingen met behulp van een Loader-object en sla deze Loader op in een Vector-object dat eerder is gedefinieerd. Wanneer de belasting van een afbeelding is voltooid, wordt de functie sortImages uitgevoerd.
persoonlijke functie loadImages (): void for (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(xml.children()[i].@src)); imagesVector.push(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sortImages);
Deze functie voegt de afbeeldingen toe aan het podium en sorteert ze; wanneer alle afbeeldingen zijn geladen, roept het de functies op die het informatiepaneel en de muisluisteraars maken.
private function sortImages (e: Event): void imagesCounter ++; for (var i: int = imagesVector.length - 1; i> = 0; i--) // ga achteruit ... addChild (imagesVector [i]); // ... zodat afbeeldingen aan het begin van de XML aan de voorkant terechtkomen if (imagesCounter == imagesVector.length) // Als alle afbeeldingen zijn geladen createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoChange); timer.start (); addPreloader (); addActions ();
We gebruiken een voor om de muisluisteraars op elke afbeelding in te stellen. Dit is een heel eenvoudige vorm van controle; wanneer de gebruiker op een afbeelding klikt, wordt de changeImage-handlerfunctie aangeroepen.
private function addActions (): void for (var i: int = 0; i < imagesVector.length; i++)//Gets the number of images //Sets the listener, changeImage function will be executed when an image is clicked imagesVector[i].addEventListener(MouseEvent.MOUSE_UP, changeImage);
Deze code wordt uitgevoerd wanneer de gebruiker op een afbeelding klikt. Lees de opmerkingen in de code voor meer informatie.
persoonlijke functie changeImage (e: MouseEvent): void timer.stop (); // Stop de timer als (toegevoegd) // Controleer of de preloader zich op het podium bevindt, indien waar, wordt verwijderd, als deze al is verwijderd, gebeurt er niets removeChild (preloader); added = false; if (! tweening) // Als een overgang niet aan de gang is lastTarget = e.target; // Haal de geklikte afbeelding op tween = nieuwe Tween (e.target, "alpha", Strong.easeOut, 1,0,1, true); // Start een overgang tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); // Het beeld verandert de diepte wanneer de overgang klaar is tweening = true; // Geeft aan dat een transitie bezig is infoCounter ++; // Wijzigt het onderliggende bestand dat wordt geladen vanuit de xml if (infoCounter> = xml.children (). Length ()) // Als de infoCounter groter is dan het totale aantal afbeeldingen infoCounter = 0; // Reset titleField.text = xml.children () [infoCounter]. @ titel; // Wijzigingen in tekstvelden toepassen description.text = xml.children () [infoCounter]. @ Omschrijving; else titleField.text = xml.children () [infoCounter]. @ titel; // Wijzigingen in tekstvelden toepassen description.text = xml.children () [infoCounter]. @ Omschrijving;
De overgang tussen afbeeldingen is gebaseerd op alpha-tween, dus u ziet de volgende afbeelding wanneer de overgang is voltooid. Als u er echter op klikt, klikt u op dezelfde afbeelding als voorheen, hoewel deze niet zichtbaar is. Dit zal dit oplossen.
private function changeDepth (e: TweenEvent): void // Wanneer de alpha is 0 setChildIndex (lastTarget, 0); // verplaats de afbeelding zodat deze achter de anderen staat lastTarget.alpha = 1; // Herstel de zichtbaarheid tweening = false; // Markeer de tween als voltooid
Hiermee wordt een semi-transparant venster gemaakt met tekst die is gegenereerd op basis van de titel- en beschrijvingstags van XML.
private function createInfoPanel (): void // Teken een zwarte rechthoek met 50% alpha infoPanel.graphics.beginFill (0x000000, 0.5); infoPanel.graphics.drawRect (0, 0, 600, 50); infoPanel.graphics.endFill (); // Plaats en stel de waarde van het titelveld titleField.text = xml.children () [infoCounter] in. @ titel; titleField.x = 5; titleField.y = 5; // Plaats en stel de waarde van het beschrijvingsveld description.text = xml.children () [infoCounter] in. @ Omschrijving; description.x = 7; description.y = 22; infoPanel.y = 250; // Plaats dit paneel onderaan // Voeg de kinderen infoPanel.addChild (titleField) toe; infoPanel.addChild (beschrijving); addChild (Infopaneel);
Deze code behandelt de automatische overgang; het wordt geactiveerd door de TIMER-gebeurtenis van het timerobject.
persoonlijke functie autoChange (e: TimerEvent): void infoCounter ++; // Wijzigt het onderliggende bestand dat wordt geladen vanaf de xml lastTarget = imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml]; // Krijgt de laatste afbeelding die is getweend tween = nieuwe Tween (imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml], "alpha", Strong .easeOut, 1,0,1, true); // Creëert een alfa-tween / * Dezelfde acties van de handmatige overgang, verander info etc. * / tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); tweening = true; if (infoCounter> = xml.children (). length ()) infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ titel; description.text = xml.children () [infoCounter]. @ Omschrijving; else titleField.text = xml.children () [infoCounter]. @ titel; description.text = xml.children () [infoCounter]. @ Omschrijving;
Dit stuk script voegt de preloader toe en plaatst deze.
private function addPreloader (): void added = true; preloader.scaleX = 0,08; preloader.scaleY = 0,08; preloader.x = (600 - preloader.width / 2) - 12; preloader.y = (300 - preloader.height / 2) - 12; addChild (preloader);
Hiermee is het ImageRotator klasse.
Er zijn twee manieren om deze klasse te gebruiken. Je kunt het in je code gebruiken als een instantie of als de documentklasse met de standaardparameters die we eerder hebben ingesteld.
Als u ervoor kiest om deze klasse te instantiëren en deze in uw code te gebruiken, is dit een voorbeeld van hoe u deze kunt gebruiken:
Accentsconagua
importeer ImageRotator; var ir: ImageRotator = new ImageRotator ("images.xml", 1100); addChild (ir); Op deze manier kunt u het xml-bestand dat moet worden geladen en het interval van de overgang instellen zonder de klassencode te hoeven bewerken.
Bekijk anders de volgende stap.
Ga in het .fla-bestand naar het eigenschappenvenster en schrijf ImageRotator in het veld Klasse. Vergeet niet dat dit de standaardparameters zal gebruiken.
Dit is slechts een voorbeeld van een beeldrotator en een goede manier om je eigen geweldige afbeeldingengalerij te maken.
Bedankt voor het lezen!
