Creating en Gjenbruk Flash Uploader med Actionscript 3.0 og PHP
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 jeg vise deg hvordan du bygger en Flash uploader for å laste opp filer fra brukerens datamaskin. Resultatet vil være ideelt for store filstørrelser som det vil vise en fremdriftslinje og andelen igjen å laste opp. Vi vil også vise brukeren antall byte opplastede per sekund
Folder ikonet Michael Ludwig
Red.anm:.. Opprett en ny Actionscript 3.0 Flash-fil, og angi dimensjonene 500 x 100 piksler. Vi begynner med å lage en valgknappen. Tegn et avrundet rektangel, har jeg laget min med en 5px rundt hjørnet, en blå gradient og en 2px grå strøk. Trykk F8 for å slå den inn i en knapp og gi den forekomstnavnet "velg". Navn på knappen på scenen "select_btn". Inne på knappen, fyller 3 stater med en litt annen gradient. Lag et nytt lag over det første og legge til en statisk tekstfelt med teksten "Velg fil". Det er best å skille eiendeler fordi det er enklere å redigere dem senere Tilbake til hovedscenen, opprette en avrundet boks med en hvit farge og en grå hjerneslag . Dette vil være fremdriftslinjen. Jeg gjorde min slik ut: Igjen, trykker du F8 og slå den inn i en MovieClip med navnet "fremskritt". Inne i fremgang MovieClip, skape 2 flere lag over den første og flytte den hvite fyllet i den tredje, slik at bare slag på det første laget .. Gi nytt navn det første laget "margin", den andre "bar" og den tredje "maske" . Vi kommer til å snu det tredje laget i en maske. På "bar" lag, skape en blå rectange med samme dimensjoner som fylleslag, men vær forsiktig for å gjøre det litt større slik at når vi bruke masken vi ikke har hull. Plasser den på 0,0 og slå den inn i en MovieClip med forekomstnavnet "bar". Dette vil være den linjen som viser fremdriften. Høyreklikk på tredje laget og velg "Mask" fra menyen. Du bør ha noe sånt som dette: I biblioteket høyreklikker du på valgknappen vi opprettet tidligere, og velg "Kopier". Navn duplikat "avbryt" og i knappen endre tekstfeltet tekst til "Avbryt". Vi gjør en kopi av valgknappen som vil være den avbryt-knapp. Vi vil senere vise bare én av dem i den fasen. I hovedscenen, opprette et nytt lag over den første og plassere den nyopprettede avbryt-knapp exacly i samme posisjon som på valgknappen. Anmeldelser Vi er nesten ferdig med eiendeler. Opprett et annet tekstfelt, denne gangen et dynamisk tekstfelt og gi den forekomsten navnet "label_txt". Dette vil vise brukeren suksessen meldingen, feilmeldingen, eller fremdriften prosent. Pass på at teksten er ikke valgbar Test filen, for å se hvordan det kommer Vi har bare en ting å gjøre før vi begynner koding; satt dokumentet klassen "Uploader" I samme mappe som Flash-fil, opprette en ny Actionscript-fil med navnet "Uploader.as". Navnet er viktig for klassen å bli funnet. Begynn koding standardpakken og importere de nødvendige klassene. Jeg har brukt "import flash.display *." For fart, men når vi er ferdig, kan vi inkludere bare de nødvendige klasser for å gjøre filen mindre Vi begynner ved å sette noen variabler: Opprett konstruktøren funksjon og legge til følgende: La meg forklare hva som skjer her. Vi skaper en ny URLRequest klasse og sette url til opplastings php filen Linjen "(scene .loaderInfo.parameters.f) stage.loaderInfo.parameters.f:? http://www.google.com '» Vi gjør betinget, slik at vi kan gjenbruke filen. På denne måten kan vi bare endre f Neste vi skaper en ny FileReference Object, klassen håndtering opplastingen. Vi passerer FileReference Object til funksjonen setup () som vi vil senere kode for å sette opp de ulike lyttere. Til slutt, vi legger klikk lyttere til å velge og avbryte knapper, sett omfanget av progressbar til 0 og skjule avbryt-knapp Vi overvåker nå skaper setup () -funksjonen Vi kunne utelate Event.COMPLETE og Event.CANCEL hendelse, men jeg har lagt dem bare for testing. Vi setter opp en CANCEL begivenhet for når brukeren avbryter dialogboksen for valg. Vi har: Sørg for at du oppretter alle funksjoner hendelses ellers vil du få en feilmelding kompilering Vi re fortsetter med bla-funksjonen, utløses når valgknappen har blitt klikket. Vi må vise dialogboksen, slik at brukeren kan velge en fil: Legg merke til at jeg har lagt til en Filefilter objekt i en matrise og lagt rekken til FileReference s bla Når brukeren har valgt en fil å laste opp, er SELECT begivenhet utløst. Vi overvåker nå kaller FileReference s opplasting () Les oss lage den open_func funksjon. Denne funksjonen utløses når opplastingen starter. Vi vil skjule knappen for valg og vise avbryt-knapp Opprett fremdriften funksjon: La meg forklare hva som skjer her. Vi sette skalaen på bar MovieClip viser prosent opp. Dette oppnås ved å dividere bytesLoaded til bytesTotal egenskaper av arrangementet objektet. Fremdriften hendelsen gir oss med mengden av opplastede bytes og totale bytes av filen. Deretter oppretter vi et tekstformat objekt og sette farge til svart (0x000000) for teksten etiketten. Vi trenger dette trinnet fordi senere vil vi endre fargen på teksten til grønn eller rød ifølge meldingen. Til slutt satt vi tekstfeltet tekst med prosenten opp. Vi vil opprette feilfunksjonen: I utgangspunktet vi endre fargen på etiketten teksten, sette den til en feilmelding, og deretter bytte avbryte og velge knappene igjen La oss lage den show_message Her tester vi hvis dataene eiendommen av UPLOAD_COMPLETE_DATA arrangementet er "ok" eller "feil" og viser en melding på riktig måte. Dataene eiendom av denne hendelsen inneholder serveren respons fra php script Dette er den siste funksjonen som vil bli utløst når avbryt-knappen klikkes. Dette kaller FileReference s avbryte () Vi utløse en reset () -funksjonen til å rydde opp i eiendeler, satt teksten til "" og bytte avbryte og velge knapper: Gå videre og teste filen i Flash For nå, opplasting fungerer, men på slutten får vi feilmeldingen. Dette er fordi vi ikke har gitt banen parameter, så swf tar hardkodet google siden. Som at siden ikke tilbake oss "ok", får vi feilen. Vi må bygge php fil .. La oss vise brukeren hastigheten han laster opp med. I konstruktøren funksjon legge linjene: Vi skaper en timer som vil kjøre hver andre og vil sjekke hastigheten. I open_func () -funksjonen legge til denne linjen: Dette vil starte tidtakeren når opplastingen starter . Vi skal nå lage updateSpeed () metode: Dette er hva som skjer her: vi beregne hastigheten ved å trekke den variable lastbytes Til slutt deler vi alt 1024 for å få resultatet i kilobyte og rundt verdien for skjerm med Math.floor (). La oss legge siste endring, slik at vi kan gå videre til php script. I progress_func () endre linjen: med dette: Her er den fullstendige koden for Flash uploader. La oss bygge vår php script raskt:? Jeg skal bare raskt oppsummere dette (PHP er ikke strengt innenfor rammen av denne tut). Vi definerer en bane hvor vi skal plassere filen, så sjekker vi om $ _files ['Filedata'] ['error'] er 0 (hvis det ikke er noen feil). Vi sjekker da om move_uploaded_file () har overført filen i mappen og vi viser "ok" eller "feil" avhengig av resultatet Et siste punkt:. Du må sørge for at mappen eksisterer og det er skrivbar før du kjører skriptet. Dette er slutten på vår veiledning. Takk for lesing, jeg håper du har lært noe! Anmeldelser
Jeg er redd det er ingen demo for denne tut - du må laste ned source.zip og leke seg med å laste opp filer til egen
server :)
Trinn 1: Button Design
Trinn 2:. Progress Bar Design
Trinn 3: Kopiere Button
Trinn 4: Dynamisk Etikett
Trinn 5:.. Dokument Class
Trinn 6:. Den cCoding
pakke {import flash.display *..; import Flash.events. *; import Flash.text. *; import Flash.net.FileReference; import Flash.net.FileReferenceList; import Flash.net.FileFilter; import Flash.net.URLRequest; import Flash.utils.Timer; import Flash.events.TimerEvent; public class Uploader strekker MovieClip {}}
Trinn 7: Variabler
public class Uploader strekker MovieClip {var file: FileReference; Var FileFilters: Array; Var req: URLRequest; Var TM: Timer; Var hastighet: Antall = 0; Var currbytes: Number = 0; Var lastbytes: Number = 0; }
Trinn 8: Constructor Funksjon
offentlig funksjon Uploader () {req = new URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php '; file = new FileReference (); oppsett (fil); select_btn.addEventListener (MouseEvent.CLICK, bla); progress_mc.bar.scaleX = 0; cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false; }
er en betinget, noe som betyr at hvis vi gir filmen parameteren f
, vil det sette url til f
parameter. Ellers vil den bruke strengen hardkodet her, god ol 'Google, for bare å teste.
parameter med en bane til url, og det vil laste opp til den angitte URL.
Trinn 9:.. Hendelser
privat funksjon setup (file: FileReference) {fil. addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Event.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (Event.SELECT, selectHandler); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message); }
en IO_ERROR hendelse i tilfelle filen kan ikke lastes opp
et åpent arrangement for når opplastingen begynner
PROGRESS hendelse som vil oppdatere prosent lastet opp
SELECT begivenhet for når brukeren har valgt en fil, og vi automatisk begynne opplasting
og en UPLOAD_COMPLETE_DATA arrangementet, som er en tilpasset hendelse utløses når filen er lastet opp og php fil har svart på forespørselen
Trinn 10:.. Bla
offentlig funksjon browse (e: MouseEvent) {FileFilters = [new Filefilter ('Bilder', '* .jpg')]; //Legger annen fil filtre file.browse (FileFilters);}
metoden. Du kan legge til en annen filtype ved å legge til en annen Filefilter objekt med en annen filtype. Dette vil filtrere filtyper på å velge dialog slik at brukeren kan bare velge riktige filtyper. Dette er bare et filnavn sjekk og sjekker ikke om bildefilen er faktisk et bilde
Trinn 11:. Last
metoden å laste opp filen til php fil på serveren med url forespørsel argument
privat funksjon selectHandler (e: Hendelses). {File.upload (req );}
Trinn 12: Knapp Sikt
privat funksjon open_func (e: Hendelses). {Cancel_btn.visible = true; select_btn.visible = false;}
Trinn 13: Fremskritts
privat funksjon progress_func (e: ProgressEvent) {progress_mc.bar.scaleX = e.bytesLoaded /e.bytesTotal; Var tf = new tekstformat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded /e.bytesTotal) * 100) + '% lastet opp';}
Trinn 14: Feil
privat funksjon io_error (e: IOErrorEvent) {var tf = new tekstformat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; cancel_btn.visible = false; select_btn.visible = true;}
Trinn 15:. Show Message
funksjon som vil sjekke om opplastingen har vært vellykket:
privat funksjon show_message (e: DataEvent) {var tf = new tekstformat (); if (e.data == 'ok') {tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen er lastet opp.'; } Else if (e.data == 'feil') {tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; }}
Trinn 16:. Avbryt
funksjon for å avbryte opplastingen. Vi er også ringe reset () for å rydde opp
privat funksjon cancelUpload (e: MouseEvent) {file.cancel ();. reset ();}
privat reset funksjon () {cancel_btn.visible = false; select_btn.visible = true; label_txt.text = ''; progress_mc.bar.scaleX = 0;.}
Trinn 17: Last Speed - Timer
tm = new Timer (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed);
Trinn 18: Last Speed - Metode
tm.start ();
privat funksjon updateSpeed (e: Timerevent) {speed = Math.floor ((currbytes - lastbytes) /1024); lastbytes = currbytes;}
fra currbytes
. lastbytes
variabelen etterpå satt til currbytes
. Så, når begge variablene er 0, er hastigheten 0. currbytes variabel vil holde dagens antall bytes lastet opp. Vi har ikke tilgang til dette direkte, det er derfor vi har laget de currbytes variabel. Denne variabelen vil bli sett fra vår PROGRESS arrangement der vi kan få tilgang til bytesLoaded eiendommen.
Trinn 19: Slutt Modification
label_txt.text = Math.round ((e.bytesLoaded /e.bytesTotal) * 100) + '% lastet opp';
label_txt.text = Math.round ((e.bytesLoaded /e.bytesTotal) * 100) + '% lastet opp' + speed + 'kb /s';
Trinn 20: Full Kode
pakke {import flash.display *; import Flash.events. *; import Flash.text. *; import Flash.net.FileReference; import Flash.net.FileReferenceList; import Flash.net.FileFilter; import Flash.net.URLRequest; import Flash.utils.Timer; import Flash.events.TimerEvent; public class Uploader strekker MovieClip {var file: FileReference; Var FileFilters: Array; Var req: URLRequest; Var TM: Timer; Var hastighet: Antall = 0; Var currbytes: Number = 0; Var lastbytes: Number = 0; offentlig funksjon Uploader () {req = new URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'; file = new FileReference (); oppsett (fil); select_btn.addEventListener (MouseEvent.CLICK, bla); progress_mc.bar.scaleX = 0; TM = new Timer (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed); cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false; } Offentlig funksjon browse (e: MouseEvent) {FileFilters = [nye Filefilter ('Bilder', '* .jpg')]; //Legger annen fil filtre file.browse (FileFilters); } Private funksjon setup (file: FileReference) {file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Event.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (Event.SELECT, selectHandler); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message); } Private funksjon cancel_func (e: Hendelses) {trace ("avlyst! '); } Private funksjon complete_func (e: Hendelses) {trace, ("komplett! ') } Private funksjon io_error (e: IOErrorEvent) {var tf = new tekstformat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; tm.stop (); cancel_btn.visible = false; select_btn.visible = true; } Private funksjon open_func (e: Hendelses) {//trace ("åpnet! '); tm.start (); cancel_btn.visible = true; select_btn.visible = false; } Private funksjon progress_func (e: ProgressEvent) {progress_mc.bar.scaleX = e.bytesLoaded /e.bytesTotal; Var tf = new tekstformat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded /e.bytesTotal) * 100) + '% lastet opp' + speed + 'kb /s'; currbytes = e.bytesLoaded; } Private funksjon selectHandler (e: Hendelses) {file.upload (req); } Private funksjon show_message (e: DataEvent) {tm.stop (); Var tf = new tekstformat (); if (e.data == 'ok') {tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen er lastet opp.'; } Else if (e.data == 'feil') {tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; }} Privat funksjon updateSpeed (e: Timerevent) {speed = Math.round ((currbytes - lastbytes) /1024); lastbytes = currbytes; } Private funksjon cancelUpload (e: MouseEvent) {file.cancel (); reset (); } Private reset funksjon () {cancel_btn.visible = false; select_btn.visible = true; label_txt.text = ''; progress_mc.bar.scaleX = 0; }}}
Trinn 21: The PHP Script
≪ php $ uploads_dir = './uploads /'; if (_files $ ['Filedata' ] ['error'] == 0) {if (move_uploaded_file (_files $ ['Filedata'] ['tmp_name'], $ uploads_dir. $ _ FILES ['Filedata'] ['navn'])) {echo "ok"; gå(); }} Echo 'feil'; exit (); >