SlideShare a Scribd company logo
Flash InteropFlexCamp / Iași / 2009Cosmin VârlanFacultatea de InformaticăIași
Cuprins…Comunicarea între Flash și JavaScriptComunicarea cu un server WebComunicarea între două aplicații Flash de pe calculatoare diferite2http://www.info.uaic.ro/~flash
Living in a strange situation of   Too many words and…                          NO COMMUNICATION ?!?!3http://www.info.uaic.ro/~flash
Flash & JSAplicațiile Flash pot comunica cu aplicațiile realizate în alte tehnologii dar care rulează local prin intermediul obiectelor de tip ExternalInterface (flash.external.ExternalInterface;)ExternalInterface este utilizată pentru a face posibilă comunicarea între ActionScript și containerul playerului Flash (de obicei AS3 și JSul dintr-un HTML)4http://www.info.uaic.ro/~flash
JS5http://www.info.uaic.ro/~flash
JS6http://www.info.uaic.ro/~flashFuncție JS pentru a primi mesajul din AS (va fi apelată din AS)
JS7http://www.info.uaic.ro/~flashFuncție JS ce va trimite mesajul către aplicația Flash cu ID-ul “main”
JS8http://www.info.uaic.ro/~flashFormular de unde vom prelua datele pentru a le trimite către AS3
JS9http://www.info.uaic.ro/~flashSau unde vom scrie datele recepționate din AS3
Flash10http://www.info.uaic.ro/~flash
Flash11http://www.info.uaic.ro/~flashCrearea unui câmp textual și al unui buton
Flash12http://www.info.uaic.ro/~flash…. pe care vă descurcați voi să le faceți vizibile.
Flash13http://www.info.uaic.ro/~flashVom apela metoda ce trimite date la apăsarea butonului
Flash14http://www.info.uaic.ro/~flashPentru a transmite informații către JS se utilizează o metodă statică a interfeței externe
Flash15http://www.info.uaic.ro/~flashExternalInterface este mereu existent în orice aplicație Flash dar rareori utilizat. Putem să-i adăugăm o metodă care să o apeleze atunci când recepționează date de la această funcție JS
Flash16http://www.info.uaic.ro/~flashFuncția ce o va apela
FlashFuncția va apela va modifica TextField-ul17http://www.info.uaic.ro/~flash
Alte tipuri de comunicări (locale)Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica prin intermediul LocalConnectionAplicațiile Flash pot scrie diverse informații în obiecte de tip SharedObjectce le salvează pe calculatorul clientului și pe care le poate reîncărca ulterior.Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML.18http://www.info.uaic.ro/~flash
Alte tipuri de comunicări (locale)Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica prin intermediul LocalConnectionAplicațiile Flash pot scrie diverse informații în obiecte de tip SharedObjectce le salvează pe calculatorul clientului și pe care le poate reîncărca ulterior.Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML.19http://www.info.uaic.ro/~flash
Alte tipuri de comunicări (locale)De multe ori pentru a indica aplicației Flash o anumită stare în care trebuie să se afle în momentul pornirii, se utilizează o astfel de inițializare (de ex. YouTube). Cam așa se face:20http://www.info.uaic.ro/~flashVariabila de trimisVariabila de trimis
Alte tipuri de comunicări (locale)Valorile variabilelor transmis prin intermediul parametrului FlashVars pot fi “recuperate” în AS3 din obiectul loaderinfo:21http://www.info.uaic.ro/~flashVa afișa “patrat”
Alte tipuri de comunicări (locale)Deși această metodă poate fi utilă programatorilor care vor să-și inițializeze anumiți parametri în aplicația Flash și este utilizată de mulți programatori PHP pentru a seta o valoare încă din primii pași ai execuției, ea nu este efectiv un mod de comunicare.22http://www.info.uaic.ro/~flash
Flash & Server Web (PHP)Din aplicația Flash se poate face o cerere către server atunci când are nevoie de o anumită resursă (imagine, XML, o valoare, un MP3 etc.)Serverul poate construi chiar atunci resursa (de exemplu dacă aplicația Flash întreabă cât este ora, serverul poate să-i returneze o valoare generată  în acel moment).Odată cu cererea, aplicația Flash poate trimite (POST/GET) o serie de valori.23http://www.info.uaic.ro/~flash
Flash & Server Web (PHP)Vom considera următorul cod PHP (care adună 5 la valoarea variabilei “variabilaPrimita” recepționată prin GET și generează un output de tipul “returnVal=7” – spre exemplu când valoarea primită este 2):24http://www.info.uaic.ro/~flash
Flash & Server Web (PHP)Vom considera următorul cod PHP (care adună 5 la valoarea variabilei “variabilaPrimita” recepționată prin GET și generează un output de tipul “returnVal=7” – spre exemplu când valoarea primită este 2):25http://www.info.uaic.ro/~flash
Flash & Server Web (PHP)26http://www.info.uaic.ro/~flash
Flash & Server Web (PHP)27http://www.info.uaic.ro/~flashUn obiect prin care vom face o cerere
Flash & Server Web (PHP)28http://www.info.uaic.ro/~flashSetăm metoda de transmitere a datelor
Flash & Server Web (PHP)29http://www.info.uaic.ro/~flashÎn acest obiect vom adăuga variabilele ce le vom transmite către PHPAici adăugam efectiv valoarea variabilei și asociem cererii obiectul conținând variabilele
Flash & Server Web (PHP)30http://www.info.uaic.ro/~flashFuncția ce va fi apelată când se va întoarce răspunsul…
Flash & Server Web (PHP)31http://www.info.uaic.ro/~flashCe va afișa valoarea 10.
Flash & server WebPutem transmite și recepționa date de la server chiar în timpul rulării aplicației Flash [aveți grijă ce date introduceți în aplicația Flash pentru că aceasta ar putea face submit chiar dacă nu ați apăsat butonul :>) ].32http://www.info.uaic.ro/~flash
Flash & server WebUneori am întâlnit persoane care vor sa facă jocuri… în care participanții să comunice în timp real… șiiiii de foarte multe ori, am auzit drept soluție textul: “simplu: trimitem informațiile la un server PHP care le scrie undeva (o bază de date de exemplu), colegul care joacă cu mine le preia de acolo”.                                                                 ……RĂU !33http://www.info.uaic.ro/~flash
Flash & comunicarea prin socketsSoluția nu este corectă deoarece comunicarea prin intermediul protocolului HTTP este asincronă. Pentru comunicarea în timp real se utilizează socketuri [în AS3 de obicei se utilizează protocolul TCP].(acum să nu credeți că în comunicarea HTTP nu se utilizează porturi… doar că alea sunt utilizate de browser, nu de aplicația Flash și așa a fost conceput el să lucreze asincron)34http://www.info.uaic.ro/~flash
Flash & comunicarea prin sockets35http://www.info.uaic.ro/~flash
Flash & comunicarea prin sockets36http://www.info.uaic.ro/~flash
Flash & comunicarea prin sockets37http://www.info.uaic.ro/~flash
Flash & Java sockets38http://www.info.uaic.ro/~flashServerul va permite conexiuni la portul 4444Aceasta este o instrucțiune blocantă (nu se trece la următoarea linie decât după acceptarea unei conexiuni)Sunt create două streamuri de intrare/ieșireÎntr-o buclă infinită preia o linie transmisă de Aplicația Flash și o retransmite tot către acasta
Flash & Flash[Flash Media Server]În FMS se utilizează Real-Time Messaging Protocol (RTMP) – bazate pe TCPFMS poate reda și fișiere FLV de exemplu… dar poate fi utilizat pentru a transmite datele preluate de la webcamul unui client către o altă aplicație Flash.Ideea cu transmiterea este următoarea: X trimite fluxul de imagini/sunet, FMS îl codifică superrapid într-un FLV pe care Y poate să îl vadă.39http://www.info.uaic.ro/~flash
Flash & Flash[Flash Media Server]40http://www.info.uaic.ro/~flash
Flash & Flash[Flash Media Server]41http://www.info.uaic.ro/~flash
Flash & Flash[Flash Media Server]Insert Movie Here…42http://www.info.uaic.ro/~flash
Flash & FlashComunicareaprin intermediul unui server Java sau a FMS presupun: - serverele să aibă bandă destul de mare (mai mulți utilizatori simultan) - serverul să fie pornit non-stop - serverele de multe ori sunt “neoficiale”Dar…  de celemaimulte ori comunicarea este p2pPutem elimina serverul care stă între cele două aplicații ce utilizează conexiunea în stil p2p ?43http://www.info.uaic.ro/~flash
Flash & Flash[Stratus]StratusImplementat în Flash Player 10  /  AIR 1.5Real-Time Media Flow Protocol (RTMFP)RTMP utilizează TCP; RTMFP utilizează UDP[latență mică, nu face abuz de banda vreunui server, permite prioritatea unor tipuri de date față de alte tipuri (de ex sunet prioritar față de imagine)]Permite conectarea p2p …                               … cum se accesează clienții ?!44http://www.info.uaic.ro/~flash
Flash & Flash[Stratus]Pot fi ambele calculatoare in spatele unui firewall  [NAT = NetworkAdressTranslation]TURN = Traversal Using Relays around NAT45http://www.info.uaic.ro/~flash
Flash & Flash[Stratus]TURN:46http://www.info.uaic.ro/~flashInternet
Flash & Flash[Stratus]TURN:47http://www.info.uaic.ro/~flashInternet
Flash & Flash[Stratus]TURN:                                                                           ????48http://www.info.uaic.ro/~flashInternet
Flash & Flash[Stratus]TURN:49http://www.info.uaic.ro/~flashServer
Flash & Flash[Stratus]               = rtmfp://stratus.adobe.comSunt mai multe aplicații care vor să fie puse în legătură. Pentru a nu le “încurca”, acest server trebuie să primească de la aplicațiile ce doresc să se interconecteze o aceeași cheie [generată de Adobe pentru fiecare programator interesat].Poate sunt mai mulți utilizatori ce utilizează aceeași aplicație simultan ? Pe cine cu cine conectăm ?50http://www.info.uaic.ro/~flashServer
Flash & Flash[Stratus]După conectare, utilizatorul va primi un ID (NetConnection.nearID) pe care trebuie să-l transmită celui cu care dorește să se conecteze (de exemplu printr-un serviciu web)Urmează transmiterea de date [imagini & sunet]Flash  Player transmite datele numai de la camera și microfonul propriu și nu retransmite date primite de la altcineva.51http://www.info.uaic.ro/~flash
Flash & Flash[Stratus]52http://www.info.uaic.ro/~flash
Flash & Flash[Stratus]53http://www.info.uaic.ro/~flash
Flash & Flash[Stratus]54http://www.info.uaic.ro/~flash
  Too many words and…               …Flash Communication55http://www.info.uaic.ro/~flash

More Related Content

PPTX
Cercul De Rich Internet Applications Constructor, Getter,Setter, Display List
PDF
PPTX
Cercul De Rich Internet Applications Variabile, Functii, Obiecte, Mosteniri
PPTX
Cercul De Rich Internet Applications Mp3
PDF
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
Cercul De Rich Internet Applications Constructor, Getter,Setter, Display List
Cercul De Rich Internet Applications Variabile, Functii, Obiecte, Mosteniri
Cercul De Rich Internet Applications Mp3
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP

Similar to Comunicarea in AS3 (20)

PDF
HTML5? HTML5!
PDF
Sabin Buraga – Dezvoltator Web (...în 2017)
PDF
Dezvoltator Web?! – ...în 2016
PDF
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
PDF
Cu codul în "nori"
PPT
Programare Web - De la CGI la servere de aplicatii
PPTX
Introducere in Flex si AIR
PDF
Web 2016 (02/13) Programare Web – Protocolul HTTP. Cookie-uri. Sesiuni Web
PPT
Reteaua internet
PPT
Kickstart Project: Android+Restlet+Hibernate+PostgreSQL
PPT
Programare Web - Arhitectura WWW
PPTX
Programarea aplicațiilor distribuite
PPTX
Remus Pereni - Remus Pereni - JavaScript, from dark ages to renaissance, the ...
PPT
Proiect Programare Web
PPS
2 Software Retele
PDF
WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision
PDF
Web 2020 09/12: Servicii Web. Paradigma REST
PDF
Computer Networks. Applications: terminal & e-mail
PDF
Computer Networks. Internet programming basics
HTML5? HTML5!
Sabin Buraga – Dezvoltator Web (...în 2017)
Dezvoltator Web?! – ...în 2016
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
Cu codul în "nori"
Programare Web - De la CGI la servere de aplicatii
Introducere in Flex si AIR
Web 2016 (02/13) Programare Web – Protocolul HTTP. Cookie-uri. Sesiuni Web
Reteaua internet
Kickstart Project: Android+Restlet+Hibernate+PostgreSQL
Programare Web - Arhitectura WWW
Programarea aplicațiilor distribuite
Remus Pereni - Remus Pereni - JavaScript, from dark ages to renaissance, the ...
Proiect Programare Web
2 Software Retele
WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision
Web 2020 09/12: Servicii Web. Paradigma REST
Computer Networks. Applications: terminal & e-mail
Computer Networks. Internet programming basics
Ad

Comunicarea in AS3

  • 1. Flash InteropFlexCamp / Iași / 2009Cosmin VârlanFacultatea de InformaticăIași
  • 2. Cuprins…Comunicarea între Flash și JavaScriptComunicarea cu un server WebComunicarea între două aplicații Flash de pe calculatoare diferite2http://www.info.uaic.ro/~flash
  • 3. Living in a strange situation of Too many words and… NO COMMUNICATION ?!?!3http://www.info.uaic.ro/~flash
  • 4. Flash & JSAplicațiile Flash pot comunica cu aplicațiile realizate în alte tehnologii dar care rulează local prin intermediul obiectelor de tip ExternalInterface (flash.external.ExternalInterface;)ExternalInterface este utilizată pentru a face posibilă comunicarea între ActionScript și containerul playerului Flash (de obicei AS3 și JSul dintr-un HTML)4http://www.info.uaic.ro/~flash
  • 6. JS6http://www.info.uaic.ro/~flashFuncție JS pentru a primi mesajul din AS (va fi apelată din AS)
  • 7. JS7http://www.info.uaic.ro/~flashFuncție JS ce va trimite mesajul către aplicația Flash cu ID-ul “main”
  • 8. JS8http://www.info.uaic.ro/~flashFormular de unde vom prelua datele pentru a le trimite către AS3
  • 9. JS9http://www.info.uaic.ro/~flashSau unde vom scrie datele recepționate din AS3
  • 12. Flash12http://www.info.uaic.ro/~flash…. pe care vă descurcați voi să le faceți vizibile.
  • 13. Flash13http://www.info.uaic.ro/~flashVom apela metoda ce trimite date la apăsarea butonului
  • 14. Flash14http://www.info.uaic.ro/~flashPentru a transmite informații către JS se utilizează o metodă statică a interfeței externe
  • 15. Flash15http://www.info.uaic.ro/~flashExternalInterface este mereu existent în orice aplicație Flash dar rareori utilizat. Putem să-i adăugăm o metodă care să o apeleze atunci când recepționează date de la această funcție JS
  • 17. FlashFuncția va apela va modifica TextField-ul17http://www.info.uaic.ro/~flash
  • 18. Alte tipuri de comunicări (locale)Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica prin intermediul LocalConnectionAplicațiile Flash pot scrie diverse informații în obiecte de tip SharedObjectce le salvează pe calculatorul clientului și pe care le poate reîncărca ulterior.Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML.18http://www.info.uaic.ro/~flash
  • 19. Alte tipuri de comunicări (locale)Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica prin intermediul LocalConnectionAplicațiile Flash pot scrie diverse informații în obiecte de tip SharedObjectce le salvează pe calculatorul clientului și pe care le poate reîncărca ulterior.Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML.19http://www.info.uaic.ro/~flash
  • 20. Alte tipuri de comunicări (locale)De multe ori pentru a indica aplicației Flash o anumită stare în care trebuie să se afle în momentul pornirii, se utilizează o astfel de inițializare (de ex. YouTube). Cam așa se face:20http://www.info.uaic.ro/~flashVariabila de trimisVariabila de trimis
  • 21. Alte tipuri de comunicări (locale)Valorile variabilelor transmis prin intermediul parametrului FlashVars pot fi “recuperate” în AS3 din obiectul loaderinfo:21http://www.info.uaic.ro/~flashVa afișa “patrat”
  • 22. Alte tipuri de comunicări (locale)Deși această metodă poate fi utilă programatorilor care vor să-și inițializeze anumiți parametri în aplicația Flash și este utilizată de mulți programatori PHP pentru a seta o valoare încă din primii pași ai execuției, ea nu este efectiv un mod de comunicare.22http://www.info.uaic.ro/~flash
  • 23. Flash & Server Web (PHP)Din aplicația Flash se poate face o cerere către server atunci când are nevoie de o anumită resursă (imagine, XML, o valoare, un MP3 etc.)Serverul poate construi chiar atunci resursa (de exemplu dacă aplicația Flash întreabă cât este ora, serverul poate să-i returneze o valoare generată în acel moment).Odată cu cererea, aplicația Flash poate trimite (POST/GET) o serie de valori.23http://www.info.uaic.ro/~flash
  • 24. Flash & Server Web (PHP)Vom considera următorul cod PHP (care adună 5 la valoarea variabilei “variabilaPrimita” recepționată prin GET și generează un output de tipul “returnVal=7” – spre exemplu când valoarea primită este 2):24http://www.info.uaic.ro/~flash
  • 25. Flash & Server Web (PHP)Vom considera următorul cod PHP (care adună 5 la valoarea variabilei “variabilaPrimita” recepționată prin GET și generează un output de tipul “returnVal=7” – spre exemplu când valoarea primită este 2):25http://www.info.uaic.ro/~flash
  • 26. Flash & Server Web (PHP)26http://www.info.uaic.ro/~flash
  • 27. Flash & Server Web (PHP)27http://www.info.uaic.ro/~flashUn obiect prin care vom face o cerere
  • 28. Flash & Server Web (PHP)28http://www.info.uaic.ro/~flashSetăm metoda de transmitere a datelor
  • 29. Flash & Server Web (PHP)29http://www.info.uaic.ro/~flashÎn acest obiect vom adăuga variabilele ce le vom transmite către PHPAici adăugam efectiv valoarea variabilei și asociem cererii obiectul conținând variabilele
  • 30. Flash & Server Web (PHP)30http://www.info.uaic.ro/~flashFuncția ce va fi apelată când se va întoarce răspunsul…
  • 31. Flash & Server Web (PHP)31http://www.info.uaic.ro/~flashCe va afișa valoarea 10.
  • 32. Flash & server WebPutem transmite și recepționa date de la server chiar în timpul rulării aplicației Flash [aveți grijă ce date introduceți în aplicația Flash pentru că aceasta ar putea face submit chiar dacă nu ați apăsat butonul :>) ].32http://www.info.uaic.ro/~flash
  • 33. Flash & server WebUneori am întâlnit persoane care vor sa facă jocuri… în care participanții să comunice în timp real… șiiiii de foarte multe ori, am auzit drept soluție textul: “simplu: trimitem informațiile la un server PHP care le scrie undeva (o bază de date de exemplu), colegul care joacă cu mine le preia de acolo”. ……RĂU !33http://www.info.uaic.ro/~flash
  • 34. Flash & comunicarea prin socketsSoluția nu este corectă deoarece comunicarea prin intermediul protocolului HTTP este asincronă. Pentru comunicarea în timp real se utilizează socketuri [în AS3 de obicei se utilizează protocolul TCP].(acum să nu credeți că în comunicarea HTTP nu se utilizează porturi… doar că alea sunt utilizate de browser, nu de aplicația Flash și așa a fost conceput el să lucreze asincron)34http://www.info.uaic.ro/~flash
  • 35. Flash & comunicarea prin sockets35http://www.info.uaic.ro/~flash
  • 36. Flash & comunicarea prin sockets36http://www.info.uaic.ro/~flash
  • 37. Flash & comunicarea prin sockets37http://www.info.uaic.ro/~flash
  • 38. Flash & Java sockets38http://www.info.uaic.ro/~flashServerul va permite conexiuni la portul 4444Aceasta este o instrucțiune blocantă (nu se trece la următoarea linie decât după acceptarea unei conexiuni)Sunt create două streamuri de intrare/ieșireÎntr-o buclă infinită preia o linie transmisă de Aplicația Flash și o retransmite tot către acasta
  • 39. Flash & Flash[Flash Media Server]În FMS se utilizează Real-Time Messaging Protocol (RTMP) – bazate pe TCPFMS poate reda și fișiere FLV de exemplu… dar poate fi utilizat pentru a transmite datele preluate de la webcamul unui client către o altă aplicație Flash.Ideea cu transmiterea este următoarea: X trimite fluxul de imagini/sunet, FMS îl codifică superrapid într-un FLV pe care Y poate să îl vadă.39http://www.info.uaic.ro/~flash
  • 40. Flash & Flash[Flash Media Server]40http://www.info.uaic.ro/~flash
  • 41. Flash & Flash[Flash Media Server]41http://www.info.uaic.ro/~flash
  • 42. Flash & Flash[Flash Media Server]Insert Movie Here…42http://www.info.uaic.ro/~flash
  • 43. Flash & FlashComunicareaprin intermediul unui server Java sau a FMS presupun: - serverele să aibă bandă destul de mare (mai mulți utilizatori simultan) - serverul să fie pornit non-stop - serverele de multe ori sunt “neoficiale”Dar… de celemaimulte ori comunicarea este p2pPutem elimina serverul care stă între cele două aplicații ce utilizează conexiunea în stil p2p ?43http://www.info.uaic.ro/~flash
  • 44. Flash & Flash[Stratus]StratusImplementat în Flash Player 10 / AIR 1.5Real-Time Media Flow Protocol (RTMFP)RTMP utilizează TCP; RTMFP utilizează UDP[latență mică, nu face abuz de banda vreunui server, permite prioritatea unor tipuri de date față de alte tipuri (de ex sunet prioritar față de imagine)]Permite conectarea p2p … … cum se accesează clienții ?!44http://www.info.uaic.ro/~flash
  • 45. Flash & Flash[Stratus]Pot fi ambele calculatoare in spatele unui firewall [NAT = NetworkAdressTranslation]TURN = Traversal Using Relays around NAT45http://www.info.uaic.ro/~flash
  • 48. Flash & Flash[Stratus]TURN: ????48http://www.info.uaic.ro/~flashInternet
  • 50. Flash & Flash[Stratus] = rtmfp://stratus.adobe.comSunt mai multe aplicații care vor să fie puse în legătură. Pentru a nu le “încurca”, acest server trebuie să primească de la aplicațiile ce doresc să se interconecteze o aceeași cheie [generată de Adobe pentru fiecare programator interesat].Poate sunt mai mulți utilizatori ce utilizează aceeași aplicație simultan ? Pe cine cu cine conectăm ?50http://www.info.uaic.ro/~flashServer
  • 51. Flash & Flash[Stratus]După conectare, utilizatorul va primi un ID (NetConnection.nearID) pe care trebuie să-l transmită celui cu care dorește să se conecteze (de exemplu printr-un serviciu web)Urmează transmiterea de date [imagini & sunet]Flash Player transmite datele numai de la camera și microfonul propriu și nu retransmite date primite de la altcineva.51http://www.info.uaic.ro/~flash
  • 55. Too many words and… …Flash Communication55http://www.info.uaic.ro/~flash