Per chi non volesse utilizare Adobe Flash ma comunque vuole inserire dei video FLV sul proprio sito, ho tradotto un articolo pubblicato da Jen deHaan sul sito Adobe.
La fonte è questa:
Componente Flash Video di Dreamweaver CS3
Il componente Flash Video di Dreamweaver CS3 ti aiuta a inserire e visualizzare facilmente i file video nel tuo sito web. E' molto utile per gli utenti che non hanno familiarità con Flash perché si possono inserire Flash Video (FLV) file sulle pagine web senza utilizzare il Flash .
Il componente Flash Video vi permette di selezionare da diversi controller di riproduzione che i visitatori utilizzano per il controllo della riproduzione di file FLV sulla tua pagina web. È possibile scegliere anche tra due diverse opzioni per il recapito del tuo video: lo streaming o il download progressivo.
Questo articolo mostra come utilizzare Dreamweaver CS3 per inserire e visualizzare i file FLV sul tuo sito.
Il componente Flash Video utilizza una procedura guidata che permette di visualizzare e scegliere le opzioni di consegna e persino in anteprima il design del player (skin) prima di inserirlo in una pagina web. Nonostante il modo automatizzato che inserisce il codice in una pagina web, hai il controllo del risultato finale. Utilizzando il video Flash componente non è l'unico modo per visualizzare i file FLV sul web, ma è veloce e facile.
Questo tutorial vi spiegherà come ottenere il seguente risultato:
http://www.adobe.com/devnet/flash/articles/flv_tutorial/finished/
Leggi tutto
Al fine di seguire i passaggi di questo tutorial, è necessario installare Dreamweaver CS3 e farm_cs3.zip scaricando il file di esempio di questo tutorial.
Estrarre il contenuto del campione farm_cs3.zip in una nuova cartella sul desktop chiamata fattoria. Il file ZIP contiene un intero modello di un sito web in Dreamweaver, compresi i video Flash (FLV) file. Potrai lavorare con i file contenuti nella cartella farmsite durante questo tutorial. In questo modo potete confrontare il vostro lavoro finito con quello del file nella cartella finished.
Il sito modello che si usa per i seguenti esercizi distinti per azienda dispone di un tema (vedi il sito del campione). L'azienda agricola sito consiste in nove cartelle principali, sette modelli, una dozzina di pagine HTML statiche, e un foglio di stile CSS (vedi Figura 1). Lo scopo del sito è quello di creare una galleria di immagini e video per sei comuni animali da fattoria.
Ogni animale ha una sua sottocartella dove memorizzare le pagine HTML specifici per quel animale. Per esempio memorizzare le pagine che visualizzano immagini o video che riguardano i polli e le galline in una cartella.
Si utilizzano le ultime tre cartelle (chiamate immagini, video e modelli) per organizzare le immagini, i video e modelli per il sito della fattoria.
Il sito dispone di una base di tre colonne, dove la colonna di sinistra contiene la navigazione principale del sito e la colonna centrale visualizza il contenuto (testo, immagini e video).
Annidare i modelli nella colonna di destra per visualizzare le immagini in miniatura per entrambi i video e le immagini statiche degli animali (vedi Figura 2).
Utilizzando modelli annidati consente di aggiungere facilmente nuove pagine al sito e hanno automaticamente il submenu aggiunto per voi.
Inoltre, applicare modifiche al template di un animale specifico comporta il cambiamento a cascata di tutti gli altri files che usano quel template.
Quindi, se avete bisogno di modificare il submenu all'interno del modello della gallina, tutti i file basati su tale modello vengono aggiornati automaticamente.
In questo esercizio, si inserisce un file FLV con un controller fornito in una pagina web in più semplici passaggi.
Abbiamo due opzioni per inserire e visualizzare un file FLV nei nostri documenti HTML usando il componente video Flash:
- Download progressivo: Se si sceglie questo tipo di video, il video viene scaricato dall' utente nel suo disco rigido e inizia la riproduzione prima che il download sia avvenuto completamente. Il video è stato scaricato dal principio alla fine, a meno che l'utente chiude la connessione prima che il download è completo. L'utente deve disporre di Adobe Flash Player 6 (o versioni successive) installato per vedere i video codificati con Sorensen Spark (incluso con Flash MX Professional 2004 o successivo). L'utente deve disporre di Flash Player 8 o versione successiva per visualizzare i video codificati con il codec On2 VP6 (incluso con Flash 8 o successiva). Per maggiori informazioni su quali versioni di Flash Player funziona con i vari codec video, ricerca "on2 VP6 codec video" (incluse le virgolette) nella guida di Flash CS3. Se non si dispone di una copia di Flash, allora ricercare sui documenti live nel sito Adobe.
Nota: Il video FLV incluso con il file sorgente di questo articolo utilizza il codec Sorenson Spark e può essere visto con Flash Player 6 o versione successiva.
- Streaming video: Se si sceglie questa opzione, il video inizia a riprodurre dopo un breve periodo di buffer, quando una piccola quantità di dati è stata scaricata sul disco del computer dell' utente per garantire una buona riproduzione. È necessario disporre di Adobe Flash Media Server o Flash Video Streaming Service disponibile se si seleziona questa opzione. L'utente deve disporre di Flash Player 6 (o successivo) installato. Per ulteriori informazioni su streaming video, vedere il Flash Media Server Developer Center.
Nota: Per maggiori informazioni su come usare il video sul web, consultare la guida di apprendimento video Flash.
A seconda del tipo di video che si seleziona nel menu pop-up, i seguenti passaggi possono variare leggermente.
Si intende che hai scelto l' opzione download progressivo per visualizzare i file video:
- Apri Dreamweaver. La prima cosa da fare è definire un sito per il file fornito. Questo applicherà con precisione a Dreamweaver i percorsi relativi da inserire nella pagina HTML di Flash file video.
- Scegli il sito> Nuovo sito dal menù opzioni. Nel sito, si apre la finestra di dialogo (vedi Figura 3), impostare il campo Nome del sito per navigare Farm e per la \ farmsite sottocartella nella cartella fattoria sul desktop, quindi fare click su OK.
- Scegli File> Apri dal menu principale e seleziona il file video01.html all'interno della cartella chickens.
- In entrambi i modi di visualizzazione (design o codice ), posiziona il cursore all'interno della regione col contenuto modificabile ed elimina qualsiasi testo esistente, come ad esempio [inserire il video qui].
- Selezionare Inserisci> Media> Flash Video dal menu principale per avviare il componente video Flash.
- Selezionare Download Progressivo dal menu a comparsa che contiene tuti i tipi di video. La comparsa della finestra di dialogo Flash Video cambia per mostrare le seguenti opzioni per questo formato (vedi Figura 4):
- URL: Specifica l'URL del file FLV da incorporare nel documento HTML
- Skin: Specifica l' URL dello skin del player che vuoi utilizzare
- Width: Specifica la larghezza del video
- Height: Specifica l' altezza del video
- Constrain: Mantiene il rapporto di aspetto del filmato se la larghezza o l' altezza delle caselle di testo cambiano di valore
- Detect Size: Determina le dimensioni del file FLV file e automaticamente popola la larghezza e altezza delle caselle di testo
- Auto play: Specifica se il video deve riprodursi automaticamente all' apertura della pagina web
- Auto rewind: Specifica se il controllo di riproduzione ritorna alla posizione iniziale dopo che il video è arrivato alla fine
- Avviso agli utenti di scaricare Flash Player se necessario: Quando è selezionata, questa opzione integra il codice JavaScript richiesto per rilevare gli utenti 'di Flash Player versione e li spinge a scaricare una versione più recente, se necessario (se non si seleziona questa opzione, il testo del casella Messaggio è disattivato)
- Message: visualizza un messaggio all' utente se l'attuale versione di Flash Player non è sufficientemente aggiornata per visualizzare il contenuto Flash
- Fare clic sul pulsante Sfoglia accanto alla casella di testo URL. Passare alla cartella \ farmsite sul disco rigido, selezionare i video dalla cartella chicken01.flv, e fare clic su OK.
Si noti che se non hai creato un sito Dreamweaver per il file fornito, Dreamweaver inserirà i percorsi relativi al tuo computer locale. Se si verifica questo problema, devi creare un sito per il file oppure inserire i percorsi a mano.
- Selezionare uno skin da Skin menu pop-up. Per questo esercizio, selezionare Cancella Skin 3. L'area al di sotto del popup dello skin vi mostra una piccola anteprima dello skin del controller specificato. La Figura 5 mostra lo skin del player in azione.
- Fare clic sul pulsante Detect Size in modo che Dreamweaver calcola la larghezza e altezza del file FLV corrente automaticamente, e poi popola le caselle di testo con le corrette dimensioni del video.
- Selezionare la casella di controllo AutoPlay se si desidera che il video vada in riproduzione automaticamente dopo il caricamento della pagina. È necessario assicurare che l'Auto Rewind casella di controllo è attivata se si desidera che il video ritorni al primo fotogramma a riproduzione completata.
- Deselezionare l' avviso agli utenti del download di Flash Player se necessario. Il motivo è che potresti riscontrare un errore nel wizard delle istruzioni.Questo è un problema noto con l' inserimento del Flash Video ogni volta che si utilizza la procedura guidata ed è modificabile all'interno di una zona di un modello di Dreamweaver.
Nota: Per ulteriori informazioni su questo problema, visitare il seguente pagina tecnica: Non è possibile inserire nel modello di Flash Video.
- Fare clic su OK per applicare le impostazioni. Dreamweaver ora genera e inserisce il codice che incorpora il video selezionato in questa pagina web.
In base alle impostazioni che hai scelto per questo esercizio, Dreamweaver inserisce il seguente codice nella tua pagina web (il codice è spiegato in evidenza accanto):
HTML Code:
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
'width','320','height','240','id','FLVPlayer','src',
'FLVPlayer_Progressive','flashvars',
'&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=../videos/chicken01&autoPlay=true&autoRewind=true',
'quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage',
'/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive'
); //end AC code
** </script>
** <noscript>
** <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="320" height="240" id="FLVPlayer">
** <param name="movie" value="FLVPlayer_Progressive.swf" />
** <param name="salign" value="lt" />
** <param name="quality" value="high" />
** <param name="scale" value="noscale" />
** <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=../videos/chicken01&autoPlay=true&autoRewind=true"
/>
** <embed src="FLVPlayer_Progressive.swf"
flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=../videos/chicken01&autoPlay=true&autoRewind=true"
quality="high" scale="noscale" width="320"
height="240" name="FLVPlayer" salign="LT"
type="application/x-shockwave-flash"
pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
/>
</object>
</noscript>
Che cosa significa tutto questo? I parametri da specificare nella procedura guidata di Inserire Flash Video sono inseriti in questo frammento di codice HTML, che passa le informazioni al file SWF utilizzando FlashVars (vedi nota qui sotto). Lo skin, chiamato Clear_Skin_3, viene copiato nella stessa cartella del file HTML corrente, anche se omette l'estensione del file (. Swf), e il codice HTML.
Il secondo parametro, streamName, punta al file FLV che hai definito nella casella di testo URL. Si tratta di un percorso relativo e nuovamente omette l'estensione del file FLV (. Flv).
Nota: FlashVars è un meccanismo per passare le variabili al file SWF attraverso coppie nome-valore nel codice HTML. Le coppie nome-valore vanno a finire come variabili sulla timeline principale del file SWF. Questo è un ottimo modo per importare percorsi e semplici parametri nel tuo file SWF.
I prossimi due parametri sono booleani (valori vero / falso), che sono in base alle selezioni e la procedura guidata.
Se si desidera modificare il percorso dello skin o del file FLV, allora si possono modificare questi valori direttamente utilizzando la visualizzazione Codice in Dreamweaver. Potrebbe essere necessario modificare la larghezza e l'altezza manualmente e incorporare il tag. Questi valori rappresentano rispettivamente la larghezza e altezza del documento FLV. Tuttavia, se si utilizza alcune impostazioni predefinite o personalizzate, potrebbe essere necessario modificare questi valori se lo skin contiene un bordo, ed è di dimensioni superiori a quelle del file FLV.
A causa di problemi di cross-browser, è necessario definire i valori FlashVars sia in param etichetta così come incorporare l'etichetta in modo che il codice funziona con Microsoft Internet Explorer e Netscape.
Un'ultima cosa da notare è il codice JavaScript che circonda l'oggetto. Si tratta di una novità per la visualizzazione di file SWF di Flash in un browser. Dreamweaver (e Flash) copiano un file JavaScript denominato AC_RunActiveContent.js ad un percorso relativo rispetto alla pagina HTML contenente il file SWF. Il file JavaScript e il codice addizionale visto sopra consentono agli utenti di interagire con il file SWF sulla pagina web senza dover prima fare clic per attivarlo.
È possibile visualizzare un prompt in vari punti di Dreamweaver affermando che si sta creando il file dipendente JavaScript.
Se guardate la cartella chickens, si può vedere che più file vengono automaticamente messi lì da Dreamweaver (vedi Figura 6). La cartella degli script viene creata dinamicamente contenente il file JavaScript descritto sopra. Il Clear_Skin_3.swf e FLVPlayer_Progressive.swf vengono esportati in base alle vostre impostazioni in Dreamweaver.
Se guardate i files e le cartelle in Figura 6, si può vedere che Dreamweaver ha aggiunto automaticamente la cartella degli script per la cartella farmsite e due file Flash nella cartella chickens. La cartella contiene gli script file JavaScript appena descritti. Il Clear_Skin_3.swf e FLVPlayer_Progressive.swf vengono esportati in base alle vostre impostazioni in Dreamweaver. È possibile notare lo skin con più file nella cartella se sperimentato con differenti impostazioni di skin. È possibile eliminare il file in pelle inutilizzati alla fine.
Nota: l'effettivo SWF file che vi serve per guidare il video Flash componente è un mero 10-12K, a seconda se si seleziona il download progressivo o lo streaming. Utilizzando uno sin di default aggiunge circa 4-11K, in funzione dello skin che si sceglie.
fonte: Componente Flash Video di Dreamweaver CS3
19-03-08, 07:58
Linear Mode
