Share
In deze tutorial leer je hoe je een effect creëert dat je zeker in de gaten heeft (bijvoorbeeld in bestanden zoals deze), de Pixel Explosion. Tijdens het maken van het proces leren we hoe we BitmapData kunnen extraheren uit een MovieClip, hoe een tweening-engine kan worden gebruikt en hoe gebeurtenislisteners kunnen worden gebruikt.
Laten we beginnen!
Het eerste wat we zullen doen is een AS3 flash-bestand maken. Daarna zullen we onze fase instellen op 400 px x 400 px en 30 fps. We zullen coderen op de tijdlijn om dingen eenvoudig te maken, maar degenen die in OOP programmeren, zijn welkom om deze code in klassen te schrijven. Je hebt een basiskennis van AS3 nodig om alle processen te begrijpen die deze tutorial met zich meebrengt; ik zal echter proberen het heel eenvoudig te houden. De blauwe zwevende knoppen zijn degene die je moet indrukken in je IDE. Het lijkt misschien eerst heel veel werk, maar het is echt heel simpel ...
We tekenen nu een vectorafbeelding van wat we nodig hebben. Je kunt echt elke afbeelding instellen met dit effect (.jpg, .png), maar vectoren zijn cooler. Zoals je zult opmerken, ben ik niet zo'n groot ontwerper. Het enige wat u hoeft te doen is uw afbeelding tekenen (of een jpg importeren van uw computer), selecteer het en converteer het naar een MovieClip (druk op F8 op Windows).
Zodra u uw afbeelding in een Movieclip hebt omgezet, kunt u deze voorbereiden op de code die erop is gericht. We maken een nieuwe laag voor de acties (1.) en geven deze een instantienaam van mcLogo (2.). Vervolgens importeren we de klassen voor gebruik in onze actieslaag. Voor dit effect hebben we een goede tweening-engine nodig. De beste die ik vond die zowel snelheid als stabiliteit aanpakt, is TweenMax. Je kunt het downloaden van http://blog.greensock.com/tweenmaxas3/ (doneer als je het leuk vindt). Vergeet niet de klassendirectory in dezelfde map als uw .fla te kopiëren (zoals u kunt zien in het blauwe vak). Importeer ten slotte de klasse TweenMax in uw tijdlijn (3.).
We gaan nu het stadium en onze belangrijkste variabelen instellen. We brengen de stage in lijn met de TOP_LEFT-hoek en stellen deze zo in dat de inhoud niet wordt geschaald. Aan de kant van de variabelen maken we een container die alle pixels bevat die zullen exploderen. We zullen ook een GlowFilter maken, dit is natuurlijk optioneel, maar het zal de awesomeness van het effect verbeteren. "Animeren" is een schakelaar die waar wordt wanneer het effect plaatsvindt en "pixelBMP" de bitmapgegevens van uw afbeelding is.
stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = nieuwe MovieClip (); var glow: GlowFilter = new GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animating: Boolean = false; var pixelBMP: BitmapData;
Vervolgens maken we herhaalvariabelen en wijzen we de positie van de pixelcontainer gelijk aan die van uw afbeelding.
var i: int = 0; var j: int = 0;
We extraheren nu de bitmapgegevens (pixelkleuren) uit de afbeelding die u hebt ingesteld (1.). Onthoud deze twee regels, ze helpen je ook bij andere projecten. We maken een nieuw symbool in de bibliotheek (2.) en klikken op de knop Geavanceerd. Eenmaal erop geklikt, selecteert u Exporteren voor Actionscript (3.). Zoek naar het Class-tekstveld en typ "myPixel".
Nu stellen we de pixelcontainer in. We voeren ons nieuw gemaakte pixeleffect in en maken een laag met de naam "actie".
Op de actielaag stellen we de bitmap in. Dit kleine stuk code helpt je elke keer dat je de bitmapData van een object wilt manipuleren (bijvoorbeeld met andere nuttige effecten zoals desaturatie en onscherpte).
pixelBMP = nieuwe BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)
Ik heb een cirkel gemaakt die de kleur van elke pixel bevat, maar je kunt deze aanpassen aan wat je maar wilt; vierkant, driehoek of zelfs een eenvoudige pixel. We voegen het pixelgloedeffect toe vanuit de functieparameter:
var orgX: int = 0; var orgY: int = 0; var bmpImg: Bitmap; functie setUpPixel (bdData: BitmapData, glow: GlowFilter) var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [glow]; addChild (mc);
We maken twee "voor" -instructies om alle pixels van onze afbeelding te dekken. De eerste voor (i) is voor verticaal en de tweede (j) voor horizontaal. De methode getPixel retourneert een eenheid die de kleur van de pixel op die positie weergeeft. Als het niet nul is, worden de bewerkingen in stap 9 gestart. We zullen de pixels twee voor twee overschrijden vanwege geheugenbeheer.
voor (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)
We beginnen met het toewijzen van de pixelkleur aan het gloeifilter. Vervolgens maken we een nieuwe myPixel die we pixel_mc noemen. We zullen de functie "setUpPixel" noemen die we tijdens stap 7 hebben gedefinieerd. Dit geeft de bitmapData door - 2 pixels breed, 2 pixels lang, de kleur van de huidige pixel, originalX, originalY en de glow-filter. Ten slotte voegen we deze pixel toe aan de pixelcontainer (regel 12)
voor (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2) if(pixelBMP.getPixel(j, i)>0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nieuwe BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), glow) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;
Kleine fouten zijn heel gebruikelijk bij het programmeren, daarom moeten we onze filmclip van tijd tot tijd testen. Dit geeft ons ons beeld, maar ook wat onscherpte. De waas is vanwege het gloeifilter, dus maak je daar geen zorgen. Zoals je misschien al weet, hebben we deze pixels niet nodig om zichtbaar te zijn, behalve wanneer ze ons effect hebben toegepast. Tot die tijd hebben we onze mooie afbeelding. Dus alles wat je moet doen in deze stap is regel 13 voor commentaar - pixelContainer.visible = false; en je krijgt je originele afbeelding terug.
We hebben de pixels op hun plaats, het enige dat we nu hoeven te doen, is hen animeren. Dit is waar TweenMax de scène betreedt. We starten de functie door het originele beeld onzichtbaar te maken en de pixels zichtbaar te maken. Vervolgens stellen we de originele afbeelding en de knop in die we later zullen maken (om de functie in te schakelen) bovenaan de index. Onthoud deze functie - setChildIndex (yourmc, numChildren-1) het zal je helpen bij andere projecten.
function explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;
Dit is waar de pixels tot leven komen. Het "voor" kruist elk kind van de pixelContainer. De pixel wordt geëxtraheerd via de getChildAt (i) methode. De xdest en ydest zijn enkele willekeurige bestemmingen waarnaar onze pixels zullen vliegen (omdat Math.random () een getal tussen 0 en 1 retourneert, is het nodig om het te vermenigvuldigen). Ten slotte voegen we de overgang en een type gemak toe via TweenMax.
Accentsconagua
