Flash InteropFlexCamp / Iași / 2009<br />Cosmin Vârlan<br />Facultatea de Informatică<br />Iași<br />
Cuprins…<br />Comunicarea între Flash și JavaScript<br />Comunicarea cu un server Web<br />Comunicarea între două aplicați...
Living in a strange situation of<br />   Too many words and…<br />                          NO COMMUNICATION ?!?!<br />3<b...
Flash & JS<br />Aplicațiile Flash pot comunica cu aplicațiile realizate în alte tehnologii dar care rulează local prin int...
JS<br />5<br />http://www.info.uaic.ro/~flash<br />
JS<br />6<br />http://www.info.uaic.ro/~flash<br />Funcție JS pentru a primi mesajul din AS (va fi apelată din AS)<br />
JS<br />7<br />http://www.info.uaic.ro/~flash<br />Funcție JS ce va trimite mesajul către aplicația Flash cu ID-ul “main”<...
JS<br />8<br />http://www.info.uaic.ro/~flash<br />Formular de unde vom prelua datele pentru a le trimite către AS3<br />
JS<br />9<br />http://www.info.uaic.ro/~flash<br />Sau unde vom scrie datele recepționate din AS3<br />
Flash<br />10<br />http://www.info.uaic.ro/~flash<br />
Flash<br />11<br />http://www.info.uaic.ro/~flash<br />Crearea unui câmp textual și al unui buton<br />
Flash<br />12<br />http://www.info.uaic.ro/~flash<br />…. pe care vă descurcați voi să le faceți vizibile.<br />
Flash<br />13<br />http://www.info.uaic.ro/~flash<br />Vom apela metoda ce trimite date la apăsarea butonului<br />
Flash<br />14<br />http://www.info.uaic.ro/~flash<br />Pentru a transmite informații către JS se utilizează o metodă stati...
Flash<br />15<br />http://www.info.uaic.ro/~flash<br />ExternalInterface este mereu existent în orice aplicație Flash dar ...
Flash<br />16<br />http://www.info.uaic.ro/~flash<br />Funcția ce o va apela<br />
Flash<br />Funcția va apela va modifica TextField-ul<br />17<br />http://www.info.uaic.ro/~flash<br />
Alte tipuri de comunicări (locale)<br />Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica pri...
Alte tipuri de comunicări (locale)<br />Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica pri...
Alte tipuri de comunicări (locale)<br />De multe ori pentru a indica aplicației Flash o anumită stare în care trebuie să s...
Alte tipuri de comunicări (locale)<br />Valorile variabilelor transmis prin intermediul parametrului FlashVars pot fi “rec...
Alte tipuri de comunicări (locale)<br />Deși această metodă poate fi utilă programatorilor care vor să-și inițializeze anu...
Flash & Server Web (PHP)<br />Din aplicația Flash se poate face o cerere către server atunci când are nevoie de o anumită ...
Flash & Server Web (PHP)<br />Vom considera următorul cod PHP (care adună 5 la valoarea variabilei “variabilaPrimita” rece...
Flash & Server Web (PHP)<br />Vom considera următorul cod PHP (care adună 5 la valoarea variabilei “variabilaPrimita” rece...
Flash & Server Web (PHP)<br />26<br />http://www.info.uaic.ro/~flash<br />
Flash & Server Web (PHP)<br />27<br />http://www.info.uaic.ro/~flash<br />Un obiect prin care vom face o cerere<br />
Flash & Server Web (PHP)<br />28<br />http://www.info.uaic.ro/~flash<br />Setăm metoda de transmitere a datelor<br />
Flash & Server Web (PHP)<br />29<br />http://www.info.uaic.ro/~flash<br />În acest obiect vom adăuga variabilele ce le vom...
Flash & Server Web (PHP)<br />30<br />http://www.info.uaic.ro/~flash<br />Funcția ce va fi apelată când se va întoarce răs...
Flash & Server Web (PHP)<br />31<br />http://www.info.uaic.ro/~flash<br />Ce va afișa valoarea 10.<br />
Flash & server Web<br />Putem transmite și recepționa date de la server chiar în timpul rulării aplicației Flash [aveți gr...
Flash & server Web<br />Uneori am întâlnit persoane care vor sa facă jocuri… în care participanții să comunice în timp rea...
Flash & comunicarea prin sockets<br />Soluția nu este corectă deoarece comunicarea prin intermediul protocolului HTTP este...
Flash & comunicarea prin sockets<br />35<br />http://www.info.uaic.ro/~flash<br />
Flash & comunicarea prin sockets<br />36<br />http://www.info.uaic.ro/~flash<br />
Flash & comunicarea prin sockets<br />37<br />http://www.info.uaic.ro/~flash<br />
Flash & Java sockets<br />38<br />http://www.info.uaic.ro/~flash<br />Serverul va permite conexiuni la portul 4444<br />Ac...
Flash & Flash[Flash Media Server]<br />În FMS se utilizează Real-Time Messaging Protocol (RTMP) – bazate pe TCP<br />FMS p...
Flash & Flash[Flash Media Server]<br />40<br />http://www.info.uaic.ro/~flash<br />
Flash & Flash[Flash Media Server]<br />41<br />http://www.info.uaic.ro/~flash<br />
Flash & Flash[Flash Media Server]<br />Insert Movie Here…<br />42<br />http://www.info.uaic.ro/~flash<br />
Flash & Flash<br />Comunicareaprin intermediul unui server Java sau a FMS presupun:<br /> - serverele să aibă bandă destul...
Flash & Flash[Stratus]<br />Stratus<br />Implementat în Flash Player 10  /  AIR 1.5<br />Real-Time Media Flow Protocol (RT...
Flash & Flash[Stratus]<br />Pot fi ambele calculatoare in spatele unui firewall  [NAT = NetworkAdressTranslation]<br />TUR...
Flash & Flash[Stratus]<br />TURN:<br />46<br />http://www.info.uaic.ro/~flash<br />Internet<br />
Flash & Flash[Stratus]<br />TURN:<br />47<br />http://www.info.uaic.ro/~flash<br />Internet<br />
Flash & Flash[Stratus]<br />TURN:<br />                                                                           ????<br ...
Flash & Flash[Stratus]<br />TURN:<br />49<br />http://www.info.uaic.ro/~flash<br />Server<br />
Flash & Flash[Stratus]<br />               = rtmfp://stratus.adobe.com<br />Sunt mai multe aplicații care vor să fie puse ...
Flash & Flash[Stratus]<br />După conectare, utilizatorul va primi un ID (NetConnection.nearID) pe care trebuie să-l transm...
Flash & Flash[Stratus]<br />52<br />http://www.info.uaic.ro/~flash<br />
Flash & Flash[Stratus]<br />53<br />http://www.info.uaic.ro/~flash<br />
Flash & Flash[Stratus]<br />54<br />http://www.info.uaic.ro/~flash<br />
  Too many words and…<br />               …Flash Communication<br />55<br />http://www.info.uaic.ro/~flash<br />
Upcoming SlideShare
Loading in...5
×

Comunicarea in AS3

1,030
-1

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,030
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Comunicarea in AS3

  1. 1. Flash InteropFlexCamp / Iași / 2009<br />Cosmin Vârlan<br />Facultatea de Informatică<br />Iași<br />
  2. 2. Cuprins…<br />Comunicarea între Flash și JavaScript<br />Comunicarea cu un server Web<br />Comunicarea între două aplicații Flash de pe calculatoare diferite<br />2<br />http://www.info.uaic.ro/~flash<br />
  3. 3. Living in a strange situation of<br /> Too many words and…<br /> NO COMMUNICATION ?!?!<br />3<br />http://www.info.uaic.ro/~flash<br />
  4. 4. Flash & JS<br />Aplicațiile Flash pot comunica cu aplicațiile realizate în alte tehnologii dar care rulează local prin intermediul obiectelor de tip ExternalInterface (flash.external.ExternalInterface;)<br />ExternalInterface este utilizată pentru a face posibilă comunicarea între ActionScript și containerul playerului Flash (de obicei AS3 și JSul dintr-un HTML)<br />4<br />http://www.info.uaic.ro/~flash<br />
  5. 5. JS<br />5<br />http://www.info.uaic.ro/~flash<br />
  6. 6. JS<br />6<br />http://www.info.uaic.ro/~flash<br />Funcție JS pentru a primi mesajul din AS (va fi apelată din AS)<br />
  7. 7. JS<br />7<br />http://www.info.uaic.ro/~flash<br />Funcție JS ce va trimite mesajul către aplicația Flash cu ID-ul “main”<br />
  8. 8. JS<br />8<br />http://www.info.uaic.ro/~flash<br />Formular de unde vom prelua datele pentru a le trimite către AS3<br />
  9. 9. JS<br />9<br />http://www.info.uaic.ro/~flash<br />Sau unde vom scrie datele recepționate din AS3<br />
  10. 10. Flash<br />10<br />http://www.info.uaic.ro/~flash<br />
  11. 11. Flash<br />11<br />http://www.info.uaic.ro/~flash<br />Crearea unui câmp textual și al unui buton<br />
  12. 12. Flash<br />12<br />http://www.info.uaic.ro/~flash<br />…. pe care vă descurcați voi să le faceți vizibile.<br />
  13. 13. Flash<br />13<br />http://www.info.uaic.ro/~flash<br />Vom apela metoda ce trimite date la apăsarea butonului<br />
  14. 14. Flash<br />14<br />http://www.info.uaic.ro/~flash<br />Pentru a transmite informații către JS se utilizează o metodă statică a interfeței externe<br />
  15. 15. Flash<br />15<br />http://www.info.uaic.ro/~flash<br />ExternalInterface 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<br />
  16. 16. Flash<br />16<br />http://www.info.uaic.ro/~flash<br />Funcția ce o va apela<br />
  17. 17. Flash<br />Funcția va apela va modifica TextField-ul<br />17<br />http://www.info.uaic.ro/~flash<br />
  18. 18. Alte tipuri de comunicări (locale)<br />Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica prin intermediul LocalConnection<br />Aplicaț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.<br />Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML.<br />18<br />http://www.info.uaic.ro/~flash<br />
  19. 19. Alte tipuri de comunicări (locale)<br />Când două aplicații Flash se întâlnesc pe aceeași calculator, ele pot comunica prin intermediul LocalConnection<br />Aplicaț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.<br />Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML.<br />19<br />http://www.info.uaic.ro/~flash<br />
  20. 20. Alte tipuri de comunicări (locale)<br />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:<br />20<br />http://www.info.uaic.ro/~flash<br />Variabila de trimis<br />Variabila de trimis<br />
  21. 21. Alte tipuri de comunicări (locale)<br />Valorile variabilelor transmis prin intermediul parametrului FlashVars pot fi “recuperate” în AS3 din obiectul loaderinfo:<br />21<br />http://www.info.uaic.ro/~flash<br />Va afișa “patrat”<br />
  22. 22. Alte tipuri de comunicări (locale)<br />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.<br />22<br />http://www.info.uaic.ro/~flash<br />
  23. 23. Flash & Server Web (PHP)<br />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.)<br />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).<br />Odată cu cererea, aplicația Flash poate trimite (POST/GET) o serie de valori.<br />23<br />http://www.info.uaic.ro/~flash<br />
  24. 24. Flash & Server Web (PHP)<br />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):<br />24<br />http://www.info.uaic.ro/~flash<br />
  25. 25. Flash & Server Web (PHP)<br />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):<br />25<br />http://www.info.uaic.ro/~flash<br />
  26. 26. Flash & Server Web (PHP)<br />26<br />http://www.info.uaic.ro/~flash<br />
  27. 27. Flash & Server Web (PHP)<br />27<br />http://www.info.uaic.ro/~flash<br />Un obiect prin care vom face o cerere<br />
  28. 28. Flash & Server Web (PHP)<br />28<br />http://www.info.uaic.ro/~flash<br />Setăm metoda de transmitere a datelor<br />
  29. 29. Flash & Server Web (PHP)<br />29<br />http://www.info.uaic.ro/~flash<br />În acest obiect vom adăuga variabilele ce le vom transmite către PHP<br />Aici adăugam efectiv valoarea variabilei și asociem cererii obiectul conținând variabilele <br />
  30. 30. Flash & Server Web (PHP)<br />30<br />http://www.info.uaic.ro/~flash<br />Funcția ce va fi apelată când se va întoarce răspunsul…<br />
  31. 31. Flash & Server Web (PHP)<br />31<br />http://www.info.uaic.ro/~flash<br />Ce va afișa valoarea 10.<br />
  32. 32. Flash & server Web<br />Putem 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 :&gt;) ].<br />32<br />http://www.info.uaic.ro/~flash<br />
  33. 33. Flash & server Web<br />Uneori 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”.<br /> ……RĂU !<br />33<br />http://www.info.uaic.ro/~flash<br />
  34. 34. Flash & comunicarea prin sockets<br />Soluția nu este corectă deoarece comunicarea prin intermediul protocolului HTTP este asincronă. <br />Pentru comunicarea în timp real se utilizează socketuri [în AS3 de obicei se utilizează protocolul TCP].<br />(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)<br />34<br />http://www.info.uaic.ro/~flash<br />
  35. 35. Flash & comunicarea prin sockets<br />35<br />http://www.info.uaic.ro/~flash<br />
  36. 36. Flash & comunicarea prin sockets<br />36<br />http://www.info.uaic.ro/~flash<br />
  37. 37. Flash & comunicarea prin sockets<br />37<br />http://www.info.uaic.ro/~flash<br />
  38. 38. Flash & Java sockets<br />38<br />http://www.info.uaic.ro/~flash<br />Serverul va permite conexiuni la portul 4444<br />Aceasta este o instrucțiune blocantă (nu se trece la următoarea linie decât după acceptarea unei conexiuni)<br />Sunt create două streamuri de intrare/ieșire<br />Într-o buclă infinită preia o linie transmisă de Aplicația Flash și o retransmite tot către acasta<br />
  39. 39. Flash & Flash[Flash Media Server]<br />În FMS se utilizează Real-Time Messaging Protocol (RTMP) – bazate pe TCP<br />FMS 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.<br />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ă.<br />39<br />http://www.info.uaic.ro/~flash<br />
  40. 40. Flash & Flash[Flash Media Server]<br />40<br />http://www.info.uaic.ro/~flash<br />
  41. 41. Flash & Flash[Flash Media Server]<br />41<br />http://www.info.uaic.ro/~flash<br />
  42. 42. Flash & Flash[Flash Media Server]<br />Insert Movie Here…<br />42<br />http://www.info.uaic.ro/~flash<br />
  43. 43. Flash & Flash<br />Comunicareaprin intermediul unui server Java sau a FMS presupun:<br /> - serverele să aibă bandă destul de mare (mai mulți utilizatori simultan)<br /> - serverul să fie pornit non-stop<br /> - serverele de multe ori sunt “neoficiale”<br />Dar… de celemaimulte ori comunicarea este p2p<br />Putem elimina serverul care stă între cele două aplicații ce utilizează conexiunea în stil p2p ?<br />43<br />http://www.info.uaic.ro/~flash<br />
  44. 44. Flash & Flash[Stratus]<br />Stratus<br />Implementat în Flash Player 10 / AIR 1.5<br />Real-Time Media Flow Protocol (RTMFP)<br />RTMP utilizează TCP; RTMFP utilizează UDP<br />[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)]<br />Permite conectarea p2p … <br /> … cum se accesează clienții ?!<br />44<br />http://www.info.uaic.ro/~flash<br />
  45. 45. Flash & Flash[Stratus]<br />Pot fi ambele calculatoare in spatele unui firewall [NAT = NetworkAdressTranslation]<br />TURN = Traversal Using Relays around NAT<br />45<br />http://www.info.uaic.ro/~flash<br />
  46. 46. Flash & Flash[Stratus]<br />TURN:<br />46<br />http://www.info.uaic.ro/~flash<br />Internet<br />
  47. 47. Flash & Flash[Stratus]<br />TURN:<br />47<br />http://www.info.uaic.ro/~flash<br />Internet<br />
  48. 48. Flash & Flash[Stratus]<br />TURN:<br /> ????<br />48<br />http://www.info.uaic.ro/~flash<br />Internet<br />
  49. 49. Flash & Flash[Stratus]<br />TURN:<br />49<br />http://www.info.uaic.ro/~flash<br />Server<br />
  50. 50. Flash & Flash[Stratus]<br /> = rtmfp://stratus.adobe.com<br />Sunt 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].<br />Poate sunt mai mulți utilizatori ce utilizează aceeași aplicație simultan ? Pe cine cu cine conectăm ?<br />50<br />http://www.info.uaic.ro/~flash<br />Server<br />
  51. 51. Flash & Flash[Stratus]<br />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)<br />Urmează transmiterea de date [imagini & sunet]<br />Flash Player transmite datele numai de la camera și microfonul propriu și nu retransmite date primite de la altcineva.<br />51<br />http://www.info.uaic.ro/~flash<br />
  52. 52. Flash & Flash[Stratus]<br />52<br />http://www.info.uaic.ro/~flash<br />
  53. 53. Flash & Flash[Stratus]<br />53<br />http://www.info.uaic.ro/~flash<br />
  54. 54. Flash & Flash[Stratus]<br />54<br />http://www.info.uaic.ro/~flash<br />
  55. 55. Too many words and…<br /> …Flash Communication<br />55<br />http://www.info.uaic.ro/~flash<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×