Share
Je moet toegeven dat wanneer je een product met de naam Flash gebruikt, je de neiging hebt om flitsen te krijgen en te overdrijven. Het ding is de ware kunst van de Flash-ontwerper ligt niet in het produceren van overweldigende in-your-face presentaties of effecten. De ware kunst ligt in het terugbellen naar de Flashiness Meter en het besef dat het de kunst van subtiliteit Dat is belangrijk. Niet de Flash.
Dat brengt ons bij het onderwerp van deze tutorial op beginnersniveau ... water aan het doen.
Voordat we gaan, laten we volkomen duidelijk zijn met elkaar. Er zijn enkele tientallen manieren om te doen waar ik het over ga hebben in deze tutorial. Sterker nog, ik verwacht ten volle dat het opmerkingenveld aan het einde van dit stuk wordt gevuld met een aantal berichten die me in wezen vertellen, Dat is niet de manier waarop ik het zou doen. Waarschijnlijk niet, en ik heb daar geen probleem mee en verwacht het. In feite is deze tutorial gebaseerd op een voorbeeld Lee Brimelow, een Flash Platform Evangelist voor Adobe toonde me voor het eerst een paar jaar geleden.
Lee en ik hebben allebei een opmerkelijk vergelijkbare kijk op het werken met ActionScript. In plaats van naar een leeg deelvenster Acties te kijken, vinden we het allebei belangrijk dat je als beginner een codevoorbeeld (zoals we hier aanbieden) vangt en ermee begint te spelen. Op deze manier leer je wat een heleboel dingen doen. Academici noemen dit proces 'steigers', wat een mooie term is voor het leren van een basisvaardigheid en het opbouwen van je kennis ervan.
Zoals ik al zei, dit is echter een tutorial op beginnersniveau die is ontworpen om een aantal zeer interessante ActionScripts te demonstreren die gebruik maken van verplaatsingskaarten, filters en Perlin Noise om waterrimpels te creëren. Het hele punt van deze oefening is eigenlijk om een andere, anders ingewikkelde code te presenteren en je te laten zien waar je wat plezier mee kunt hebben. Wanneer code leuk begint te worden, ben je goed op weg naar volledige OOP-glorie. In feite, mijn medewerker hier bij Activetuts +, doet Cadin Batrack precies dat met veel van de technieken die hier in zijn zelfstudie worden gepresenteerd. Creëer een statisch vervormingseffect met behulp van het verplaatsingskaartfilter.
Nu we elkaar begrijpen, laten we subtiel worden en wat rimpelingen maken.
De afbeelding die we gaan gebruiken, is een opname van de Medici-fontein in de Jardin du Luxembourg in Parijs, Frankrijk. Het plan is om die plas water in beweging te brengen met behulp van Flash.
Waarom hebben we een plan van aanpak nodig? Flash doet geen waterrimpelingen. In deze specifieke benadering kun je simpelweg niet het watergebied selecteren met een selectiegereedschap in Flash en, gebruik bijvoorbeeld ActionScript, Jiggle deze selectie rond.
Voor Flash naar schud een selectie rond je moet de afbeelding in een BitMapData-object plakken, de pixels in dat object rond verplaatsen met behulp van de DisplacementMapFilter en dan wat Perlin Noise op het filter toepassen om de rimpelingen te creëren. Voordat je dat doet, moet je een reis maken naar Photoshop of Fireworks.
Dit kan zowel in Fireworks als in Photoshop worden gedaan. De sleutel is om de afbeelding te dupliceren en het water in de maskeerlaag te maskeren of te verwijderen. Bewaar het bestand als een .png of .psd-afbeelding en stop. Zoals je misschien hebt vermoed, is de ongemaskeerde laag van cruciaal belang voor het succes van dit project.
Maak een nieuw Flash ActionScript 3-document. Voeg twee nieuwe lagen toe met de naam "Masker" en "acties". Hernoem Layer 1 naar "Image" en vergrendel de laag "actions". Op dit punt ga ik een beetje een filiaal doen omdat het importeren van Photoshop- en Fireworks-afbeeldingen in Flash twee afzonderlijke technieken zijn.
Wanneer het dialoogvenster Importeren wordt geopend, selecteert u de laag Fontein en selecteert u Filmclip maken voor deze laag. Doe geen moeite met de naam van het exemplaar, we doen dat zodra de lagen het podium raken. Wanneer het bestand wordt geïmporteerd, ziet u dat de maskerlaag een bitmap is en dat de Fountain-laag nu een filmclip is.
Wanneer het dialoogvenster Importeren wordt geopend, zorgt u ervoor dat Importeren als platte bitmap niet is geselecteerd.
Fireworks importeert een .png die niets meer is dan een tijdelijke aanduiding. Als u de map Firework Objects opent, ziet u dat het document zich in een eigen map bevindt, meestal 'Pagina één', omdat u met Fireworks meerdere pagina's in één document kunt hebben. Als u die map opent, ziet u de twee bitmaps en een filmclip. Open de filmclip en stel de lagen in met behulp van de instructies uit stap 3. Converteer de Fountain-laag naar een filmclip.
Selecteer de Fountain-filmclip op de tijdlijn en geef deze de instantienaam "photo". Sluit alle drie de lagen en sla het bestand op.
De code die je gaat schrijven is vrij eenvoudig. Zoals ik al eerder zei, kun je Flash niet vertellen om een selectie te maken en deze te laten schudden. In het geval van deze code gaan we de pixels in de fontein-filmclip schudden. Dit vereist dat u:
Als je subtiel bent, lijkt het wriemelen op stromend water in plaats van een tsunami of een teerput ...
Laten we beginnen:
Voer de volgende code in:
var bmd: BitmapData = nieuwe BitmapData (800.535); var dmf: DisplacementMapFilter = new DisplacementMapFilter (bmd, new Point (0,0), 0,2,10,60);
We beginnen met het maken van een BitmapData-object dat overeenkomt met de grootte van de afbeelding die moet worden bewerkt. Onthoud dat Flash niet precies de helderste kaars in de boom is. Er moet verteld worden wat te doen. In dit geval vertel je het om een verzameling pixels te maken die overeenkomt met de afmetingen van de afbeelding en deze te plakken in een object met de naam "bmd".
Nu het dit "bmd ding" heeft, moet het worden verteld wat te doen met de pixels in het object. De volgende regel doet precies dat.
De DisplacementMapFilter gebruikt de grijswaarden van een RGB-kanaal, inclusief alpha, en gebruikt deze om een afbeelding te vervormen (in dit geval een reeks bitmapgegevenspixels) op basis van de waarden die uit de parameters van het filter zijn getrapt. De parameters zijn als volgt:
Er zijn drie andere parameters die u kunt toevoegen, maar die hier niet nodig zijn. Zij zijn:
Maak de variabelen die moeten worden gebruikt bij het maken van het rimpeleffect:
var pt1: Point = new Point (0,0); var pt2: Point = new Point (0,0); var perlinOffset: Array = [pt1, pt2];
addEventListener (Event.ENTER_FRAME, loopIt);
We hebben dit nodig om het water te laten schudden. Dit gebeurt dankzij het filter Verplaatsing dat de waarden in de parameter Point () met dezelfde snelheid als uw film wijzigt. In mijn geval is de framesnelheid ingesteld op 30 fps, wat betekent dat de waarden 30 keer per seconde worden gewijzigd.
Schrijf de functie loopIt:
function loopIt (evt: Event): void perlinOffset [0] .x + = 0.5; perlinOffset [1] .y + = 0.1; bmd.perlinNoise (400,5,3,2, false, false, 2, waar perlinOffset); photo.filters = [dmf]; ;
De eerste twee regels stellen de waarden in die worden gebruikt door Punt() parameter in de DisplacementMapFilter, omdat de afspeelkop de toename van de x- en y-waarden doorloopt. De waarden die ik koos, waren het resultaat van veel testen totdat ik het gewenste effect had bereikt.
De derde regel past de methode perlinNoise toe op het bitmapobject dat is gemaakt in regel 1 van de code. Laten we de parameters doornemen:
De eerste twee cijfers zijn de baseX en baseY waarden - 400, 5 - die de frequentie van de ruis op de x- en y-as bepalen. Hoe lager het getal, hoe gedetailleerder het geluid zal zijn. Als vuistregel kan het baseX-nummer worden ingesteld op de breedte van de afbeelding. Ik vond 800 een beetje veel, dus heb ik het tot 400 gekozen. Het verschil in detail was te verwaarlozen.
Het derde cijfer, 3, is het numOctave parameter. Hoe hoger het cijfer, hoe gedetailleerder de willekeurige ruis. Het nadeel is een hit op verwerkingskracht en een mogelijke snelheidsvermindering van het effect. Dit was niet voor het web bestemd, dus 3 lijkt prima te werken. Het gebruik van de waarde 1 heeft de pixels echt niet zoveel verplaatst. Het volgende nummer, 2, is het randomSeed parameter.
De twee Booleaanse waarden zijn de steek en fractalNoise parameters. Een echte waarde voor steek effent de randen van eventuele herhaling die kunnen optreden - hier niet nodig. De fractalNoise-waarde bepaalt of de ruis fractaalruis (true) of turbulentie (false) is. De valse waarde - turbulentie - is geschikt voor watereffecten zoals rimpelingen of vuur.
De volgende waarde, 2, is de channelOptions parameter. Deze waarde bepaalt in welke van de vier kleurkanalen de ruis wordt toegepast.
De Booleaanse waarde, false, is de greyscale parameter. Had ik false gebruikt, dan zou het kleurkanaal gespecificeerd in de parameter channelOptions gebruikt kunnen worden om de ruis te genereren. Met true vertelt Flash dat ik de grijstinten wil gebruiken .
De laatste parameter,perlinOffset, is de reeks punten die moet worden gebruikt om de ruis in elk octaaf van het effect te compenseren.
De laatste regel - photo.filters = [dmf]; - past het verplaatsingsfilter, met de Perlin Noise, toe op de afbeelding in het foto-exemplaar.
Sla de film op en test deze.
In deze tutorial op beginnersniveau heb ik je door het gebruik van ActionScript laten lopen om rimpeling in een fontein in Parijs te creëren. Zoals je kunt zien, was er niet zoveel code bij betrokken en veel ervan was redelijk ongecompliceerd.
Wat echt belangrijk voor je is, is dat je bij het verkennen van ActionScript en Flash duidelijk begrijpt dat de meeste codewaarden getallen of Booleaanse waarden zijn. Wat je moet doen is niet bang zijn om "Wat als ..." -games te spelen. Dit zijn de spellen waarin je je afvraagt: "Wat als ik dit aantal zou veranderen, wat zou er dan gebeuren?" Voel je zelfs vrij om te spelen met alle getallen in de DisplacemantmapFilter en perlinNoise (). Je kunt een aantal nogal fascinerende effecten krijgen, variërend van het oooze van een teerput tot het water, alsof er een aardbeving aan de gang is.
Heb wat plezier!
Accentsconagua