Share
I denna snabba introduktion till Flash Professional-komponenter kommer vi att titta på ScrollPane och ColorPicker. Låt oss dyka in?
Kolla in demoen. I vänster sida ser du två färgväljare komponenter, två etiketter märkta "Custom Color Picker" och "Normal Color Picker" och en blå rektangel.
Den anpassade färgväljaren använder färger som uteslutande utförs av ett urval av våra val. Normal färgväljaren har alla färger i en vanlig färgväljare och när en användare väljer en färg ändras rektangeln till den färg de har valt.
På höger sida av SWF finns en ScrollPane, där vi laddar en bild och en knapp som vi använder för att initiera laddningen av bilden.
Öppna ett nytt Flash-dokument och ställ in följande egenskaper:
Öppna komponentfönstret genom att gå till Meny> Fönster> Komponenter eller tryck CTRL + F7
Dra två ColorPickers, två etiketter, en ScrollPane och en knapp till scenen.
På Egenskaper-panelen ge den första etiketten förekomstnamnet custom.
Om Egenskaper-panelen inte visas går du till Meny> Fönster> Egenskaper eller trycker på CTRL + F3.
Ställ etiketten X till 16 och dess Y till 12.
Ge den andra etiketten förekomstnamnet "normalLabel"; ställ dess X till 16 och dess Y till 176.
Ge den första ColorPicker förekomstnamnet "customColorPicker"; ställ dess X till 16 och dess Y till 41.
Ge den andra ColorPicker förekomstnamnet "normalColorPicker"; ställ dess X till 16 och dess Y till 206.
Ge den andra ScrollPane förekomstnamnet "imageScrollPane"; ställ dess X till 277 och dess Y till 29.
Ge Knappen förekomstnamnet "loadImageButton"; ställ dess X till 354 och dess Y till 332.
Använd rektangelverktyget för att rita en rektangel på scenen. Jag ritade min med en blå färg. Välj rektangeln och gå till Meny> Ändra> Konvertera till symbol (eller tryck på F8); ställa in namnet på "square" och se till att "Type" är inställt på MovieClip.
Ange sedan ett förekomstnamn på fyrkant som vi gjorde med komponenterna ovan. Ställ in storleken till 143x97px, sätt dess X till 90 och dess Y till 47.
ColorPicker är en bra liten komponent som gör det möjligt för användare att välja en färg. Du kan också definiera vilka färger du vill ha i ColorPicker.
ScrollPane-komponenten visar DisplayObjects, JPEG, GIF och PNG-filer, liksom SWF-filer, i ett rullbart område. När innehållet du laddar är för stort för filmen är det en idealisk komponent att använda.
Skapa en ny ActionScript-fil och ge den namnet Main.as. Vi kommer att förklara våra komponenter i Main.as så vi måste stänga av "auto deklarera sceninstanser"; Fördelen med att göra detta är att du får koden antyder för förekomsten.
Gå till Meny> Arkiv> Publicera inställningar och klicka på Inställningar bredvid Skript [Actionscript 3.0]
Avmarkera "Automatisk deklarera sceninstanser".
Nästa, i Main.as öppnar vi paketdeklarationen och importerar de klasser vi ska använda.
Lägg till följande i Main.as:
paket // Vi förlänger MovieClip importera flash.display.MovieClip; // Behöver importera komponenterna vi använder import fl.controls.ColorPicker; importera fl.controls.Label; importera fl.containers.ScrollPane; importera fl.controls.Button; // De händelser vi behöver importera flash.events.MouseEvent; importera flash.events.Event; // Behöver du ändra färg på movieClip importera flash.geom.ColorTransform; // Behövs att ladda bild import flash.net.URLRequest;
Lägg till klassdeklarationen, gör det förlänga filmklippet och sätt upp vår konstruktörsfunktion. Här förklarar vi våra variabler och ringer våra funktioner i Main Constructor.
Lägg till följande på Main.as
public class Main utökar MovieClip // Våra onstage-komponenter public var customLabel: Etikett; allmänhet var normalLabel: Etikett; public var customColorPicker: ColorPicker; allmänheten var normalColorPicker: ColorPicker; public var square: DisplayObject; public var imageScrollPane: ScrollPane; public var loadImageButton: Button; allmän funktion Main () setupLabels (); setupColorPickers (); setupButton ();
Här definierar vi de funktioner som används i vår konstruktör.
I setupLabels funktion vi ställer in texten på etiketterna. I setupColorPickers Vi ställer in färgerna för vårt customColorpicker; Dessa färger är en uppsättning färger med Flash-syntax för hexadecimala färger. Vi lägger också till en händelseloggare på våra färgplockare så att när en användare väljer en färg släcker vi av den aktuella funktionen.
I setupButton funktionen ställer vi in egenskapen Knappens etikett och lägger till en händelselysare för när användaren klickar på knappen.
Lägg till följande i Main.as:
privat funktion setupLabels (): void // Sätter etiketterna texten customLabel.text = "Anpassad färgväljare"; normalLabel.text = "Normal färgväljare" privat funktion setupColorPickers (): void // Här ställer vi in färgerna för färgväljaren customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // När användaren väljer en färg kallar vi funktionen changeColor customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); privat funktion setupButton (): void // Ställer in knappens etikett (texten på knappen) loadImageButton.label = "Ladda bild"; // När användaren klickar på knappen kallar vi loadImage funktion loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Här kodar vi funktionerna för evenemangslyttarna som vi lagt till ovan.
De ändra färg funktionen använder a Colortransform objekt så att vi kan ändra färgen på rektangeln på scenen. Vi ställer ColorTransforms färg på den färg som användaren valt med hjälp av e.target.selectedColor. Målet är ColorPicker vars färg just ändrats. Då använder vi omvandla egenskapen hos fyrkant movieclip och sätt på colortransform till den valda färgen.
Accentsconagua
privat funktion changeColor (e: Event): void // Behöver du skapa ett ColorTransform Object för att ändra MovieClip Color var-färg: ColorTransform = new ColorTransform (); // ställa färgtransformatfärgen till färganvändaren plockad i colorPicker color.color = e.target.selectedColor; // Ändra filmklippets färg med hjälp av ColorTransform square.transform.colorTransform = color; privat funktion loadImage (e: Event): void // Laddar bilden i scrollPane imageScrollPane.load (ny URLRequest ("image.jpg")); // stäng ut klassen // stäng ut paketet Du kommer att märka i Komponentparametrar panel (som kan öppnas från fönstermenyn) som du kan kontrollera och välja vissa egenskaper.
Ovanstående bild är för ColorPicker-komponenten.
Egenskaperna är följande för ColorPicker-komponenten:
Egenskaperna för ScrollPane är
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. Hjälpfilerna är ett bra ställe att lära dig mer om dessa egenskaper.
Om du vill lära dig mer om egenskaperna för etiketter och knappar ska du kolla in Snabbtipset på knapparna och etikettkomponenterna
