Come costruire un sito web con Adobe Flash

September 26

Come costruire un sito web con Adobe Flash


La maggior parte dei designer professionisti utilizzano programmi separati per creare siti web: Flash per le animazioni, Photoshop per l'imaging digitale, Illustrator per il disegno e Dreamweaver per la costruzione sito web. Tuttavia, se un sito web è abbastanza semplice, può essere creato direttamente in Flash. Flash offre eccellenti strumenti di disegno e può compilare automaticamente le pagine in file HTML basati sul Web. L'unica cosa che non può fare è modificare le immagini digitali. Si può, tuttavia, incorporare facilmente fotografie che hanno preparato altrove. Questo articolo si presuppone che il lettore abbia già familiarità con Flash come un pacchetto di animazione e disegno, e si concentrerà pertanto principalmente sui quali passi sono necessari per creare siti web attuali.

istruzione

Pianificazione di un sito web in Flash

1 Disegnare uno schizzo del progetto home page. Designer professionisti e costruttori Web hanno sempre una visione di ciò che un design sarà simile prima in realtà la costruzione di esso, e di solito disegnare a usare carta e matita. Le pagine web sono tradizionalmente larghezza di 800 pixel per 600 pixel di altezza, anche se le altre dimensioni sono certamente possibili. Qualsiasi pagina Web include quattro elementi fondamentali: una intestazione, un piè di pagina, pulsanti di navigazione e il contenuto principale (immagine e / o testo). L'intestazione può essere una animazione, testo, fotografia o un disegno, o una combinazione di quanto sopra. Decidere che cosa l'intestazione sarà simile e quindi disegnare una bozza di disegno di esso sulla pagina.

2 Determinare quali il piè di pagina sarà simile. Piè di pagina sono di solito barre a colori con testo su di essi. A volte il testo è un copyright e / o informativa sulla privacy. Altre volte, include i collegamenti. Piè di pagina di solito sono semplici nel design.

3 Decidere quanti tasti di navigazione includono. Ricordate che ogni pulsante di navigazione porterà a una pagina Web diversa, e quindi un file Flash diverso, in modo da cercare di mantenere le cose semplici. Assicurati di dare un nome a ciascun pulsante (ad esempio, "Informazioni su", "contatto", etc.) Più tardi, quando si creano pagine Web per i pulsanti, ricordarsi di nominare le pagine Web gli stessi nomi dei tasti (ad esempio, un il tasto "Info" si collegherà ad una pagina denominata "circa", un pulsante "Contact" si collegherà ad una pagina denominata "contatto", ecc).

4 Considerare la visualizzazione di un'animazione come una proiezione di diapositive per il contenuto principale della pagina. Flash eccelle in animazione, quindi cercate di includere l'animazione in modo prominente.

5 Ripetere i punti 2, 3 e 4 per ogni pagina del sito. Ricorda che non ci sarà una pagina per ogni pulsante di navigazione. Anche tenere a mente che intestazioni, piè di pagina e pulsanti di navigazione di solito rimangono coerente da pagina a pagina in un sito web. Di solito è solo il contenuto principale che cambia in ogni pagina. Ciò significa che una volta un disegno principale è stato costruito, sarà possibile risparmiare tempo copiando lavoro che è già stato fatto.

Costruire il sito web

6 Aprire un nuovo file Flash (ActionScript 2.0). Modificare la dimensione del file da 800 x 600 pixel, oa ciò che sono stati specificati dimensioni nel disegno. Mantenere il colore bianco stage, o cambiarlo in un colore diverso se il progetto lo richiede. Rendere i governanti visibili ( "Visualizza", quindi "governanti") e quindi inserire guide sullo stage per delimitare l'intestazione, piè di pagina, pulsanti di navigazione e area del contenuto principale.

7 Inserire un nuovo livello sulla linea temporale, rinominarlo "header" e quindi creare l'intestazione. O disegnare utilizzando strumenti di disegno di Flash, o importare un'immagine. Se si importa un'immagine, le dimensioni in modo corretto prima di voi di essere in Flash. Ad esempio, se il colpo di testa è larga 800 pixel per 100 pixel di altezza ed è un file di immagine, creare l'immagine con un programma come Photoshop. Poi importarlo nella libreria di Flash ( "File" e poi "Importa", quindi "Importa nella libreria". Una volta che è stato importato, trascinarlo dalla Libreria allo stage e posizionarlo withing le linee guida. Per assicurarsi che sia allineato correttamente, aprire la finestra Info ( "finestra", quindi "Info") e assicurarsi che le coordinate X e Y ogni lettura "0". Se non lo fanno, quindi digitare uno "0".

8 Inserire un nuovo livello sulla linea temporale e rinominarlo "piè di pagina". Poiché la maggior parte piè di pagina sono in genere barre a colori con testo su di essi, utilizzare lo strumento Rettangolo e riempimento benna per fare il piè di pagina. Quindi utilizzare lo strumento Testo per aggiungere il testo. Utilizzare una casella di testo diverso per ogni testo che verrà collegata. Per esempio, se un indirizzo e-mail è digitato, metterlo nella propria casella di testo. Quindi utilizzare una casella di testo separato per un collegamento sulla privacy, o qualsiasi altro tipo di testo.

9 Inserire un nuovo livello nella linea temporale e rinominarlo "contenuto". Aggiungere un file di immagine, il corpo del testo o un'animazione secondo il disegno di progettazione. Ricordate che questo è il livello che cambierà a seconda della pagina specifica. Tutti gli altri livelli rimarranno gli stessi.

10 Inserire un nuovo livello nella linea temporale e rinominarlo "bottoni". Progettare i pulsanti di navigazione e poi convertire ciascuno separatamente ai simboli ( "F8"). Quando appare la finestra di dialogo "Converti in simbolo", assicurati di nominare ogni simbolo e anche assicurarsi che sia selezionata la classe Button. Quando gli oggetti vengono convertiti in simboli, copie di essi vengono inseriti automaticamente nella libreria del file Flash. I pulsanti sono attualmente nel loro stato "Up", il che significa che questo è il modo in cui appariranno quando la pagina viene caricata in un browser Internet. Se si suppone che i pulsanti di essere animato, ora sarebbe il momento di impostare i loro stati "Over", che è quello che sarà simile a quando un mouse passa su di loro.

11 Aprire la libreria ( "Finestra", quindi "Library") e fare doppio clic sull'icona del pulsante. Timeline del file cambierà linea temporale del pulsante. Timeline del pulsante mostra "stati", non cornici. In Flash, gli stati sono condizioni in cui il pulsante potrebbe essere utilizzato: "Up", o che cosa il pulsante assomiglia al caricamento della pagina; "Sopra", o quello che il pulsante appare come quando un mouse passa su di essa; e poi "down" e "hit", che non sono necessari per l'attività corrente. Lo stato di "Up" è già stato costruito. Fare clic con lo stato "over" sulla linea temporale del pulsante e inserire un fotogramma chiave vuoto. Evidenziare lo sfondo del pulsante sullo stage e quindi modificare il colore utilizzando il secchio Colore riempimento. Ora, una volta che il file viene visualizzato in un browser Internet, il pulsante viene visualizzato un colore quando viene caricato, ma cambia colore quando è moused sopra. Ripetere questo processo per il maggior numero di pulsanti di navigazione come sono stati progettati e convertiti in simboli.

Aggiungi Link

12 Collegare qualsiasi caselle di testo direttamente attraverso il pannello delle proprietà. Selezionare il testo con lo strumento testo, evidenziare il testo e quindi digitare il link URL nella barra dei collegamenti. URL usano la sintassi "http: //" (senza le virgolette), seguito dall'indirizzo web vero e proprio. link e-mail utilizzano una sintassi diversa: "mailto: //", seguito da un indirizzo di posta elettronica.

13 Aggiungere link a immagini convertendo prima le immagini ai simboli. Assicurati di scegliere "pulsante" quando si apre la finestra di dialogo "Converti in simbolo". Una volta che l'immagine è un simbolo, ActionScript deve essere aggiunto ad esso. Aprire la finestra Azioni ( "F9"). Assicurarsi che sia selezionato ActionScript 2.0 e ScriptAssist è attivo. Selezionare "Funzioni globali", poi "" Browser / Rete "e quindi fare doppio clic" getURL ". ScriptAssist posizionerà il codice nelle azioni Finestra e forniscono anche un bar per un indirizzo URL da inserire. Inserire l'indirizzo in cui il pulsante dovrebbe collegare a quando si fa clic.

14 Aggiungere collegamenti a pulsanti di navigazione esattamente allo stesso modo come è stato fatto nel precedente punto 2. I pulsanti sono già stati convertiti in simboli, in modo ActionScript può essere aggiunto a loro immediatamente. Assicurarsi di selezionare ogni pulsante sullo stage individualmente e quindi aggiungere il codice. Altrimenti, lo stesso codice esatto sarà aggiunto a ciascun pulsante simultaneamente. Anche ricordare che i pulsanti di navigazione, molto probabilmente andare a pagine con il sito web, e quelle pagine non sono stati ancora creato. I collegamenti URL saranno a quelle pagine, e ha bisogno la seguente sintassi da utilizzare: il pulsante "About" andrà a "../about.html"; il pulsante "Contact" andrà a "... / contact.html); etc.

Replicare pagine e pubblicare il sito

15 Una volta che la home page è completato, salvarlo con il nome di "indice". Ora creare la prima pagina interna corrispondente al primo pulsante di navigazione. Eliminare il livello del contenuto (ricordate: è attualmente in mostra i contenuti per la home page), aggiungere un nuovo livello, rinominarlo "contenuto", e quindi aggiungere nuovi contenuti allo stage al suo posto. Aggiungere eventuali nuovi collegamenti, se necessario. Quindi scegliere "Salva con nome" e il nome lo stesso nome del primo pulsante di navigazione (ad esempio, "circa"). Non aggiungere le estensioni di file da salvare i file; Flash farà automaticamente.

16 Ripetere il passaggio 1 sopra per il maggior numero di pagine interne, come ci sono pulsanti di navigazione. Quando sono state create tutte le pagine, aperto tutti loro in modo che appaiano come le schede di file separati sullo spazio di lavoro di Flash.

17 Passare attraverso i file uno per uno e pubblicarli. Aprire "Impostazioni pubblicazione" ( "File" e poi "Impostazioni pubblicazione") e assicurarsi che le caselle di SWF e HTML vengono controllati una volta visualizzata la finestra di dialogo. Nessuna delle altre caselle deve essere controllato. Fai clic su "Pubblica" e Flash salverà il file in due formati: come un file SWF e come HTML associato.

18 Aprire un browser Internet come Internet Explorer, Firefox o Safari, e quindi aprire il file index.html ( "File" e poi "Open"). La home page apparirà così come apparirebbe su Internet e tutti i sotto-pagine e link funzionerà, anche. Complimenti!