Share
In deze Quick Introduction to Flash Professional-componenten gaan we kijken naar de ScrollPane en ColorPicker. Laten we erin duiken?
Bekijk de demo. Hierin ziet u aan de linkerkant twee componenten van de kleurkiezer, twee labels met het label "Aangepaste kleurkiezer" en "Normale kleurkiezer" en een blauwe rechthoek.
De Custom Kleurkiezer maakt gebruik van kleuren die uitsluitend zijn genomen uit een selectie van onze keuze. De normale kleurkiezer heeft alle kleuren van een gewone kleurenkiezer en wanneer een gebruiker een kleur kiest, veranderen we de rechthoek in de kleur die ze hebben gekozen.
Aan de rechterkant van de SWF bevindt zich een ScrollPane, waarin we een afbeelding laden, en een knop die we gebruiken om het laden van de afbeelding te starten.
Open een nieuw Flash-document en stel de volgende eigenschappen in:
Open het componentenvenster door naar Menu> Venster> Componenten te gaan of druk op CTRL + F7
Sleep twee ColorPickers, twee labels, een ScrollPane en een knop naar het werkgebied.
Geef in het venster Eigenschappen het eerste label de naam van het exemplaar aangepast label.
Als het deelvenster Eigenschappen niet wordt weergegeven, gaat u naar Menu> Venster> Eigenschappen of drukt u op CTRL + F3.
Stel de Label's X in op 16 en de Y op 12.
Geef het tweede label de instantienaam "normalLabel"; stel de X in op 16 en de Y op 176.
Geef de eerste ColorPicker de instantienaam "customColorPicker"; stel de X in op 16 en de Y op 41.
Geef de tweede ColorPicker de instantienaam "normalColorPicker"; stel zijn X in op 16 en zijn Y op 206.
Geef de tweede ScrollPane de instantienaam "imageScrollPane"; stel de X in op 277 en de Y op 29.
Geef de knop de instantienaam "loadImageButton"; stel de X in op 354 en de Y op 332.
Teken met het gereedschap Rechthoek een rechthoek op het werkgebied. Ik trok de mijne met een blauwe kleur. Selecteer de rechthoek en ga naar Menu> Wijzigen> Converteren naar symbool (of druk op F8); zet de naam op "vierkant" en zorg ervoor dat "Type" is ingesteld op MovieClip.
Geef het vervolgens een instantienaam van plein zoals we deden met de bovenstaande componenten. Stel de grootte in op 143x97 px, stel X in op 90 en Y in 47.
De ColorPicker is een geweldig klein onderdeel waarmee gebruikers een kleur kunnen selecteren. U kunt ook definiëren welke kleuren beschikbaar moeten zijn in de ColorPicker.
De component ScrollPane geeft DisplayObjects-, JPEG-, GIF- en PNG-bestanden weer, evenals SWF-bestanden, op een schuifbaar gebied. Wanneer de inhoud die u laadt te groot is voor de film, is dit een ideale component om te gebruiken.
Maak een nieuw ActionScript-bestand en geef het de naam Main.as. We zullen onze componenten in Main.as aangeven, dus we moeten "auto declare stage instances" uitschakelen; het voordeel hiervan is dat je code-hinting voor de instantie krijgt.
Ga naar Menu> Bestand> Publicatie-instellingen en klik op Instellingen naast Script [Actionscript 3.0]
Verwijder het vinkje bij "Stadium-instanties automatisch declareren".
Vervolgens openen we in Main.as de pakketverklaring en importeren we de klassen die we gaan gebruiken.
Voeg het volgende toe aan Main.as:
pakket // We verlengen MovieClip import flash.display.MovieClip; // Noodzaak om de componenten die we gebruiken te importeren, import fl.controls.ColorPicker; import fl.controls.Label; import fl.containers.ScrollPane; import fl.controls.Button; // De gebeurtenissen die we nodig hebben importeren flash.events.MouseEvent; import flash.events.Event; // Nodig om de kleur van de film te wijzigenClip import flash.geom.ColorTransform; // Nodig om afbeelding te importeren flash.net.URLRequest;
Voeg de klassenverklaring toe, zorg dat deze Movie Clip uitbreidt en stel onze constructorfunctie in. Hier verklaren we onze variabelen en noemen we onze functies bij de hoofdconstructeur.
Voeg het volgende toe aan Main.as
public class Main breidt MovieClip uit // Our onstage Components public var customLabel: Label; public var normalLabel: Label; public var customColorPicker: ColorPicker; public var normalColorPicker: ColorPicker; public var square: DisplayObject; public var imageScrollPane: ScrollPane; public var loadImageButton: Button; public function Main () setupLabels (); setupColorPickers (); setupButton ();
Hier definiëren we de functies die worden gebruikt in onze constructor.
In de setupLabels functie zetten we de tekst op de labels. In setupColorPickers we zetten de kleuren voor onze customColorpicker; deze kleuren zijn een reeks kleuren met de syntaxis van Flash voor hexadecimale kleuren. We voegen ook een gebeurtenislistener toe aan onze kleurkiezers, zodat wanneer een gebruiker een kleur kiest, de relevante functie wordt uitgeschakeld.
In de setupButton functie stellen we de eigenschap Label van de Button in en voegen we een Event Listener toe voor wanneer de gebruiker op de Button klikt.
Voeg het volgende toe aan Main.as:
private function setupLabels (): void // stelt de tekst van de labels in customLabel.text = "Aangepaste kleurkiezer"; normalLabel.text = "Normale kleurkiezer" persoonlijke functie setupColorPickers (): void // Hier stellen we de kleuren in voor de kleurkiezer customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Wanneer de gebruiker een kleur kiest, noemen we de changeColor-functie customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); private function setupButton (): void // Stelt het label van de knoppen in (de tekst op de knop) loadImageButton.label = "Afbeelding laden"; // Wanneer de gebruiker op de knop klikt, noemen we de loadImage-functie loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Hier coderen we de functies voor de gebeurtenisluisteraars die we hierboven hebben toegevoegd.
De verander kleur functie gebruikt a ColorTransform object zodat we de kleur van de rechthoek op het werkgebied kunnen wijzigen. We hebben de kleur van de ColorTransform ingesteld op de kleur die de gebruiker heeft geselecteerd e.target.selectedColor. Het doel is de ColorPicker waarvan de kleur net is gewijzigd. Vervolgens gebruiken we de transformeren eigendom van de plein filmClip en stel de colorTransform naar de geselecteerde kleur.
Accentsconagua
private function changeColor (e: Event): void // Noodzaak om een ColorTransform-object in te stellen om de Color var-kleur van de MovieClip te wijzigen: ColorTransform = new ColorTransform (); // stel de colorTransform-kleur in op de kleur die de gebruiker heeft gekozen in colorPicker color.color = e.target.selectedColor; // Verander de kleur van de filmClip met behulp van de ColorTransform square.transform.colorTransform = color; private function loadImage (e: Event): void // Laadt de afbeelding in de scrollPane imageScrollPane.load (nieuwe URLRequest ("image.jpg")); // sluit de klas af // sluit het pakket af Je zult het opmerken in de Componentparameters paneel (dat kan worden geopend vanuit het menu Venster) dat u kunt controleren en bepaalde eigenschappen kunt selecteren.
De bovenstaande afbeelding is voor de component ColorPicker.
De eigenschappen zijn als volgt voor de component ColorPicker:
De eigenschappen voor de ScrollPane zijn
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. De helpbestanden zijn een geweldige plek om meer over deze eigenschappen te leren.
Lees voor meer informatie over de eigenschappen voor labels en knoppen de Snelle tip over de onderdelen Knop en Label
