Come creare una pagina web Flash

April 28

Come creare una pagina web Flash


Flash è un pacchetto software di animazione utilizzata dai professionisti e dilettanti per rendere sofisticati progetti interattivi. Mentre i professionisti tendono ad usare Flash in tandem con altri programmi come Photoshop per la creazione di immagini e Dreamweaver per la costruzione sito web, Flash ha gli strumenti all'interno di esso per rendere le pagine web complete senza utilizzare le altre funzioni. La familiarità con Flash & # 039; s strumenti di base e le aree di lavoro sono necessari per questo compito.

istruzione

Pianificazione di una pagina web

1 Disegnare uno schizzo con la matita e la carta di un progetto per una pagina web. Designer professionisti hanno sempre un schizzo di un web design prima di essere effettivamente costruirlo. Questo disegno mostra gli elementi di base da includere nella progettazione, nonché le dimensioni degli elementi. Può anche includere descrizione dei colori che verranno utilizzati.

Per questo articolo andremo a creare una "pagina del portale." Come una porta o cancello, una pagina del portale guida l'utente in un altro luogo. Questo portale sarà per un consiglio scolastico locale. Esso avrà il nome del sistema scolastico in alto e due pulsanti di navigazione, uno che dice "studente" e l'altro "maestro". Anche sulla pagina sarà un collegamento e-mail.

Si consideri che una pagina web alla sua più semplice è una tela con quattro elementi fondamentali: un colpo di testa che dice allo spettatore ciò che il nome del sito è; una zona contenuto principale (una foto e / o testo) che descrive ciò che la pagina offre; link di navigazione per prendere lo spettatore da qualche altra parte (questo potrebbe essere semplicemente un indirizzo email di un utente può fare clic per inviare un messaggio con richiesta di ulteriori informazioni o pulsanti che se premuti trasmettere allo spettatore di altre pagine web o siti web, e un piè di pagina che contiene informazioni di contatto e, forse, un avviso di copyright. a volte la principale area di contenuti e link di navigazione sono combinati in una sezione. questo è quello che faremo per questo esempio.

2 Girare la carta in modo che sia in formato orizzontale e disegnare un rettangolo su di esso. Ogni lato del rettangolo dovrebbe essere all'interno di un pollice o così di carta & # 039; s bordo. Etichettare la larghezza di 800 pixel "" e l'altezza "600 pixel", la dimensione standard per un sito web. Una percentuale panoramica (o ad esempio, 1.000 x 600 o 1200 x 600) sta diventando sempre più popolare. Questo rettangolo sarà la struttura di base per visualizzare la pagina web & # 039; s design. Se la pagina avrà un colore di sfondo, indicare che sulla carta. Il nostro esempio userà uno sfondo bianco.

3 Decidere che cosa l'intestazione sarà simile. L'intestazione sulla maggior parte delle pagine web in genere è la larghezza della pagina (800 pixel, in questo caso) e stretti (100 pixel) in altezza. Spesso un singolo colore o fotografia che ha il testo su di esso. Il testo è di solito di grandi dimensioni e facilmente visibile da lontano e dichiara il nome della società o organizzazione che possiede la pagina web. Prendete una matita e andare al bordo sinistro del rettangolo sulla pagina. Avvio di circa un pollice giù dal bordo superiore del rettangolo, disegnare una linea retta orizzontale attraverso la pagina fino a toccare il bordo destro del rettangolo. L'area al di sopra della linea di appena disegnato rappresenta l'intestazione. Disegnare nello spazio ciò che l'intestazione sarà simile e quali informazioni conterrà. scrivere anche nella dimensione altezza del "100 pixel."

4 Decidere che cosa il piè di pagina sarà simile. La maggior parte dei piè di pagina sono un colore solido con il testo in un colore contrastante. Essi sono anche più stretta in altezza di intestazioni, di solito 50 o 75 pixel. Avvio di circa tre quarti di pollice in alto dal bordo inferiore del rettangolo, disegnare una linea retta orizzontale attraverso la pagina dal bordo sinistro al bordo destro del rettangolo. L'area sotto la linea appena disegnato rappresenta il piè di pagina. Disegnare nello spazio ciò che il piè di pagina sarà simile e quali informazioni conterrà. Per questo articolo, ci sarà un collegamento e-mail. scrivere anche nella dimensione altezza "75 pixel."

5 Etichettare l'altezza dell'area del contenuto principale. Poiché il rettangolo è alto 600 pixel, l'intestazione è di 100 pixel e il piè di pagina è di 75 pixel, la principale zona contenuto è, per impostazione predefinita, 425 pixel in altezza. Decidere che cosa andrà nell'area del contenuto principale. Nell'esempio disegneremo due piazze, ciascuna di 350 pixel per lato e ogni piazza saranno centrati orizzontalmente e verticalmente con nell'area del contenuto principale. Ogni quadrato agirà come un pulsante di collegamento. Ognuno avrà uno sfondo giallo quando appare, ma lo sfondo diventa rosso quando l'utente & # 039; s il mouse passa sopra di esso.

Costruire la pagina Web

6 Aprire una nuova (2,0 ActionScript) documento Flash. Aprire il pannello Proprietà ( "Finestra", quindi "Proprietà") e modificare le dimensioni predefinite a 800 da 600. Il pannello delle proprietà è anche l'area di lavoro in cui vengono impostate il colore stage e frame rate. Rendere il colore Stage "bianco" e impostare il frame rate a "12 fps" (fotogrammi al secondo. "Dodici fps è la tariffa standard per i siti web.

7 Selezionare "Visualizza" poi "governanti" per rendere i governanti visibile sullo stage e quindi posizionare due linee guida dal righello superiore ai marchi 100 pixel e 525 pixel. Le linee guida sono posto cliccando il righello, tenendo premuto il tasto sinistro del mouse e trascinando il cursore sulla posizione sullo stage dove si suppone che la linea guida per andare. Quando le linee guida sono in atto, sarà chiaro dove le aree di intestazione, piè di pagina di contenuto principale e vanno.

8 Inserire un nuovo livello nella linea temporale facendo clic sul pannello Timeline & # 039; s pulsante "Nuovo livello". Si avrà un nome predefinito di "livello 2". Fare doppio clic sul nome del livello e rinominarlo "header". Aprire il Pannello di informazioni ( "Finestra", quindi "Info"). Fare clic sul campione Colore riempimento sulla barra degli strumenti, e selezionare un colore. Sceglieremo giallo. Ora selezionate lo strumento Rettangolo. Disegnare un rettangolo sullo stage dall'angolo in alto a sinistra in basso a destra della prima linea guida. Questo sarà l'intestazione, e non importa in questo momento se la dimensione è esatto; sarà in un momento. Dopo aver rilasciato il pulsante del mouse, aprire il Pannello di informazioni e impostare le coordinate X e Y ciascuna a "0". Quindi impostare la larghezza ( "W") a "800" e l'altezza ( "H") a "100". L'intestazione è ora dimensionato esattamente.

9 Inserire un nuovo livello e il nome "testo di intestazione". Cambiare il colore di riempimento a "nero". Selezionare lo strumento Testo e digitare il nome della pagina web sul rettangolo giallo. In questo caso, si & # 039; ll tipo: ". Mainville City Schools" Evidenziare il testo e quindi selezionare la dimensione del carattere e il carattere Dal pannello delle proprietà (ad esempio, "Arial", "60 punti"). Scegliere lo strumento di selezione e spostare il testo a sinistra della barra di intestazione.

10 Inserire un nuovo livello e il nome "piè di pagina". Selezionate lo strumento Rettangolo. Disegnare un rettangolo sullo stage dal basso a sinistra dello stage la traversa in alto a destra della seconda linea guida. Questo sarà il piè di pagina, e sarà nero. Dopo aver rilasciato il pulsante del mouse, aprire il Pannello di informazioni e impostare le coordinate X e Y a "0" e "525". Quindi impostare la larghezza ( "W") a "800" e l'altezza ( "H") a "75". Il piè di pagina è ora dimensionato esattamente.

11 Inserire un nuovo livello nel pannello Timeline e fare doppio clic su di esso per rinominarlo "piè di pagina di testo", come indicato al punto 3. Modificare il Colore riempimento a "bianco". Selezionare lo strumento Testo e digitare: "Clicca qui per contattarci via email!" sopra il rettangolo nero. Evidenziare il testo e selezionare lo stesso font usati nell'intestazione e cambiare la dimensione del carattere nel pannello proprietà (ad esempio, "24 punti"). Nella barra di collegamento delle proprietà del pannello, tipo: "mailto: //[email protected]", sostituendo il vero indirizzo per la fittizia quella data nell'esempio. Scegliere lo strumento di selezione e spostare il testo al centro della barra piè di pagina. Dopo che il file viene visualizzato in un browser, il cursore cambia da una freccia ad una mano quando l'utente mouse sul testo nel piè di pagina. Se l'utente clicca poi la frase, l'utente & # 039; s del browser di posta elettronica predefinito si aprirà automaticamente con una nuova finestra di dialogo messaggio di posta elettronica.

Rendere i pulsanti

12 Inserire un nuovo livello nella linea temporale e il nome "studentbutton." Fare clic sul campione Colore riempimento sulla barra degli strumenti e selezionare un colore. Sceglieremo giallo. Ora selezionate lo strumento Rettangolo. Disegnare un quadrato nella principale area del contenuto dello stage. Non importa in questo momento quale sia la dimensione è. Dopo aver rilasciato il pulsante del mouse, aprire il Pannello di informazioni e impostare le coordinate X e Y per "30" e "150". Quindi impostare la larghezza ( "W") a "350" e l'altezza ( "H") a "350". Premere il tasto "F8" per convertire la piazza di un simbolo. Assegnare un nome al simbolo "studente" e assicurarsi che "bottone" è stato selezionato come il simbolo & # 039; s classe. Fai clic su "OK". Dopo che un oggetto viene convertito in un simbolo, una copia viene inserito nel file & # 039; s biblioteca. Fare clic sul quadrato per selezionarlo e dargli un nome di istanza nel pannello Proprietà. Nome è: "student_bu". Il "bu" sta per "tasto".

13 Aprire la libreria ( "Finestra", quindi "Library") e fare doppio clic sul pulsante & # 039; s icona. Il file & # 039; s Timeline cambierà il pulsante & # 039; s Timeline. Il pulsante & # 039; s Timeline non mostra i frame. Essa mostra "stati", o quattro condizioni il pulsante potrebbe essere utilizzata in: "Up", quello che il pulsante assomiglia al caricamento della pagina; "Finita", l'aspetto del pulsante come quando un mouse passa su di essa; e poi "down" e "hit", che sono altri due stati non abbiamo bisogno. Utilizzando lo strumento Testo, digitare la parola "studente" a grandi lettere sul quadrato giallo. Modificare il carattere e le dimensioni, se necessario. Quindi utilizzare lo strumento Selezione per centrare il testo verticalmente e orizzontalmente in piazza.

14 Fare clic con lo stato "over" sulla timeline e selezionare "Inserisci fotogramma chiave vuoto" dal menu a tendina che apparirà accanto al cursore. Fare clic sul quadratino giallo per evidenziarlo e cambiare il colore di riempimento "rosso". La piazza ora diventa rosso. Fai clic su "Scene 1" a destra sopra lo stage, e il file & # 039; s Timeline riapparirà. Ora, quando il file è in linea, il quadrato giallo cambierà ad un quadrato rosso quando è moused sopra.

15 Aprire la finestra Azioni ( "Finestra", quindi su "Azioni"). Assicurarsi che sia selezionato ActionScript 2.0 e ScriptAssist è attivo. Selezionare "Funzioni globali", quindi "" Browser / Rete "e fare doppio clic su" getURL. "ScriptAssist metterà codice nella Azioni finestra e forniscono anche un bar per un indirizzo URL da inserire. Inserire l'indirizzo in cui il pulsante dovrebbe Link a quando si fa clic In questo articolo & # 039;. s ad esempio, potrebbe essere una pagina web chiamato "www.MainvilleCitySchools.edu/student.htm".

16 Torna alla Biblioteca e fare clic con il pulsante di studente. Selezionare "Duplica". Rinominare il file "teacher_bu" e fare clic su "Invio". Selezionare il pulsante insegnante in biblioteca e si trascina sul palco appena a destra del pulsante studente. Apparirà s Timeline; Fare doppio clic sul pulsante di insegnante & # 039; s icona nella biblioteca, e il pulsante & # 039. Fare clic sullo stato "up" sulla linea temporale. Utilizzando lo strumento Testo, evidenziare il testo (che attualmente dice "studente") e sostituirlo con "maestro". Fare clic sullo stato "over" sulla linea temporale. Utilizzando lo strumento Testo, evidenziare il testo (che dice anche "studente") e sostituirlo con "maestro". Fai clic su "Scene 1" e poi tornare alle Azioni della finestra. Ora cambiare il codice l'indirizzo URL (che dice "www.MainvilleCitySchools.edu/student.htm") per l'indirizzo di dove il tasto insegnante dovrebbe creare un collegamento a (ad esempio, www.MainvilleCitySchools.edu/teacher.htm ").

Pubblicare la pagina Web

17 Testare il file premendo il tasto "Ctrl-Enter". Il file viene visualizzato e funziona esattamente come lo farà in un browser. Chiudere la finestra di prova. Selezionare "File" e poi "Impostazioni pubblicazione." Apparirà una finestra di dialogo. Assicurarsi che solo i primi due scatole (.swf e .html) vengono controllati. Prendere nota di dove sul computer saranno pubblicati i file e fare clic sul pulsante "Pubblica". In Flash, la parola "Pubblica" equivale a "Salva con nome" in altri programmi. In questo caso, il file Flash sarà salvato come un filmato SWF e un file HTML.

18 Aprire un browser Internet, come ad esempio Internet Explorer, Safari o Firefox.

19 Selezionare "File", poi "Apri", e il Individuare il file HTML appena pubblicato. Fai clic su "Apri" e vedrete la pagina creata a lavorare proprio come qualsiasi pagina web sarebbe.

Consigli e avvertenze

  • Salvare il file spesso per assicurarsi che don & # 039; t perdere qualsiasi del vostro lavoro.