1. Flash InteropFlexCamp / Iași / 2009 Cosmin Vârlan Facultatea de Informatică Iași

2. Cuprins… Comunicarea între Flash și JavaScript Comunicarea cu un server Web Comunicarea între două aplicații Flash de pe calculatoare diferite 2 http://www.info.uaic.ro/~flash

3. Living in a strange situation of Too many words and… NO COMMUNICATION ?!?! 3 http://www.info.uaic.ro/~flash

4. Flash & JS 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;) ExternalInterface este utilizată pentru a face posibilă comunicarea între ActionScript și containerul playerului Flash (de obicei AS3 și JSul dintr-un HTML) 4 http://www.info.uaic.ro/~flash

5. JS 5 http://www.info.uaic.ro/~flash

6. JS 6 http://www.info.uaic.ro/~flash Funcție JS pentru a primi mesajul din AS (va fi apelată din AS)

7. JS 7 http://www.info.uaic.ro/~flash Funcție JS ce va trimite mesajul către aplicația Flash cu ID-ul “main”

8. JS 8 http://www.info.uaic.ro/~flash Formular de unde vom prelua datele pentru a le trimite către AS3

9. JS 9 http://www.info.uaic.ro/~flash Sau unde vom scrie datele recepționate din AS3

10. Flash 10 http://www.info.uaic.ro/~flash

11. Flash 11 http://www.info.uaic.ro/~flash Crearea unui câmp textual și al unui buton

12. Flash 12 http://www.info.uaic.ro/~flash …. pe care vă descurcați voi să le faceți vizibile.

13. Flash 13 http://www.info.uaic.ro/~flash Vom apela metoda ce trimite date la apăsarea butonului

14. Flash 14 http://www.info.uaic.ro/~flash Pentru a transmite informații către JS se utilizează o metodă statică a interfeței externe

15. Flash 15 http://www.info.uaic.ro/~flash 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

16. Flash 16 http://www.info.uaic.ro/~flash Funcția ce o va apela

17. Flash Funcția va apela va modifica TextField-ul 17 http://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 LocalConnection 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. Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML. 18 http://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 LocalConnection 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. Aplicațiile Flash ce rulează în paginile WEB pot avea o serie de variabile pre-inițializate direct în HTML. 19 http://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: 20 http://www.info.uaic.ro/~flash Variabila de trimis Variabila de trimis

21. Alte tipuri de comunicări (locale) Valorile variabilelor transmis prin intermediul parametrului FlashVars pot fi “recuperate” în AS3 din obiectul loaderinfo: 21 http://www.info.uaic.ro/~flash Va 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. 22 http://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. 23 http://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): 24 http://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): 25 http://www.info.uaic.ro/~flash

26. Flash & Server Web (PHP) 26 http://www.info.uaic.ro/~flash

27. Flash & Server Web (PHP) 27 http://www.info.uaic.ro/~flash Un obiect prin care vom face o cerere

28. Flash & Server Web (PHP) 28 http://www.info.uaic.ro/~flash Setăm metoda de transmitere a datelor

29. Flash & Server Web (PHP) 29 http://www.info.uaic.ro/~flash În acest obiect vom adăuga variabilele ce le vom transmite către PHP Aici adăugam efectiv valoarea variabilei și asociem cererii obiectul conținând variabilele

30. Flash & Server Web (PHP) 30 http://www.info.uaic.ro/~flash Funcția ce va fi apelată când se va întoarce răspunsul…

31. Flash & Server Web (PHP) 31 http://www.info.uaic.ro/~flash Ce va afișa valoarea 10.

32. Flash & server Web 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 :>) ]. 32 http://www.info.uaic.ro/~flash

33. Flash & server Web 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”. ……RĂU ! 33 http://www.info.uaic.ro/~flash

34. Flash & comunicarea prin sockets Soluț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) 34 http://www.info.uaic.ro/~flash

35. Flash & comunicarea prin sockets 35 http://www.info.uaic.ro/~flash

36. Flash & comunicarea prin sockets 36 http://www.info.uaic.ro/~flash

37. Flash & comunicarea prin sockets 37 http://www.info.uaic.ro/~flash

38. Flash & Java sockets 38 http://www.info.uaic.ro/~flash Serverul va permite conexiuni la portul 4444 Aceasta 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 TCP 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. 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ă. 39 http://www.info.uaic.ro/~flash

40. Flash & Flash[Flash Media Server] 40 http://www.info.uaic.ro/~flash

41. Flash & Flash[Flash Media Server] 41 http://www.info.uaic.ro/~flash

42. Flash & Flash[Flash Media Server] Insert Movie Here… 42 http://www.info.uaic.ro/~flash

43. Flash & Flash Comunicareaprin 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 p2p Putem elimina serverul care stă între cele două aplicații ce utilizează conexiunea în stil p2p ? 43 http://www.info.uaic.ro/~flash

44. Flash & Flash[Stratus] Stratus Implementat în Flash Player 10 / AIR 1.5 Real-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 ?! 44 http://www.info.uaic.ro/~flash

45. Flash & Flash[Stratus] Pot fi ambele calculatoare in spatele unui firewall [NAT = NetworkAdressTranslation] TURN = Traversal Using Relays around NAT 45 http://www.info.uaic.ro/~flash

46. Flash & Flash[Stratus] TURN: 46 http://www.info.uaic.ro/~flash Internet

47. Flash & Flash[Stratus] TURN: 47 http://www.info.uaic.ro/~flash Internet

48. Flash & Flash[Stratus] TURN: ???? 48 http://www.info.uaic.ro/~flash Internet

49. Flash & Flash[Stratus] TURN: 49 http://www.info.uaic.ro/~flash Server

50. Flash & Flash[Stratus] = rtmfp://stratus.adobe.com 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]. Poate sunt mai mulți utilizatori ce utilizează aceeași aplicație simultan ? Pe cine cu cine conectăm ? 50 http://www.info.uaic.ro/~flash Server

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. 51 http://www.info.uaic.ro/~flash

52. Flash & Flash[Stratus] 52 http://www.info.uaic.ro/~flash

53. Flash & Flash[Stratus] 53 http://www.info.uaic.ro/~flash

54. Flash & Flash[Stratus] 54 http://www.info.uaic.ro/~flash

55. Too many words and… …Flash Communication 55 http://www.info.uaic.ro/~flash