Share
In deze zelfstudie leren we hoe u AS3 kunt gebruiken om een RIA te maken die de kleureigenschappen van een afbeelding kan wijzigen, zoals Helderheid, Contrast, Tint en Verzadiging. Lees verder!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
We zullen een native ActionScript-klasse gebruiken die nieuwe waarden krijgt van een schuifcomponent en deze dan toepassen op de doelafbeelding met behulp van de klasse ColorMatrixFilter.
Start Flash en maak een nieuw document. Stel de stage in op 557x400 px en de framesnelheid op 24 fps.
De interface zal heel eenvoudig zijn; alleen een afbeelding in de fase die vervolgens wordt gewijzigd door de onderdelen van Schuifregelaars in het deelvenster Adjust Color.
We hebben een afbeelding nodig om onze applicatie te testen, kiezen uit uw persoonlijke verzameling of downloaden om te testen.
Dit is de afbeelding van de demo, verkregen van Flickr, met een Creative Commons-licentie.
Bloem door Antonio Manchado
Maak een paneel en vier schuifregelaars met instantienamen zoals te zien in de volgende afbeelding:
U kunt balken boven de schuifregelaars toevoegen om het uiterlijk te verbeteren.
Laten we de waarden van de Slider-componenten instellen.
Deze worden verkregen uit de minimale en maximale geldige waarden van de AdjustColor-klasse, die we zullen gebruiken om elke eigenschap aan te passen:
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Maak uw standaard klassenstructuur om te beginnen met het schrijven van uw code.
> pakket import flash.display.Sprite; public class Hoofd breidt uit openbare functie Main (): void // constructor code
Dit zijn de klassen die we moeten importeren voor onze klas om te werken; de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
import flash.display.Sprite; import fl.motion.AdjustColor; import flash.filters.ColorMatrixFilter; import fl.events.SliderEvent;
Dit zijn de variabelen die we zullen gebruiken; lees de opmerkingen in de code om meer over hen te weten te komen.
private var color: AdjustColor = new AdjustColor (); // Dit object bevat de kleureigenschappen private var-filter: ColorMatrixFilter; // Bewaart het gewijzigde kleurenfilter om de afbeelding te wijzigen
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse; deze code is de eerste die wordt uitgevoerd wanneer u een instantie van een object maakt, of in dit geval wordt deze uitgevoerd wanneer de SWF wordt geladen, omdat deze zich in de documentklasse bevindt.
Het zal de nodige acties uitvoeren om de applicatie te starten.
public final function Main (): void // Code
De kleurenmatrix wordt gegenereerd door de waarden die zijn opgeslagen in de AdjustColor-eigenschappen; we moeten de beginwaarden voor deze eigenschappen instellen om een correcte matrix te krijgen. Als we dit niet doen, wordt een array met nulwaarden gegenereerd.
/ * Benodigd om initiële Matrix * / color.brightness = 0 te maken; color.contrast = 0; color.hue = 0; color.saturation = 0; / * Deze functie voegt de nodige gebeurtenislisteners toe * / addListeners ();
Deze functie voegt toehoorders toe aan de Slider-componenten om bepaalde functies aan te roepen wanneer hun waarden veranderen.
private finale functie addListeners (): void colorPanel.brightSL.addEventListener (SliderEvent.CHANGE, adjustBrightness); colorPanel.contSL.addEventListener (SliderEvent.CHANGE, adjustContrast); colorPanel.hueSL.addEventListener (SliderEvent.CHANGE, adjustHue); colorPanel.satSL.addEventListener (SliderEvent.CHANGE, adjustSaturation);
Met deze functie wordt de helderheidswaarde aangepast, waardoor de gegevens uit de brightSL schuifcomponent.
private final-functie adjustBrightness (e: SliderEvent): void color.brightness = e.target.value; bijwerken();
Deze functie past de waarde van het contrast aan en haalt de gegevens uit de contSL schuifcomponent.
private finale functie adjustContrast (e: SliderEvent): void color.contrast = e.target.value; bijwerken();
Met deze functie wordt de Hue-waarde gewijzigd en worden de gegevens opgehaald uit de hueSL schuifcomponent.
private final-functie adjustHue (e: SliderEvent): void color.hue = e.target.value; bijwerken();
Wanneer u de tint van een kleur wijzigt, verplaatst u deze rond het kleurenwiel met het opgegeven aantal graden.
Met deze functie wordt de verzadigingswaarde aangepast, waardoor de gegevens uit de satSL schuifcomponent.
private laatste functie adjustSaturation (e: SliderEvent): void color.saturation = e.target.value; bijwerken();
Wanneer u de verzadiging van een kleur wijzigt, verplaatst u deze naar het midden van het kleurenwiel of weg van het centrum.
Deze functie wordt bij elke wijziging van de schuifregelaar opgeroepen. Het vernieuwt de ColorMatrixFilter waarde en past deze toe op de afbeelding in fase.
private final function update (): void filter = new ColorMatrixFilter (color.CalculateFinalFlatArray ()); image.filters = [filter];
We maken in deze tutorial gebruik van de documentklasse, als je niet weet hoe je het moet gebruiken of een beetje in de war bent, lees dan deze QuickTip.
U bent klaar om te testen - druk op Cmd + Return om uw toepassing te exporteren en hem te zien werken!
Je hebt een uitstekende techniek van beeldmanipulatie geleerd, ermee experimenteer!
Bedankt voor het lezen van deze tutorial. Ik hoop dat je het nuttig hebt gevonden!
Accentsconagua