Share
În acest tutorial veți învăța cum să faceți un simplu Rotator de Imagini de la zero folosind Flash, XML și ActionScript 3.0.
Acest rotator de imagine este creat aproape în întregime numai din cod.
În primii pași vom seta proprietățile fișierului Fla și vom încorpora unele fonturi pentru a face ca imaginile să arate mai bine. Adăugăm, de asemenea, un preloader pentru a indica trecerea automată a imaginilor.
Deschideți Flash și creați un fișier Flash nou (ActionScript 3.0).
Setați dimensiunea scenei la 600 x 300 px și viteza cadrului la 24 de cadre pe secundă.
Pentru a avea o privire mai bună la aplicația noastră, vom folosi fonturile încorporate.
Deschideți panoul Bibliotecă (Cmd + L) și dați clic dreapta în zona de elemente pentru a afișa un meniu contextual.
Selectați Font nou și alegeți un font care vă place. Nu uitați să selectați dimensiunea reală pe care o veți utiliza în film.
Am folosit Helvetica Bold pentru titlul imaginii și FFF Harmony pentru descriere.
Un preincarcator MovieClip va fi folosit ca o indicatie a progresului, ceea ce va spune utilizatorului ca imaginile sunt redate automat.
În acest exemplu, am folosit Preloaderul Apple Inspired, pe care l-am creat înainte de acest lucru pe ActiveTuts +. Vom folosi animația, deci nu este nevoie să copiați codul. Codul nostru va trece la următoarea imagine de fiecare dată când buclele de animație preloader.
Nu ar fi un Image Rotator fără imagini, deci alegeți-le din colecția dvs. personală sau descărcați câteva pentru testare.
Acestea sunt imaginile de pe demo, obținute de pe Flickr, toate cu licență Creative Commons.
Iarba 01 de 100kr
impact profund asupra culorii planetei de către spettacolopuro
Yosemite: căderea culorilor de către tibchris
Imaginile au fost redimensionate la 600x300 px pentru a se potrivi dimensiunii filmului.
Un fișier XML va fi încărcat de aplicație; acest fișier va conține toate informațiile despre imagini, cum ar fi titlul, adresa URL a imaginii și descrierea.
Deschideți editorul dvs. preferat și scrieți:
Creați un nou document ActionScript și salvați-l ca ImageRotator.as.
Acestea sunt clasele necesare. Pentru o descriere mai detaliată despre fiecare clasă, vă rugăm să consultați Ajutorul Flash (Apăsați F1 în Flash).
pachet 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; importul flash.events.Event; importul flash.events.MouseEvent;
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 face ca clasa noastră de documente să extindă Sprite, deoarece nu are nevoie de o cronologie.
clasa publica ImageRotator extinde Sprite
Acestea sunt variabilele pe care le vom folosi; fiecare este explicat în comentarii.
privat var xml: XML; // Stochează informațiile despre fișierul xml privat var urlLoader: URLLoader; // Încarcă urlul fișierului xml privat var imagesVector: Vector.= Vector nou. (); // Stochează imaginile încărcate în obiectul Loader private var imagesCounter: int = 0; privat var tween: Tween; privat var lastTarget: *; // Obține ultima imagine clicată, în modul de tranziție manuală privat var tweening = false; privat var infoCounter: int = 0; // Schimbă informațiile xml pentru a afișa privat var infoPanel: Sprite = Sprite nou (); privat var titluField: TextField = TextField nou (); descriere privată var: TextField = TextField nou (); privat var titluFormat: TextFormat = new TextFormat (); privat var descriereTF: TextFormat = new TextFormat (); privat timer: Timer; private var preloader: Preloader = Preloader nou (); // Preloader-ul din biblioteca private var a adăugat: Boolean; // Verifică dacă preloader-ul se află în etapa private var titleFont: Helvetica = Helvetica nouă (); // Instantiate Fonturi încorporate private var bitmapFont: Harmony = Harmony nou ();
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 executați utilizând Clasa de documente. În acest caz, acesta va fi primul cod rulat atunci când începe SWF-ul nostru.
Parametrii inițiali au valori implicite; acest lucru ne va permite să folosim clasa ca o clasă de documente și ca o instanță.
Parametrii sunt adresa URL a fișierului XML și timpul în care obiectul Timer va aștepta să facă o tranziție între imagini; acest număr trebuie să fie superior decât durata tranziției Tween (o secundă implicită).
funcția publică ImageRotator (xmlPath: String = "images.xml", interval: int = 2000): void
Acest cod intră în constructor. Pornește Cronometrul, stabilește formatul de text implicit pentru câmpurile de text și apelează funcția loadXML.
timer = nou Cronometru (interval); titleFormat.bold = adevărat; 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);
Această funcție utilizează obiectul URLLoader pentru a încărca fișierul XML specificat în parametrul constructorului. Funcția parseXML (în pasul următor) este setată să se execute când încărcarea este completă.
funcția privată loadXML (fișier: String): void urlLoader = nou URLLoader (nou URLRequest (fișier)); urlLoader.addEventListener (Event.COMPLETE, parseXML);
Datele xml sunt atribuite obiectului xml și este apelată o funcție de încărcare a imaginilor.
funcția privată parseXML (e: Event): void xml = nou XML (e.target.data); loadImages ();
A pentru o declarație este folosită pentru a obține numărul de imagini în xml, pentru a încărca imaginile utilizând un obiect Loader și pentru a stoca acest Loader într-un obiect Vector, definit mai devreme. Când încărcarea unei imagini este completă, funcția sortImages este executată.
funcția privată loadImages (): void pentru (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);
Această funcție adaugă imaginile pe scenă și le sortează; când sunt încărcate toate imaginile, acesta apelează funcțiile care creează panoul de informații și ascultătorii mouse-ului.
funcția privată sortImages (e: Event): void imagesCounter ++; pentru (var i: int = imagesVector.length - 1; i> = 0; i--) // merge înapoi ... addChild (imagesVector [i]); // ... astfel încât imaginile de la începutul limbii XML să se termine în față dacă (imagesCounter == imagesVector.length) // Dacă toate imaginile sunt încărcate createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoChange); timer.start (); addPreloader (); addActions ();
Noi folosim a pentru pentru a seta ascultătorii mouse-ului la fiecare imagine. Aceasta este o formă foarte simplă de control; când utilizatorul face clic pe o imagine, funcția changeImage handler va fi apelată.
funcția privată addActions (): void pentru (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);
Acest cod va fi rulat atunci când utilizatorul face clic pe o imagine. Citiți comentariile din cod pentru detalii.
funcția privată changeImage (e: MouseEvent): void timer.stop (); // Opriți cronometrul dacă (adăugat) // Verificați dacă preloaderul este în stadiu, dacă este adevărat, îl elimină, dacă este deja eliminat, nu se întâmplă nimic removeChild (preloader); added = false; if (tweening) // Dacă o tranziție nu este în curs lastTarget = e.target; // Obțineți imaginea clicată tween = Tween nou (e.target, "alpha", Strong.easeOut, 1,0,1, true); // Începe o tranziție tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); // Imaginea își va schimba adâncimea atunci când se face trecerea tweening = true; // Indică o tranziție în curs de desfășurare infoCounter ++; // Schimbă copilul care va fi încărcat din xml dacă (infoCounter> = xml.children (). Lungime ()) // Dacă infoCounter este mai mare decât numărul total de imagini infoCounter = 0; // Resetați titlulField.text = xml.children () [infoCounter]. @ titlu; // Aplicați modificările câmpurilor de text description.text = xml.children () [infoCounter]. @ Descriere; altceva titleField.text = xml.children () [infoCounter]. @ titlu; // Aplicați modificările câmpurilor de text description.text = xml.children () [infoCounter]. @ Descriere;
Tranziția dintre imagini se bazează pe alfa tween, astfel încât veți vedea imaginea următoare când tranziția sa terminat. Cu toate acestea, dacă faceți clic pe el, faceți clic pe aceeași imagine ca înainte, deși nu este vizibilă. Asta va rezolva asta.
schimbarea funcției privateDepth (e: TweenEvent): void // Când alfa este 0 setChildIndex (lastTarget, 0); // mutați imaginea astfel încât să fie în spatele celorlalți lastTarget.alpha = 1; // Restaurați vizibilitatea lui tweening = false; // Marchează completatul ca fiind completat
Acest lucru va crea un panou semi-transparent, cu text generat din etichetele Titlu și descriere XML.
funcția privată createInfoPanel (): void // Desenați un dreptunghi negru cu 50% alpha infoPanel.graphics.beginFill (0x000000, 0.5); infoPanel.graphics.drawRect (0, 0, 600, 50); infoPanel.graphics.endFill (); // Poziționați și setați valoarea câmpului titlul titleField.text = xml.children () [infoCounter]. @ titlu; titleField.x = 5; titleField.y = 5; // Poziționați și setați valoarea descrierii câmpului description.text = xml.children () [infoCounter]. @ Descriere; description.x = 7; description.y = 22; infoPanel.y = 250; // Poziționați acest panou în partea de jos // Adăugați copii infoPanel.addChild (titleField); infoPanel.addChild (descriere); addChild (infoPanel);
Acest cod se ocupă de tranziția automată; acesta este declanșat de evenimentul TIMER al obiectului Timer.
funcția privată autoChange (e: TimerEvent): void infoCounter ++; // Schimbă copilul care va fi încărcat din xml lastTarget = imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". // Obtine ultima imagine care a fost adaugata tween = new Tween (imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". .easeOut, 1,0,1, true); // Crează un alfa tween / * Aceleași acțiuni ale tranziției manuale, schimbării informațiilor etc. * / tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); tweening = adevărat; dacă (infoCounter> = xml.children () lungimea ()) infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ titlu; description.text = xml.children () [infoCounter]. @ Descriere; altceva titleField.text = xml.children () [infoCounter]. @ titlu; description.text = xml.children () [infoCounter]. @ Descriere;
Această bucată de script adaugă și plasează preloaderul.
funcția privată 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);
Acest lucru completează ImageRotator clasă.
Există două modalități de a utiliza această clasă. Puteți să-l utilizați în codul dvs. ca instanță sau ca clasă de document cu parametrii impliciți pe care i-am setat anterior.
Dacă alegeți să instanțiați această clasă și să o utilizați în codul dvs., acesta este un exemplu de utilizare a acesteia:
Accentsconagua
import ImageRotator; var ir: ImageRotator = noul ImageRotator ("images.xml", 1100); addChild (ir); În acest fel, puteți seta fișierul xml pentru a fi încărcat și intervalul de tranziție fără a fi nevoie să editați codul de clasă.
Altfel, consultați pasul următor.
În fișierul .fla, accesați panoul Proprietăți și scrieți ImageRotator în câmpul Clasă. Amintiți-vă că acest lucru va utiliza parametrii impliciți.
Acesta este doar un exemplu de rotație a imaginii și o modalitate bună de a începe să vă creați propria galerie de imagini grozavă.
Vă mulțumim pentru lectură!
