Lag en Dra og slipp MP3-spiller med Adobe AIR

Create en dra og slipp MP3-spiller med Adobe AIR
Del
Del
Del
Del

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

I denne opplæringen, vil vi lage en AIR dra og slipp mp3-spiller. Vi skal jobbe med NativeDragManager klassen til å håndtere dra og slipp, den NativeWindow klasse for spillelisten, og noen SQLLite å lagre informasjon om våre mp3-filer for å bygge en spilleliste.


< .no>


Vennligst oppgrader Flash Player





Trinn 1: Opprette en ny AIR Document

Start-Flash, opprette en ny Adobe AIR-dokument og lagre dokumentet som "drag_drop_mp3.fla"

Hvis du allerede har en blank Actionscript 3.0 dokument åpent, bare gå til kommandoer >.; AIR - Søknad og Installer innstillinger. Flash vil gi et varsel om at det vil målrette alle de nødvendige filene for deg. Klikk "Ok" på spørsmål, vil Flash deretter vise programmet publisere innstillinger. Klikk "OK" igjen og vi er klar til å starte

Trinn 2:. Sette opp Stage og Document Class

Gå til Fil > Ny og opprette en ny Actionscript-fil. Lagre tom fil som "drag_drop_mp3.as". I "Properties" panel, endre størrelse på scenen til 210 x 110 piksler. Neste, i "Document klassen" tekstboksen, skriv inn navnet på den nyopprettede Actionscript-fil; utelate filtypen

Trinn 3:. Opprette Player Bakgrunn

Velg rektangel verktøyet. I rektangel verktøyalternativene i "Properties" panel, klikker du på låsen for å låse den avrundede hjørner alternativet. Tast 5 for de øverste hjørnene og 0 for de nederste hjørnene. Sørg også for fyllfargen sort og gi hjerneslag en farge av #CCCCCC.

Deretter tegne et rektangel som er 200 x 100 piksler. Sørg for at ingenting er valgt. Velg bunnlinjen av hjerneslag og slette den. Nå, bør det være et rektangel med avrundede hjørner på toppen, firkantede hjørner i bunnen og et slag som brytes rundt toppen av rektangelet, men ikke bunnen. Hvis slaget blir hengende ned forbi bunnen av svart firkant, rett og slett dobbeltklikke på hjerneslag. Med slag valgt, i "Properties" -panelet, klikk på "Cap:" og velg "None". Velg torget og slag, deretter plassere dem på en x posisjon på 5 og ay posisjon på 2,5

Trinn 4:. Å gi Bakgrunn sitt utseende og

Velg hele rektangelet og hjerneslag, deretter traff F8 for å konvertere den til et symbol. Gjør det til en MovieClip og gi den et navn på "bakgrunn". I "Properties" panel, gi den nyopprettede MovieClip en forekomst navn av bakgrunn.

Dobbeltklikk på MovieClip å gå inn i redigeringsmodus. Velg hjerneslag og gå til Edit > Skjær å kutte hjerneslag ut. Så gå til Insert > Tidslinje > Lag for å skape et nytt lag. Når det nye laget er opprettet, kan du gå til Rediger > Lim på plass. Dette vil sette strek på det øverste laget. Lås hjerneslag lag. Deretter oppretter du en ny layer og plassere den mellom hjerneslag lag og rektangel lag. Nå velger rektangel, gå til Edit > Kopiere. Velg tom midterste laget og "Lim inn i stedet" en kopi av rektangelet. Med den nye rektangelet valgt, endre farge til noe lys (jeg bruker lys grønn) for å minne oss om at vi må endre denne fargen på et tidspunkt

Trinn 5:. Fortsetter med bakgrunns

Nå må vi legge et lag ontop av det grønne rektangelet lag. I dette laget, skape et svart 5 x 5 sirkel uten slag. Hit "Ctrl-k" for å få opp Juster alternativene. Med scenen ikon valgt, justerer sirkelen til øverste venstre hjørne av movieclips scenen. Med sirkelen valgt, holder du nede "Alt" og dra ut en annen forekomst av sirkelen. Plasser cirlce på 10 for x og 0 for y. Fortsett å dra nye kopier av sirkelen ut, plassere dem 10 piksler fra hverandre til du kommer til enden av den grønne rektangelet.

Nå velger alle kretser, hold nede "Alt" og drar ned nye kopier . Oppveie x posisjon av de nye sirklene av 5px og gi dem ay stilling 5. Fortsett å gjøre dette kopier /lim teknikk til hele grønne MovieClip er dekket. Slett noen sirkler som ikke dekker det grønne rektangelet.

Deretter velger alle sirklene i laget. Med alle sirklene valgt, kutte dem ut av laget. I det grønne rektangelet lag, "Lim inn i stedet" alle sirkler og velg bort alt. Dette vil slå hele laget i en form. Nå klikker du på keyframe i det grønne rektangelet lag å velge alt. Med alt valgt, holder du nede "Shift" på tastaturet og klikk på den grønne form. Dette vil fjerne merkingen av grønne rektangelet; slik at bare de svarte sirklene valgt. Deretter trykke "Delete" for å slette de svarte sirklene. Vi har nå det øverste laget av vår rist utseende. For å se dette, kan du slå av synligheten av det sorte laget under

Trinn 6:. Avslutte Bakgrunn

Det neste trinnet er å velge det grønne rektangelet. Kopier grønne rektangelet, og "Lim inn i Place" nederst svart rektangel lag. Når du limer på laget, vil du sannsynligvis få noen rare tomme hull. Bare fyll inn disse hullene med sort med maling bøtte verktøyet.

Når alle de svarte hullene er fylt opp, igjen sørge for at ingenting er valgt, slik at laget vil slå alt inn i en form. Klikk på den grønne delen av laget og slett. Nå skal vi ha et bunnlag av hull og lag over bør ha fyllet.

Deretter velger det grønne rektangelet i lag over de svarte sirklene. I "Color" panel, velg fyllfargevelgeren og velg svart til hvit sirkulær gradient. Endre fargen av det hvite enden til # 5E5E5E og gi den en alfa på 60%. Deretter velger du den svarte enden og gi det en alpha på 88%, og slå den inn i en MovieClip. Gi den en forekomst navnet "win-back". Nå i "Filter" panel, klikker du på plusstegnet og tilordne den en ny skrå filter. Gi bevel en for uskarphet x og y, en styrke på 50%, en kvalitet av høy, en vinkel på 210 og en avstand på 1. Slett alle tomme lagene, låse hvile og avslutte movieclips redigeringsmodus.

På scenen i hovedfilen, velg MovieClip og gå til "Filter" panel. I filtre panel, gi MovieClip en drop. Gi drop 4 for uskarphet x og y, en styrke på 66%, en kvalitet av høy, en vinkel på 90 og en avstand på 4.

Trinn 7: Bygge avspillingsknappene

Deretter velger rektangel verktøyet. I "Properties" panel, sørg for at alle de avrundede hjørnene er låst sammen med en verdi på 2,5. Trekke ut et rektangel som er ca 28,5 piksler brede og 19,5 piksler i høyden uten slag. I "Color" panel, velg den lineære svart til hvit gradient. Med den formen valgt, trykk "f" på tastaturet for å få opp "Gradient Transform Tool". Rotere gradient 90 grader, slik at det hvite er på toppen av formen. Justere farge glidere, slik at hver farge er omtrent halvveis. Nå dobbeltklikker du på den lille svarte firkanten og skriv i #BFBFBF som fargen.

Velg rektangel form og konvertere den til en MovieClip. Gi den et navn på "buttonBackground". Nå opprette et nytt lag over bakgrunnslaget. Dra ut tre forekomster av "buttonBackground" MovieClip. Gi det første en en x-posisjon på 41,2 og en y-posisjon til 76,8. Gi den andre en x posisjon på 42,8 og ay stilling 76,8. Gi den tredje en x posisjonen til 72,8 og ay stilling 76,8. Dette vil justere alle knappene til samme y posisjon og litt plass dem ut.

Neste med "Webdings" font, statisk tekst verktøyet, og på toppen av "buttonBackground" MovieClip, gi det første den symbol for "Forrige". Den midterste knappen har symbolet for "Play" og den siste knappen har symbolet for "Next". Velg alle nyopprettede tekstbokser, og trykke "Ctrl-b" til teksten er delt inn i former. Velg den første "buttonBackground" MovieClip og "Forrige" form og konvertere dem til et MovieClip. Gjør det samme for de to andre. Gi MovieClip en forekomst navnet igjen av "prevBtn". Deretter velger du MovieClip i midten, og gi det en forekomst navnet "" playBtn ". Til slutt velger du knappen til høyre og gi den en forekomst navnet "nextBtn"

Trinn 8:. The Playlist Button

Det neste trinnet er å opprette spillelisten knappen. Velg rektangel verktøyet. Gi det et avrundet hjørne på 5 og lage en form som er 80,5 piksler i bredden og 19,9 piksler i høyden. Gi formen samme fyllfarge som de tidligere opprettede knapper. Sett formen på 108,2 for x og 76,8 for y. Velg form og konvertere den til en MovieClip. Inne i nye MovieClip, velg type verktøy og skape et dynamisk tekstboks over formen som sier "Show spilleliste". Gjør tekstboksen 80,3 i bredde og 16,2 i høyden med en x stilling 0,0 og ay posisjon på 1,8.

Gi tekstboksen en forekomst navnet "ty". Gi MovieClip en forekomst navnet "playToggle"

Trinn 9:. Volum Slider

Nå skal vi lage volumskyveknappen. Velg linjeverktøyet, sørg for at fargen er satt til # 999999 og hjerneslag tykkelse er 1. Tegn en linje ut som er 45 piksler høy. Velg linjen og konvertere den til en MovieClip med en forekomst navnet "volControl". Deretter dobbeltklikker du på MovieClip å gå inn i redigeringsmodus. Kopier /lim linjen og endre fargen til hvit. Flytte linjen over 1 pixel. Neste velge rektangel verktøyet og sørge for at de avrundede hjørnene er satt til 0. Tegn et rektangel som er 10 piksler bred og 5 piksler i høyden. Plasser rektangel på -4,5 for x og 0 for y. Velg rektangel, konvertere den til en MovieClip og gi den en forekomst navnet "slider".

Med "slider" MovieClip valgt, gå til "Filter" panel og gi det en drop med en for uskarphet x og y, 66% for sin styrke, en kvalitet av høy, en vinkel på 90 og en avstand på 1. Endelig avslutte redigeringsmodus for MovieClip og på scenen av den viktigste filen, plasserer "volControl" MovieClip på 195,6 for x og 45,4 for y

Trinn 10:. Fullfører den øverste halvdelen av App

Det neste trinnet er å opprette to knapper. Den første knappen er for å minimere programmet, og den andre er for å lukke det.

Velg rektangel verktøyet, gi de avrundede hjørnene en verdi på 2, og lage en firkant som er 10,9 piksler. Bruke de samme fyll innstillingene som de andre knappene på scenen og konvertere den til en MovieClip. Dra ut to instanser for den nye MovieClip på scenen. Med "Webdings" font, plassere minimere karakter over en av de movieclips. Pause fra hverandre skriften til det blir en form, velge både ny form og MovieClip under den, og konvertere den til en knapp. Gi den nye knappen en forekomst navnet "mini", øks stilling 178,4 og ay posisjon på 5,5. Gjør det samme prosess for andre MovieClip, bare gi den en nær karakter, en x posisjonen til 190,4 og ay posisjon på 5,5.

Til slutt opprette en tom dynamisk tekstfelt på scenen. Gi tekstfeltet en forekomst navnet "tf", en farge av # 0000FF, en bredde på 188, en høyde på 14,1, en skriftstørrelse på 9, en justering av sentrum, en x-verdi på 11 og y-verdi på 20,3.

Trinn 11: Sette opp Play Button

Neste vi kommer til å sette opp evnen til å veksle på avspillingsknappen. Dobbeltklikk på "playBtn" MovieClip å gå inn i redigeringsmodus. Kontroller at "Play" karakter er på et eget lag. Gå til ramme 6 på "Play" tegn lag og traff F6 for å lage en ny keyframe. Slette "Play" karakter, og ved å bruke "Webdings" font, plassere en "Stopp" karakter der. Bryt tegnet hverandre før det blir en form.

Neste Klikk for å ramme ti og treffe F5 på begge lag. Nå kan du legge to flere lag over karakteren laget. På lag rett over karakter laget, plassere en keyframe på rammen 6 og utvide den til å ramme 10. Klikk tilbake til ramme 1, og i "Frame" tekstboksen, gi den en merkelapp på "play". Nå klikker å ramme seks og gi det en etikett med "stopp". Til slutt, på den øverste laget, trykk "F9" på tastaturet for å få opp handlinger panel. I handlinger panel, type:
stop ();

Nå vil vi være i stand til å veksle frem og tilbake avhengig av om du spiller en sang eller ikke

Trinn 12: The Playlist. Vindu

La oss lage spillelistevinduet. Vi vil være i stand til å styre dette vinduet senere fra Actionscript. Gå til Sett > New Symbol ... for å opprette et nytt symbol. Velg "Movie clip" og gi den et navn på "vindu". Neste, under "Kobling", sjekk "Export for Action" og gi den en klasse navnet "Window". Klikk "Ok", dette vil få opp en tom scene.

Deretter velger rektangel verktøyet. Nå, sørg for å låse opp de avrundede hjørner. Gi rektangel øverste hjørnene en verdi på 0 og de nederste hjørnene 5. Sørg for fyllfargen er svart og strøkfargen er #CCCCCC. Trekke ut et rektangel som er 200 piksler bred og 400 piksler høy. Velg rektangel og dens slag, deretter konvertere dem til et MovieClip. Gi MovieClip en forekomst navnet "windowBackground". Nå dobbeltklikker på MovieClip å angi modus sin redigering. Inne i MovieClip, gå gjennom trinn 3 - 6 igjen før MovieClip er lik den viktigste spilleren bakgrunn MovieClip. Også, akkurat som den første, sørg for å gi MovieClip med skrå en forekomst navnet "win-back".

Så nå, for å avklare, inne i "Window" klassen, det bør være en MovieClip med en forekomst navnet "windowBackground". Inside "windowBackground", bør det være en MovieClip med en forekomst navnet "win-back". Til slutt bør det ikke være noen forekomst av "Window" klasse på scenen i det hele tatt. Dette vil alle bli styrt dynamisk

Trinn 13:. Legge Datagrid Component

Vi bruker Datagrid komponent til å kontrollere vår spilleliste. I "Window" MovieClip klasse, legger et nytt lag. Fra komponenter panel, drar ut en forekomst av Datagrid. Gi den en forekomst navnet "grid" og en x posisjon på 10,8 og ay posisjon på 42,5. Endre størrelsen på Grid-komponenten til en bredde på 178 og en høyde på 314,9. Til slutt, i et nytt lag under grid komponent, skape en hvit firkant samme størrelse som Datagrid komponent. Dette er nyttig med noen åpenhet problemer at komponenten har uten å måtte Reskin det

Trinn 14:. Ferdigstillelse av Design

Det siste vi trenger å legge til Window er muligheten til å slette elementer fra ut spillelisten. Dra ut en kopi av "Show Playlist" -knappen. Gi MovieClip en forekomst navnet "deli", en x posisjon av 108,6 og ay posisjons av 366,9. Ikke bekymre deg om tekstboksen som sier "Show spilleliste", vil vi kontrollere at via Actionscript

Trinn 15:. Dokument Skeleton

Åpne opp blank Actionscript-fil som vi opprettet. Her er skjelettet for dokumentet klassen vi skal bruke
pakken {public class drag_drop_mp3 strekker Sprite {offentlig funksjon drag_drop_mp3 () {}}}
Trinn 16:. De Importen

Her er det import uttalelser om at vi skal bruke ..
import fl.controls.DataGrid; import fl.data.DataProvider; import flash.data.SQLConnection; import flash.data.SQLStatement; import flash.desktop.Clipboard; import flash.desktop.ClipboardFormats; import flash.desktop.NativeDragManager; import flash.display.MovieClip; import flash.display.NativeWindow; import flash.display.NativeWindowInitOptions; import flash.display.NativeWindowSystemChrome; import flash.display.NativeWindowType; import flash.display.SimpleButton; import flash.display.Sprite; import flash.display.Stage; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.events.NativeDragEvent; import flash.events.TimerEvent; import flash.filesystem.File; import flash.filters.DropShadowFilter; import flash.media.ID3Info; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.SoundMixer; import flash.media.SoundTransform; import flash.net.URLRequest; import flash.text.TextField; import flash.utils.Timer;
Trinn 17: variablene

.. og her er en liste over de variablene som vi skal bruke. Vi skal bruke en SqlConnection å mate informasjon om våre mp3-filer inn i SQLLite database. Dessuten vil vi være å bruke en lyd objekt å spore hvilken sang vi for tiden spiller. Det er også en variabel for oss å skape en NativeWindow objekt for vår spilleliste. På den måten kan vi flytte vinduet hvor som helst på skjermen vi ønsker, samt ha det være uavhengig av hovedvinduet. Vi skaper også en tracer variabel. Dette vil bidra til å holde styr på hvilken sang som spilles
private Var koble: SqlConnection;. private Var currentSound: Sound; private Var yVerdi: Number; private Var St: SoundTransform; private Var nw: NativeWindow; private Var vindu: MovieClip; private Var tracer: int; private Var kanal: SoundChannel; private Var tfText: String; private Var len: int;
Trinn 18: init Funksjoner

Når app lanseringer, det vil kalle disse to funksjoner: init og lyttere. Init funksjonskall for databasen til å bli satt opp, så vel som skaper det nye vinduet eksempel. Til slutt, kaller det funksjonen som setter buttonModes og visibilty av objekter. Etter init-funksjonen, er lyttere funksjon kalt som legger hendelsen lyttere til alt. Viktigst, kaller det NativeDragEvent. Dette gir oss muligheten til å dra mp3-er fra vår desktop (fra hvor som helst egentlig) til app
offentlig funksjon drag_drop_mp3 () {init ().; lyttere (); } Private funksjon init (): void {initdb (); buildWindow (); initObjects (); } private funksjon lyttere (): void {closer.addEventListener (MouseEvent.CLICK, handleWindow); mini.addEventListener (MouseEvent.CLICK, handleWindow); background.addEventListener (MouseEvent.MOUSE_DOWN, moveWindow); playToggle.addEventListener (MouseEvent.CLICK, togglePlayList); volControl.slider.addEventListener (MouseEvent.MOUSE_DOWN, sliderDown); prevBtn.addEventListener (MouseEvent.CLICK, buttonClick); playBtn.addEventListener (MouseEvent.CLICK, buttonClick); nextBtn.addEventListener (MouseEvent.CLICK, buttonClick); this.addEventListener (NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter); }
Trinn 19: The Secondary Init funksjoner

Her er de funksjonene som vil sette opp databasen, egenskapene til objektene på scenen og funksjonen som oppretter en ny NativeWindow
Den initObject er ganske selvforklarende. Jeg bruker en prøve /fangst uttalelse i tilfelle databasen er tom. I initdb funksjonen er databasefilen opprettet, hvis det ikke allerede exsist. Det skaper da en tabell som heter "spilleliste" med tre kolonner; en for kunstneren, en for sangen og den siste er for url av sangen. Til slutt lager vi en ny forekomst av "Window" objekt som vi opprettet tidligere. Teksten i sletteknappen endres. En drop å matche den øverste delen av programmet er skapt i tillegg. Vinduet er chromeless og det skaper en lett type vindu. Det betyr at spillelisten vinduet ikke vil ha noe system krom og når den er åpnet, vil det ikke være noen mulighet for det i verktøylinjen
private funksjons initObjects ():. Void {background.winBack.mouseEnabled = false; playToggle.buttonMode = true; playToggle.mouseChildren = false; tf.background = true; tf.backgroundColor = 0x000000; tf.mouseEnabled = false; tf.text = "Dra og slipp en MP3-fil her"; prevBtn.buttonMode = true; playBtn.buttonMode = true; nextBtn.buttonMode = true; st = new SoundTransform (1, 0); kanal = nye SoundChannel (); try {currentSound = new Sound (ny URLRequest (window.grid.getItemAt (0) .Beliggenheten)); } Catch (event: Feil) {//}} privat funksjon initdb (): void {var file: File = File.applicationStorageDirectory.resolvePath ("playlist.db"); koble = new SqlConnection (); connect.open (fil); Var uttalelse: SQLStatement = new SQLStatement (); statement.sqlConnection = koble; statement.text = "CREATE TABLE IF IKKE eksisterer LIST (Artist TEKST, Song TEKST, Location TEKST)"; statement.execute (); } private funksjon buildWindow (): void {var NWO: NativeWindowInitOptions = nye NativeWindowInitOptions (); nwo.maximizable = false; nwo.resizable = false; nwo.transparent = true; nwo.systemChrome = NativeWindowSystemChrome.NONE nwo.type = NativeWindowType.LIGHTWEIGHT; nw = new NativeWindow (NWO); nw.title = "Spilleliste"; vindu = new Vindu (); window.deli.ty.text = "Slett"; window.windowBackground.winBack.mouseEnabled = false; window.windowBackground.addEventListener (MouseEvent.MOUSE_DOWN, moveNatWin); nw.stage.stageWidth = window.width + 10; nw.stage.stageHeight = window.height + 10; nw.stage.scaleMode = StageScaleMode.NO_SCALE; nw.stage.align = StageAlign.TOP_LEFT; window.filters = [ny DropShadowFilter (4, 90, 0x000000, 1, 4, 4, 0,66, 3)]; window.x = 5; window.y = 0; nw.stage.addChild (vindu); setCoords (); window.grid.addEventListener (Event.CHANGE, gridChange); window.deli.addEventListener (MouseEvent.CLICK, deliClick); loadData (); }
Trinn 20: de andre funksjonene

setCoords funksjonen kalles når du viser spillelistevinduet. Det tilbakestiller x og y av spillelistevinduet, slik at det er lettere å finne når du veksle synlighet. Den loadData funksjonen velger all informasjon fra databasen og fyller den Datagrid komponent
privat funksjons setCoords (). Void {nw.x = stage.nativeWindow.x; Var de: Number = (stage.nativeWindow.y + stage.nativeWindow.height) nw.y = de; } private funksjon loadData (): void {var uttalelse: SQLStatement = new SQLStatement (); statement.sqlConnection = koble; statement.text = "SELECT * FROM LIST"; statement.execute (); prøve {var dp: dataprovider = new dataprovider (statement.getResult () data.); window.grid.dataProvider = dp; } Catch (event: Feil) {//} len = window.grid.length; }
Trinn 21: Håndtering Dra og slipp

Den første funksjonen, dragEnter, kalles når noen prøver å dra en fil på scenen. Filen sjekker om utvidelsen er riktig. Hvis det er, blir motstanden akseptert. Hvis noen bestemmer seg for at de ikke ønsker å dra en fil blir dragExit funksjonen kalles. Det tilbakestiller teksten i hovedvinduet til programmet. Men hvis brukeren plukker riktig filformat og bestemmer seg for at de ønsker å legge til filen i sin spilleliste, blir dragdrop funksjon kalt og lyden er lastet
privat funksjon dragEnter (event: NativeDragEvent):. Void {dette. removeEventListener (NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter); this.addEventListener (NativeDragEvent.NATIVE_DRAG_DROP, dragdrop); this.addEventListener (NativeDragEvent.NATIVE_DRAG_EXIT, dragExit); Var klipp: Clipboard = event.clipboard; Var objekt: Object = clip.getData (ClipboardFormats.FILE_LIST_FORMAT); tfText = tf.text; if (objekt [0] .extension.toLowerCase () == "mp3") {NativeDragManager.acceptDragDrop (denne); tf.text = "GIVE IT TO ME BABY ..."; } Else {tf.text = "EWW ... få det vekk fra meg!"; }} Privat funksjon dragExit (event: NativeDragEvent): void {this.addEventListener (NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter); this.removeEventListener (NativeDragEvent.NATIVE_DRAG_EXIT, dragExit); tf.text = tfText; } Private funksjon dragdrop (event: NativeDragEvent): void {this.removeEventListener (NativeDragEvent.NATIVE_DRAG_EXIT, dragExit); this.addEventListener (NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter); this.removeEventListener (NativeDragEvent.NATIVE_DRAG_DROP, dragdrop); Var klipp: Clipboard = event.clipboard; Var objekt: Object = clip.getData (ClipboardFormats.FILE_LIST_FORMAT); Var req: URLRequest = new URLRequest (objekt [0] .url); Var lyd: Sound = new Sound (); sound.addEventListener (Event.COMPLETE, soundLoaded); sound.load (req); tf.text = "LOADING ..."; }
Trinn 22: Legge Sound

Etter at lyden er lastet inn, tar vi artist og sang fra ID3Info objekt. Vi deretter sette det inn i databasen, samt url av sangen vi nettopp lastet. Vi legg i Datagrid med de nye lyddata
privat funksjon soundLoaded (hendelse: Hendelse):. Void {currentSound = event.target som Sound; Var id: ID3Info = currentSound.id3; Var Artist: String = id.artist; Var sang: String = id.songName; Var url: String = currentSound.url Var uttalelse: SQLStatement = new SQLStatement (); statement.sqlConnection = koble; statement.text = "INSERT INTO LIST (Artist, Song, Location) VERDIER (,,???)"; statement.parameters [0] = artist; statement.parameters [1] = sang; statement.parameters [2] = url; statement.execute (); loadData (); window.grid.selectedIndex = len-1; tracer = 1; tf.text = "TAKK!"; Var timer: Timer = new Timer (1000); timer.addEventListener (TimerEvent.TIMER, onTimer); timer.start (); } Private funksjon onTimer (event: Timerevent): void {if (tf.text == "! TAKK") {tf.text = tfText; } Var timer: Timer = event.target som Timer; timer.stop (); }
Trinn 23: Arbeide med knappekontrollene

Vi vil kontrollere sang kontrollknappene med én funksjon. Vi sjekker for å se om "playBtn" ble klikket, hvis så, sjekker vi for å se hvilke merke knappen er for tiden på, og hvis currentSound objektet ikke er null, kaller vi det playSong funksjonen. Hvis en av de andre knappene ble klikket, vi kaller den aktuelle funksjonen
privat funksjon buttonClick (event: MouseEvent): void {var mc: MovieClip = event.target som MovieClip;. Var streng: String = mc.name; bryteren (string) {case "playBtn": if (mc.currentLabel == "play") {try {playSong (currentSound.url); } Catch (event: Feil) {//}} else {mc.gotoAndStop ("play"); SoundMixer.stopAll (); }\t\t\t\tgå i stykker; case "nextBtn": playNextSong (); gå i stykker; case "prevBtn": playPrevSong (); gå i stykker; }}
Trinn 24: Sangen Funksjoner

Her er funksjonene for å arbeide med lyden. Både playNextSong og playPrevSong funksjoner kaller handleNextPrev funksjonen. Denne funksjonen bruker tracer variable å holde styr på hvilken sang som spilles. Den handleNextPrev funksjon tildeler deretter valgte lyden til currentSound objektet. Etter det vi kaller playSong funksjonen. I playSong funksjon, forteller vi at Datagrid å markere hvilken sang som spilles, vi satt på tekstfeltet for å vise artist og sang informasjon fra databasen, og vi lytter til SOUND_COMPLETE hendelsen. Når lyden er ferdig, laster vi den neste sangen
privat funksjon playNextSong (). Void {if (tracer == len) {tracer = 0; } Else {tracer ++; } HandleNextPrev (); } Private funksjon playPrevSong (): void {if (tracer == 0) {tracer = len; } Tracer--; handleNextPrev (); } Private funksjon handleNextPrev (): void {var streng: String; try {string = window.grid.getItemAt (tracer) .Beliggenheten; currentSound = new Sound (ny URLRequest (string)); SoundMixer.stopAll (); playSong (string); } Catch (event: Feil) {string = window.grid.getItemAt (0) .Beliggenheten; currentSound = new Sound (ny URLRequest (string)); SoundMixer.stopAll (); playSong (string); }} Privat funksjon playSong (string: String): void {try {playBtn.gotoAndStop ("stopp"); for (var i: int; i < len; i ++) {if (string == window.grid.getItemAt (i) .Beliggenheten) {tracer = i; window.grid.selectedIndex = i; }} Var objekt: Object = window.grid.getItemAt (tracer); if (object.Artist == null) {object.Artist = ""; } If (object.Song == null) {object.Song = ""; } Tf.text = object.Artist + "-" + object.Song; kanal = currentSound.play (); channel.addEventListener (Event.SOUND_COMPLETE, onSoundComplete); } Catch (event: Feil) {//}} privat funksjon onSoundComplete (hendelse: Hendelse): void {playNextSong (); }
Trinn 25: Volumkontroll

Hva skulle en mp3-spilleren være uten evne til å styre volumet? Her har vi satt opp glidebryteren for å kontrollere volumet. Vi passerer verdien av glidebryteren til updateVolume funksjon som oppdaterer volumet
privat funksjon sliderDown (event: MouseEvent): void {volControl.slider.removeEventListener (MouseEvent.MOUSE_DOWN, sliderDown);. stage.addEventListener (MouseEvent.MOUSE_MOVE, sliderMove); stage.addEventListener (MouseEvent.MOUSE_UP, sliderUp); yVerdi = mousey - event.target.y; } Private funksjon sliderMove (event: MouseEvent): void {var mc: MovieClip = volControl.slider; mc.y = mousey - yVerdi; if (mc.y < = 0) {mc.y = 0; } Else if (mc.y > = (50)) {mc.y = (50); } UpdateVolume (mc.y); event.updateAfterEvent (); } Private funksjon sliderUp (event: MouseEvent): void {stage.removeEventListener (MouseEvent.MOUSE_MOVE, sliderMove); stage.removeEventListener (MouseEvent.MOUSE_UP, sliderUp); volControl.slider.addEventListener (MouseEvent.MOUSE_DOWN, sliderDown); } Private funksjon updateVolume (tall: Number): void {var vol: Number = (100 - (tall * 2)) /100; SoundMixer.soundTransform = st; st.volume = vol; }
Trinn 26: Håndtering Hovedvinduet

Her er funksjonene for styring av hovedvinduet. Når musen er nede på "bakgrunn" MovieClip, kaller vi den startMove metoden i nativeWindow objektet. Dette er grunnen til at vi måtte gi vår rist MovieClip en forekomst navnet "win-back"; vi måtte sette mouseEnabled eiendom til false, eliminere eventuelle misforståelser. Hvis vi ikke hadde gjort det, ville vi bare være i stand til å dra på den svarte sirkler, ikke hele MovieClip. Den handleWindow funksjonen håndterer både minimere og lukke knappene. Også når vi kaller thaose funksjon, setter vi en viss kontroll for vår spillelistevinduet
privat funksjon moveWindow (event: MouseEvent):. Void {stage.nativeWindow.startMove (); } Private funksjon handleWindow (event: MouseEvent): void {if (event.target == nærmere) {stage.nativeWindow.close (); nw.close (); } Else {stage.nativeWindow.minimize (); nw.minimize (); }}
Trinn 27: The Final Funksjoner

Her er endelige funksjoner for vår spiller. Når vi bestemmer oss for at vi ikke lenger vil ha en sang på vår spilleliste, kan vi bare trykke på slett-knappen for å fjerne sangen. Når vi trykker på "deli" -knappen, kaller vi det deliClick funksjonen. Funksjonen fjerner elementet fra databasen, samt å stille opp en annen sang hvis slettet sangen var neste sang å spille. Den gridChange funksjonen kalles hver gang vi legge til eller fjerne et element fra databasen. På denne måten spillelisten vil alltid være up-to-date.

Til slutt, må vi være i stand til å flytte spillelisten rundt også. Vi kan kalle det moveNatWin funksjon som fungerer på samme måte som fungerer for å flytte hovedspillervinduet. Nå spillelisten kan flytte over hele skjermen uten noen begrensning satt av scenen av hovedspillervinduet
privat funksjon deliClick (event: MouseEvent): void {prøve {var uttalelse. SQLStatement = new SQLStatement (); statement.sqlConnection = koble; statement.text = "DELETE FROM LIST WHERE Location ="; statement.parameters [0] = window.grid.selectedItem.Location; Var streng: String = window.grid.selectedItem.Location; Var element: int = window.grid.selectedIndex; statement.execute (); loadData (); if (currentSound.url == string) {currentSound = new Sound (ny URLRequest (window.grid.getItemAt (0) .Beliggenheten)); } Len = window.grid.length; try {window.grid.selectedItem = window.grid.getItemAt (post-1); } Catch (event: Feil) {window.grid.selectedItem = window.grid.getItemAt (0); }} Catch (event: Feil) {//}} privat funksjon gridChange (hendelse: Hendelse): void {var dg: Datagrid = event.target som Datagrid; currentSound = new Sound (ny URLRequest (dg.selectedItem.Location)); Takk for lesing!



Previous:
Next Page: