Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial is voor het eerst gepubliceerd in juli 2009.
Preloaders zijn een must in je Flash-applicaties. Ze vertellen de gebruiker dat het programma wordt uitgevoerd, maar kunnen geen inhoud weergeven totdat ze voldoende zijn geladen. In deze tutorial help ik je een op Apple geïnspireerde preloader MovieClip te maken en leer je hoe je laadinformatie kunt weergeven. Dit alles met behulp van Flash en ActionScript 3.0.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
We gaan een preloader MovieClip maken met behulp van Flash-tools zoals het Primitive Tool voor rechthoeken en iets heel belangrijks om de juiste uitlijning te krijgen: de optie Snap To Objects. De clip wordt in de tijdlijn verplaatst en we bouwen de code in twee klassen. De eerste klas zorgt voor de preloader en de andere klasse voor de documentklasse, waar we de preloader starten.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Stel de stage-afmetingen in op de gewenste afmetingen en voeg een achtergrondkleur toe. Ik heb 600 x 300 px groot gebruikt en een grijs radiaal verloop toegevoegd (# 666666, # 333333).
Deze preloader is samengesteld uit één eenvoudige vorm die 12 keer wordt herhaald.
Selecteer het primitieve gereedschap Rechthoek en stel de hoekradius in op 15, zorg ervoor dat u de hoekradiusregelaar vergrendelt, zodat elke hoek even afgerond is.
Zet de kleur op wit en teken een rechthoek van 25 x 85 px, gebruik geen streek.
Dat is het, dit is de basisvorm die het belangrijkste deel van onze preloader zal zijn.
Gebruik het paneel Uitlijnen om de eerder gemaakte vorm in het midden boven in het werkgebied in te stellen.
Dupliceer de vorm (Cmd + D) en lijn deze uit met de onderkant in het midden.
Dupliceer beide vormen en ga vervolgens naar Modify> Transform> Rotate 90?.
Hier komt het lastige gedeelte, selecteer het gereedschap Vrije transformatie en zorg ervoor dat je de optie Magnetisch aan objecten hebt geselecteerd (dit is het magneetpictogram in de werkbalk of je kunt naar Beeld> Snappen> Magnetisch naar objecten) gaan. Begin met het roteren van de bovenste en onderste vormen, je zult merken dat de rotatie stopt bij elke bepaalde hoek, we zullen twee stops gebruiken om de vormen van elkaar te scheiden, en eindigen in zoiets als dit:
We zullen de alpha-eigenschappen van de vormen wijzigen om het "volg" -effect te krijgen dat we zoeken. Er zijn 12 vormen, dat is iets meer dan 8 maar om het gebruik van decimalen te vermijden, stellen we 9 in 8 veelvouden in en voor de laatste 3 voegen we er 10 toe. Dit geeft ons alpha-waarden van 8, 16, 24? 72, 80, 90, 100. Bekijk de afbeelding om het idee te krijgen.
Converteer alle vormen naar één MovieClip en noem deze "Preloader". Schakel het selectievakje Exporteren voor Actionscript in en schrijf "classes.Preloader" in het klassetekstveld. Dubbelklik op de clip om toegang te krijgen tot de tijdlijn. Het animatieproces is heel eenvoudig; voeg een nieuw hoofdframe toe en roteer de vormen totdat de 100% alpha-vorm op de positie staat waar de 8-voudige alfavorm was. Herhaal dit totdat je de volledige animatie hebt. De frames moeten in deze volgorde staan:
Omdat de animatie gebaseerd is op tijdlijnen, is de snelheid afhankelijk van de frames per seconde van je film, de mijne is 25 fps en ik heb 2 frames per staat gebruikt.
Onze preloader is 300 x 300 px groot, normaal zou hij niet zo groot zijn, maar het is goed om de optie te hebben. Kies een geschikte maat voor je preloader en centreer hem op het podium. Ik koos 48 x 48 px.
Maak een dynamisch tekstveld en geef het de instantienaam "info". Hiermee wordt de totale te laden KB weergegeven, het aantal dat momenteel is geladen en het percentage dat wordt weergegeven. Schrijf wat tekst om een idee te krijgen van de grootte die het zal gebruiken en centreer het.
Maak een nieuw ActionScript-bestand en begin met het importeren van de vereiste klassen:
pakketklassen import flash.display.MovieClip; import flash.text.TextField; import flash.events.Event; import flash.events.ProgressEvent;
public class Preloader extends MovieClip
Omdat onze preloader een MovieClip is en deze een tijdlijn gebruikt, breiden we deze klasse uit met de MovieClip-klasse.
We hoeven slechts één variabele in deze klasse te gebruiken. Deze variabele slaat de instantienaam op van het tekstveld dat we gebruiken om de laadinformatie te tonen.
private var dataTextField: TextField;
public function start (dataTextField: TextField): void this.dataTextField = dataTextField; // Stelt de dataTextField var in op de parameterwaarde / * Het loaderInfo Object is verantwoordelijk voor het laadproces, in deze code voegen we luisteraars toe om de voortgang te controleren en wanneer de film volledig is geladen * / this.loaderInfo.addEventListener (ProgressEvent. PROGRESS, onProgress); this.loaderInfo.addEventListener (Event.COMPLETE, onComplete);
private function onProgress (e: ProgressEvent): void / * Hier gebruiken we enkele lokale variabelen om beter leesbare code te maken * / var loadedBytes: int = Math.round (e.target.bytesLoaded / 1024); var totalBytes: int = Math.round (e.target.bytesTotal / 1024); var percent: int = (e.target.bytesTotal / e.target.bytesLoaded) * 100; / * Stelt de laadgegevens in op het tekstveld * / dataTextField.text = String (loadedBytes + "of" + totalBytes + "KB Loaded \ n" + percent + "% Complete");
Accentsconagua
private function onComplete (e: Event): void / * Remove listeners * / this.loaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); this.loaderInfo.removeEventListener (Event.COMPLETE, onComplete); // Hier kun je een functie toevoegen om iets specifieks te doen, ik heb zojuist een trace * / trace gebruikt ("Loaded!"); Maak een nieuw ActionScript-bestand en begin met schrijven:
pakketklassen import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main (): void / * Start de preloader, "preloader" is de instantienaam van de clip * / preloader.start (info);
Deze code wordt de documentklasse, dus ga terug naar het .Fla-bestand en voeg "classes.Main" toe aan het klassetekstveld in het eigenschappenvenster..
U kunt altijd de kleur van de preloader wijzigen om deze te gebruiken met verschillende achtergronden, een eenvoudige manier om dat te doen is de Tint-waarde in de eigenschappen van de clip te wijzigen, probeer het!
Bedankt voor het lezen, voel je vrij om opmerkingen en vragen achter te laten.
