Flash

2. Creare un nuovo progetto


Creiamo un primo progetto di lavoro per testare che tutto funzioni correttamente.

Aprite FlashDevelop e cliccate su Project -> New project..., qui scegliete AS3 Project.

Una volta creato il progetto, FlashDevelop metterà a sinistra un albero con tre cartelle :

  • bin - conterrà i file compilati, l'swf e il file html pronti per l'uso
  • lib - all'inizio la cartella è vuota, sarà vostra discrezione riempirla con librerie e classi personali o di terzi
  • src - questa cartella conterrà il file sorgente della classe documento, ossia il Main.as

Aprite il Main.as e modificatelo togliendo il listener aggiunto di default da FlashDevelop, in questo caso non necessario, e aggiungendo un TextField per testare il corretto output.

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	
	public class Main extends Sprite
	{
		private var status:TextField;

		public function Main():void
		{
			this.status = new TextField();
			this.status.text = "Prova";
			this.addChild(this.status);

			trace("Stringa che uscirà in console ...");
		}
	}
}

Testate il filmato premendo F5 ...
FlashDevelop manderà in Output qualcosa del genere :

Running process: C:\Program Files (x86)\FlashDevelop\Tools\fdbuild\fdbuild.exe "C:\AppServ\www\Articoli\Tutorial\Installare Flex e FlashDevelop\source\Source.as3proj" -ipc 2f0bab70-4413-4808-8078-6c1efbec9c43 -compiler "C:\FlexSDK" -library "C:\Program Files (x86)\FlashDevelop\Library"
Using the Flex Compiler Shell.
Building Source
mxmlc -load-config+=obj\SourceConfig.xml -debug=true -incremental=true -benchmark=false -o obj\Source633642693112291152
Incremental compile of 1
 Loading configuration file C:\FlexSDK\frameworks\flex-config.xml
Loading configuration file C:\AppServ\www\Articoli\Tutorial\Installare Flex e FlashDevelop\source\obj\SourceConfig.xml
Recompile: C:\AppServ\www\Articoli\Tutorial\Installare Flex e FlashDevelop\source\src\Main.as
Reason: The source file or one of the included files has been updated.
Files changed: 1 Files affected: 0
obj\Source633642693112291152 (819 bytes)
(fcsh)
Build succeeded
Done (0)
[Capturing traces with FDB]
Stringa che uscirà in console ...

Se tutto è andato come dovrebbe, FlashDevelop avrà inoltre lanciato un filmato Flash che mostra in output un campo di testo "Prova".

Infine se controllate la cartella bin, vi accorgerete che avrà prodotto i file pronti per essere utilizzati nel vostro sito web.

Buon lavoro.

1. Installazione


Aprite l'archivio di Flex scaricato nella lezione precedente e procedete all'estrazione.

In questo tutorial utilizzeremo il percorso C:\FlexSDK configurando di conseguenza FlashDevelop per cercare l'SDK nel percorso specificato.

Prima di installare FlashDevelop, andate nella cartella dove avete estratto Flex e sotto il percorso \runtimes\player troverete i player Flash che vi serviranno testare le vostre applicazioni.

Se avete intenzione di sviluppare direttamente per il Flash Player 10, troverete il setup e l'ActiveX sotto il percorso \FlexSDK\runtimes\player\10.

Assicuratevi inoltre di avere presenti nel sistema anche i seguenti pacchetti software :

Arrivati a questo punto potete procedere all'installazione di FlashDevelop come mostrato in questa schermata.

Avviate FlashDevelop e sotto il menù Tools -> Program Settings..., accessibile anche tramite il tasto F10, selezionate la voce AS3Context (sotto Plugins), e specificate il campo Flex SDK Location, nel mio caso C:\FlexSDK.

Ora possiamo finalmente iniziare a lavorare.

Installare Flex e FlashDevelop


In questo tutorial vi fornirò gli strumenti per creare un ambiente di sviluppo gratuito, che ci consentirà di realizzare nuovi filmati Flash, utilizzando solo ed esclusivamente software free ed open source.

Flex SDK

Versione: 
3.4

Segnalo di seguito l'uscita del Software Development Kit di Adobe Flex 3.

Questo Framework contiene le librerie per creare applicazioni Flash e non solo, e il compilatore Flex che vi consentirà di sviluppare applicazioni con un IDE a vostra scelta, come ad esempio FlashDevelop.

FlashDevelop

Versione: 
3.0.6 RTM

FlashDevelop è un editor gratuito ed open source (MIT license), che consente di creare principalmente filmati in Flash (swf).

  • Supporta l'evidenziazione della sintassi, gestione di preferiti e altre varie task.
  • Fornisce le classiche funzioni di ricerca e sostituzione del codice.
  • Fornisce suggerimenti sul codice mentre si programma, anche su librerie personali.
  • E' basato su architettura "Open" che consente di aggiungere plug-in al software.

28. Comunicazione fra filmati

In questo capitolo vedremo come sarà possibile comunicare fra filmati residenti sullo stesso client, quindi in locale.
Non verrà perciò trattata la comunicazione fra filmati in remoto, che richiede in ogni caso una tecnologia server-side.

Di solito nel Web si trovano esempi che consentono ai filmati di comunicare fra di loro tramite JavaScript, un linguaggio client-side nativo dei browser che approfondiremo fra qualche capitolo.

Comunicare con JavaScript ha i suoi vantaggi, ma non è sempre possibile perché l'utente potrebbe utilizzare un vecchio browser o avere addirittura il linguaggio disabilitato.
In ogni caso non è un metodo che ci consente un trasferimento dei dati esattamente in tempo reale, poichè ci sarà sempre JavaScript a fare da ponte con tutte le conseguenze che può portare sulle prestazioni, essendo quest'ultime strettamente legate al motore in uso dal browser.

Per far comunicare i nostri filmati, ActionScript 3 ci mette a disposizione la classe LocalConnection.

Questa classe ci consentirà di creare un canale di connessione al quale il filmato ricevente rimarrà in ascolto per eventuali chiamate, mentre il filmato che invierà i dati si collegherà alla connessione solo al momento dell'invio.

Creando più canali di connessione potremo abilitare i filmati sia alla ricezione che all'invio, inoltre attraverso la funzione allowDomain(), consentiremo la comunicazione fra filmati provenienti da diversi domini.

L'esempio che segue riporta il codice di due filmati (ricezione e invio) e il codice della pagina HTML dove risiedono contemporaneamente i due filmati sopracitati, in modo da poterne verificare il corretto funzionamento.

HelloWorld.as - Filmato di ricezione

package
{
	import flash.text.TextField;
	import flash.display.MovieClip;
	import flash.net.LocalConnection;

	public class HelloWorld extends MovieClip
	{
		private var output:TextField;
		private var conn:LocalConnection;

		public function HelloWorld():void
		{
			// Inizializziamo il campo di testo che visualizzerà il messaggio ricevuto
			this.output = new TextField();
			this.output.width = 250;
			this.addChild(this.output);

			// Inizializziamo la connessione e la mettiamo in ascolto su "miaconnessione"
			this.conn = new LocalConnection();
			this.conn.client = this;
			this.conn.connect("miaconnessione");
		}

		public function funzione(messaggio:String):void
		{
			this.output.text = messaggio;
		}
	}
}

Assegnando l'attributo client dell'istanza di LocalConnection all'oggetto this, consentiamo agli altri filmati di poter richiamare i metodi della classe corrente, quindi il metodo funzione().

Sender.as - Filmato di invio

package
{
	import flash.net.LocalConnection;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
	import fl.controls.TextInput;

	public class Sender extends MovieClip
	{
		private var snd:LocalConnection;
		private var input:TextInput;

		public function Sender():void
		{
			/*
			Inizializziamo il campo di input che raccoglierà il messaggio da inviare.
			Per il corretto funzionamento è necessario che il componente "TextInput"
			venga aggiunto alla libreria del filmato.
			*/
			this.input = new TextInput();
			this.input.move(10, 10);
			this.input.drawFocus(true);
			this.addChild(this.input);

			this.snd = new LocalConnection();
			// Per inviare il messaggio basterà cliccare ovunque sullo stage
			stage.addEventListener(MouseEvent.CLICK, this.click);
		}

		private function click(evt:MouseEvent):void
		{
			this.snd.send("miaconnessione", "funzione", this.input.text);
		}
	}
}

test.html - Pagina di prova

<html>
<body>

	<table border="1">
		<tr>

			<td>
				<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="250" height="150" id="Sender" align="middle">

				<param name="allowScriptAccess" value="sameDomain" />
				<param name="allowFullScreen" value="false" />

				<param name="movie" value="Sender.swf" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />	<embed src="Sender.swf" loop="false" menu="false" quality="best" wmode="transparent" bgcolor="#ffffff" width="250" height="150" name="Sender" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

				</object>
			</td>
		</tr>
		<tr>
			<td>
				<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="250" height="150" id="hello world" align="middle">

				<param name="allowScriptAccess" value="sameDomain" />
				<param name="allowFullScreen" value="false" />

				<param name="movie" value="hello world.swf" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />	<embed src="hello world.swf" loop="false" menu="false" quality="best" wmode="transparent" bgcolor="#ffffff" width="250" height="150" name="hello world" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

				</object>
			</td>
		</tr>
	</table>

</body>
</html>
Condividi contenuti