• Web Design » Flash » Tutorial Flash

Flash è sempre stato sviluppato ed usato per contenutimultimediali, ma fino alla versione 6 le possibilitàper lo streaming audio erano limitate e non c'era alcunsupporto per i video. Con le versioni 6 e 7 Macromedia haintrodotto il supporto ai video e un nuovo formato di fileper supportare varie tipologie di streaming. Questo articolotratterà soltanto una tipologia di streaming definitacome "download progressivo" che non richiede ilsupporto lato server. Per il vero supporto streaming sipuò ricorrere alla soluzione commerciale di Adobedenominata Flash Media Server.

Stream FLV

Lo streaming è basato sul formato FLV, che separa ilcontenuto inviabile dal filmato in flash. Il risultatoè un filmato in flash molto compatto che agisce comeun lettore multimediale e come contenitore per i contenutiinviabili, dai quali il filmato in flash carica uno stream surichiesta.

Un singolo stream FLV contiene al massimo uno stream audio euno stream video. Flash supporta il suono non compresso evari formati compressi come MP3 e ADPCM così come ilcodec audio proprietario Nellymoser. Con la versione 6 di flash,Macromedia aveva introdotto il supporto ai video. Nellaversione 6 era supportato solo il codec video Sorenson H.263,che è una versione leggermente modificata dellostandard H.263. La versione 7 aveva introdotto un secondoformato video detto "Screen Video" , che èun formato video senza perdita, sviluppato soprattutto per lacattura dello schermo.

Convertire e creare contenuti

Un metodo per creare stream FLV è convertire ilcontenuto audio e video esistente con FFmpeg,un software maturo ed eccellente per la conversioneaudio/video in vari formati. Per convertire un video conFFmpeg è sufficiente digitare nella shell (o promptdei comandi) il comando:

ffmpeg -i infile.[avi|mpeg] stream.flv

Fmpeg usa il formato Sorenson H.263 per l'encoding deivideo. Al momento non c'è il supporto per ilformato Screen Video. Mentre il formato Screen Video èusato soprattutto per applicazioni che catturano lo schermo,Sorensons H.263 è un codec usabile per vari scopi conbuoni tassi di compressione, adatto soprattutto perl'encoding di filmati video.

Un altro progetto che tratta gli stream FLV è libflv.Mentre FFmpeg è un encoder audio/video generico,libflv si concentra sugli stream FLV. Il progetto èancora in fase embrionale, ma è comunque in grado dieseguire l'encoding di video in formato Screen Video epermette la semplice manipolazione di stream FLV come il(de-)multiplexing di flussi audio e video. Una sempliceapplicazione per la cattura dello schermo basata su GTKpuò esser trovata nella directory contenente gliesempi.

Costruire un semplice lettore multimediale

Dopo aver creato del contenuto multimediale, ènecessario un lettore multimediale in flash. Un grossovantaggio dei lettori basati su flash rispetto ad altribasati sui plugin è quello di non aver limitazioniriguardo all'estetica e alle possibilità diintegrazioni nel proprio sito web.

MINGè una libreria open source in grado di creare fileflash con quasi tutte le potenzialità di flash,includendo il supporto per Action Script, per l'audio eil video. La libreria inoltre fornisce delle estensioni persvariati linguaggi di scripting e di programmazione. Gliesempi che andremo a presentare in quest'articolo sonoscritti in PHP4, anche se sarebbe banale effettuare unporting di questi esempi in altri linguaggi quali C/C++, Javao Python.

Per eseguire l'esempi seguente è necessario averinstallato MING. E' possibile scaricarlo attraverso il servizio CVS di SourceForge.

Prima di tutto creiamo un'istanza diSWFMovie e settiamo le dimensioni e il coloredello sfondo:

ming_useswfversion(7);    $movie=new SWFMovie(7);    $movie->setDimension($width, $height);    $movie->Background($r,$g,$b); 

A questo punto l'oggetto può essere esteso daaltri oggetti flash definiti caratteri. Per l'esempio dellettore multimediale, creiamo una "tela" (canvas),la quale viene aggiunta al movie. Il metodoadd() richiede un carattere e lo inserisce nelframe corrente ritornando un riferimento all'oggetto.Questo oggetto può essere usato per muovere, ruotare oridimensionare un oggetto. Se l'oggetto richiederàl'uso di Action Script, gli si può assegnare unnome:

$stream = new SWFVideoStream();    $stream->setDimension($width, $height);    $item = $movie->add($stream);    $item->moveTo($x, $y);    $item->setname("video"); 

Il costruttore SWFVideoStream() può avereanche un file FLV come argomento. In questo caso lo streamvideo verrà integrato nel file flash. Ad ogni modoquesto approccio possiede alcuni svantaggi: prima di tutto,il filmato risultante sarà tanto grande almeno quantolo stream, ma anche il frame rate del flusso non dovràeccedere il frame rate del filmato in flash ed ogni fileflash sarà limitato a 16000 frame, il che significache lo stream intregrato potrà contenere al massimo16000 frame.

Un lettore multimediale dovrebbe essere in grado di caricaree riprodurre i flussi dinamicamente. Quindi il costruttoreSWFVideoStream() viene richiamato senzaargomenti. In questo modo verrà creata una canvasvuota, che sarà controllata dal seguente codice ActionScript:

connection = new NetConnection();    connection.connect(null);    stream = new NetStream(connection);    video.attachVideo(stream);    tream.setBufferTime(10);    stream.play('http://localhost/mystream.flv'); 

Lo script prima crea una pseudo connessione passando ilvalore null al metodo connect() dell'oggettoNetConnection. In alternativa, può esserstabilita una reale connessione ad un server di streamingAdobe passando un url valido al metodo in questione. Avendo adisposizione un'istanza di NetConnection,possiamo creare un nuovo oggetto NetStream e allegarlo allacanvas vuota. Questo oggetto gestirà lo streaming efornisce metodi per controllare lo stream. L'esempiosoprastante carica uno stream FLV dal web server locale conun buffer di download di 10 secondi. Il codice Action Scriptpuò essere compilato e aggiunto con il seguentecodice:

$action = new SWFAction($action_string);    $movie->add($action);

Fino ad ora il filmato in flash carica e riproduce un certoflusso FLV. Per controllarne il suo comportamento, manca unasemplice interfaccia grafica costituita da alcuni bottoni euna slider per scorrere il filmato. Flash ha i propri formatibitmap chiamati DBL. MING fornisce una piccola utility,png2dbl, per convertire immagini PNG in DBL.Tali immagini vengono usate per i bottoni del lettore:

$button = new SWFButton();   $flags = (SWFBUTTON_UP | SWFBUTTON_HIT |  SWFBUTTON_OVER | SWFBUTTON_DOWN);   $button->addShape(ImageShape("images/pause.dbl"), $flags);   $action = new SWFAction("stream.pause();");   $button->addAction($action, SWFBUTTON_MOUSEDOWN);   $button_ref = $movie->add($button);   $button_ref->moveTo($x, $y);

L'esempio qui sopra crea un bottone per la pausa. Unbottone interattivo viene creato in due passi: prima se nedefinisce l'estetica aggiungendo forme al variare deglieventi del mouse. In flash una forma è larappresentazione base per gli oggetti grafici. Per ognievento del mouse si può assegnare una formadifferente. Nell'esempio soprastante il bottoneavrà sempre lo stesso aspetto.
Il secondo passo definisce l'azione da intraprendere perun certo evento riguardante il bottone, assegnando del codiceActionScript.

Uno svantaggio nell'uso dello streaming progressivo senzail supporto del server è la mancata possibilitàdi sapere in anticipo la lunghezza totale dello stream.Quindi la funzionalità della slider è limitataalla parte dello stream che è già statascaricata.

La parte della slider spostabile con il mouse vienerealizzata attraverso un oggetto di tipo movie-clip. Unmovie-clip viene eseguito come un filmato indipendente nelfilmato flash: ha una time line indipendente, puògestire gli script e gli eventi esterni da sé:

$mc = new SWFSprite();   $shape = new SWFShape();   $shape->setLine(4,25,0,0,128);     $shape->movePenTo(0, 5);  $shape->drawLineTo(0, 10);   $mc->add($shape);   $mc->nextFrame();   $slider = $movie->add($mc);   $slider->moveTo($xMin, $y);

Un movie clip (SWFSprite) ha metodi similiall'oggetto SWFMovie. Il metodoadd() inserisce un oggetto flash nel framecorrente, nextFrame() termina il frame correntee ne crea uno nuovo. Il movie clip è anche un normaleoggetto flash che può essere aggiunto ad un movie. Lafunzionalità della slider viene definita in trepiccoli script. Le prime due azioni rendono il movie-clipspostabile:

$a = new SWFAction("startDrag(this, $xMin, $y, $xMax, $y, 1); drag = true;"); $slider->addAction($a, SWFACTION_MOUSEDOWN); $a = new SWFAction("stopDrag(); drag=flase;"); $slider->addAction($a, SWFACTION_MOUSEUP);

Il terzo e più lungo script setta la posizione dellostream a seconda della coordinata orizzontale della slider sequesta viene effettivamente mossa dall'utente o setta laposizione orizzontale della slider a seconda della posizionetemporale dello stream:

// larghezza in px width = xMax - xMin;    paused = false;if(drag) {   // mette in pausa lo streaming  _global.stream.pause(true);   paused = true;   x = _root._xmouse - xMin;    seekTo = (_global.streamLen / width) * x;  _global.stream.seek(seekTo);    } else {    pos = (_global.stream.time *    (width / _global.streamLen)) + xMin;   this._x = pos;    this._y = y;  }// fa ripartire lo stream  if(paused) {  _global.stream.pause(false);  }

Questo script viene assegnato al riferimento di$slider attraverso l'eventoSWFACTION_ENTERFRAME.

Dopo aver aggiunto tutti gli elementi al filmato flash ilprimo frame deve essere chiuso con la chiamata del metodonextFrame(). Poiché non abbiamo bisognodi un altro frame, il movie può esser terminato:

$movie->nextFrame(); $movie->save("FLVPlayer.swf");

Ed ecco il lettore multimediale risultante:

Conclusioni

Con flash è facile creare lettori multimedialileggeri, personalizzabili e integrabili in pagine web. Cisono potenti strumenti open source disponibili per crearecontenuti e filmati in flash. Quest'articolo haintrodotto i concetti basilari dello streaming flash e comelavorare con MING. Il lettore presentato fornisce lefunzionalità più basilari possibili ed èstato creato come puro esempio dimostrativo, estendibile insvariati modi lasciati al lettore.