Create en Dra og slipp Puzzle i Actionscript 3.0
13
Del
3
Del

Denne Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Dra og slipp er virkningen av å klikke på en virtuell objektet og dra det til et annet sted eller på en annen virtuell objekt. Generelt kan det brukes til å påberope mange typer av handlinger, eller lage ulike typer assosiasjoner mellom to objekter.

I denne opplæringen vil vi skape en dra og slipp matchende spillet ved hjelp av Actionscript 3.
< p>

Trinn 1: Kort oversikt

Ved hjelp av Actionscript 3, vil vi gjøre flyttbare movieclips som vil bli droppet i MovieClip mål, vi skal sjekke hvis målet korrekt ved hjelp av hitTestObject metoden

Trinn 2:.. Starte

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

Sett scenen størrelse til 450x300 og legge en svart bakgrunn (# 1B1B1B)

Trinn 3:.. Drabare Klipp

Vi trenger noen movieclips å dra, jeg har brukt noen av de Envato Market logoer

konvertere dem til movieclips og sette sine forekomstnavn:

Trinn 4: Drop Target

En MovieClip vil bli brukt som en dråpe mål for hver flyttbare klipp, vil et enkelt rektangel gjøre jobben.

Konverter rektangelet MovieClip og kopiere det (Cmd + D) for å matche antall flyttbare gjenstander.

De forekomstnavn vil være navnet på den flyttbare klipp, pluss Target
, forlate oss med denTarget, oceanTarget, etter osv

Trinn 5: Guider

La oss legge til noen guider for å hjelpe brukeren å finne ut hva å gjøre.

En tittel som vil fortelle brukeren hva
å gjøre med elementene i skjermbildet.

Et ikon for å fortelle brukeren hvor
for å gjøre det

nøkkelord for å fortelle brukeren der
å matche objektene

Trinn 6:.. Action Tid

Opprett en ny Action Document og lagre det som "Main.as"

Trinn 7:.. Må Classes

Denne gangen trenger vi bare et par klasser
pakke {import flash.display.Sprite; import flash.events.MouseEvent;
Trinn 8:. Utvide Class

Vi kommer til å bruke Sprite spesifikke metoder og egenskaper, slik at vi utvider med Sprite Class
public class Hoved strekker Sprite {
Trinn 9: Variabler

Dette er de variablene vi vil bruke, forklarte i kommentarfeltet
Var XPOS. int; //Lagrer de første x positionvar yPos: int; //Lagrer innledende y posisjon
Trinn 10: Main Funksjon

Denne funksjonen utføres når klassen er lastet
offentlig funksjon main (). Void {addListeners (hi, hav, jungel, elv, skog); //En funksjon for å legge til lytterne til klipsene i parametrene}
Trinn 11: Posisjon Funksjon

En funksjon for å få den posisjonen de movieclips, vil dette hjelpe oss tilbake MC til sin opprinnelige posisjon når dråpen målet sitt feil eller no drop målet ble truffet
privat funksjon getPosition (mål: Object):. void {XPOS = target.x; yPos = target.y;}
Trinn 12:. Begynn Drag

Denne funksjonen gjør det mulig å dra til klippet med lytteren
privat funksjon dragObject (e: MouseEvent): void {getPosition (e .mål); e.target.startDrag (true);}
Trinn 13: Stopp Drag

Den neste funksjonen stopper å dra når museknappen slippes, det sjekker også om objektet er i riktig dråpe målet.
privat funksjon stopDragObject (e: MouseEvent): void {if (e.target.hitTestObject (getChildByName (e.target.name + "Target"))) //Sjekker riktig fallet target {e.target.x = getChildByName (e.target.name + "Target") x.; //Hvis det er riktig, plassere klippet i samme posisjon som målet e.target.y = getChildByName (e.target.name + "Target") y.; } Else {e.target.x = XPOS; //Hvis ikke, går du tilbake klippet til sin opprinnelige posisjon e.target.y = yPos; } E.target.stopDrag (); //Stop dra}
Trinn 14: Lyttere

Legger lytterne til klippene i parameterne ved hjelp av ... resten argument
private funksjons addListeners (... objekter). Void { for (var i: int = 0; i < objects.length; i ++) {gjenstander [i] .addEventListener (MouseEvent.MOUSE_DOWN, dragObject); objekter [i] .addEventListener (MouseEvent.MOUSE_UP, stopDragObject); }}
Trinn 15:. Dokument Class

Gå tilbake til FLA filen og i Properties Panel legge til "Main" i klassen feltet for å gjøre dette til dokument Class

Konklusjon

Nå vet du hvordan du enkelt kan lage en dra mål, kan dette være svært nyttig for spill og programmer. Lag din egen dra app og ta dette konseptet videre!

Takk for lesing!