Utvid Flash Application Bruke Kontekst Menu

Extend Flash Application bruke hurtigmenyen
Del
Del
Del
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

En Context Menu er en meny i et grafisk brukergrensesnitt som vises på brukermedvirkning, for eksempel et høyre museklikk. The Flash Player kontekstmenyen kan du legge til egendefinerte menyelementer, kontrollere visningen av innebygde elementer kontekstmenyen (for eksempel Zoom inn og trykk) og lage kopier av menyer.

I denne opplæringen, vi vil lære å dra nytte av disse elementene




Endelig resultat Forhåndsvisning

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

Høyreklikk på de ulike områdene av SWF å se hvordan endringer innholdsmeny



Trinn 1:. Kort oversikt

Vi vil gjøre bruk av contextmenu klasse for å lage et program som viser de forskjellige metoder og egenskaper i denne klassen



Trinn 2:. Opprett nytt dokument

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

Sett scenen størrelsen til 600x300 og legge en svart radial bakgrunn (# 555555 til # 252525)



Trinn 3:. Legg Target movieclips

Vi vil skape fire movieclips som vil hver viser en annen kontekst menyen når du høyreklikker.

Velg rektangelverktøyet (R) og lage fire kvadrater av 100x100 px hver, med noen skriftlig inne. Konvertere dem til å skille MovieClip symboler og justere dem til hjørnene av scenen; bruke bildet nedenfor som en veiledning. Instansnavn er i kursiv



Trinn 4:.. Legg enkle instruksjonene

Legg til litt tekst til scenen for å indikere for brukeren hvilke tiltak som skal utføre



Trinn 5: Lag dokument Class

Opprett en ny Actionscript dokument og lagre det som Main.as
. Dette vil danne vårt dokument klasse. Hvis du er usikker på hvordan du skal bruke et dokument klasse, kan du lese denne Quick Tips



Trinn 6:. Begynne å skrive Document Class

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

Hvis du ikke vil ha. å gruppere filer i en pakke eller du bare har én klasse kan du bruke den rett fra kilden mappen
pakke {



Trinn 7:. Import Obligatoriske Classes

Vi vil gjøre bruk av følgende klasser, så importere dem i dokumentet klassen:
import flash.display.Sprite, import flash.ui.ContextMenu, import flash.ui.ContextMenuItem, import flash.events.ContextMenuEvent; import flash.net. navigateToURL, import flash.net.URLRequest;



Trinn 8:. Extend Sprite

Vi kommer til å bruke Sprite-spesifikke metoder og egenskaper, slik at vi utvide den klassen
public class Hoved strekker Sprite {



Trinn 9: Definer variabler

Dette er de variablene vi vil bruke. De er i utgangspunktet contextmenu og ContextMenuItem tilfeller Twitter /* Når en contextmenu elementet er opprettet kan du spesifisere. Navnet på varen, om du vil bruke en skillelinje, om elementet skal være aktivert som standard, og om det er synlig til brukeren * /var builtInItems: contextmenu = new contextmenu (); Var customItemEnabled: contextmenu = new contextmenu (); Var customEnabled: ContextMenuItem = new ContextMenuItem ('ActiveTuts +'); Var customItemDisabled: contextmenu = new contextmenu (); Var customDisabled : ContextMenuItem = new ContextMenuItem (Deaktivert Element ", false, false); Var linkedItem: contextmenu = new contextmenu (); Var linkText: ContextMenuItem = new ContextMenuItem ('Gå til TutsPlus.com", true); Var textCM: contextmenu = ny contextmenu ();



Trinn 10: Skriv main () Constructor Funksjon

Denne funksjonen utføres når klassen er lastet. Det kaller funksjoner som vil håndtere de contextmenu elementene
offentlig funksjon main (). Void {handleBuiltIn (); handleCustom (); handleDisabled (); handleLink (); handleClipboard ();}

Vi skal skrive disse funksjonene i de neste trinnene



Trinn 11: Skriv handleBuiltIn () Funksjon

Dette er funksjonen som håndterer bygget. -in elementer. Her tar vi builtInItems, en contextmenu vi definert tidligere, må du fjerne den innebygde elementer, og angi den som kontekstmenyen for den innebygde firkantet symbol
privat funksjon handleBuiltIn (). Void {builtInItems.hideBuiltInItems (); //Skjuler alle elementer innebygde meny (unntatt Settings) builtIn.contextMenu = builtInItems;}

Du kan se en liste over de innebygde menyelementer her

Alternativt kan du aktivere /deaktivere. spesifikke menyelementer ved hjelp av builtInItems eiendom som vist i følgende kode:
Var defaultItems: ContextMenuBuiltInItems = myContextMenu.builtInItems; defaultItems.print = true; //Du kan erstatte "print" med en gyldig standard kontekst menyvalget

Igjen, besøk livedocs.adobe.com for en liste over slike elementer



Trinn 12:. Legg et tilpasset element

For å legge til en egendefinert objekt til kontekstmenyen, vil vi gjøre bruk av to av de variablene vi opprettet
privat funksjon handleCustom (). void {customItemEnabled.customItems.push (customEnabled); //Legger customItemEnabled ContextMenuItem verdi til contextmenu eksempel custom.contextMenu = customItemEnabled; //Setter contextmenu forekomsten til MovieClip}

Som du ser, kan vi presse () en ContextMenuItem på en hurtigmeny er customItems
eiendom, fordi det er en matrise.



Trinn 13: Legg en funksjonshemmet Varen

Den samme handlingen er utført av denne funksjonen, men ved hjelp av customItemDisabled
parameter i ContextMenuItem
privat funksjon handleDisabled (). void {customItemDisabled.customItems.push (customDisabled); disabled.contextMenu = customItemDisabled;}

Dette gjør elementet ser nedtonet og klikkes



Trinn 14: Legg en handling

Vi vet hvordan du legger til en egendefinert element. til listen kontekstmenyen, så langt kan den brukes som en melding eller et varsel, men det vil være mer nyttig hvis en handling kan utføres når den klikkes. La oss se hvordan du gjør det
//En nettside vil bli åpnet når menyen er clickedprivate funksjon handleLink (). Void {linkedItem.customItems.push (linkText); //husker vi satt teksten i denne linken tidligere linkText.addEventListener (ContextMenuEvent.MENU_ITEM_SELECT, onMenuSelect); link.contextMenu = linkedItem;} private funksjon onMenuSelect (e: ContextMenuEvent): void {navigateToURL (ny URLRequest ('http://tutsplus.com'))}



Trinn 15: Endre Clipboard Context Menu

ContextMenuClipboardItems klassen bestemmer hvilke elementer er aktivert eller deaktivert på utklippstavlen kontekstmenyen. Disse innstillingene brukes når ContextMenu.clipboardMenu = sant og når objektet med fokus er ikke en Textfield
privat funksjon handleClipboard (). Void {textCM.clipboardMenu = true; textCM.clipboardItems.selectAll = false; contextmenu = textCM;.}

Legg merke til at disse innstillingene kun gjelder i Flash Player 10, så kan ikke brukes i Flash CS3 (de vil føre en kompilator feil hvis du prøver å bruke dem)



Steg 16:. Dokument Class

Gå tilbake til FLA filen og i Properties panelet stiller Class-feltet til "Main" for å gjøre dette dokument Class



Konklusjon

Tilpasse Context Menu i filmer eller programmer kan utvide funksjonaliteten i en meget brukervennlig måte, prøv det!

Takk for lesing!