Lag en lysstyrke Editor i Action 3

Create en lysstyrke Editor i Actionscript 3
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Lysstyrke er en egenskap av visuell persepsjon der en kilde synes å være utstrålende eller reflekterer lys.

I denne opplæringen vil vi lære hvordan du endrer lysstyrken for en Skjerm objekt med Actionscript 3.




Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot:



Trinn 1: Kort oversikt

Bruke ColorTransform klasse og en Slider komponent vi vil øke eller redusere en Displayobject lysstyrke



Trinn 2:. Starte

Åpne Flash og opprette en ny Flash-fil (Actionscript 3)

Sett scenen størrelse til 500x350px og sette bildefrekvens til 24fps



Trinn 3:.. Velg en skjerm Object

Alle Displayobject kan brukes sammen med denne klassen; for eksempel jeg plukket et bilde fra Flickr.
Foto Chi kong

Plasser bildet i midten av scenen, konvertere den til MovieClip og gi den en forekomst navn image < .no>



Trinn 4:.. Lysstyrke Panel

Vi vil opprette et panel med en Slider komponent og et dynamisk tekstfeltet som interaktive objekter

Velg rektangel Primitive Tool (R) og tegne en 250x70px rektangel, satt hjørnet radius til 7 og endre sin alfa til 60.

Konverter det til MovieClip og legge til følgende filter:

Panelet bør se som dette:

Dobbeltklikk på MovieClip å angi redigeringsmodus og skape et dynamisk tekstfeltet; satt sin forekomst navn til bValue plakater (for "lysstyrke") og midt det. Gi det en innledende oppføring av 0
. Du kan også legge til en tittel til panelet og noen ikoner som en guide



Trinn 5:. Slider Component

Åpne Components panelet (Cmd /Ctrl + F7) og dra en Slider komponent til din Lysstyrke panel; sentrere den og gi den navnet slider



Trinn 6:. Component Inspektør

Med glidebryteren komponent valgt, trykker du Shift + F7 for å åpne Component Inspector panel og redigere alternativene som vist i bildet:



Trinn 7: Action

Opprett en ny Actionscript dokument og lagre det som Main.as
.

Vi kommer til å bruke et dokument klasse for dette prosjektet. Hvis du er usikker på hvordan du skal bruke et dokument klasse, lese denne rask innføring



Trinn 8:. Package
pakken {

Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts, anbefales det å navngi dem starter med en liten bokstav og bruke intercaps for påfølgende ord. For eksempel: myClasses

Hvis du ikke ønsker å gruppere filene i en pakke, eller har du bare én klasse du kan bruke den rett fra kilden mappen



Trinn 9:. Må Classes

Noen klasser er nødvendig for at dette skal fungere . For en mer detaljert beskrivelse om hver klasse, kan du se Flash Hjelp (F1)
import flash.display.Sprite;. Import fl.events.SliderEvent, import flash.geom.ColorTransform;



Trinn 10: Utvide Class

strekker
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår
public class Hoved strekker Sprite {



Trinn 11:. Variabler

Bare én variabel er nødvendig i dette eksempelet: en ColorTransform eksempel. Dette vil bli brukt til å endre RGB-verdiene av målet displayet objektet
Var colorTransform: ColorTransform = new ColorTransform ();



Trinn 12:. Constructor Funksjon

Denne funksjonen utføres når klassen er lastet

En SliderEvent lytteren blir lagt til Slider Component å kjøre en funksjon når brukeren endrer verdien av Slider
offentlig funksjon main ():.. void {panel.slider.addEventListener (SliderEvent.CHANGE, updateBrightness);}



Trinn 13: Color Transform

Denne funksjonen er utført når glidebryteren verdiendringer. Dette er den ColorTransform del. De røde, grønne og blå forskyvninger av fargen forvandle matrisen er satt til å matche verdien av glide
privat funksjon updateBrightness (e: SliderEvent): void {/* Sett RGB forskyvninger av glidebryteren verdien * /colorTransform. .redOffset = e.value; colorTransform.greenOffset = e.value; colorTransform.blueOffset = e.value;

Vil du vite hva vi gjør her? Sjekk ut denne artikkelen forklarer fargeforandringer



Trinn 14:.. Apply Changes

Denne linjen gjelder endringene i bildet på scenen
image.transform.colorTransform = colorTransform;



Trinn 15: Tekst Verdi

Teksten i lysstyrken panelet er også oppdatert
panel.bValue.text = e.value;}}}



. Trinn 16: Dokument Class

Gå tilbake til FLA filen og i Properties panelet stiller Class-feltet til Hoved
å koble den til dokument Class


<. h2> Konklusjon

Nå kan du enkelt implementere en måte å endre lysstyrken i et bilde eller annen skjerm objekt med Actionscript 3.

Takk for lesing!