Share
Een kleurkiezer is een toepassing, meestal te vinden in grafische software en online, gebruikt voor kleurbeheer, het maken van kleurenschema's, kleuren kiezen en meer.
In deze zelfstudie leer ik u hoe u een aangepaste kleurkiezer in Flash maakt met ActionScript 3.0.
Als we een bestaande afbeelding gebruiken, extraheren we de kleurwaarden met de klasse ColorTransform en de positie Mouse. Vervolgens kunnen we de geretourneerde waarde toepassen op elk DisplayObject.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Zet de stage op 600x300 en stel de achtergrondkleur in op # D2D1D0.
Opmerking van de uitgever: Leuke screenshot Carlos: P
We maken een vak dat alle elementen van de Kleurkiezer bevat.
Teken een rechthoek van 217x174 px en vul deze met deze kleur: # A6A6A6.
Dupliceer nu de rechthoek (Cmd + D) maak het 215x172 px en vul het in met: #FAFAFA.
Herhaal het proces en vul de nieuwe rechthoek met: # E0E0E0.
Dit is de achtergrond van de kleurkiezer.
Deze kleurkiezer heeft twee kleurindicatoren, de ene geeft de actieve kleur weer en de andere de kleur die momenteel wordt geretourneerd door de muisbeweging.
Selecteer het gereedschap Rechthoek (R) en maak twee rechthoeken van 50x23 px in elke gewenste kleur. Ik heb zwart gebruikt om te contrasteren met de achtergrond. Converteer elke rechthoek naar MovieClip (F8) en stel de instantienamen in op "color" en "selectedColor".
We willen de hexadecimale waarde kennen van de kleuren weergegeven door de Kleurkiezer, dynamische tekstvelden zullen het werk doen.
Selecteer het tekstgereedschap (T) en maak twee dynamische tekstvelden naast elke kleurrechthoek. Ik heb dit tekstformaat gebruikt: Helvetica Neue 11pt, # 353535. Vergeet niet om de cijfers en het "#" -teken in te voegen in het eigenschapsmenu.
Noem de velden "colorHex" voor de linker en "sColor" voor de rechter.
We hebben een kleurenspectrum nodig om de kleurkiezer te maken. In mijn voorbeeld heb ik deze afbeelding van ColorTools gebruikt.
Pas het formaat van de afbeelding aan tot 200x130 px en teken een lineaire verloop van zwart naar wit aan de zijkant om een grijsschaal toe te voegen.
Converteer het volledige spectrum naar een MovieClip en noem het "spectrum".
Converteer alle clips naar een enkele MovieClip en stel de naam van het exemplaar in op "colorPicker".
Nu hebben we een object nodig om de gegevens uit de Kleurkiezer te gebruiken. Elk DisplayObject zal werken, in dit geval zal ik wat tekst gebruiken.
De TextField-instantie naam is "txt".
Maak een nieuw ActionScript-document en sla het op als "Main.as".
Dit zijn de klassen die we in deze klas zullen gebruiken. Raadpleeg de Flash Help (F1) voor specifieke hulp voor elke klas..
pakket import flash.display.Sprite; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent;
Deze code zal de klasse declareren en uitbreiden, we breiden deze uit met de klasse Sprite omdat we sommige van zijn eigenschappen en methoden gebruiken.
public class Main breidt uit
We gebruiken drie variabelen, uitgelegd in de opmerkingen over de code.
var bitmapData: BitmapData = nieuwe BitmapData (202,132); // Een Bitmap-gegevensobject, de grootte is gebaseerd op de kleurenspectrumgrootte var colorTransform: ColorTransform = new ColorTransform (); var hexColor: *; // Deze variabele slaat de bitmapkleurgegevens op
Dit is de hoofdfunctie.
public function Main (): void bitmapData.draw (colorPicker.spectrum); // Geeft de bitmapgegevens van het spectrum door aan de variabele / * Functie-listeners * / colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_MOVE, updateColorPicker); colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_UP, setValue);
Deze functie zal omgaan met de kleurwijzigingen wanneer de gebruiker de muis beweegt.
private function updateColorPicker (e: MouseEvent): void / * haalt de kleur uit de pixel waar de muis zich bevindt en geeft de waarde door aan de variabele colorTransform * / hexColor = "0x" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker .spectrum.mouseY) .toString (16); colorTransform.color = hexColor; / * Stelt de kleurtransformatiegegevens in de "kleur" -clip en het "colorHex" -veld in de ColorPicker * / colorPicker.color.transform.colorTransform = colorTransform in; colorPicker.colorHex.text = "#" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker.spectrum.mouseY). toString (16) .toUpperCase ();
Met deze functie stelt u de waarde in op de activeColor MovieClip en het sColor TextField in de kleurkiezer, evenals op het door de gebruiker geselecteerde doel.
persoonlijke functie setValue (e: MouseEvent): void txt.textColor = hexColor; // Dit is de doel colorPicker.selectedColor.transform.colorTransform = colorTransform; colorPicker.sColor.text = colorPicker.colorHex.text;
Ga terug naar het .Fla-bestand en voeg in het eigenschappenvenster "Hoofd" toe aan het veld Klasse om dit de documentklasse te maken.
Nu kunt u uw favoriete kleurenpalet of kleurenspectrum kiezen en het implementeren in een aangepaste kleurkiezer die is ontwikkeld met ActionScript 3.0. Probeer het!
Ik hoop dat je deze tut leuk vond, bedankt voor het lezen!
Accentsconagua