comunicarea in as3

55
Flash Interop Flex Camp / Iași / 2009 Cosmin Vârlan Facultatea de Informatică Iași

Upload: university-al-i-cuza-of-iasi-romania

Post on 22-Jun-2015

1.016 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Comunicarea in AS3

Flash InteropFlex Camp / Iași / 2009

Cosmin VârlanFacultatea de Informatică

Iași

Page 2: Comunicarea in AS3

http://www.info.uaic.ro/~flash 2

• Comunicarea între Flash și JavaScript• Comunicarea cu un server Web• Comunicarea între două aplicații Flash de pe

calculatoare diferite

Cuprins…

Page 3: Comunicarea in AS3

http://www.info.uaic.ro/~flash 3

Living in a strange situation of

Too many words and…

NO COMMUNICATION ?!?!

Page 4: Comunicarea in AS3

http://www.info.uaic.ro/~flash 4

• 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)

Flash & JS

Page 5: Comunicarea in AS3

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

JS

Page 6: Comunicarea in AS3

http://www.info.uaic.ro/~flash 6

JS

Funcție JS pentru a primi mesajul din AS (va fi apelată din AS)

Page 7: Comunicarea in AS3

http://www.info.uaic.ro/~flash 7

JS

Funcție JS ce va trimite mesajul către aplicația Flash cu ID-ul “main”

Page 8: Comunicarea in AS3

http://www.info.uaic.ro/~flash 8

JS

Formular de unde vom prelua datele pentru a le

trimite către AS3

Page 9: Comunicarea in AS3

http://www.info.uaic.ro/~flash 9

JS

Sau unde vom scrie datele recepționate din

AS3

Page 10: Comunicarea in AS3

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

Flash

Page 11: Comunicarea in AS3

http://www.info.uaic.ro/~flash 11

Flash

Crearea unui câmp textual și al unui buton

Page 12: Comunicarea in AS3

http://www.info.uaic.ro/~flash 12

Flash

…. pe care vă descurcați voi să le faceți vizibile.

Page 13: Comunicarea in AS3

http://www.info.uaic.ro/~flash 13

Flash

Vom apela metoda ce trimite date la apăsarea

butonului

Page 14: Comunicarea in AS3

http://www.info.uaic.ro/~flash 14

Flash

Pentru a transmite informații către JS se

utilizează o metodă statică a interfeței externe

Page 15: Comunicarea in AS3

http://www.info.uaic.ro/~flash 15

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

Page 16: Comunicarea in AS3

http://www.info.uaic.ro/~flash 16

Flash

Funcția ce o va apela

Page 17: Comunicarea in AS3

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

Flash

17

Funcția va apela va modifica TextField-ul

Page 18: Comunicarea in AS3

http://www.info.uaic.ro/~flash 18

• 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 SharedObject ce 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.

Alte tipuri de comunicări (locale)

Page 19: Comunicarea in AS3

http://www.info.uaic.ro/~flash 19

• 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 SharedObject ce 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.

Alte tipuri de comunicări (locale)

Page 20: Comunicarea in AS3

http://www.info.uaic.ro/~flash 20

• 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:

Alte tipuri de comunicări (locale)

Variabila de trimis

Variabila de trimis

Page 21: Comunicarea in AS3

http://www.info.uaic.ro/~flash 21

• Valorile variabilelor transmis prin intermediul parametrului FlashVars pot fi “recuperate” în AS3 din obiectul loaderinfo:

Alte tipuri de comunicări (locale)

Va afișa “patrat”

Page 22: Comunicarea in AS3

http://www.info.uaic.ro/~flash 22

• 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.

Alte tipuri de comunicări (locale)

Page 23: Comunicarea in AS3

http://www.info.uaic.ro/~flash 23

• 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.

Flash & Server Web (PHP)

Page 24: Comunicarea in AS3

http://www.info.uaic.ro/~flash 24

• 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):

Flash & Server Web (PHP)

Page 25: Comunicarea in AS3

http://www.info.uaic.ro/~flash 25

• 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):

Flash & Server Web (PHP)

Page 26: Comunicarea in AS3

http://www.info.uaic.ro/~flash 26

Flash & Server Web (PHP)

Page 27: Comunicarea in AS3

http://www.info.uaic.ro/~flash 27

Flash & Server Web (PHP)Un obiect prin care vom face o cerere

Page 28: Comunicarea in AS3

http://www.info.uaic.ro/~flash 28

Flash & Server Web (PHP)Setăm metoda de

transmitere a datelor

Page 29: Comunicarea in AS3

http://www.info.uaic.ro/~flash 29

Flash & Server Web (PHP)Î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

Page 30: Comunicarea in AS3

http://www.info.uaic.ro/~flash 30

Flash & Server Web (PHP)

Funcția ce va fi apelată când se va întoarce răspunsul…

Page 31: Comunicarea in AS3

http://www.info.uaic.ro/~flash 31

Flash & Server Web (PHP)

Ce va afișa valoarea 10.

Page 32: Comunicarea in AS3

http://www.info.uaic.ro/~flash 32

• 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 :>) ].

Flash & server Web

Page 33: Comunicarea in AS3

http://www.info.uaic.ro/~flash 33

• 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 !

Flash & server Web

Page 34: Comunicarea in AS3

http://www.info.uaic.ro/~flash 34

• 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)

Flash & comunicarea prin sockets

Page 35: Comunicarea in AS3

http://www.info.uaic.ro/~flash 35

Flash & comunicarea prin sockets

Page 36: Comunicarea in AS3

http://www.info.uaic.ro/~flash 36

Flash & comunicarea prin sockets

Page 37: Comunicarea in AS3

http://www.info.uaic.ro/~flash 37

Flash & comunicarea prin sockets

Page 38: Comunicarea in AS3

http://www.info.uaic.ro/~flash 38

Flash & Java sockets

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

Page 39: Comunicarea in AS3

http://www.info.uaic.ro/~flash 39

• Î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ă.

Flash & Flash [Flash Media Server]

Page 40: Comunicarea in AS3

http://www.info.uaic.ro/~flash 40

Flash & Flash [Flash Media Server]

Page 41: Comunicarea in AS3

http://www.info.uaic.ro/~flash 41

Flash & Flash [Flash Media Server]

Page 42: Comunicarea in AS3

http://www.info.uaic.ro/~flash 42

• Insert Movie Here…

Flash & Flash [Flash Media Server]

Page 43: Comunicarea in AS3

http://www.info.uaic.ro/~flash 43

• Comunicarea prin 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 cele mai multe ori comunicarea este p2p• Putem elimina serverul care stă între cele două

aplicații ce utilizează conexiunea în stil p2p ?

Flash & Flash

Page 44: Comunicarea in AS3

http://www.info.uaic.ro/~flash 44

• 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 ?!

Flash & Flash [Stratus]

Page 45: Comunicarea in AS3

http://www.info.uaic.ro/~flash 45

• Pot fi ambele calculatoare in spatele unui firewall [NAT = Network Adress Translation]

• TURN = Traversal Using Relays around NAT

Flash & Flash [Stratus]

Page 46: Comunicarea in AS3

http://www.info.uaic.ro/~flash 46

• TURN:

Flash & Flash [Stratus]

Internet

Page 47: Comunicarea in AS3

http://www.info.uaic.ro/~flash 47

• TURN:

Flash & Flash [Stratus]

Internet

Page 48: Comunicarea in AS3

http://www.info.uaic.ro/~flash 48

• TURN:

????

Flash & Flash [Stratus]

Internet

Page 49: Comunicarea in AS3

http://www.info.uaic.ro/~flash 49

• TURN:

Flash & Flash [Stratus]

Server

Page 50: Comunicarea in AS3

http://www.info.uaic.ro/~flash 50

= 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 ?

Flash & Flash [Stratus]

Server

Page 51: Comunicarea in AS3

http://www.info.uaic.ro/~flash 51

• 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.

Flash & Flash [Stratus]

Page 52: Comunicarea in AS3

http://www.info.uaic.ro/~flash 52

Flash & Flash [Stratus]

Page 53: Comunicarea in AS3

http://www.info.uaic.ro/~flash 53

Flash & Flash [Stratus]

Page 54: Comunicarea in AS3

http://www.info.uaic.ro/~flash 54

Flash & Flash [Stratus]

Page 55: Comunicarea in AS3

http://www.info.uaic.ro/~flash 55

Too many words and…

…Flash Communication