Flash

Tags: Flash, Macromedia, tutorial

: Macromedia Flash

Creare un semplice template con Flash 8

In quest'articolo vedremo com'è possibile realizzare con Flash 8 il template (la sola struttura) di un mini sito composto da una barra di navigazione, i cui tasti apriranno delle pagine composte da filmati flash. Prima di proseguire vi segnalo che in Rete è possibile trovare diversi templates gratuiti per Flash pronti da usare.

Cominceremo col realizzare un singolo pulsante.

Realizziamo a nostro piacimento la grafica del pulsante facendo ricorso alla nostra creatività ed agli strumenti di design che flash ci mette a disposizione.

Una volta che la grafica è pronta selezioniamo l'oggetto creato e premiamo [F8] per creare il nostro oggetto pulsante. Selezioniamo quindi la voce pulsante, inseriamo il nome dell'oggetto (ad esempio pulsante1) e diamo una conferma.

Doppio click sul pulsante ed entriamo nelle proprietà del pulsante appena creato.

Come possiamo notare nella linea temporale abbiamo gli stati (Su, sopra, giù, premuto). Lo stato su contiene il disegno del pulsante nel suo fotogramma chiave.

Ora inseriamo un nuovo fotogramma chiave nel fotogramma dello stato sopra, ne modifichiamo ad esempio i colori.

Sin ora ci siamo limitati a creare l'immagine del pulsante nel caso non ci sia interazione del mouse e quella al passaggio sopra (rollover).

Ora dobbiamo inserire un testo identificativo al nostro pulsante. Creiamo un nuovo livello sovrapposto a quello contenente la grafica ed inseriamo prima nello stato su e poi in quello sopra, un box testo (facendo attenzione che si trovino nella stessa posizione) e digitiamo il nome (nell'esempio pagina 1).

Ci troveremo in una situazione analoga alla seguente:

A questo punto passiamo alla duplicazione del pulsante per realizzare la barra di navigazione.

Entriamo nella libreria degli oggetti [CTRL+L] (come potremo notare il nostro unico oggetto è il pulsante1), e duplichiamo il nostro pulsante1, tante volte quante pagine vogliamo sia il nostro sito, e con un semplice click destro selezioniamo duplica.

Rinominiamo le nostre copie in modo da renderle riconoscibili (ad esempio pulsante2, pulsante3, pulsante4, ecc...).

Ora trasciniamo nella scena i nuovi pulsanti creati e disponiamoli a nostro piacimento.Come possiamo notare i nostri pulsanti avranno al loro interno lo stesso testo, in quanto copie esatte l'uno dell'altro.

Seguendo un ordine logico, passiamo a rinominare i testi dei singoli pulsanti, effettuando un semplice doppio click e agendo sui fotogrammi relativi ai testi degli stati su e sopra.

Una volta rinominati i pusanti avremo ottenuto una barra di navigazione del tipo:

Ora passiamo a creare le pagine alle quali i nostri pulsanti dovranno linkare.

Partiamo dalla home page (la pagina visualizzata in apertura senza interagire con i pulsanti.

Nella scena 1 Creiamo un nuovo livello (che chiameremo pagine) e disegnamo nel primo fotogramma di questo, una sorta di box che conterrà i nostri contenuti da pubblicare. Ora selezioniamolo e convertiamolo in simbolo [F8] scegliendo come opzione clip filmato e dandogli come nome "home".

Come potete notare abbiamo creato un clip filmato in quanto, facendo in questo modo abbiamo la possibilità di animare, al suo interno, i nostri contenuti. (In questo articolo, come detto sopra ci limitiamo a realizzare il template "statico", completamente personalizzabile dando sfogo alla propria creatività).

Se si desidera modificarlo basta un doppio click sull'oggetto ed entrati nell'istanza dell'oggetto stesso, si può procedere alla realizzazione delle animazioni e dei contenuti.

Nel template ci limiteremo ad inserire, nel clip filmato home appena creato, un campo di testo per identificare la pagina con la scritta home.

Ora bisogna creare le 5 pagine linkabili dai relativi 5 pulsanti.

Creiamo quindi, nel livello pagine, a partire dal secondo fotogramma, 5 fotogrammi chiave.

Adesso dobbiamo fare altro che ripetere la stessa operazione di creazione del box clip filmato fatta per la home page, in ogni fotogramma chiave appena creato, nominando progressivamente i nuovi clip (pagina1, pagina2, ecc...)

Nelle proprietà dei fotogrammi contenenti i singoli clip filmato del livello pagine (per visualizzarle fare click sul fotogramma), diamo un etichetta ad ogni singolo fotogramma, inserendola nell'apposito form "fotogramma" (Chiamiamo ad esempio home il fotogramma 1, pagina1 il 2, pagina 2 il 3, ecc...). Potrete notare che all'inserimento dell'etichetta appare sul fotogramma di riferimento una bandierina rossa.

Affinchè i pulsanti siano sempre visibili in tutte le pagine, dobbiamo far si che nei seguenti 5 fotogrammi della linea temporale del livello contenente i pulsanti, ci siano fotogrammi attivi. Quindi posizioniamoci sul fotogramma 6 del livello pulsanti e digitiamo [F5] (Inserisci fotogramma).

La situazione attuale è la seguente:

Il template è quasi pronto, manca solo associare i comandi ActionScript ai singoli tasti.

Sincerandoci di essere nella scena1, selezioniamo uno alla volta i pulsanti ed inseriamo nella finestra azioni [F9] il seguente codice ActionScript, tenendo presente che ad ogni pulsante dobbiamo specificare l'etichetta del fotogramma a cui fa riferimento:

on (release) {
    gotoAndStop("pagina1");
}

Come potete notare il nome dell'etichetta del fotogramma di riferimento è inserita tra apici nella parentesi relativa al comando "gotoAndStop". (Al codice assegnato ad ogni tasto deve corrispondere la rispettiva etichetta).Una volta associato il codice ActionScript ad ogni pulsante il nostro template è praticamente pronto.

Manca solo inserire un comando che "blocchi" il filmato al primo fotogramma senza mandarlo in ciclo.

Posizioniamoci quindi nel primo fotogramma del livello pagine e nella finestra azioni [f9] inseriamo il semplicissimo comando ActionScript:

stop();

Ora sta a voi inserire ed animarne i contenuti.

Add a comment

: Macromedia Flash

Tutorial: adattare il filmato flash a qualsiasi risoluzione dello schermo

Create un nuvo file flash as2 (se avete il flash 8 basta creare un nuovo documento flash) e salvatelo con nome. Al suo interno per prova inserite un'immagine.

195

Andate in File, Impostazioni di pubblicazione e controllate che ci sia la spunta su HTML.

196

Rimanendo in Impostazioni di pubblicazioni andate sulla scheda HTML (si trova in alto) e alla voce dimensioni impostate su percentuale.

197

Poi in basso troverete Scala, voi impostatelo su: Nessuna scala.

198

Ora cliccate su Pubblica e avrete generato due file uno SWF e uno HTML.

199

Adesso andate sul file HTML ed apritelo con il vostro editor ed inserite questo codice tra i tag head

Codice HTML:

body {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

Ecco fatto, adesso il vostro filmato flash si adatterà a qualsiasi risoluzione dello schermo.

Add a comment

: Macromedia Flash

E’ possibile rendere trasparente lo sfondo di un filmato Flash?

Si, è possibile. Ma dal momento che l’impostazione avviene sulla pagina che incorpora il filmato, è necessario fare le modifiche opportune o prima di pubblicarlo, o direttamente nel codice HTML.

1° modo: aprire il filmato, selezionare dal menu File la voce Publish Settings (Ctrl+Shift+F12), ed attivare la scheda HTML. A questo punto, selezionare dal menu a cascata Window, la voce “Transparent Windowless”. Cliccare infine sul pulsante Publish. In questo modo verrà creata una pagina HTML con il codice necessario.

Fondo trasparente

2° modo: editare la pagina HTML che incorpora il filmato, e aggiungere le parti in grassetto.

Notazione importante: questo tipo di impostazione funziona esclusivamente con Internet Explorer. Allo stato attuale, non c’è alcun modo per rendere trasparente il fondo di un filmato visualizzato con Netscape.

Add a comment

: Macromedia Flash

Come faccio ad aprire una popup da flash?

Flash da solo non può aprire finestre di popup, bensì pagine principali del browser, tramite:

getURL(“pagina.html”, “window”);

Per aprire una popup, si deve appoggiare al supporto javascript della pagina html che lo incorpora. Questo viene fatto in due modi:

1. inserendo una funzione javascript nella pagina html, e richiamandola dal filmato in flash:

getURL(“javascript:funzione(parametri)”);

2. generando la funzione direttamente da flash, con questa struttura:

getURL(“javascript:window.open(‘pagina.html’,'titolo’,'width=400,height=300′);void(0);”);

Fondamentale, è quel void(0) alla fine, che impedisce alla pagina contenente il filmato di diventare bianca.Consideriamo solo il secondo metodo (tutta la funzione generata da flash), e vediamo due modi generali e validi in ogni caso.

1° metodo

Nel primo frame della timeline principale incolliamo:

Movieclip.prototype.popup = function(nome,titolo,lar,alt,x,y,feat){getURL(“javascript:window.open(‘&;quot; nome +”‘,’” + titolo + “‘,’width=” + lar + “,height=” + alt + “,screenX=” + x + “,left=” + x + “,screenY=” + y + “,top=” + y +”,” + feat + “‘);void(0);”);&Nbsp;}

e apriamo la popup, ad esempio tramite pulsante, con:

on(release) {popup(‘test.html’,'titolo’,400,300,50,50,’status=yes’);}

Con questo metodo, indichiamo: nome della pagina da lanciare, titolo sulla barra, larghezza, altezza, posizione sull’asse delle X, posizione sull’asse delle Y, eventuali attributi. Eventuali, nel senso che si può omettere la parte finale, e scrivere:

on (release) { popup(‘test.html’,'titolo’,400,300,50,50); }

2° metodo:

Nel primo frame della timeline principale incolliamo:

Movieclip.prototype.centra = function (nome,titolo,lar,alt,feat){getURL(“javascript:var x = Math.round((screen.width/2)-(” + lar + “/2));var y=((screen.height/2)-(” + alt + “/2));window.open(‘” + nome + “‘,’” + titolo + “‘,’width=” + lar + “,height=” + alt + “,screenX=’ + x + ‘,left=’ + x + ‘,screenY=’ + y + ‘,top=’ + y + ‘,” + feat + “‘);void(0);”);}

e apriamo la popup, ad esempio tramite pulsante, con:

on (release) { centra(‘test.html’,'titolo’,400,300,’status=yes’); }

Con questo metodo, indichiamo: nome della pagina da lanciare, titolo sulla barra, larghezza, altezza, eventuali attributi. Eventuali, nel senso che si può omettere la parte finale, e scrivere:

on (release) {centra(‘test.html’,'titolo’,400,300);}

Questa funzione, serve a lanciare la nuova finestra centrata nello schermo, indipendentemente dalla risoluzione del monitor dell’utente.

3° metodo:

Da utilizzare con FlashMX. Nel primo frame della timeline principale incolliamo:

Movieclip.prototype.centra = function (nome,titolo,lar,alt,feat){
var w = System.capabilities.screenResolutionX/2;
var h = System.capabilities.screenResolutionY/2;
var x = Math.round(w-(lar/2));
var y = Math.round(h-(alt/2));
getURL(“javascript:window.open(‘”+ nome + “‘,’” + titolo + “‘,’width=” + lar + “,height=” + alt + “,screenX=” + x + “,left=” + x + “,screenY=” + y + “,top=” + y + “,” + feat + “‘);void(0);”; }

e apriamo la popup con:

on(release){centra (‘test.html’,'mia’,700,300,’status=yes’);}

Il paramentro finale, feat, rappresenta appunto gli attributi della finestra. Non scrivendo niente, la popup non avrà alcuna barra ne alcun menu. Scrivendo:

on(release){centra(‘test.html’,'mia’,700,300,‘status=yes’);}

avremo la barra di stato, scrivendo:

on(release){centra(‘test.html’,'mia’,700,300,‘status=yes,toolbar=yes’);}

avremo la barra di stato e la tollbar, e così via.

Add a comment

Pagina 1 di 2

Translate

Flash

Creare un semplice template con Flash 8

Tutorial: adattare il filmato flash a qualsiasi risoluzione dello schermo

E’ possibile rendere trasparente lo sfondo di un filmato Flash?

Come faccio ad aprire una popup da flash?

Stay Connected: