Hvordan lage Flash animert Web Navigasjon

Opprette en Flash Actionscript 3 animerte navigasjon ikke bare legger interaktivitet til ditt nettsted, men også lar brukerne vet hvor de er. Måtene å legge til animasjon til navigasjonen er bare begrenset av fantasien, men for å komme i gang, vil du lage en enkel ball som følger muse langs navigeringsmenyen. Denne leksjonen bruker også arrays; for de av dere som er nye til matriser, er dette en fin måte å få føttene våte.

Bruksanvisning

1 Åpne Flash og klikk på "File", "New" og deretter "Flash fil (Actionscript 3.0)" fra pullout menyen. Klikk på rektangelverktøyet på verktøylinjen, og mens du holder nede muse, dra over scenen for å tegne et rektangel. Klikk på tekstverktøyet og skriv "Play" på toppen av rektangelet.

2 Klikk på både rektangel og "Play" tekst for å fremheve dem. Fra hovedmenyen, klikk på "Endre", deretter "Konverter til New Symbol" fra rulle ut menyen. Klikk på "Button" radial boksen og skriv inn "playMC" for navnet.

3 Klikk på "Window" fra hovedmenyen, og klikk deretter "Properties" og deretter "Properties" igjen fra den uttrekk menyen. Med din bakgrunn og tekst uthevet, skriv inn "home_btn" i Instance Name-feltet i eiendomspanel.

4 Klikk "Sett inn Layer" nederst i tidslinjen, og gi den navnet "knapper". Klikk på tekstverktøyet på verktøylinjen. I Egenskaper-panelet, klikk på "Statisk tekst." Skriv inn navigasjons overskrifter som "Home", "Om" og "Kontakt".

5 Høyreklikk på "Home" og klikk "Konverter til Symbol" fra den uttrekk menyen. Name it "Home", klikk på "knappen" for symboltype, og deretter, på bunnen Registrering rad, klikker du på den midterste boksen. Klikk på "OK".

6 Skriv inn "home_btn" for en forekomst navn på Properties panelet. Gjenta denne prosessen for alle dine navigasjons overskrifter. Gi hver en unik instant navn som "contact_btn."

7 Klikk "Sett inn Layer" nederst i tidslinjen, og gi den navnet "animere". Klikk på Oval verktøyet fra verktøylinjen og tegne en ball på scenen ved å holde musen nede og dra. Plasser ballen under "Home" -knappen.

8 Høyreklikk på ballen, og klikk deretter på "Konverter til Symbol" fra den uttrekk menyen, you name it "ball_mc" og klikk på "Movie Clip" etter symbolet type. Klikk på "OK".

9 Klikk "Sett inn Layer" nederst i tidslinjen, og gi den navnet "AS3." Høyreklikk på ramme en av Handling laget og klikk deretter på "Action" fra den uttrekk menyen. Skriv inn følgende kode:

import fl.transitions.Tween;

importere fl.transitions.easing. *;

/ Endre btn navn etter behov /

Var buttonsArr: Array = new Array (home_btn, contact_btn);

Var linkArr: Array = new Array ();

/ Endre navigasjon adresse her /

linkArr.push ( «http://www.google.com/");

linkArr.push ( "http: //www.yahoo.com.html");

for (var i: uint = 0; i <buttonsArr.length; i ++) {

buttonsArr [i] .addEventListener (MouseEvent.ROLL_OVER, moveFollow);

buttonsArr [i] .addEventListener (MouseEvent.CLICK, clickurl);

}

funksjon moveFollow (event: Mouseevent): void {

ny Tween (ball_mc, "x", Strong.easeOut, ball_mc.x, event.currentTarget.x, 1, true);

}

funksjon clickurl (event: Mouseevent): void {for (var j: uint = 0; j <linkArr.length; j ++) {

if (event.currentTarget == buttonsArr [j]) {

navigateToURL (ny URLRequest (linkArr [j])); }}}