Creare una presentazione con Flash CS3

[Flep]

Navigando il sito Adobe ho trovato un tutorial che spiega come creare una presentazione con un video sincronizzato a testi ed animazioni.

L' ho tradotto ed ecco il risultato:

Sincronizzare testi e filmati è un ottimo modo di dar vita ad una presentazione professionale su internet.

Confrontata con una classica presentazione di diapositive statiche, questa semplice presentazione attrae il pubblico combinando audio, video e animazioni.

La maschera compone video, keyframes etichettati contenenti il testo che sincronizzano testo e animazioni con il filmato, e bottoni di navigazione in nella parte inferiore.

Mentre viene eseguito il filmato, il keyframe appare all’istante preimpostato e i bottoni di navigazioni evidenziano gli argomenti citati.

Quando l’utente clicca uno di questi bottoni, video e testo si modificano automaticamente per mostrare l’argomento richiesto.

Di seguito, se cliccate l' immagine vedrete il risultato di questo tutorial

Ecco alcuni esempi di come potete modificare questa presentazione per le vostre necessità:

• Aggiungere il vostro filmato, ridimensionarlo e posizionarlo ovunque nella pagina


• Aggiungere i loghi e i colori della vostra azienda a qualunque parte della presentazione, anche sullo sfondo


• Aggiungere bottoni, testo, e altro nella barra di navigazione inferiore


• Muovere la barra di navigazione in alto o dai lati


• Aggiungere il vostro testo e le vostre immagini in modo che siano sincronizzati col vostro filmato


• Aggiungere i componenti FLVPlayback UI per un controllo personalizzato del filmato


• Questo articolo fornisce una descrizione della struttura del template ed il processo rchiesto per


• Questo articolo fornisce una descrizione della struttura della maschera ed il processo richiesto per trasformare il file fornito in una presentazione adattata per le vostre necessità. L'articolo e i files forniti sono un


• aggiornamento ActionScript 3.0 all’articolo precedente su Flash Professional 8.


• Le caratteristiche aggiornate includono quanto segue:


• L'archivio sorgente di ActionScript 3.0 e la sintassi di ActionScript 3.0


• Componente ActionScript 3.0 di FLVPlayback


• Tasto a schermo intero e modalità schermo intero


• Metodo di sincronizzazione Timeline-based


• Interfaccia utente aggiornata

FILES DI ESEMPIO:

synchronized_video_preso_cs3.zip (ZIP, 3.7 MB)

Conoscenza necessaria

Questo articolo è indirizzato agli utenti di Flash principianti e agli sviluppatori che sono interessati a aumentare la loro produttività nella sincronizzazione video.

Nessuna esperienza di programmazione è necessaria per questo tutorial.

CAPIRE IL LAYOUT DEL PROGETTO

Questa sezione fornisce una rapida descrizione del processo per usare il template dandovi un punto di partenza. Se siate già a vostro agio con il layout del template e con i concetti generali, potete passare alla sezione successiva per una descrizione più dettagliata. Per chiunque sia nuovo all’usa delle template in Flash, o non trovi familiare la struttura dei files forniti, continuate con questa sezione.

Dovreste già avere conoscenza dei seguenti termini utilizzati nell’articolo:

FLV: Questo acronimo si riferisce al formato video Flash usato da Flash e da Flash Media Server.

Componente FLVPlayback: Il controllo di esecuzione dei file FLV disponibile nel authoring tool di Flash. Il componente ActionScript 3.0 FLVPlayback include molti miglioramenti nel flusso di lavoro, l’opzione di modificarne la skin, e le ActionScript API.

Punti di indicazione: Aggiungerete i punti di indicazione in diverse posizioni nel video in modo da poter sincronizzare i contenuti con questi indici o navigare attraverso questi con un semplice click. Potete includere i punti di indicazione nel FLV usando il Video Import Wizard o il Flash Video Encoder. Potete anche generare i punti di indicazione usando ActionScript o il parametro cuePoints di FLVPlayback. I punti di indicazione inclusi sono più precisi e vi si può accedere con più opzioni nelle ActionScript API. Entrambi i punti di indicizzazione funzionano con questa template, ma l’utilizzo di quelli inclusi è suggerito.

Prima di iniziare

Uno dei concetti chiave ripetuti nel template è il concetto delle sezioni all'interno del video. L'immagine grande è quella in cui andrete a scegliete i punti di indicizzazione all’interno del video, per usarli per la sincronizzazione. La struttura della tamplate Flash rispecchia questi punti nel modo seguente:

I bottoni di navigazione corrispondono ai punti di indicizzazione nel video

Sezioni di testo e contenuti animai corrispondono a punti di indicizzazione nel video

Le regolazioni del componente FLVPlayback definiscono i punti di indicazione e controllano la navigazione automatizzata attraverso il contenuto

Per i migliori risultati, create un rapido schema delle sezioni che volete mostrare nel vostro filmato. L'obiettivo durante questa fase di progettazione è di determinare dove dividere il vostro filmato. A quale posizione desidererà logicamente saltare chi guarderà il vostro video? Quindi decidete quale testo, immagine e animazione volete mostrare per ogni sezione. Quale contenuto potete usare per rendere il filmato più interessante?

Capire i file FLA forniti

Il file SynchronizedVideoPres.fla contiene un esempio completamente funzionale del template. Il contenuto del file FLA corrisponde al contenuto visto nell’introduzione di questo articolo. Prendetevi il tempo necessario per controllare il file FLA.

Se non l’avete già fatto potete scaricare il file SynchronizedVideoPres.fla dalla prima pagina, quindi aprirlo con Flash CS3 Professional.

Notate i layers e i frames nella Timeline principale. L’etichetta dei keyframes corrisponde al nome punti di indicizzazione nel video. La sincronizzazione del contenuto avviene navigando verso un frame etichettato in conseguenza a un evento cuePoint generato dall’istanza FLVPlayback.

Il Syncronized Video Template contiene sei layesr nella Timeline princpale (Figura 1):

Sfondo: Immagine di sfondo che contene tutti i colori, grafici e testo che desiderate visualizzare durante la vostra presentazione.

FLVPlayback: Le istande del componente di FLVPlayback usate per visualizzare il video.

Tasti: Tasti di navigazione.

Contenuto: Contenuto disposto sui keyframes corrispondenti ai punti di indicizzazione.

Titolo: Campo del titolo mantenuto durante tutta la presentazione.

Azioni & Etichette: Il frame 1 contiene il codice che avvia il la presentazione, mentre i keyframes successivi contengono le etichette corrispondenti ai nomi dei punti di indicizzazione.

Figura 1. Timeline principale nel template FLA

Il contenuto degli strati Sfondo, FLVPlayback, Tasti e Titolo appare continuamente durante la presentazione. Sullo strato dello sfondo, potete modificare la grafica dell'interfaccia utente. Sullo strato dei tasti potete modificare i bottoni. Il componente FLVPlayback, sullo strato dallo stesso nome, è il meccanismo che carica e visualizza il file FLV. Funge da punto centrale e da controllore della presentazione.

I cinque keyframes etichettati sono visualizzati uno alla volta mentre si visualizza il video. Sono come punti di pausa per il filmato. Per aggiungere la vostra collezione di frames etichettati e associarli con la sezione dei punti di indicizzazione nel video, inserite il nome del frame nei parametri del punto di indicizzazione per il componente FLVPlayback nella finestra dei controlli.

Potete modificare la presentazione andando al frame etichettato contenente il contenuto che volete aggiornane, e facendo li le vostre modifiche.

Primi passi per usare il template

Se siete nuovi nell’uso dei template, o semplicemente volete alcune indicazioni, seguite questi passi per iniziare:

Creare una cartella sul vostro hard disk per memorizzare una copia della presentazione FLA e il vostro filmato.

Duplicate il file fornito SyncronizedVideoPres.fla e rinomina telo. Spostatelo della cartella precedentemente creata. Nota: è una buona idea non sovrascrivere il file originale, in modo da potervi sempre accedere durante il lavoro.

Create il vostro filmato, convertitelo nel formato FLV (vedere “Cattura e codifica di filmati” nella Flash Video Learning Guide per maggiori informazioni), e spostate il file FLV vicino al file FLA (generalmente nella stessa cartella del file FLA o in una diretta sottocartella). Prendete nota del nome del file e del percorso relativo al file FLA. Inserirete queste informazioni nei parametri del componente FLVPlayback successivamente.

Aprite il file FLA in Flash e iniziate la modifica. Notate che poiché il file fornito contiene già un esempio funzionante, dovrete aggiungere o rimuovere contenuti durante la vostra personalizzazione. Leggete la sezione successiva per maggiori dettagli su come editare da qui.

Schermi contro frames

Le versioni precedenti di questo template utilizzavano gli schermi Flash per la sincronizzazione e come metafora di layout. Gli schermi non sono più supportati in ActionScript 3.0, quindi non sono utilizati nel layout di questo template.

AGGIUNGERE FILMATI, CONTROLLI DI ESECUZIONE E PUNTI DI INDICAZIONE

Quando aprite il file SynchronizedVideoPres.fla, noterete che il filmato è quel’oggetto rettangolare nero nel layer FLVPlayback (Figura 2).

Potete personalizzare il filmato da questa schermata in diversi modi:

Cambiare il sorgente de filmato

Cambiare la dimensione del filmato

Cambiare la posizione del filmato

Aggiungere e rimuovere punti di indicizzazione come indicatori di sincronizzazione

Aggiungere componenti di interfaccia utente personalizzati al FLVPlayback per avere controlli addizionali sul filmato

Figura 2. Vista del template mentre l’istanza FLVPlayback è selezionata sulla scena

Cambiare il filmato eseguito

Ecco come fare in modo che la presentazione mostri il vostro filmato invece di quello fornito con l’esempio:

Cliccare sul’istanza FLVPlayback per selezionarla.

Apra il pannello Component Inspector (Window > Component Inspector). Potrebbe essere necessario selezionare nuovamente il filmato sulla scena.

Nel pannello Component Inspector, cliccare sul campo source per inserire il percorso del video Flash (Figura 3). Questo è il percorso relativo del file FLV sul server. Notate che se state utilizzando Flash Media Server per il download dei filmati in stream, avrete bisogno di inserire il percorso assoluto per attivare il server.

Figura 3. parametri di ActionScript 3.0 FLVPlayback nel pannello Component Inspector

Cambiare la dimensione e la posizione del filmato

Se la dimensione del vostro filmato differisce da quella del template, o se volete ingrandire il vostro filmato, potete cambiarne la dimensione facilmente.

Disponete il filmato dove preferite nella presentazione. Il filmato compare sulla sinistra al centro della scena per default. Tenete presente che se cambiate la posizione del video, altri layer potrebbero sovrapporsi al filmato se non li spostate di conseguenza:

Selezionare l’istanza FLVPlayback sullo finestra dei comandi.

Nel visualizzatore delle proprietà nella parte inferiore dello schermo, cambiate i valori di W e di H in modo da corrispondono alla larghezza ed all'altezza (in pixel) del vostro filmato. Potete inoltre fare click-destro (mela-click sul mac) sull’istanza FLVPlayback e selezionare Free Transform dal menu apparso per visualizzare le maniglie di ridimensionamento sul video.

Per riposizionare il filmato nella finestra dei controlli, trascina telo dove preferite.

Aggiungere, rimuovere e disabilitare i punti di indicizzazione ( cue points )

I punti di indicazione sono un elemento fondamentale nella sincronizzazione del filmato con il conenuto. Flash CS3 Professional fornisce un facile strumento per modificarli situato nel parametro cuePoint del componente FLVPlayback.

Per vedere i punti di indicazione del file d’esempio:

Selezionare l’istanza FLVPlayback sullo schermo di comandi.

Aprire il pannello Component Inspector e fare doppio-click sul parametro cuePoint per avviare la finestra di editing Flash Video Cue Points (Figura 4).

Figura 4. Punti di indicizzazione presenti nel file di esempio fornito

Per modificare i punti di indicizzazione esistenti, cliccare sul nome o sul’orario e inserire il nuovo valore.

Per aggiungere un punto di indicazione, cliccare sul più (+) in alto a sinistra nella finestra. Modificare i campi come desiderato.

Per rimuovere un punto di indicazione, selezionarlo e cliccare sul meno (– ).

Verranno mostrati altri dettagli sui punti i punti di indicazione più avanti.

Nota: Il metodo descritto precedentemente funziona soltanto se state aggiungendo o editando punti di indicizzazione ActionScript usando il codice o l’editor Flash Vieo Cue Point. I file forniti usano punti di indicizzazione di navigazione che sono inclusi durante la codifica e sono modificabili solo durante la codifica. Usare i punti di indicizzazione di navigazione inclusi è il metodo suggerito se state utilizzando pulsanti pr navigare attraverso i punti di indicizzazione oltre a mostrare contenuti sincronizzati.

Aggiungere elementi di interfaccia personalizzati nel componente FLVPlayback sullo schermo

La aggiunta dei comandi di esecuzione è semplice. Tutto ciò che dovete fare è aggiungere tali elementi dal pannello Components in Flash CS3 Professional. Questi componenti offrono una gamma di comandi funzionali che possono essere aggiunti singolarmente o in combinazione ad una istanza di FLVPlayback. Questa versione della template fornisce l’aggiunta del controllo FullScreenButton per avviare la modalità schermo intero. I componenti sono progettati per essere facilmente personalizzati e modificati.

Per esempio, se desideraste aggiungere un tasto mute, basta seguire i seguenti punti:

Aprire la presentazione FLA in Flash CS3 Professional.

Aprire il pannello dei componenti e trascinare l’elemento MuteButton dalla cartella Video alla scena.

Denominare l’istanza mute_btn.

Selezionare il keyframe sulla layer delle azzioni e aprire il pannello delle azioni. Aggiungere il seguente codice per attivare il tasto con il componente video:

display.muteButton = mute_btn;

Questo è quanto. Doppio-click sull’istanza del bottone se volete modificane l’aspetto. Modificate come di consueto per i simboli del filmato.

Il processo è abbastanza semplice. Dovrete assegnare un nome di istanza al componente dell’interfaccia e associare tale nome al componente del filmato utilizzando un pochino di ActionScript.

Si noti che l’istanza FLVPlayback è chiamata display nella template fornita. Il frammento di codice display.muteButton si riferisce alla proprietà muteButton nella pagina delle istanze. Ogni componente dell'interfaccia di utente ha una proprietà con nome simile nel componente FLVPlayback.

FARE I CAMBIAMENTI AI TASTI DI NAVIGAZIONE

Potete personalizzare i pulsanti della parte inferiore in ogni modo vogliate aggiungendo immagini, testo e anche animazioni (Figura 5). I pulsanti e la loro immagine associata sono disposti nella parte inferiore dello scherno nella Buttons Later.

Figura 5. Tasti di navigazione nella template

Ci sono diverse cose che potete fare per aggiornare la barra di navigazione:

Cambiare le posizioni e le immagini dei pulsanti

Cambiare il colore di evidenziazione

Rimuovere tasti di navigazione

Aggiungere tasti di navigazione

Aggiornamento della grafica dei pulsanti

Per spostare l’insieme dei tasti di navigazione verso un'altra posizione sullo schermo:

Fare click sulla Button Layer.

Bloccare le altre layer e spostare pulsanti e relativa grafica nella posizione desiderata.

Per aggiornare la grafica o sostituirla con del testo:

Fare click sulla Button Layer.

Notare che i pulsanti compaiono come una serie di pulsanti rettangolari con il testo sovrapposto. I pulsanti sono tutti istanze dello stesso simbolo nella Library.

Cambiare la grafica del tasto facendo doppio-click su una istanza per visualizzare la sua timeine. Modificare i frame Up, Down e Over nel modo desiderato. Importare la nuova grafica selezionando File > Import > Import to Stage e scegliendo il file che volete utilizzare. Ritornate alla Timeline principale (Control-E) una volta completata la modifica.

Cambiare o rimuovere il testo facendo doppio-click sul testo stesso. Modificare gli attributi del testo cambiando i valori nel Property Inspector nella parte inferiore dell’area di lavoro.

Per ridimensionare le immagini che avete importato, fate click-destro e selezionate Free Transform dalla menu. Usate le maniglie per ridimensionare l’immagine. Notate che è più efficiente importare immagini aventi già la dimensione che volete che abbiano nel filmato.

Cambiare il colore di evidenziazione della sezione

Se lo desiderate, potete modificare l’evidenziazione che appare sui bottoni di navigazione (Figura 6). Questo vi serve solo se volete modificarne il colore, aggiungere testo, o anche rendere l’evidenziazione un immagine. Molte persone probabilmente la lasceranno com’è.

Figura 6. Rettangolo verde intorno al pulsante di navigazione

Lo stesso rettangolo verde è utilizzato per tute le grafiche, perciò sarà sufficiente modificarlo in un solo luogo. Notate che la dimensione del rettangolo è la stessa del pulsante. Il codice di ActionScript allinea automaticamente il rettangolo all’angolo in alto a sinistra del pulsante durante l’esecuzione della presentazione. Ricordate che se create metodi di evidenziazione personalizzati dovrete modificarli per avere il giusto allineamento.

Poiché tutte le grafiche utilizzate in questo progetto provengono dalla Library, potete aprirle direttamente da li e modificarle in una sola volta:

Aprire il pannello delle Library premendo F11 o selezionando Windows > Library.

Aprire la cartella Navigation Buttons (Figura 7).

Figura 7. Pannello della Library con il rettangolo di evidenziazione selezionatao

Fare doppio-click sull’icona vicino a Custom Button Selected. Il centro vedrete il rettangolo verde di evidenziazione; potete modificarlo a quasto punto.

Per modificare il rettangolo verde, fateci doppio click sopra. Per modificare il colore del bordo, selezionate un nuovo colore nella Tool palette:



Potete aggiungere cuò che volete in questa area, perfino immagini o testo. Ogni cosa che aggiungerete apparirà quando la presentazione giungerà a questo punto. Notate che l’evidenziazione verde è in effetti formata da due sfumature diverse di verde al fine di dare l’effetto luminoso. Potete da qui modificare solo uno o tutti e due i colori.

Per accettare i vostri cambiamenti, cliccate nuovamente sullo schermo dei comandi.

Rimozione dei tasti di navigazione

Per rimuovere l'intera barra di navigazione, fate click sulla Buttons Layer e selezionate tutto quello che contiene, quindi premete il tasto Delete.

La rimozione di un singolo tasto è differente. Dopo aver cliccato sulla Buttons Layer, selezionate il pulsante che desiderate eliminare e premete Delete. Siate sicuri di eliminare sia l’istanza del bottone che il relativo testo. Per esserne certi, selezionate col mouse l’intera area dello schermo. Se vedete delle selezioni blu in eccesso, elimina tele.

Aggiunta dei tasti di navigazione

Per aggiungere un tasto alla barra di navigazione, potete rendere uno degli altri pulsanti più piccolo per fare spazio a quello nuovo, oppure posizionare il nuovo pulsante da qualche altra parte dello schermo. I pulsanti non devono necessariamente essere tutti sulla stessa linea. Seguite questi punti:

Bloccate tutti gli strati tranne lo strato dei tasti.

È più facile copiare un pulsante e modificane la copia. Selezionate un pulsante che volete copiare cliccandoci con il mouse, quindi fate copia e incolla (quello nuovo apparirà al centro dello scermo).

Spostate il tasto nella posizione desiderata.

Selezioni File > Import per aggiungere un’immagine. Sostituite l’immagine precedente con quella appena importata.

Cliccate sul bottone appena aggiunto. Accertatevi di cliccare sul botton, non solo sulla sua grafica. Una volta cliccato, un rettangolo blu apparirà intorno ad esso (Figura 8).

Nel Property Inspector, assegnate un nome all’istanza del bottone. Questo aziona l’evidenziazione del bottone quando cambia il punto di indicizzazione. Il codice nella Action Layer si aspetta che tale nome sia identico a quello del punto di indicizzazione seguita da _btn. Per esempio, se il punto di indicizzazione si chiama introduction, allora il nome dell’istanza del pulsante sarà introduction_btn (Figura 8). Come ricorderete, i nomi dei punti di indicizzazione sono definiti nel componente FLVPlayback e corrispondono al nome visualizzato sulo schermo.



Figura 8. Il tasto correttamente selezionato con il nome del’istanza correttamente associata al punto di indicizzazione nominato introduction

Selezionate il frame 1 del layer Action and Labels e aprite l’Action Panel (selezionare Windows > Actions). Dovrete aggiungere una event handler function al bottone che si attivi ad un suo click (in ActionScript 3.0 non è possibile inserire codice direttamente nel bottone). Il processo prevede la creazione di tale funzione e l’assegnazione al bottone utilizzando il comando addEventListener.Copiate il codice seguente alla fine del codice del’Action Layer

// Introductionfunction 
introductionHandler(evt:MouseEvent):void
{
	// Seek to cue point   
	seekToCuePoint( "introduction" );
}
introduction_btn.addEventListener(MouseEvent.CLICK,introductionHandler);

Cambiate il testo che corrisponde al nome del punto di indicizzazione –in questo caso ‘introduction’- ovunque appaia. Nell’esempio preceente, quendo un utente clicca il bottone introduction_btn, il filmato viene mostrato dal punto di indicizzazione ‘introduction’.

Nota: Se vedete errori relativi al codice di tasti inutilizzato nel template, è sufficiente eliminare tale codice per risolvere l’errore

AGGIUNGERE TESTO, IMMAGINI E ANIMAZIONI

Personalizzare l’interfaccia e il contenuto della presentazione può essere semplice o più complesso in base alle vostre esigenze. Ci sono diverse cose che potete fare per personalizzare il contenuto:

Cambiare l’immagine di sfondo e l’interfaccia.

Modificare testo, imagini e animazioni durante l’esecuzione del filmato.

Aggiungere e eliminare frames etichettati contenenti contenuti da abbinare a punti di indicizzazione del filmato

Animazioni tra i frame etichettati o all’interno delle istante del filmato poste a diversi frame etichettati

Cambiare l’immagine di sfondo e i colori

Potete aggiungere loghi, immagini di sfondo o colori, bordi e qualsiasi altra cosa vogliate visualizzare durante la presentazione. Oltre ad aggiungere il vostro proprio filmato, questo è probabilmente il metodo più rapido e più facile per rendere la presentazione veramente vostra.

Tenete presente che aggiungere una immagine molto grande aumenta la dimensione della vostra presentazione, e conseguentemente il tempo di scaricamento. Invece, considerate il creare semplici immagini vettoriali usando gli strumenti di disegno di Flash o altre applicazioni come Fireworks. Oppure utilizzate come sfondo una bitmap con una limitata gamma di colori.

Per aggiungere le vostre immagini o colori:

Cliccate sulla Title Layer e modificate il testo per ottenere testo e formattazione che desiderate. Potete spostare il titolo ovunque se vi piace sperimentare.

Aggiungete layers e frames contenenti le immagini che desiderate. Generalmete, si posizionano le immagini che vorrete visualizzare durante tutta la presentazione nel frame 1, senza alcuna keyframe successiva in quella particolare layer.

Per aggiungere una nuova immagine di sfondo:

Selezionate il Background layer ed eliminate l’immagine di default dalla scena.

Selezionate File > Import > Import to Stage.

Scegliete il file da importare nella finestra e premere OK. Per alcuni tipi di file, potreste visualizzare un ulteriore finestra con le opzioni di importazione di quel particolare file.

Posizionate il file nella posizione in cui volete che appaia sullo schermo.

Per ridimensionare l’immagine, fare click-destro (Control_click) sull’immagine e selezionare Free Transform dal menù a scomparsa.

Per aggiungere un colore o un bordo allo sfondo, selezionate il Background Layer e utilizzate gli strumenti di disegno del Tool Panel relativi a ciò che desiderate aggiungere. Qualunque cosa aggiungiate al Background Layer apparirà per tutta la durata della presentazione.

Modificare testo e immagini durante la visualizzazione del filmato

Mentre si visualizza il filmato, testo ed immagini appaiono sullo schermo. Il testo e le immagini sono attentamente sincronizzate co il filmato, in modo che appaiano esattamente quando il filmato raggiunge uno specifico punto di indicizzazione. Voi vorrete probabilmente aggiornare i testi e le immagini che appaiono surante la visualizzazione del vostro filmato.

Usate i keyframes etichettati per inserire contenuti nella vostra presentazione. Sincronizzando l’apparizione del contenuto con il vostro video meiante diversi frames etichettati, potete controllare come il contenuto apparirà durante la presentazione. Quando il filmato raggiunge un certo punto di indicizzazione, il frame con l’etichetta corrispondente comparirà.

Per aggiungere i vostri testi e immagini a dei keyframe etichettati esistenti, è sufficiente modificarli su ciascun frame etichettato presente nel Content Layer del template. Sincronizzate queste posizioni con il vostro video cambiando il nome del punto di indicizzazione nel componente FLVPlayback, in modo da attivare il corretto frame etichettato nell’istante voluto.

Nel file di esempio, i contenuti animati sono formati da istanze di filmato che appaiono ai keyframe etichettati sincronizzati. In alcuni casi vorrete eliminare l’animazione contenuta e aggiungere il vostro contenuto e i vostri effetti. Potere trovare più facile eliminare i frames etichetati forniti e crearne di nuovi.

Si noti che se cambiate i nomi ai frames etichettati, dovrete modificare i punti di indicizzazione associati nel componente FLVPlayback, e le istanze dei pulsanti nel Button Layer.

Aggiungere e eliminare keyframes etichettati nella vostra presentazione

In questa sezione, imparerete come aggiungere e eliminare i keyframes etichettati. Ogni volta che lo farete, dovrete aggiungere o rimuovere anche il corrispondente punto di indicizzazione nel componente FLVPlayback e aggiornare i pulsanti associati nel Buttons Layer.

Per aggiungere un nuovo frame di contenuto:

Fate click sul frame dove volete aggiungere un nuovo kayframe etichettato nella Actions And Labels Layer.

Premete F6 per aggiungere un keyframe a quella frame nella Timeline.

Selezionate il nuovo keyframe cliccandoci sopra e dategli un nome nel campo in alto a sinistra del Property inspecrot. Il nome dove corrispondere al nome del punto di indicizzazione a ciu corrisponde. Premete Invio per modificare il valore, vedrete le modifiche apparire sulla Timeline.

Selezionate lo stesso frame nel Content Layer e aggiungete un keyframe (F6).

Aggiungete il vostro contenuto al nuovo layer.

Dopo, sincronizzate il keyframe etichettato con il vostro video i modo che appaia ad un particolare punto d indicizzazione durante la visualizzazione:

Cliccate sul componente FLVPlayback alla sinistra dello schermo.

Aprite il panello Component Inspector a destra.

Nel paramero cuePoints presente nel Component Inspector, aggiungete il nome del vostro frame nel campo name e aggiungete il tempo a ciu sincronizzarlo nel campo time.

Nota: Questo metodo funziona se state lavorando con i punti di indicazione di ActionScript. Il metodo consigliato è di lavorare con i punti di indicizzazione di navigazione inclusi durante la codifica. In questo caso basta seguire approssimativamente le stesse indicazioni per aggiungere e modificare i punti di indicizzazione nel vostro programma di codifica.

Per associare l’evidenziazione di un pulsante con un particolare pulsante e un particolare punto di indicizzazione, selezionate il plsante desiderato nel Buttons Layer.

Nel Property Inspector, date all’istanza del bottone lo stesso nome del punto di indicizzazione seguito da _btn.

La cancellazione degli schermi è semplice. Evidenziate lo schermo nello Screen Outline e premete il tasto Delete. Dovrete anche rimuovere in punti di indicizzazione dello schermo dal vostro filmato:

Cliccate sull’istanza FLVPlayback.

Aprite il pannello Component Inspector.

Entrate nel Flash Video Cue Points editor facendo doppio-click sul parametro cuePoints. Eliminate il riferimento al punto di indicizzazione selezionando il corrispondente campo name e facendo click sul pulsante meno (-).

Nota: Se state usando i punti di indicazione di navigazione incusi, potete ignorare il punto di indicazione durante il runtime o includere solo quelli necessari durante la ricodifica del file FLV.

Contenuti animati utilizzando le transizioni di schermo

Un altro metodo per anumare i vostri contenuti sincronizzati è quello di applicare un’animazione dinamica usando ActionScript.

LAVORARE CON I FILMATI IN STREAMING

Come avete visto nelle sezioni precedenti di questo articolo, il componente FLVPlayback è il cuore del template poichè fornisce i controlli necessari. Il componente è in grado di scaricare i file FLV usando sia il metodo progressivo che in streaming. Il video progressivo è disponibile con Flash Player 7 o successivo e il formato FLV. È l’opzione standard per il download dei file FLV dai server web. Il video progressivo ha dovrsi vantaggi rispetto ai filmati standard, come un miglioramento di prestazioni.

Il video in streaming può essere realizzato usando Flash media Server 3 ( FMS) in aggiunta al vostro contenuto Flash. Il Flash Media Server è costruito per trasmettere contenuti a files SWF. Gli FLV in streaming includono tutti i miglioramenti del video progressivo con alcune funzioni aggiunte, come il monitoraggio e l controllo dell’occupazione di banda, un più efficiente utilizzo delle risorse di rete, e la possibilità di creare grosse applicazioni multiutente aggiornabili in tempo reale. Inoltre, troverete che lo streaming video è necessario per le interfacce di navigazione avanzate per le quali la ricerca è di routine.

Per maggiori informazioni a proposito dei video progressivi e in streaming, vedere la sezione della Flash Video Learning Guide, e anche Video Technology Center.

Se avete installato l'edizione di sviluppo gratuita di Flash Media Server, o ne avete accesso, seguite i punti seguenti per abilitare il video streaming nelle vostre presentazioni:

Aprite la vostra presentazione FLA in Flash CS3 Professional.

Selezionate il componente FLVPlayback nella sinistra dello schermo.

Inserite un URL assoluto per il file FLV sul server sul quale si trova Flash Media Server. L’utilizzo di un URL assoluto attiva il server solo quando il video viene richiesto.

Nota: Il percorso al video in streaming apparirà come un indirizzo RTMP poiché quello è lo standard utilizzato da Flash Media Server. Alternativamente può essere un indirizzo HTTP.

Impostate il parametro isLive di FLVPlayback a True ed attribuite un nuovo valore a bufferTime in accordo con la banda richiesta mediamente dai vostri visitatori.

L'AUTORE

Dan Carr è il proprietario, capo sviluppatore e insegnante del Dan Carr Design di San Francisco. Dopo anni di esperienza nello sviluppo su Macromedia e Adobe, Dan ha creato una serie di funzioni disponibili per Flash, incluse le template di e-learning, componenti UI, e estensioni Developer Resource Kit. Dan insegna l’utilizzo di Flash e di ActionScript a San Francisco e sviluppa e-learning e applicazioni web per privati, ma anche per la Adobe.