Hvordan lage en Flash webside

Flash er en animasjon programvarepakke som brukes av profesjonelle og amatører til å lage sofistikerte interaktiv design. Mens fagfolk har en tendens til å bruke Flash i tandem med andre programmer som Photoshop for bildeproduksjon og Dreamweaver for nettstedet konstruksjon, har Flash verktøy innenfor det å lage komplette websider uten å bruke andre programmer. Kjennskap til Flash & # 039; s grunnleggende verktøy og arbeidsområder er nødvendig for denne oppgaven.

Bruksanvisning

Planlegger du en webside

1 Tegn en skisse med blyant og papir av en design for en webside. Profesjonelle designere alltid ha en skisse av en web-design før de faktisk bygge den. Denne skisse viser de grunnleggende elementer som skal inngå i utformingen, så vel som størrelsen på elementene. Det kan også omfatte beskrivelser av farger som vil bli brukt.

For denne artikkelen vil vi skape en "portal side." Som en døråpning eller gate, en portalside leder brukeren til et annet sted. Denne portalen vil være for en lokal skolestyret. Den vil ha navnet på skolen på toppen og to navigeringsknapper, en som sier "student" og den andre "lærer". Også på siden vil være en e-link.

Tenk at en nettside på sitt enkleste er et lerret med fire grunnleggende elementer: en overskrift som forteller seeren hva navnet på nettstedet er; et hovedinnhold område (et bilde og / eller tekst) som beskriver hva siden tilbyr; navigasjonskoblinger for å ta betrakteren et annet sted (dette kan bare være en e-postadresse en seer kan klikke for å sende en e-post som ber om mer informasjon eller knapper som når du trykker send betrakteren til andre websider eller nettsteder, og en bunntekst som inneholder kontaktinformasjon og kanskje en opphavsrett. Noen ganger hovedinnholdet området og navigasjonskoblinger er kombinert i én del. dette er hva vi vil gjøre for dette eksemplet.

2 Snu papiret slik at det er i liggende format og tegne et rektangel på den. Hver side av rektangelet skal være innenfor en tomme eller så av papir & # 039; s kanten. Merk bredde "800 piksler" og høyden "600 piksler," standardstørrelsen for et nettsted. Et panorama andel (eller eksempel 1000 x 600 eller 1200 x 600) blir stadig mer populært. Dette rektangelet vil være den grunnleggende rammen for å vise nettsiden & # 039; s design. Hvis siden har en bakgrunnsfarge, tyder det på papiret. Vårt eksempel vil bruke en hvit bakgrunn.

3 Bestem hva overskriften vil se ut. Overskriften på de fleste nettsider vanligvis kjører bredden på siden (800 piksler, i dette tilfellet) og smale (100 piksler) i høyde. Det er ofte en enkelt farge eller bilde som har tekst på toppen av det. Teksten er som regel stor og lett synlig fra avstand og oppgir navnet på selskapet eller organisasjonen som eier nettsiden. Ta en blyant og gå til venstre kant av rektangelet på siden. Starter om en tomme ned fra den øverste kanten av rektangelet, tegne en rett linje horisontalt over på siden før den berører den høyre kanten av rektangelet. Området over linjen bare trukket representerer spissen. Tegn på plass hva overskriften vil se ut og hvilken informasjon den vil inneholde. Også skrive i høydedimensjonen av "100 bildeelementer".

4 Bestem hva bunnteksten vil se ut. De fleste bunntekster er et solid farge med tekst i en kontrastfarge. De er også smalere i høyden enn overskrifter, vanligvis 50 eller 75 piksler. Starter om lag tre fjerdedeler av en tomme opp fra nedre kant av rektangelet, tegne en rett linje horisontalt over på siden fra venstre kant til høyre kant av rektangelet. Området under streken bare trukket representerer bunnteksten. Tegn på plass hva bunnteksten vil se ut og hvilken informasjon den vil inneholde. For denne artikkelen, vil det være en e-link. Også skrive i høydedimensjonen av «75 bildeelementer".

5 Etiketten høyden av hovedområdet. Fordi rektangelet er 600 piksler høy, er overskriften 100 piksler og bunntekst er 75 piksler, hovedinnholdet området er, som standard, 425 piksler i høyden. Bestem hva som vil gå i hovedinnholdet området. I eksempelet vil vi trekke to ruter, vil hver 350 piksler per side og hver rute være sentrert horisontalt og vertikalt med i hovedinnholdet området. Hver rute vil fungere som en link-knappen. Hver vil ha en gul bakgrunn når det vises, men bakgrunnen vil endres til rødt når brukeren & # 039; s musen svever over det.

Konstruer webside

6 Åpne en ny Flash (Actionscript 2.0) dokument. Åpne Egenskaper Panel ( "Window" og deretter "Properties") og endre standarddimensjoner til 800 av 600. Properties Panel er også arbeidsområdet der Stage farge og bildefrekvens er satt. Gjør Stage fargen "hvit" og sette bildehastigheten til "12 fps" (bilder per sekund. "Twelve fps er standardsatsen for nettsider.

7 Velg "View" og deretter "linjaler" å gjøre herskerne synlig på scenen, og deretter plassere to retningslinjer fra toppen hersker på 100 pixel og 525 pixel merker. Retningslinjene er plass ved å klikke på linjal, holde nede venstre museknapp og deretter dra markøren til plasseringen på scenen hvor retningslinjene er ment å gå. Når retningslinjene er på plass, vil det være klart hvor overskriften, hoved innhold og bunntekst områder går.

8 Sett inn et nytt lag i tidslinjen ved å klikke på tidslinjen Panel & # 039; s "Nytt lag" -knappen. Det vil ha en standardnavnet "Layer 2". Dobbeltklikk på lagnavnet og endre navnet "header". Åpne Info Panel ( "Window" og deretter "Info"). Klikk på Fill Color swatch på verktøylinjen, og velg en farge. Vi vil velge gul. Nå velger rektangelverktøyet. Tegn et rektangel på Stage fra øvre venstre hjørne til nederst til høyre i første retningslinje. Dette vil være overskriften, og det spiller ingen rolle akkurat nå hvis størrelsen er nøyaktige; det vil være i et øyeblikk. Etter å ha sluppet museknappen, gå til Infopanel og sett X og Y-koordinatene hver til "0". Deretter satt bredden ( "W") til "800" og høyden ( "H") til "100". Overskriften er nå dimensjonert nøyaktig.

9 Sett inn et nytt lag og gi den navnet "header tekst." Endre fyllfarge til "svart". Velg tekstverktøyet og skriv inn navnet på nettsiden over det gule rektangelet. I dette tilfellet, vi & # 039; ll Type: ". Mainville City skoler" Marker teksten, og velg deretter en font og skriftstørrelse fra Eiendom Panel (for eksempel "Arial", "60 pts"). Velg Selection Tool og flytte teksten til venstre for toppmenyen.

10 Sett inn et nytt lag og gi den navnet "bunntekst". Velg rektangelverktøyet. Tegn et rektangel på Stage fra nedre venstre hjørne av scenen i høyre hjørne av andre retningslinje. Dette vil være bunnteksten, og det vil være svart. Etter å ha sluppet museknappen, gå til Infopanel og sett X og Y-koordinatene til "0" og "525". Deretter satt bredden ( "W") til "800" og høyden ( "H") til "75". Bunnteksten er nå dimensjonert nøyaktig.

11 Sett inn et nytt lag i tidslinjen Panel og dobbeltklikk på den for å endre navn på den "bunntekst" som nevnt i trinn 3. Endre fyllfarge til "hvite". Velg tekstverktøyet og skriv: "Klikk her for å sende epost til oss!" over den svarte rektangelet. Marker teksten og velge samme skrifttype som brukes i header og endre skriftstørrelsen i eiendom Panel (for eksempel "24 pts"). I Link linjen i Properties Panel, skriv: "mailto: //[email protected]", ved å erstatte en reell adresse for den fiktive en gitt i eksempelet. Velg Selection Tool og flytte teksten til midten av bunnlinjen. Når filen vises i en nettleser, vil markøren endres fra en pil til en hånd når brukeren mus over teksten i bunnteksten. Hvis brukeren klikker deretter setningen, bruker & # 039; s standard e-postleseren åpnes automatisk med en ny e-postmelding dialogboksen.

Gjør Knapper

12 Sett inn et nytt lag i tidslinjen og gi den navnet "studentbutton." Klikk på Fill Color swatch på verktøylinjen og velger en farge. Vi vil velge gul. Nå velger rektangelverktøyet. Tegn en firkant i hovedinnholdet område av Stage. Det spiller ingen rolle akkurat nå hva størrelsen er. Etter å ha sluppet museknappen, gå til Infopanel og sett X og Y-koordinatene til "30" og "150". Deretter satt bredden ( "W") til "350" og høyden ( "H") til "350". Trykk "F8" for å konvertere plassen til et symbol. Navn symbolet "student" og sørge for at "knapp" er valgt som symbol & # 039; s klasse. Klikk på "OK". Etter et objekt er konvertert til et symbol, er en kopi av den plassert i filen & # 039; s Library. Klikk på firkanten for å velge det og gi det en forekomst navn i Properties panelet. Name it: "student_bu". Den "Bu" står for "knapp".

1. 3 Åpne Bibliotek ( "Window" og deretter "Library") og dobbeltklikk på knappen & # 039; s ikon. Filen & # 039; s Tidslinje vil endres til knappen & # 039; s Tidslinje. Knappen & # 039; s Tidslinje viser ikke rammer. Det viser "tilstander" eller fire forhold knappen kan brukes i: "Up", hva knappen ser ut når siden laster; "Over" hva knappen ser ut når en mus svever over det; og deretter "ned" og "hit", som er to andre stater vi ikke trenger. Bruke tekstverktøyet, skriver ordet "STUDENT" i store bokstaver på den gule firkanten. Endre skrifttype og størrelse, om nødvendig. Deretter bruker Selection Tool for å sentrere teksten vertikalt og horisontalt på torget.

14 Høyreklikk på "over" state på Tidslinjen og velg "Sett inn blank keyframe" fra rullegardinmenyen som vises ved siden av markøren. Klikk på den gule firkanten for å markere den og endre fyllfargen til "rød". Plassen blir nå rød. Klikk "Scene 1" rett over scenen, og filen & # 039; s Tidslinje vil dukke opp igjen. Nå når filen er online, vil den gule firkanten skifte til en rød firkant når det er moused over.

15 Åpne Handlinger Window ( "Window" og deretter "Handlinger"). Sørg for Actionscript 2.0 er valgt og ScriptAssist er aktiv. Velg "Globale funksjoner", deretter "" Browser / Network "og dobbeltklikk på" getURL. "ScriptAssist vil plassere koden i handlinger åpnes og gir også en bar for en URL-adresse må legges inn. Skriv inn adressen hvor knappen skal lenke til når du klikker i denne artikkelen & # 039; s. eksempel kan det være en nettside som heter "www.MainvilleCitySchools.edu/student.htm".

16 Gå tilbake til biblioteket og høyreklikk studenten knappen. Velg "Duplicate". Endre navnet på filen "teacher_bu" og klikk "Enter". Velg læreren knappen i biblioteket og dra det til scenen like til høyre for student-knappen. Dobbeltklikk læreren knappen & # 039; s ikonet i biblioteket, og knappen & # 039; s Tidslinje vises. Klikk på "opp" tilstand på Tidslinjen. Bruke tekstverktøyet, markere tekst (som i dag sier "STUDENT") og erstatte den med "lærer." Klikk på "over" state på Tidslinjen. Bruke tekstverktøyet, marker teksten (som også sier "STUDENT") og erstatte den med "lærer." Klikk "Scene 1" og deretter gå tilbake til de handlinger åpnes. Nå endres i koden URL-adressen (som sier "www.MainvilleCitySchools.edu/student.htm") til adressen der læreren knappen skal linke til (for eksempel "www.MainvilleCitySchools.edu/teacher.htm).

Publiser Web Page

17 Test filen ved å trykke "Ctrl-Enter". Filen vises og fungere akkurat som den vil i en nettleser. Lukker du testvinduet. Velg "File" og deretter "Publiser Settings". En dialogboks vil vises. La kun de beste to bokser (SWF og HTML) er sjekket. Legg merke til hvor på datamaskinen filene vil bli publisert og klikk på "Publiser" -knappen. I Flash, ordet "Publiser" tilsvarer "Lagre som" i andre programmer. I dette tilfellet vil Flash-filen lagres som en SWF film og en HTML-fil.

18 Åpne en nettleser, for eksempel Internet Explorer, Safari eller Firefox.

19 Velg "File" og deretter "Open", og navigere til HTML-filen du nettopp publisert. Klikk "Open", og du vil se siden du opprettet arbeider akkurat som en hvilken som helst nettside ville.

Hint

• Lagre filen ofte for å sikre at du don & # 039; t miste noe av arbeidet ditt.