Categories
Tutorial ActionScript

LocalConnection: due SWF parlano tra loro

L’Oggetto LocalConnection risolve la maggior parte dei problemi legati al passaggio di informazioni da un SWF ad un altro SWF. Si può anche utilizzare per passare informazioni tra ActionScript2 e ActionScript 3. In questo Tutorial vediamo come funziona.

Loading spinner

L’Oggetto LocalConnection risolve la maggior parte dei problemi legati al passaggio di informazioni da un SWF ad un altro SWF.

Esistono numerosi casi reali in cui è molto utile affidare le comunicazioni tra due SWF ad una LocalConnection:

  1. Se una pagina HTML contiene due SWF ed è necessario trasferire informazioni da uno all’altro senza utilizzare JavaScript.
  2. Se una pagina HTML contiene un SWF e un’altra pagina HTML contiene un altro SWF e non esistono riferimenti JavaScript per passare dati da una pagina all’altra.
  3. Se i due SWF si trovano in contesti separati, ad esempio uno è contenuto all’interno di una pagina HTML e l’altro è parte di una applicazione AIR.
  4. Se i due SWF non sono compatibili perché scritti con versioni diverse di ActionScript (uno in AS2, l’altro in AS3).
  5. Anche se i due SWF condividono lo stesso contesto (ad esempio uno è stato caricato all’interno dell’altro) si possono utilizzare le LocalConnection, ma non è il caso d’uso più comune.

In tutti questi casi una LocalConnection ci permette di richiamare una Funzione da un filmato ad un altro, l’unico requisito è che i due filmati stiano girando nello stesso momento sullo stesso computer.

Una LocalConnection apre una Connessione Locale, cioé limitata al computer in uso, che è condivisa da tutti i filmati aperti.

Una volta che un filmato si mette in ascolto su una connessione, qualunque altro filmato può utilizzare quella connessione per inviare informazioni. Più precisamente un SWF può eseguire una funzione presente su un altro SWF.

Una LocalConnection si compone di due parti principali:

  1. Ricezione delle istruzioni. Un SWF dovrà inizializzare una LocalConnection, impostarne il nome e i criteri di sicurezza e poi rimanere in attesa di eventuali chiamate.
  2. Invio delle istruzioni. Un SWF potrà inviare istruzioni ad una LocalConnection di cui conosce il nome.

Come ho già detto, le LocalConnection funzionano sia con ActionScript 3 che con ActionScript 2, ma la sintassi per aprire la Connessione è un po’ diversa. Questo tutorial intende coprire tutti i casi possibili, quindi iniziamo subito a lavorare perché dobbiamo realizzare ben 4 filmati.

1. Un SWF in AS2 in grado di ricevere dati.

Per visualizzare il risultato della comunicazione è necessario creare qualche elemento grafico. Sarà sufficiente una casella di testo.

  • Create un nuovo filmato AS2.
  • Con lo strumento Testo disegnate una casella di testo.
  • Selezionate la Casella di testo e dal Pannello Proprietà impostate la parola “testo” come nome Istanza e Input come tipo di testo:

    Particolare del pannello Proprietà
    Input Text con nome Istanza “testo”
  • Cliccate sul primo fotogramma e aprite il Pannello Azioni per inserire il seguente codice:
var connessioneLocale:LocalConnection = new LocalConnection();
connessioneLocale.scrivi = function(stringa:String) {
 testo.text = stringa;
};
connessioneLocale.connect("as2riceve");

In poche righe abbiamo già tutto quello che ci serve:

  • La Variabile connessioneLocale è un’Istanza di un Oggetto LocalConnection.
  • La Proprietà scrivi della nostra Connessione Locale è una Funzione che inserisce del testo all’interno della casella precedentemente creata.
  • Con il Metodo connect la nostra Connessione Locale è in ascolto di tutte le istruzioni che verranno passate utilizzando lo stesso nome as2riceve.

Se proviamo adesso questo filmato non vedremo nulla di interessante, ad ogni modo lo salviamo in una cartella con il nome ricevente.fla e procediamo con la realizzazione del prossimo filmato.

2. Un SWF in AS2 in grado di inviare dati.

Per inviare una stringa di testo al filmato precedentemente creato utilizzaremo una casella di testo e un pulsante.

  • Create un nuovo filmato AS2.
  • Con lo strumento Testo disegnate una casella di testo.
  • Selezionate la Casella di testo e dal Pannello Proprietà impostate la parola “testo” come nome Istanza e Input come tipo di testo:

    Particolare del pannello Proprietà
    Si, è la stessa immagine di poco fa.
  • Inserite sullo Stage un pulsante qualsiasi e assegnategli come nome Istanza la parola “bottone”.
  • Cliccate sul primo fotogramma e aprite il Pannello Azioni per inserire il seguente codice:
bottone.onRelease = function(){
 var connessioneLocale:LocalConnection = new LocalConnection();
 connessioneLocale.send("as2riceve", "scrivi", testo.text);
}

Anche qui abbiamo poche righe che ci permettono di inviare i dati da un SWF all’altro:

  • Al release sul pulsante è associata una funzione.
  • La Variabile connessioneLocale è un’Istanza di un Oggetto LocalConnection.
  • Con il Metodo send richiamiamo, sulla Connessione chiamata as2riceve, una Funzione chiamata scrivi, passando come parametro il testo contenuto nella casella di testo.

Ecco i primi due filmati in azione:

[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.danielealessandra.com/wp-content/uploads/2010/07/as2invia.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Scrivendo qualunque cosa nell’area di testo in alto e premendo il pulsante il testo sarà trasferito da un filmato all’altro.

[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.danielealessandra.com/wp-content/uploads/2010/07/as2riceve.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

3. Un SWF in AS3 in grado di ricevere dati.

In ActionScript 3 la gestione delle LocalConnection è più versatile, anche se il codice è molto simile a quello precedente ci sono delle significative differenze. Prima di tutto prepariamo il filmato come nell’esempio 1:

  • Create un nuovo filmato AS2.
  • Con lo strumento Testo disegnate una casella di testo.
  • Selezionate la Casella di testo e dal Pannello Proprietà impostate la parola “testo” come nome Istanza e Input come tipo di testo:

    Particolare del pannello Proprietà
    Mi piace proprio questa immagine!
  • Cliccate sul primo fotogramma e aprite il Pannello Azioni per inserire il seguente codice:
import flash.net.LocalConnection;

var connessioneLocale:LocalConnection = new LocalConnection();
connessioneLocale.connect("as3riceve");
connessioneLocale.client = this;

function scrivi(stringa:String):void {
 testo.text = stringa;
};

Le differenze con il codice precedente sono evidenti:

  • La direttiva import si assicura di importare la Classe necessaria, questo non è obbligatorio quando si scrive il codice direttamente su un fotogramma in Flash, ma è una buona abitudine.
  • La Variabile connessioneLocale è un’Istanza della Classe LocalConnection.
  • Il Metodo connect fa in modo che la nostra Connessione rimanga in ascolto di tutte le chiamate che useranno lo stesso nome as3riceve.
  • La Proprietà client definisce chi è l’Oggetto Client della Connessione, ovvero quale Oggetto deve ricevere le chiamate. Nella versione precedente tutte le Funzioni collegate alla LocalConnection dovevano essere passate come sue Proprietà, in AS3 possiamo utilizzare un qualunque Oggetto esistente, con tutti i suoi Metodi e le sue Proprietà, e renderlo disponibile attraverso le chiamate locali. Scrivendo this abbiamo stabilito che la LocalConnection si riferisce al contesto attuale, quindi tutte le Funzioni che scriveremo in questo contesto saranno raggiungibili da fuori.
  • la Funzione scrivi è una normalissima Funzione, visto che il contesto in cui si trova questa Funzione è this, e visto che il Client della Connessione è this, questa Funzione sarà raggiungibile attraverso la LocalConnection. La Funzione in sè non fa molte cose: si limita a scrivere il testo ricevuto dentro la casella di testo.

A questo punto siamo curiosi di vedere se il filmato precedente (quello che invia) è in grado di comunicare con questo appena creato… dopotutto si tratta di passare informazioni da un filmato in AS2 a un filmato in AS3, mica noccioline!

Vediamoli in azione:

[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.danielealessandra.com/wp-content/uploads/2010/07/as2invia2.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Il filmato in alto è scritto in AS2, il filmato in basso è scritto in AS3. Scrivendo qualunque cosa in alto, e premendo il pulsante, il testo verrà trasferito da un filmato all’altro.

[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.danielealessandra.com/wp-content/uploads/2010/07/as3riceve.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

4. Un SWF in AS3 in grado di inviare dati.

L’ultimo filmato di questo tutorial contiene una casella di testo e un pulsante, come nel secondo esempio, ma il codice sarà scritto in ActionScript 3, quindi prepariamo il filmato:

  • Create un nuovo filmato AS2.
  • Con lo strumento Testo disegnate una casella di testo.
  • Selezionate la Casella di testo e dal Pannello Proprietà impostate la parola “testo” come nome Istanza e Input come tipo di testo:

    Particolare del pannello Proprietà
    Giuro: è l’ultima volta che uso questa immagine!
  • Inserite sullo Stage un pulsante qualsiasi e assegnategli come nome Istanza la parola “bottone”.
  • Cliccate sul primo fotogramma e aprite il Pannello Azioni per inserire il seguente codice:
import flash.events.MouseEvent;

bottone.addEventListener(MouseEvent.CLICK, function(){
 var connessioneLocale:LocalConnection = new LocalConnection();
 connessioneLocale.send("as3riceve", "scrivi", testo.text);
});
  • La direttiva import si assicura di importare la Classe necessaria, questo non è obbligatorio quando si scrive il codice direttamente su un fotogramma in Flash, ma è una buona abitudine (come dite? L’ho già detto?).
  • Aggiungendo un Evento di tipo CLICK si assegna al pulsante un comportamento che è del tutto simile a quello dell’esempio precedente. Per una migliore comprensione degli Eventi sui Pulsanti vi invito a leggere questo altro Tutorial AS3: Azioni su un Pulsante.
  • Il nome della Connessione che verrà utilizzato è as3riceve, quindi utilizzando il filmato qui sotto verranno inviati i dati al filmato del paragrafo precedente, provare per credere!

[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.danielealessandra.com/wp-content/uploads/2010/07/as3invia.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Ultime raccomandazioni.

Ci sono delle cose da tenere a mente per un corretto utilizzo delle LocalConnection:

  1. I nomi delle Connessioni devono essere unici! Se esiste già un filmato che sta in ascolto per le Connessioni con il nome “as2riceve” non possiamo creare un secondo filmato che sta in ascolto per la stessa Connessione (con lo stesso nome). Nel caso in cui due filmati provassero a mettersi in ascolto della stessa Connessione soltanto il primo funzionerà, i tentativi successivi troveranno la Connessione occupata e non funzioneranno.
    • Vi consiglio di utilizzare una sola Connessione in ascolto per ogni SWF e che il nome della Connessione richiami il nome del filmato, ad esempio galleryConnection, mainMenuConnection, eccetera.
    • Non esiste un limite per le connessioni in uscita, un SWF potrà inviare dati a più connessioni contemporaneamente.
  2. Se i due filmati che intendete far comunicare si trovano su due domini diversi (www.miosito.it e www.altromiosito.it o anche domini di secondo livello, come ad esempio www.miosito.it e blog.miosito.it) potreste avere problemi di sicurezza. Il filmato in ascolto su una Connessione potrebbe rifiutarsi di ricevere istruzioni da un filmato che si trova su un altro dominio. Per evitare questi problemi possiamo impostare i nomi dei domini di cui ci fidiamo e passarli alla LocalConnection… Il Metodo allowDomain ci permette di passare un elenco di nomi di dominio separati da virgole, come nell’esempio seguente:
var connessioneLocale:LocalConnection = new LocalConnection();
connessioneLocale.allowDomain('www.miosito.it', 'blog.miosito.it', '*.miosito.it');
connessioneLocale.connect('nomeConnessione');

Seil filmato ricevente si trova su una connessione protetta e il filmato che invia i dati si trova su una connessione non protetta è necessario specificarlo: al posto di allowDomain scriveremo allowInsecureDomain.

Loading spinner

9 replies on “LocalConnection: due SWF parlano tra loro”

Houston, abbiamo un problema.
Vorrei aprire da un sito sviluppato in AS2, un popup sempre in Flash contenente le GoogleMaps, che supportano AS3. Ora come ora le apro richiamando una pagina html esterna, nella quale ho inserito il filmato della GoogleMap, ma mi fa abbastanza…ribrezzo. Aiuto!

Loading spinner

Ciao Federico,

purtroppo devo dirti che non puoi caricare un filmato in AS3 all’interno di un filmato in AS2 e farlo funzionare, però puoi aggirare il problema in diversi modi più o meno macchinosi…

Una soluzione che ho già adottato è quella di aprire il secondo filmato (in AS3) all’interno di un nuovo DIV posizionato in modo assoluto sulla pagina, che si sovrappone all’applicazione in AS2.

Una seconda soluzione potrebbe essere quella di realizzare un “contenitore” principale in AS3 per l’intero sito, caricare al suo interno il sito in AS2 e successivamente caricare l’ulteriore filmato in AS3 sempre all’interno dello stesso contenitore, ma è più complicato da gestire.

Loading spinner

Grazie della tempestiva risposta!
Credo che opterò per il “contenitore”, in quanto il comando che deve aprire la mappa in popup è insito nel filmato in AS2, quindi non posso usare i div.

Sbaglioqualcosa? Creo un filmato in AS3 con un unico keyframe contente il seguente codice:

var lc:LocalConnection = new LocalConnection();

lc.client = this;
lc.connect(“__conn”);
//
var d:Loader = new Loader();
d.load(new URLRequest(“filmatoAS2.swf”)); /*sito web*/
d.y = 768;
d.x = 480;
addChild(d);
var l:Loader = new Loader();
l.load(new URLRequest(“filmatoAS3.swf”)); /* mappa di Google */
l.y = 0;
addChild(l);

Grazie ancora!

Loading spinner

Grazie della tempestiva risposta!
Credo che opterò per il “contenitore”, in quanto il comando che deve aprire la mappa in popup è insito nel filmato in AS2, quindi non posso usare i div.

Sbaglioqualcosa? Creo un filmato in AS3 con un unico keyframe contente il seguente codice:

var lc:LocalConnection = new LocalConnection();

lc.client = this;
lc.connect(“__conn”);
//
var d:Loader = new Loader();
d.load(new URLRequest(“filmatoAS2.swf”)); /*sito web*/
d.y = 768;
d.x = 480;
addChild(d);
var l:Loader = new Loader();
l.load(new URLRequest(“filmatoAS3.swf”)); /* mappa di Google */
l.y = 0;
addChild(l);

Grazie ancora!

Loading spinner

Il codice che hai riportato inizializza la LocalConnection e poi carica i due SWF, non c’è alcuna Funzione richiamata da un SWF all’altro.

Se mi descrivi bene quali sono le tue esigenze, postando anche il codice che ti serve per aprire la Mappa, cercherò suggerirti una soluzione appropriata.

Se ritieni scomodo comunicare attraverso i commenti del mio Blog possiamo spostarci su http://www.graficicreativi.com/, lì mi trovi come “Professore”.

Loading spinner

Grazie per l’apprezzamento.
Chiedo scusa per il ritardo con cui rispondo, ho sempre avuto dei problemi con i commenti di WordPress… spero di aver definitivamente risolto. ^^

Loading spinner

Leave a Reply

Your email address will not be published. Required fields are marked *