• FLASH •
webmasterpoint.org
- INDICE -
• Primi Passi
• Creare Scritte Animate
• Immagini e Pulsanti Animati
• Magie Di Flash
• Creare Il Primo Sito Web in Flash
• Primi Passi
• Creare Scritte Animate
• Immagini e Pulsanti Animati
• Magie Di Flash
• Creare Il Primo Sito Web in Flash
1. PRIMI PASSI
Questa guida, vi "accompagnerà per mano" nel grande mondo di Flash, spiegandovi molto semplicemente come utilizzare al meglio questo software.
Apriamo dunque il programma e troviamo subito lo Stage. Cosa cerchiamo? Vorremo solo costruire un sito presentabile e non con una grafica per lo meno accettabile.
Da File ( in alto a sinistra ) apriamo New. Apriamo la A del testo e scriviamo qualche parola sullo Stage e cliccando con il tasto destro del mouse apriamo font per impostare il colore e la grandezza delle lettere e clicchiamo sul quadratino nero per scegliere il colore... e sulla B sotto al quadratino nero per avere in grassetto le nostre lettere colorate. (insomma, utilizziamo le impostazioni dei caratteri che troviamo in ogni programma)
Poi puntiamo dove ci sono i Frame e col tasto destro del mouse selezioniamo Insert Key Frame
nello stesso modo scrivo altre 2 frasi, cambiando il colore del font ( col mouse, sullo Stage cancello la frase precedente, in modo che non appaia nel movie) e scelgo insert Key Frame e mi sposto sempre più a destra (nella parte del movie)...
Con Play (dal menu Control) guardo l'effetto ottenuto per ora un Movie con le frasi che cambiano...
Scelgo Export movie e salvo dando un nome in formato
- Flash Player (.*svf )
Quindi seleziono Publish Preview dal menu File e scelgo Html per vederne l'effetto nel Browser...
2. Creare Scritte Animate
Dopo il primo approccio, scriviamo delle scritte sullo Stage e proseguiamo...
Inseriamo il nostro primo Key frame, poi con la freccetta in alto a sx. selezioniamo le frasi ad una ad una e le muoviamo con le freccette o le trasciniamo nello stage ed inseriamo un Keyframe nel frame 10 ( con un click sul frame 10 e scegliendo Insert Keyframe oppure più semplicemente premendo F6 )
Ogni volta che spostiamo le parole inseriamo un Keyframe nel 20, nel 30 , nel 40 nel 50
Poi puntiamo sul frame 20 ed inseriamo Create motion Tween per creare un movimento di tutte le parole...
Possiamo anche scegliere di colorare lo Stage dal menu Modify scegliendo Movie e di ingrandirlo e di aumentare il numero dei Frame per secondo...
Ora andiamo a vedere il nostro filmato in Flash dal menu Control e Play
Direi davvero ottimo!!! come primo vero passo.
Guardiamo l'anteprima dal Browser e se ci piace salviamo il nostro filmato con Salva con nome...
3. Immagini e Pulsanti Animati
Ripartiamo aprendo un nuovo file e importando nel primo Layer un'immagine dal nostro Hard disk... una Clipart va benissimo o una gif statica cioè composta di una sola immagine, nel mio caso la presentazione delle lezioni di Flash4 del mio index.
La seleziono con la freccetta degli Strumenti, poi con Scale la ridimensiono (diminuendola di area) ( vedere dove è Scale nella precedente lezione... comunque nella Barra in alto comando vicino a 100%)
Punto il cursore sul frame ( fotogramma ) 10 ed inserisco 1 Keyframe, poi nel frame 5 faccio click col tasto destro del mouse e seleziono Create Motion Tween per creare un movimento in mezzo.
Poi con Control /Play vediamo ...ops l'immagine si rimpicciolisce..
Inserisco 1 Keyframe al frame 20, 30, 40 e 50 , facendo come il passaggio precedente, magari alternando con Rotate dalla Barra in alto e col tasto sx del mouse facendo roteare la nostra figura.
Salviamo con nome il nostro lavoro, così se non ci piace ciò che faremo in seguito potremo Annullare con Undo dal menu Edit.
Apriamo ora un altro Layer e ricordiamoci che il Livello sotto cioè l'1 viene coperto come se questo nuovo fosse un foglio trasparente e scriviamo due frasi che come nella lezione precedente ingrandiremo...
Salviamo e guardiamo con Control/Play ( i due Layer naturalmente attivi)
Terzo Layer dove inseriremo un pulsante animato o Button e chiudiamo con la X gli altri 2. Apriamo Libraries / Button e dalla finestra che si apre trasciniamo un Button nel nostro Stage, tenendo premuto il tasto sx. del mouse e trascinando dal nome sotto l'immagine.
Apriamo ora Proprietà del Button facendo click col tasto dx del mouse su Properties , diamogli colore ed aprendo il + di Action scegliamo un'azione GetUrl ed a destra scriviamo l'Url che vogliamo che si apra quando faremo click sul pulsante, nel mio caso
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
... abbiamo utilizzato un indirizzo assoluto, ma va benissimo anche uno relativo (del tipo : home.htm)Copiamo il nostro frame del Button fino all'ultimo frame che corrisponde a tutti quelli degli altri 2 livelli, cioè fino al frame 50, con copy frame dal menu col tasto dx e Paste frame sul livello Tre ( altrimenti quando il movie va scomparirebbe)
Poi con Prewiev guardate in Html come viene il Movie e se clickate sul Button si apre l'Url che avete scelto ( dovete però essere collegati a Internet )
4. Magie Di Flash
" Mi serve sapere come si fa con Flash a far apparire delle lettere che compongono un nome da sinistra a destra associandogli un suono, ad ogni arrivo."
Inizio questa lezione cercando di rispondere nel modo più appropriato a questa e-mail di un amico...
Apriamo un Nuovo File .fla, scrivo la lettera ad es. R, inserisco un Kframe...al Frame 15 della linea temporale, mettiamo un Kframe vuoto.. Facciamo click sul frame 14, aggiungiamo la lettera seguente i e facciamo click col tasto dx. del mouse e scegliamo
Copia fotogrammi...
Apriamo il Fotogramma chiave vuoto e scegliamo Incolla Fotogrammi...
Apriamo un nuovo livello, che chiameremo Suono 1...Dalla Libreria apriamo Audio e selezioniamo un suono che trascineremo sullo Stage...
Nel livello è apparsa una barretta che indica che abbiamo inserito il suono.
Apriamo un nuovo livello, suono 2. In corrispondenza della seconda lettera inseriamo un Fotogramma chiave vuoto..
Poi trasciniamo un altro suono sullo Stage, nella Linea temporale è apparsa una barretta
che indica che all'apparire della seconda lettera ne sentiremo il suono...
Stesso procedimento per le rimanenti lettere....( ricordiamoci che ad ogni suono dobbiamo aggiungere un nuovo livello!)
Se vogliamo che la sequenza riparta, inseriamo qualche Fotogramma chiave vuoto alla fine della scritta...per lasciare un po' di stacco al secondo caricamento...
Si può ottenere lo stesso effetto (delle lettere che appaiono ad una ad una ) anche scrivendo prima l'intera parola nel primo fotogramma chiave, nel 10, nel 20 ecc...
Facendo click poi su ogni fotogramma chiave, sul primo togliere tutte le lettere tranne una, sul secondo tranne due, sul terzo tranne 3...
Il risultato è il medesimo..Il procedimento descritto precedentemente per inserire suoni rimane uguale ( si possono importare anche file Wav dal nostro Hard disk ) aprendo questa volta da Finestra/ Libreria li trascineremo sullo Stage e li inseriremo in ogni Key frame ..ormai Key frame fa parte del mio vocabolario e mi piace di più :o)...
Ricordiamoci che con più suoni inseriamo più aumenta la dimensione del File.fla e più diventa pesante da caricare...
Ecco 2 modi per inserire le lettere e i suoni...
il primo modo nella scena 1, il secondo modo aprendo una nuova scena... semplicemente per vedere se ci fosse qualche piccola differenza... il risultato è uguale...
Per concludere, riprenderei un attimo il discorso delle Scene :
Inserisci /Scena per inserire la Scena 2 ..( e magari anche altre..) nella quale aggiungeremo i Livelli per inserire i suoni... Da Controlli /Prova filmato per Esportare il nostro filmato nel Flash Player ( è un Proiettore che permette di far vedere il nostro lavoro anche a chi non ha Flash4 )
Controlli/ Prova Scena per vedere le Scene in sequenza... ( il filmato naturalmente si chiude facendo click in alto a destra sulla X )
Le lettere che arrivano da sinistra potranno anche essere di vari colori..selezionando il colore dal Menu Colore Testo ( a sinistra quasi in basso vicino alla A ).. ingrandito con Scala ecc..
Se vogliamo inserire qualcosa nella Scena 1, mentre stiamo lavorando nella 2, è sufficiente fare Click su Modifica Scena e selezionare la 1
Stiamo per concludere le nostre semplici lezioni... Piccole..grandi cose che renderanno sempre più IN il nostro Primo Sito Flash che proveremo a costruire nella prossima lezione.... Whow...
5. Creare Il Primo Sito Web in Flash
Ed eccoci arrivati alla nostra più bella lezione... e forse la più complessa "Creare il nostro primo sito.."
Invece del solito schermo nero, come sfondo importiamo una bella immagine .jpg...
Da Importa scegliamo un'immagine .jpg del nostro hard disk, che essendo di misura 1024 per 768 riempirà tutto lo Stage... (consigliamo di utilizzare una immagine molto leggere e semplice!)
Al frame 50,inseriamo un Kf., poi uno vuoto ed importiamo una nuova immagine, un altro kf. al frame 100.
Al frame 25, inseriamo un kf.quindi apriamo Inserisci Simbolo e scegliamo grafico,facciamo quindi click sull'immagine nello stage ed apriamo Proprietà Istanza / Effetto colori.
Scegliamo Alpha e togliamo un po' di colore, fino a fare quasi svanire l'immagine..
Stesso procedimento nell'altra immagine...
Facciamo click inoltre sul kf.1, scegliamo Intercalaggio e al posto di nessuno inseriamo Automatica... Controlliamo con Play.. A seconda dell'immagine JPEG...si può muovere tipo onda marina ( quest'effetto mi piace molto in quanto sembra di vedere il paesaggio stando su una nave..) oppure come la seconda nel mio caso resta fissa...quindi è inutile darle un movimento... meglio allora lavorare sul colore Alpha...apparire..scomparire..
Apriamo ora un altro livello che chiameremo Collegamenti
Controlliamo che il livello sia attivo ( deve avere la matitina ) quindi disegniamo un piccolo cerchio rosso, con lo strumento Cerchio.
Ecco delle semplici e sintetiche istruzioni :
•disegna un CERCHIO
• seleziona il cerchio e premi F8, cioè converti in simbolo
• ora scegli BUTTON
• vedrai un riquadro attorno al cerchio
• ora seleziona questo bottone e premi CTRL+F
si aprira' una finestra ,
• seleziona ACTIONS
• ora inserisci le AZIONI
On (Release)
Get URL ("http://www.ritacc.com/pag1.htm", window="_blank")
End On
ora ritorna sulla timeline principale, cioè dove hai il bottone...
fai il copia/incolla di questo bottone di quanti bottoni ti servono( 3 se non sbaglio )
ora avrai tre bottoni con le stesse ACTION!!! xò puntano tutte alla stessa pag!!! allora...modifica solo l'indirizzo della actions ed il gioco è fatto
nel secondo bottone
On (Release)
Get URL ("http://www.ritacc.com/pag2.htm", window="_blank")
End On
nel terzo bottone
On (Release)
Get URL ("http://www.ritacc.com/pag3.htm", window="_blank")
End On
Creare un Pulsante Stop
Devi mandare il tuo pulsante alla pagina
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, crea nella timeline principale un fotogramma con uno STOP in quel fotogramma metti tutti i tuoi pulsanti esempio1/2/3/4/5 etc..etc.. per far si che quando CLICCO vado alla pagina, il GET URL non deve essere impostato sul FRAME ma sul bottone ! clicca due volte sul bottone vai in ACTIONS, ora fai on mouse event RELEASE
On (Release)
Get URL ("http://www.ritacc.esempio1.htm", window="_blank")
End OnI
In basso a destra , sta scritto WINDOWS....specifica come la finestra deve essere aperta...
La nostra pagina con le immagini in movimento e i pulsanti, la salviamo con Pubblica... Naturalmente prima apriamo Impostazioni Pubblicazione ( nel menu sotto File ) ed impostiamo prima i formati... togliendo la spunta a "usa nome predefinito", in modo che facendo click possiamo chiamare il nostro file Index.htm e Index.swf che altro non è che il file che contiene tutte le immagini, le scritte e gli eventuali suoni.
Poi il Flash ( sa questo menù, possiamo anche impostare il Flusso Audio, aprendo Imposta e l'evento Audio.. da notare il formato Mp3, praticamente in Flash4 si importano musiche in formato Wave...i midi non sono riconosciuti... e pubblicando Flash li trasforma in Mp3...cioè in suono puro e pulito
Scegliamo il caricamento ed impostiamo a 100 la qualità JPEG
Apriamo infine il terzo menù delle impostazioni HTML
Per cercare di eliminare il bordo bianco fra il filmato Flash e la Finestra del Browser ho selezionato Pixel ed ho messo le dimensioni 800 per 600 che sono quelle più usate, nella modalità
finestra ho messo senza finestra e di Scala nessun bordo..ma un bordino rimane...mi sa che bisognerebbe agire sul linguaggio HTML...
Ultima modifica:
xD
