Share
În acest tutorial vă voi explica cum să accesați și să utilizați Lista de Afișare în timp ce creați o galerie de imagini bazată pe XML cu ActionScript 3.0.
Folosind XML, vom încărca dinamic și vom obține informații despre imagini, le vom da o poziție centrală aleatorie, vom adăuga un cadru, vom adăuga funcții de tragere și, în fine, vom folosi un tween pentru a gestiona animația zoom.
Deschideți Flash și creați un fișier Flash nou (ActionScript 3).
Setați dimensiunea scenei la 600x350 și adăugați un gradient radial gri (#EEEEEE, #DDDDDD).
Vom adăuga o animație de preîncărcare pentru a spune utilizatorului când se încarcă conținutul. În acest caz, am folosit preloaderul inspirat de Apple pe care l-am creat înainte. Deoarece vom folosi doar animația, nu este nevoie să importați clasa sau să folosiți un identificator de export.
Plasați preloaderul pe scenă și centrați-l.
Vom încorpora un font, o sarcină foarte ușoară atunci când adăugăm un TextField pe scenă în IDE-ul Flash, dar puțin diferit folosind ActionScript.
Deschideți panoul Bibliotecă și faceți clic dreapta în zona de elemente fără a selecta unul, va apărea un meniu contextual.
Faceți clic pe "Font nou" pentru a deschide o fereastră de dialog, pentru a da un nume fontului dvs. și a le selecta pe cel pe care doriți să-l utilizați, după cum se arată în imaginea următoare.
Aceasta va crea o clasă a fontului pe care l-ați selectat, vom instanțializa acest lucru în pasul 9.
Să creăm fișierul XML.
Deschideți editorul preferat XML sau Text și scrieți:
Când ați terminat, salvați-l ca "images.xml" în folderul xml.
Codul pe care îl vom folosi va fi scris într-o singură clasă care va fi utilizată ca clasă de documente în fișierul FLA.
Creați un nou fișier ActionScript (Fișier> Nou)
Salvați-l ca "Main.as".
Vom începe cu:
clase de pachete
pachet cuvântul cheie vă permite să vă organizați codul în grupuri care pot fi importate de alte scripturi, este recomandat să le denumiți începând cu o literă mică și să utilizați intercaps pentru următoarele cuvinte, de exemplu: galleryClasses.
Dacă nu doriți să vă grupați fișierele într-un pachet sau dacă aveți doar o singură clasă, o puteți folosi direct din folderul sursă, dar ideea trebuie organizată.
import flash.display.Sprite; import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; importul flash.events.Event; import flash.filters.BitmapFilter; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import flash.text.TextField; import flash.text.AntiAliasType; importul flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent;
Acestea sunt clasele de care avem nevoie pentru a face această galerie. Dacă aveți nevoie de ajutor cu o anumită clasă, vă rugăm să folosiți Ajutorul Flash (F1).
clasa publică principală extinde MovieClip
extinde cuvântul cheie definește o clasă care este o subclasă a unei alte clase. Subclasa moștenește toate metodele, proprietățile și funcțiile, astfel încât le putem folosi în clasa noastră.
Vom folosi metode și proprietăți specifice MovieClip, astfel încât să le extindem folosind clasa MovieClip.
var xml: XML; // Obiectul XML care va analiza fișierul XML var: Array = new Array (); // Această matrice va stoca imaginile încărcate var imagesLoaded: int = 0; // Un contor, numără imaginile încărcate var imagesTitle: Array = Array nou (); // Proprietățile titlului fișierului XML var tween: Tween; // se ocupă de animația var zoom: Boolean = false; // Verifică dacă o imagine este mărită, false în mod prestabilit var canClick: Boolean = true; // Verifică dacă utilizatorul poate face clic pe o imagine pentru ao mări, adevărat în mod implicit var lastX: int; // Stochează proprietatea x a ultimei imagini pe care a fost dată clic pe var lastY: int; // Stochează proprietatea y a ultimei imagini pe care a fost făcut clic pe textformat var: TextFormat = new TextFormat (); // Un obiect TextFormat Object var: Sprite = Sprite nou (); // Un ecran negru pentru a se concentra asupra imaginii active var formatFont: Avenir = nou Avenir (); // Acesta este fontul încorporat
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă. Acest cod este primul care se execută când faceți o instanță a unui obiect sau când utilizați Clasa de documente.
În această funcție vom seta proprietățile obiectului TextFormat pe care îl vom folosi pentru a afișa un titlu sau o descriere a fiecărei imagini. Creați ecranul negru care apare atunci când utilizatorul face clic pe o imagine și apelează funcția care încarcă fișierul XML dorit.
funcția publică principală (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Utilizați aceeași mărime pe care ați folosit-o la încorporarea fontului din ecranul Library.graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stadiu.staj Lățime, stadiu.staj înălțime); screen.graphics.endFill (); loadXML ( "xml / images.xml");
Această funcție încarcă fișierul XML furnizat de parametrul "fișier". De asemenea, adăugăm un ascultător care să se ocupe de încărcarea completă.
funcția privată loadXML (fișier: String): void var urlLoader: URLLoader = nou URLLoader (); var urlReq: URLRequest = noua adresă URLRequest (fișier); urlLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);
Aici convertim fișierul XML încărcat într-un obiect XML valid utilizând parametrul "data" al URLLoader. Apoi vom folosi o instrucțiune "pentru" pentru a crea un Loader pentru fiecare imagine din XML. Informații suplimentare se găsesc în comentariu.
funcția privată handleXML (e: Eveniment): void xml = nou XML (e.target.data); pentru (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
Când un încărcător a încărcat o imagine din XML, se execută următorul cod:
funcția privată încărcată (e: Event): void imagesLoaded ++; // adaugă unul la variabila imagineLoaded dacă (xml.children (). Length () == imagesLoaded) // Când toate imaginile sunt încărcate ... removeChild (preloader); // Elimină preincarcatorul MovieClip prepareImages (); // Această funcție este explicată în pasul următor
Această funcție va adăuga cadrul, TextField pentru a afișa titlul sau descrierea, fundalul negru utilizat pentru acesta și Filtrul umbrelor. Să o luăm în parte.
funcția privată prepareImages (): void pentru (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
Acest lucru creează un cadru alb în jurul imaginii.
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, imagini [i]. lățime + 40, imagini [i] .height + 80); frame.graphics.endFill ();
Dreptunghiul va fi poziționat sub imagine pentru a fi utilizat ca cadru.
Acest lucru creează un dreptunghi negru în partea de jos a imaginii, unde va fi TextField.
infoArea.graphics.beginFill (0x111111, 0,75); infoArea.graphics.drawRect (0, 0, imagini [i]. lățime, 60); infoArea.graphics.endFill (); infoArea.y = imagini [i] .height - 60;
Următorul cod stabilește proprietățile TextField și adaugă conținutul acestuia.
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // Trebuie să adăugați acest lucru pentru a utiliza fontul încorporat infoField.antiAliasType = AntiAliasType.ADVANCED; // Această proprietate va afișa mai clar textul infoField.width = images [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // Conținutul, obținut din XML și stocat în Array
Aici setăm scara dorită a imaginilor. Deoarece totul va fi în interiorul containerului Sprite, trebuie doar să îl redimensionăm.
container.scaleX = 0,3; container.scaleY = 0,3;
Imaginile vor avea o poziție aleatorie bazată pe centrul zonei Stage. Folosim matematica pentru asta.
container.x = stadiu.clasă Lățime / 4 + Math.floor (Math.random () * (stage.stageWidth / 4)); container.y = stadiu.clasăHeight / 5 + Math.floor (Math.random () * (stage.stageHeight / 5));
Acest lucru va crea un filtru de umbra.
var shadowFilter: BitmapFilter = noul DropShadowFilter (3, 90, 0x252525, 1, 2, 2, 1, 15); // Distanța, unghiul, culoarea, alfa, neclaritatea, puterea, calitatea var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Aplicați filtrul
Este timpul să adăugăm Copiii, ordinea în care le adăugăm este ordinea pe care o vor lua în Lista de Afișare, așa că adăugați-le în acest fel.
infoArea.addChild (infoField); // adaugă TextField la containerul BackgroundForm TextField container.addChild (cadru); // Adaugă cadrul în containerul container.addChild (imagini [i]); // adaugă imaginea deasupra cadrului în containerul infoArea.visible = false; // Am setat informațiile despre imagine la container invizibil implicit container.addChild (infoArea); // Adaugă zona de informații în partea de sus a tot
Deși am putea adăuga ascultătorii la fiecare Sprite înainte, le voi adăuga acum că sunt în interiorul Containerului pentru a vă arăta cum funcționează Lista de Afișare.
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Aceasta este imaginea încărcată de XML, acesta este obiectul Loader container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Acesta este containerul container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Cadru addChild (container); // În cele din urmă, adăugăm containerul în scenă
În pasul anterior, am adăugat doi ascultători la Cadrul imaginilor. Aceste funcții vor avea grijă de tragere.
Folosim "părinte", deoarece dorim să tragem toate obiectele, deoarece "țintă" este Frame Sprite, obiectul parent este Container.
funcția privată dragImage (e: MouseEvent): void e.target.parent.startDrag (); funcția privată stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Această funcție este responsabilă pentru mărirea și micșorarea imaginii. Listenerul său se află în imaginea reală, astfel încât făcând clic în cadru nu va apela această funcție.
Nota editorului: Din anumite motive, altfel dacă () instrucțiunea în cadrul acestei funcții zoomHandler a făcut ca accidentele noastre de marcare a sintaxelor să se fi produs. Deoarece nu vrea să apară pe pagină, am pus la dispoziție funcția disponibilă pentru descărcare. Îmi pare rău pentru orice neplăcere, Ian.
Unele acțiuni trebuie executate atunci când Tweens-ul este terminat, acestea sunt acele acțiuni.
funcția privată zoomInFinished (e: TweenEvent): void zoomed = true; // Modificați variabilele în funcție de evenimentul canClick = true; tween.obj.getChildAt (2) .visible = adevărat; // Setează zona Informații la funcția privată vizibilă zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (ecran); // Elimină ecranul negru tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // adaugă ascultătorul de tragere înapoi la Frame Sprite
Du-te înapoi la FLA și adăugați Principal ca clasă de documente în panoul Proprietăți. Dacă salvați clasa într-un pachet, trebuie să adăugați și numele pachetului, cum ar fi: yourpackage.Main
Testați-vă fișierul și vedeți cum funcționează galeria dvs.!
Ca întotdeauna, încercați diferite lucruri în codul dvs. pentru a face galerie exact așa cum doriți.
Sper că ți-a plăcut acest tut, mulțumesc pentru lectură!
Accentsconagua