Realizzare un videoplayer in ActionScript 3.0
Immagini
In questo articolo creeremo un player di video FLV utilizzando Flash CS 3 e ActionScript 3.0.
Acquisiremo un elenco di video da un file XML esterno e creeremo una lista cliccabile che l'utente potrà utilizzare per visualizzare il video desiderato (figura 1).
A tal fine sfrutteremo i componenti List e FLVPlayBack, entrambi istanziati e utilizzati attraverso ActionScript 3.0; non li posizioneremo manualmente sullo Stage ma saranno quindi creati e manipolati interamente via codice.
Per svolgere il tutorial è necessario avere una conoscenza minima:
- nella creazione di classi in AS 3.0
- nell'utilizzo dei component List e FLVPlayback
- nella gestione di grafica e oggetti in Flash CS3 tramite displayList
- nel parsing di dati tramite XML E4X
Per approfondire l'argomento ActionScript 3.0 consulta l'ADOBE DEVELOPER CONNECTION (http://www.adobe.com/devnet/actionscript/#getting_started) oppure il nostro usergroup AugItaly all'indirizzo http://www.augitaly.com/
Introduzione
In Flash CS e Actionscript 3.0, è ancora possibile posizionare gli elementi sullo Stage e scrivere il codice ActionScript all'interno del file .fla, ma in questo tutorial realizzeremo il video player spezzando il codice in diversi file esterni.as scrivendo delle classi personalizzate, ognuna con funzionalità distinte.
Creeremo quindi quattro classi .as:
- playerVideo.as: per gestire la visualizzazione dei video attraverso il componente FLVPlayback
- listManager.as: per creare la lista dei video selezionabili
- xmlVideo.as: che si occuperà di acquisire i dati dal file XML
- init.as: per istanziare le precedenti tre classi
Il file .fla, comunque indispensabile per visualizzare il player, sarà realizzato a fine tutorial e potrà essere compilato solo dopo il completamento del punto 4)
1) Visualizzare video FLV (playerVideo.as)
Nel costruttore di questa classe creiamo una nuova istanza dell'oggetto FLVPlayback, settandone dimensioni, coordinate x/y e posizionando quindi sullo Stage tale componente che si occuperà esclusivamente di visualizzare i filmati FLV.
Il metodo playVideo(), di tipo public, sarà invocato dalla classe listManager ogni qualvolta una voce della lista sarà selezionata. Settando la proprietà source visualizzeremo il video desiderato nell'area definita nel costruttore.
package com.augitaly
{
import flash.display.Sprite;
import fl.video.FLVPlayback;
public class playerVideo extends Sprite
{
private var myPlayer:FLVPlayback;
public function playerVideo()
{
myPlayer = new FLVPlayback();
myPlayer.x = 150
myPlayer.y = 0
myPlayer.setSize(320, 240)
addChild(myPlayer)
}
public function playVideo(url:String):void
{
myPlayer.source = url;
}
}
}
2) Creare la lista dei video (listManager.as)
La classe listManager si occuperà invece di creare e gestire la lista dei video acquisita dal file XML (operazione delegata alla classe xmlVideo.as, analizzata nel paragrafo successivo)
Nel costruttore di questa classe, come effettuato per il componente FLVPlayback, creiamo un'istanza del componente List.
Implementiamo, inoltre, tre motodi, due di tipo public e uno private:
- public addItem(child) : per aggiungere un elemento alla lista (invocato dalla classe xmlVideo)
- public defaultVideo(): anch'esso invocato dalla classe xmlVideo, visualizza il primo video della lista non appena i dati acquisiti dal file XML saranno completamente caricati (vedi paragrafo successivo). Invochiamo il metodo playVideo() della classe playerVideo, passando come parametro il link del primo elemento della lista.
- Private onChange(): invocato ogni qualvolta un elemento della lista viene selezionato.
package com.augitaly
{
import fl.controls.List;
import fl.data.DataProvider;
import flash.display.Sprite;
import flash.events.Event;
import fl.video.FLVPlayback;
public class listManager extends Sprite
{
private var myList:List ;
private var myPlayer:*;
public function listManager(player:*) {
myPlayer = player
myList = new List();
myList.rowCount = 10;
myList.move(0,0);
myList.setSize(150, 240)
myList.addEventListener(Event.CHANGE, onChange);
addChild(myList);
}
// Aggiungiamo un elemento alla Lista
public function addItem(child:XML):void
{
myList.addItem({label: child.title, data:child.link});
}
// Video di default
public function defaultVideo():void
{
// Disabilitiamo il primo video della lista
myList.selectedIndex = 0;
// Visualizziamo il primo video della lista
myPlayer.playVideo(myList.getItemAt(0).data);
}
// Visualizziamo il video ad ogni click
private function onChange(e:Event):void {
myPlayer.playVideo(myList.selectedItem.data)
}
}
}
3) Caricare dati da file XML (xmlVideo.as)
Questa classe sfrutta le potenzialità offerte dall'E4X, una nuova funzionalità introdotta in ActionScript 3.0 per agevolare il parsing (l'interpretazione) dei dati acquisiti tramite XML.
Innanzitutto, sfruttiamo le classi XML, URLRequest e URLLoader per effettuare l'acquisizione dei dati.
Al completamento dell'operazione effettuiamo un ciclo su tutti i nodi item, passando ognuno di essi al metodo addItem() della classe listManager creata in precedenza, che si occuperà di popolare il componente List.
Di seguito il file XMLcon la lista dei video:
<?xml version="1.0" ?>
<lista>
<video listName="Lista dei video di esempio">
<item>
<title>Beach</title>
<link>video/beach.flv</link>
<pubDate>Fri, 14 Sep 2007 </pubDate>
</item>
<item>
<title>Sky</title>
<link>video/cielo.flv</link>
<pubDate>Fri, 14 Sep 2007</pubDate>
</item>
</video>
</lista>
La classe xmlVideo.as:
package com.augitaly
{
import flash.events.*
import flash.net.*
import fl.controls.List;
public class xmlVideo
{
private var myXML:XML ;
private var XML_URL:String = "xml/videoList.xml";
private var myXMLURL:URLRequest
private var myLoader:URLLoader;
private var myList:listManager
public function xmlVideo(lst:listManager)
{
myList = lst;
myXML = new XML();
myXMLURL = new URLRequest(XML_URL);
myLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
}
private function xmlLoaded(event:Event):void
{
myXML = XML(myLoader.data);
parseXML(myXML);
}
private function parseXML(myXML:XML)
{
// Popolamento myList
for each (var property:XML in myXML.video.item)
{
myList.addItem(property)
}
// Visualizziamo il primo elemento della lista
myList.defaultVideo()
}
}
}
4) Inizializzare tutte le classi (init.as)
L'ultima classe che scriveremo, init.as, servirà ad istanziare le precedenti e sarà a sua volta istanziata dal file .fla che creeremo nel prossimo paragrafo.
Il costruttore in questo caso accetta un parametro, target:*, che specifica il contenitore presente nel file .fla in cui visualizzeremo il video player.
Utilizzando come datatype il carattere speciale "*" indichiamo al compilatore che possiamo accettare qualunque tipo di oggetto (MovieClip, Sprite, ecc.)
package
{
import com.augitaly.*;
public class init
{
public function init(target:*)
{
// Video player
var player:playerVideo = new playerVideo();
target.addChild(player)
// Lista dei video
var lista:listManager = new listManager(player);
target.addChild(lista)
// Caricamento XML
var xmll:xmlVideo = new xmlVideo(lista);
}
}
}
Come prima operazione istanziamo la classe playerVideo.
Subito dopo creiamo la lista dei video; passiamo come parametro l'istanza del video player , necessario per indicare alla classe il componente in cui visualizzare i video selezionati.
Infine carichiamo il file XML, popolando il componente lista con l'elenco dei video acquisiti dal file esterno.
5) Istanziare la classe principale (init.as) dal file .fla e testare lo script
Creiamo un nuovo flash file actionscript 3.0, assegnamo un nome qualunque, ad esempio VideoPlayer.fla e trasciniamo in libreria (non sullo Stage) un componente List e un FLVPlayback, operazione indispensabile se vogliamo utilizzare tali components via codice.
Per testare l'applicazione sarà sufficiente istanziare la classe init che, come visto in precedenza, si occuperà a sua volta di istanziare tutte le altre classi e alla quale passiamo come parametro il valore this, ovvero lo Stage.
var videoPlayer:init = new init(this);
In alternativa al codice precedente, è possibile creare un contenitore in cui posizionare gli oggetti:
var contenitore:Sprite = new Sprite;
contenitore.x = 100;
contenitore.y = 100;
addChild(contenitore)
var videoPlayer:init = new init(contenitore);
