Siti web Flash può essere un modo interessante per catturare l’attenzione degli spettatori e rendere la loro esperienza utente sul tuo sito un po’ più interattivo. Un sito web flash è diverso da un normale, testo codificato sito web che è stato sviluppato con HTML, PHP, ASP o un altro linguaggio. Si inizia con una fase raster in cui è possibile posizionare gli oggetti in base alle coordinate X e Y e quindi dettare cosa si desidera che gli oggetti facciano o come si desidera che l’utente navighi attraverso il sito Flash in base a una timeline.
In questo tutorial Flash ti insegnerò come creare un sito web Flash molto semplice utilizzando Flash CS5 di Adobe Macromedia, CS5 semplicemente in piedi per Creative Suite, 5a edizione. Quindi, iniziamo.
1. Il primo passo sarà creare il tuo spazio di lavoro in Flash. Inizia aprendo Flash e facendo clic su “File”, nella parte superiore dello schermo, quindi selezionando “Nuovo”. Dovrebbe apparire una finestra simile a quella qui sotto che ti chiede che tipo di nuovo documento desideri creare. Per questo tutorial Flash andare avanti selezionare “ActionScript 2.0”, che è un po ‘ più facile per iniziare gli sviluppatori Flash con cui lavorare, quindi fare clic su OK. Questo dovrebbe far apparire un quadrato bianco vuoto sullo schermo.
2. Da qui vorremo ridimensionare il nostro palco a 790px di larghezza per 630px di altezza. Per fare ciò selezioniamo la nostra finestra delle proprietà e facciamo clic sul pulsante Modifica accanto alle proprietà delle dimensioni e una nuova finestra dovrebbe apparire simile a questa. E, mentre ci siamo, cambiamo il nostro colore di sfondo in nero.
3. Ora che abbiamo il nostro documento dimensionato nel modo in cui lo vogliamo, suggerirei di salvarlo, per scopi semplici ho appena chiamato il mio “flash_tutorial”. Una volta salvato il file andiamo avanti e importare la “home.jpg ” immagine in modo da poter impostare lo sfondo del nostro sito Flash. Per fare ciò fai clic su File in alto, passa il mouse su Importa quindi seleziona “Importa in libreria”. Questo aprirà una casella per navigare nella cartella “Immagini del sito” e selezionare ” home.jpg”.
Una volta che importa nella libreria, vai avanti e trascinalo sullo stage, quindi usa la scheda Allineamento per centrarlo e allinearlo alla parte inferiore dello stage. Se la scheda Allineamento non è aperta, vai su ” Finestra “nella barra superiore e seleziona”Allinea”.
4. Al fine di mantenere le cose organizzate, diamo un nome a questo livello “bg pic” sulla timeline. Per farlo è semplice come fare doppio clic su “Livello 1” e cambiare il suo nome. Dopo aver chiamato il nostro livello immagine di sfondo creeremo un altro livello per i nostri contenuti. Ci sono alcuni modi per farlo: puoi farlo dalla barra dei menu in alto andando Inserisci – Timeline – Nuovo livello; o facendo clic con il pulsante destro del mouse (se sei su una macchina Windows, ctrl clic se sei su Mac) sul nome del livello “bg pic”, questo farà apparire un menu e selezionerai “Inserisci livello”.
Vai avanti e aggiungi tre nuovi livelli alla tua timeline e poi chiamali, partendo dall’alto, “navigazione”, “piè di pagina” e “contenuto”, con “bg pic” che è il livello in basso. E infine blocchiamo il livello “bg pic” facendo clic sul punto per quel livello che corrisponde all’icona del lucchetto sopra di esso, che dovrebbe essere il punto sulla destra. La tua timeline dovrebbe ora assomigliare a questa:
5. Facciamo la nostra navigazione Flash sito web. Fare clic sul fotogramma 1 del livello “navigazione”. Il colore dovrebbe cambiare dal bianco al grigio, questo significa che qualsiasi cosa posizionata sul palco ora va sul livello “navigazione”. Inizieremo selezionando lo strumento”T” ext dalla nostra barra degli strumenti e creando istanze separate per ogni link di pagina che vogliamo sul nostro sito Flash. In questo design Flash ho programmato per sei pagine, Casa, Su, Blog, Link, FAQ e Contatti. Quindi, creiamo sei istanze di testo separate per ciascuno di questi collegamenti, risultando in una fase che dovrebbe essere simile a questa:
6. Attaccando il livello “navigazione”, andiamo avanti e convertiamo tutti quei blocchi di testo in pulsanti. Per convertire un blocco di testo in un link è sufficiente fare clic sul testo che si desidera convertire, una casella blu dovrebbe ora inquadrare il testo per farvi sapere che è selezionato. Quindi, una volta selezionato, fai clic con il tasto destro del mouse (o ctrl clic per Mac) e scegli “Converti in simbolo”.
7. Una volta selezionato “Converti in simbolo”, un nuovo menu dovrebbe apparire chiedendo a che tipo di simbolo vorresti convertirlo e a cosa vorresti nominare il tuo simbolo. Quando si tratta di nominare i simboli in Flash Mi piace sempre prefisso il nome con quello che il simbolo è, aiuta a mantenere le cose organizzate e facili da trovare nella libreria una volta che si va da fare un semplice sito web Flash per costruire più grandi, siti Flash più complessi. Per i pulsanti di solito uso il prefisso “bu”, quindi per il mio pulsante” Home “chiamerei il mio simbolo,”buHome”. Circa sarebbe “buAbout”, Blog diventa “buBlog” e così via. Vai avanti e converti tutti i tuoi elementi di testo in pulsanti.
8. L’effetto hover che applicheremo ai nostri pulsanti sarà una scatola di colori bianca dietro il testo e il testo che cambia da bianco a nero. Iniziamo con il “buHome”. Per dare ai nostri pulsanti una bella spaziatura inizieremo con il nostro “buHome” 20 px in dal margine sinistro del palco e 8 px in basso dalla parte superiore del palco. Puoi facilmente regolarlo facendo clic sul pulsante “buHome”, quindi andando alla finestra delle proprietà e sotto” Posizione e dimensione “cambia la coordinata X in” 20 “e la coordinata Y in”8 “
Ora, vai avanti e fai doppio clic sul pulsante” buHome ” e nota come cambia la timeline, perché ora sei uscito brevemente dalla timeline del tuo film per entrare nella timeline del tuo pulsante. Noterai anche il testo sopra ogni fotogramma in cui i numeri erano sul nostro palco principale, questi sono gli attributi del pulsante che possiamo impostare. Inizieremo espandendo la nostra timeline dal singolo frame” Up “che è in questo momento fino a” Hit ” semplicemente facendo clic con il tasto destro (o ctrl + clic su un Mac) e scegliendo “Inserisci fotogramma chiave” dalla nostra lista di opzioni.
9. Ora che abbiamo un nuovo fotogramma chiave sotto ” Hit ” andiamo avanti e definiamo l’area live su cui vogliamo che i nostri spettatori possano fare clic per seguire il link. Il modo più semplice per farlo è rompere la nostra casella di testo due volte, fino a quando non è un’immagine piatta. Puoi farlo selezionando il testo” Home ” e premendo Control + B due volte (o Command + B due volte su un Mac). La prima volta che si rompe il testo a parte si rompe a singole lettere, la seconda volta è un’immagine piatta ed è più facile da diffondere il vostro bersaglio hit box sopra.
Una volta che hai rotto il testo verso il basso, selezionare lo strumento rettangolo, che è due punti sotto lo strumento di testo sulla barra degli strumenti, e fare un rettangolo sopra la parola “Home”. La zona ” Hit ” non è visibile dallo spettatore, stai solo definendo il live in cui possono fare clic per seguire il link. Ecco perché quando ho impostato la mia area “Hit” mi piace usare un colore odioso brillante in modo che sporga e non si fonde con i colori di sfondo.
10. Ora inseriamo anche un fotogramma chiave per i nostri attributi “Down” e “Over”. “Down “rimarrà lo stesso di” Up”, ma se non li suddividiamo tutti per separare i fotogrammi chiave, una volta modificato l’effetto” Up”, verrà riportato all’effetto” Down”.
Una volta che hai tutti gli attributi con il proprio fotogramma chiave separato, possiamo affrontare l’effetto “Over”. Per fare ciò avremo bisogno di un nuovo livello in modo da poter posizionare il blocco hover bianco dietro il testo. Quindi, fai clic su ” Livello 1 “e seleziona”Inserisci livello”. Una volta che il nuovo livello viene visualizzato è necessario trascinarlo sotto “Livello 1″ perché vogliamo che il blocco di colore appaia dietro il testo. E poi vogliamo solo che appaia durante lo stato” Over”, quindi vai avanti e” Inserisci keyframe “per lo stato” Over “e” Down”.
Ora possiamo fare clic sullo stato “Over” all’interno di “Layer 2” e disegnare la nostra casella. Penso che una marcatura 20 px a sinistra ea destra della parola sarà bella e riempirà verticalmente l’intera porzione nera della casella di navigazione del sito Web Flash. Per fare questo avremo bisogno di una casella che è 40 px più larga del nostro testo, quindi se fai clic sul testo vedrai che è 52.85 px, il che significa che la nostra casella deve essere 92.85 px. L’area nera della nostra barra di navigazione è alta 37 px, il che significa che anche la nostra scatola deve essere alta 37 px. Seleziona lo strumento rettangolo, vai alla finestra delle proprietà, imposta il colore di riempimento su bianco (#FFFFFF) e nessun colore di traccia, quindi trascina la casella. Se ha bisogno di messa a punto una volta trascinato fuori, tutto quello che dovete fare è fare clic su di esso per selezionarlo, quindi andare alla finestra delle proprietà e modificare la larghezza a 92.85, e l’altezza a 37. Quindi per spostarlo in posizione assicurarsi che la coordinata X sia impostata su -20 e la coordinata Y sia impostata su -8.
Il passo finale per creare il nostro pulsante è fare clic sullo stato “Over” in “Layer 1”, selezionare il testo e cambiare il colore sotto la finestra delle Proprietà in nero (#000000) in modo da poterlo leggere contro la nostra nuova scatola bianca. Se hai fatto tutto correttamente finora, il tuo stage button dovrebbe assomigliare a questo nello stato “Over”.
Vai avanti e vedere se si può fare il resto dei pulsanti sul proprio. Tieni presente che il pulsante successivo deve essere distanziato di 40 px dal lato destro del pulsante precedente per consentire l’effetto hover. Il semplice calcolo per questo è, Larghezza + Coordinata X + 40. La coordinata Y dovrebbe rimanere a 8 per garantire che tutti i pulsanti mantengano lo stesso asse Y. E che il tuo effetto “Hover” dovrebbe essere 40 px più largo del tuo testo, con un margine di 20 px a sinistra ea destra. Le coordinate X e Y del tuo quadrato” Hover ” dovrebbero sempre essere X: -20 e Y: -8.
Come hai fatto nella creazione di un sito web Flash, il tuo sito web Flash corrisponde a questo?
In caso contrario, non c’è bisogno di preoccuparsi. Sicuramente è stato un errore di calcolo sul posizionamento dei pulsanti. Ecco un piccolo cheat sheet per te.
Casa: x = 20
Circa: x = 112.85
Blog: x = 206.85
Collegamenti: x = 289.7
FAQ: x = 379.25
Contatto: x = 461.75
E ricorda, l’asse Y su quelli dovrebbe essere sempre 8.
Ora sarebbe anche un buon momento per salvare non solo il tuo progetto, se non l’hai già fatto, ma per esportare ciò che hai fatto finora per vedere se i tuoi pulsanti funzionano correttamente. Per esportare il tuo modificabile .file fla al .formato swf leggibile dai browser Web, puoi andare su File – Export-Export Movie. Oppure utilizza i tasti di scelta rapida e premi Ctrl + Maiusc + Invio su una macchina Windows o Comando + Maiusc + Invio su un Mac.
11. Ora consente di programmare quei collegamenti per andare da qualche parte. Fare clic su “buHome” e quindi selezionare la finestra” Azioni”. Sotto la scheda Azioni, nell’angolo in alto a destra dovresti vedere un’icona con “Frammenti di codice” accanto ad essa, e poi un’altra icona a destra di quell’icona, che sembra una bacchetta magica. Assicurati di fare clic sulla bacchetta in quanto ti aiuterà a scrivere l’ActionScript necessario per far funzionare i pulsanti.
Sul lato sinistro dovrebbe esserci una casella di scorrimento. Fare doppio clic su “Controllo timeline” per ottenere il menu per espandere e discesa, quindi fare doppio clic su “goto”. Questo dovrebbe far apparire un menu a destra facendo domande più specifiche. Per prima cosa ti consigliamo di fare clic sul pulsante di opzione “Vai e interrompi”, la scena dovrebbe rimanere in, sotto tipo vorrai cambiare “Numero di frame” in “Etichetta frame”, quindi sotto Frame inserisci “home”. Ecco fatto.
Ora vai avanti e fallo per il resto dei tuoi pulsanti, ma il nome” Frame ” dovrebbe coincidere con il link che stai programmando. Ad esempio, quando stai sviluppando il codice per il pulsante Informazioni, scrivi semplicemente “informazioni” nella casella accanto a “Frame”.
12. Lavorando lungo gli strati ultimi della nostra linea temporale, il prossimo dovrebbe essere”piè di pagina”. Per questo stiamo solo andando a creare un piè di pagina di base con alcuni link di social media come un modo di chiusura del fondo del nostro sito e dandogli un po ‘ di estetica in più. Ma prima di tuffarci nel piè di pagina, andiamo avanti e blocchiamo il nostro livello di “Navigazione”, dal momento che abbiamo finito con quello e non vogliamo rovinare accidentalmente nulla in quel livello.
Per il nostro piè di pagina creeremo un rettangolo nero con un’opacità del 60% che è alto 30 px e copre la larghezza del nostro palcoscenico. Per fare ciò vogliamo prima assicurarci di essere nel frame 2 del livello “piè di pagina”. Se sei già lì, allora tutto quello che dovete fare è selezionare lo strumento rettangolo dalla barra degli strumenti e trascinare un rettangolo. Una volta che hai un triangolo sul tuo palco puoi facilmente modificarlo alla perfezione selezionandolo, andando alla finestra delle proprietà e inserendo gli attributi sopra. Quindi, una volta che hai la dimensione e l’opacità della forma corretta, puoi andare alla finestra “Allinea” e dire al rettangolo di “Allinea centro orizzontale” e “Allinea bordo inferiore”.
13. Ora aggiungiamo quelle icone dei social media al nostro piè di pagina importandole prima nella nostra libreria. Se non ricordi come farlo dal passaggio 3, ti darò un suggerimento. File-Import-Importa nella libreria. E si sta andando a voler importare ” e-mail.png”, ” facebook.png”, e ” twitter.png”.
Una volta che sono nella tua libreria, vai avanti e trascinali sul tuo palco. Dove metterli è una preferenza personale, ma mi piace il mio nell’angolo in basso a destra. La mia coordinata Y è impostata su 606, mentre le mie coordinate X sono:
Facebook: X= 715
Twitter: X = 740
Email: X = 765
14. Se desideri collegare le icone al tuo sito di social media, il processo è abbastanza simile ai pulsanti di navigazione che abbiamo fatto. Fare clic sull’icona che si desidera collegare e aprire la finestra “Azioni”. Invece di andare su “Controllo timeline” questa volta, andremo su “Browser/Rete” e selezioneremo “getURL”. Questo selezionerà un menu simile a questo e ti consigliamo di inserire l’URL corrispondente nella casella appropriata e selezionare la finestra in cui desideri aprire il link (quello corrente, uno nuovo, ecc.).
15. Ora che abbiamo finito con il livello piè di pagina del nostro sito web Flash si può andare avanti e bloccarlo e ci sposteremo al contenuto. Come il piè di pagina, inizieremo trascinando fuori un altro rettangolo con uno sfondo nero e un’opacità del 60%. Solo che faremo questo rettangolo largo 355 px per 483 px alto e lo annideremo sul lato destro del nostro sito a X: 395 Y: 77. Ricorda, per applicare tali modifiche, lo fai sotto la finestra” Proprietà”.
Una volta che abbiamo il nostro rettangolo impostato alla dimensione corretta e al suo posto lo lucideremo un po ‘ ammorbidendo i bordi. Per fare ciò selezioniamo il nostro rettangolo, vai su “Modifica” nella barra dei menu principale nella parte superiore dello schermo, quindi seleziona “Forma”, seguito da “Ammorbidisci bordi di riempimento”. Questo dovrebbe apparire una piccola nuova schermata che chiede quale distanza e numero di passaggi desideri che i tuoi bordi siano ammorbiditi. Penso che una distanza di 10, con 4 passi e l’espansione dovrebbe fare il trucco per noi.
16. Per inserire il testo in cima al nostro rettangolo dovremo anche creare una casella di testo. Fare questo è una combinazione di ciò che abbiamo fatto per creare i nostri pulsanti e come creiamo i nostri rettangoli. Selezionare lo strumento Rettangolo dalla barra degli strumenti e trascinare una casella sul palco. Ho permesso un margine di 10 px tutto intorno al mio, quindi la mia casella di testo è larga 335 px per 463 di altezza e si trova a X: 405 e Y: 87.
Una volta creata la tua casella di testo, puoi inserire qualsiasi testo che desideri, inserirò solo un Lorem ipsum per riempire il posto.
17. La home page del nostro sito web Flash è ora creato e il nostro intero sito Flash è quasi creato. Da qui stiamo andando a voler creare etichette cornice e le nostre prossime cinque pagine. Tornando alla nostra timeline, crea un nuovo livello sopra tutti gli altri livelli e chiamalo “azioni”. Una volta creato il livello, fai clic sul fotogramma 2 del livello “azioni”, quindi vai alla finestra delle proprietà. Con il frame 1 “azioni” ancora selezionato, digita “home” nella casella “Nome:” sotto “Etichetta” nella finestra “Proprietà”. Una piccola cosa dall’aspetto della bandiera rossa dovrebbe apparire sotto il fotogramma 1 di”azioni”. Ciò significa che il frame 1 è ora etichettato come “home”, poiché è qui che la nostra home page si trova sulla timeline e da ora in poi il “buHome” punterà qui. E se espandi la timeline aggiungendo più fotogrammi sotto questo fotogramma chiave, vedrai che dice “home” accanto al flag.
Per mantenere il nostro sito web Flash da giocare direttamente attraverso ogni pagina senza colpire qualsiasi link, stiamo andando ad avere per dirgli di fermarsi su ogni fotogramma. Con il frame 1 del frame” azioni “ancora selezionato, torna alla finestra “Azioni” in cui abbiamo programmato i pulsanti. Anche simile ai nostri pulsanti, stiamo andando a voler utilizzare il controllo Timeline per dire al nostro sito di “Stop”. Quindi, vai avanti e fai doppio clic su “stop” in modo che il sito sappia fermarsi al frame 1.
18. Creare le prossime cinque pagine sul nostro sito web Flash è semplice. Iniziamo inserendo un nuovo fotogramma chiave nel fotogramma 2. Per fare ciò è necessario fare clic sul fotogramma 2 di “azioni” e trascinare verso il basso al fotogramma 2 di “bg pic”, evidenziando tutti i fotogrammi. Quindi facciamo clic con il tasto destro (o Ctrl + Clic su Mac) e scegliamo “Inserisci fotogramma chiave”. Noterai che la barra di avanzamento rossa che corre verticalmente attraverso la timeline si è spostata nel fotogramma 2, perché ora stiamo lavorando al fotogramma 2 della nostra timeline.
Poiché abbiamo già imparato come creare un sito Web flash e fatto tutto il duro lavoro di creazione di tutto, ora è solo una questione di modificarlo leggermente per corrispondere alla pagina corretta. Dal momento che il nostro secondo link è “About”, avrebbe più senso avere frame 2 essere la nostra pagina “About”. Per prima cosa, facciamo clic sul fotogramma 2 delle azioni, torniamo alle proprietà e denominiamo questo “about”. Dopodiché dobbiamo dirgli di fermarsi qui come abbiamo fatto nella home page, altrimenti riprodurrà solo questo fotogramma prima di tornare alla home page e fermarsi lì. Quindi, con il frame 2 di “azioni” selezionato, torna alla finestra ” Azioni “e fai doppio clic su” stop ” sotto il controllo della timeline.
Ora seleziona il fotogramma due del tuo livello “contenuto” e modifica il testo in modo che coincida con quello che vuoi sulla tua pagina About. Una volta che hai finito, vai avanti e sblocca il livello “bg pic” ed elimina quell’immagine. Dopo che l’immagine è stata cancellata importa “about.jpg “alla libreria, trascinarlo sul palco e allinearlo al centro orizzontale e inferiore del palco utilizzando la finestra “Allinea” e PRESTO! La tua pagina dovrebbe essere simile a questa.
Ora che sei un esperto di sito web Flash, vedere se è possibile creare le ultime quattro pagine da soli! Assicurati di esportarlo di nuovo e prova la tua navigazione per vedere se i link ti portano alla pagina corretta.
Se ti senti come Flash è semplicemente troppo complicato, allora vi consiglio di utilizzare il drag and drop gratuito site builder da Wix, che consente di creare rapidamente un sito web professionale gratuitamente.
Circa l’autore: con oltre dieci anni nel web design freelance e campi di scrittura, Scott Stanton ha avuto il suo dito sul battito delle tendenze di design più calde del settore e si piega negli ultimi dieci anni. Scott scrive regolarmente per Wix.com il costruttore di siti web gratuito.