Terzo progetto: i file e i listati

Ora ci possiamo dedicare ai file del progetto. I file delle classi sono quattro: uno è il file principale, il punto di partenza, l'altro si occupa di gestire il preloader del filmato, gli ultimi due invece gestiscono le due schermate contemplate nel progetto, ovvero l'introduzione con il logo e la schermata con le scritte in movimento.

Potete vedere il risultato finale su questa pagina e scaricare tutto il codice del progetto contenuto in questo archivio zip.

Il primo file (FlixelText.as) definisce gli aspetti principali del progetto: larghezza della finestra, altezza, colore di background ed inizializza i componenti principali. Tra le direttive di import è stato riportato un richiamo alle librerie Flixel. Ecco, di seguito, il listato della classe:

package 
{
	import org.flixel.*;

	[SWF(width = "400", height = "400", backgroundColor = "#ffffff")]
	[Frame(factoryClass = "Preloader")]
	public class FlixelTest extends FlxGame
	{
		public function FlixelTest()
		{
			super(400, 400, IntroState, 1);
		}
		
	}
}

Passiamo quindi alla classe successiva, dedicata al preloader. Per quei pochi che non lo sapessero, un prealoder è un “componente” del filmato flash che si occupa di gestire la fase di caricamento di tutti i contenuti, per evitare dei blocchi imbarazzanti e poco “estetici” per gli utenti. Alcuni di voi si chiederanno come mai il codice del file Preloader.as è così corto. Semplicemente perché il framework Flixel si occupa di tutti gli aspetti fondamentali, evitando al programmatore il grosso del lavoro.

C'è da ricordare infatti che Flixel è un framework dedicato alla programmazione di giochi. In caso di piccoli progetti viene usato questo tipo di preloader, lasciando al programmatore più spazio alla creatività.

Qui di seguito il listato della classe Preloader.as:

package
{
	import org.flixel.FlxPreloader;

	public class Preloader extends FlxPreloader
	{
		public function Preloader():void
		{
			className = "FlixelTest";
			super();
		}
	}
}

Le successive due classi, come si può facilmente capire dal codice (anche se non l'avete mai visto ci sono delle istruzioni comprensibilissime, come il metodo justPressed con il codice del tasto Invio come argomento) si occupano di gestire le due schermate del filmato.

package  
{
	import org.flixel.FlxSprite;
	import org.flixel.FlxState;
	import org.flixel.FlxText;
	import org.flixel.FlxG;
	
	public class IntroState extends FlxState
	{
		[Embed(source = '../media/html-logo.jpg')]
		private var image:Class;
		
		private var sprite1:FlxSprite = new FlxSprite(0, 0, image);
		
		
		override public function create():void
		{
			add(sprite1);
			
			FlxG.flash.start(0xff000000, 1);
		}
		
		override public function update():void
		{
			if (FlxG.keys.justPressed("ENTER"))
			{
				FlxG.fade.start(0xff000000, 1, changeState);
			}
		}
		
		private function changeState():void
		{
			FlxG.state = new MainState();
		}
	}

}

package  
{
	import org.flixel.FlxSound;
	import org.flixel.FlxSprite;
	import org.flixel.FlxState;
	import org.flixel.FlxText;
	import org.flixel.FlxG;

	public class MainState extends FlxState
	{
		[Embed(source = '../media/html-logo.jpg')]
		private var image:Class;
		
		private var sprite1:FlxSprite;
		
		[Embed(source = '../media/yoyo.mp3')]
		private var sound:Class;
		
		private var sound1:FlxSound;
		
		private var text1:FlxText;
		private var text2:FlxText;
		
		override public function create():void
		{
			sound1 = new FlxSound();
			sound1.loadEmbedded(sound, true);
			sound1.volume = 0.2;
			sound1.play();
			
			sprite1 = new FlxSprite(0, 0, image);
			add(sprite1);
			
			text1 = new FlxText(0, 10, 400, "Il Primo Sito in Italia");
			text2 = new FlxText(0, 350, 400, "di Risorse per Webmaster");
			
			text1.color = 0xffffffff;
			text2.color = 0xffffffff;
			
			text1.size = 30;
			text2.size = 22;
			
			add(text1);
			add(text2);
			
			FlxG.flash.start(0xff000000, 1);
		}
		
		override public function update():void
		{
			if (text1.x > - 400)
			{
				text1.x -= 3;
			}
			else
			{
				text1.x = 400;
			}
			
			if (text2.x > - 400)
			{
				text2.x -= 2;
			}
			else
			{
				text2.x = 400;
			}
		}
	}

}

Nella prima schermata adopereremo un effetto di fade-in per mostrare il logo. Premendo il tasto Invio, quindi, verrà avviato il fade-out per la transizione alla schermata successiva. La seconda schermata, oltre al logo, mostrerà delle scritte in movimento.

Si noti, nel codice, la sovrascrittura di due metodi cruciali per le schermate: create ed update. Nel primo ci vanno tutte le routine che vengono eseguite in fase di “creazione” dell'oggetto corrispondente alla schermata. Il secondo metodo invece conterrà tutte le istruzioni legate al proseguimento logico e coerente del filmato (un esempio su tutti, il controllo della pressione del tasto Invio oppure il movimento del testo). Si noti anche l'embedding di un elemento audio, praticamente uguale, nella prassi, all'embedding di un'immagine.

Altrettanto intuitivi sono il metodo play per riprodurre un file audio e la proprietà volume per gestire il volume del file audio in oggetto.

Conclusione

Dopo la creazione di questo ultimo progetto, la nostra guida introduttiva all'ambiente di sviluppo FlashDevelop può considerarsi conclusa. Facendo una panoramica abbiamo imparato tutto (o quasi) quello che c'è da sapere per potersi orientare nel'IDE ed avviare qualche piccolo progetto di base, magari utilizzando una libreria esterna a cui appoggiarsi. Buon lavoro!