Rask tips Gi annonsen din en sidekurv

I dette raske tipset vil jeg demonstrere hvordan du lager en veldig enkel curl-animasjon for en hjørneannonse på nettstedet ditt.

Trinn 1: Sette opp scenen

Åpne en ny ActionScript 3.0 Flash-fil og endre dens dimensjoner i Egenskaper-panelet til 250 x 250px. Still inn bildefrekvensen til 30fps.

Trinn 2: Tegning rektangel

Opprett et rektangel (240px ved 240px) og legg det på koordinater (10, 0). Velg øverste høyre hjørne og dra det helt ned til du ser trekant.

Trinn 3: Rektangulær fylling

Gå til fargepaletten og sett den ytre gradienten til mørkegrå (# A6A6A6). Mellomgradientstoppet er lettere (#EEEEEE). Velg malingsbrakettverktøyet og dra over trekanten med shift-tasten nede.

Trinn 4: Konvertering til filmklipp

Velg trekanten og trykk F8. Navn denne nye filmklippet "curl" og endre registreringspunktet til øverste høyre hjørne.

Trinn 5: Forberede mask og bakgrunn

Rediger curl gjenstand. Kopier trekant til det nye laget (endre navn på "bcg" for bakgrunn) og roter den 180 grader. Sett fyllfargen til mørkegrå (# 333333). Lag et duplikatlag av "bcg" -laget og endre det til "mask".

Trinn 6: Opprette Curl Animation

Gå til den tiende rammen og opprett nøkkelrammer i alle lag. Høyreklikk til første keyframes og velg Opprett Motion Tween. Gå til den første rammen og velg alle objekter (Ctrl + A). Velg Free Transform Tool (Q) og gjør det mindre med Shift-tasten nede. Det vil være den opprinnelige tilstanden. Still inn letteverdien i alle første nøkkelrammer til 100.

Trinn 7: Opprette knapp

Opprett nytt lag og dra det mellom BCG og maske lag. Navngi den "knappen". Opprett hvilken som helst logo eller grafikk du vil ha, og konverter den til en knapp (F8). Gi den et eksempelnavn "knapp". Legg krøllobjektet.

Trinn 8: Maskering av knappen

Dobbeltklikk på Lag Egenskaper-knappen i maske lag og sett typen til "Mask". Sett knappelagets type til "Masked".

Trinn 9: Handlingslag

Opprett et nytt lag som heter handlinger. Gå til den tiende rammen og opprett en keyframe. Gå til handlingspanelet (F9) og skriv inn Stoppe();. Gjør det samme i den første keyframe.

Trinn 10: Curl Object Lyttere

Gi krøllobjektet på scenen et forekomstnavn på curl. I handlinger lag på ramme 1, åpne handlingspanelet (F9). Nå vil vi curl objektet å høre når musen beveger seg over og ut. Skriv inn følgende kode.

curl.addEventListener (MouseEvent.MOUSE_OVER, fremover); curl.addEventListener (MouseEvent.MOUSE_OUT, bakover); funksjon fremover (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, backAnim); stage.addEventListener (Event.ENTER_FRAME, fwdAnim);  fungere bakover (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim);

Trinn 11: Animasjonsfunksjoner

De fwdAnim () og backAnim () Funksjoner sier å gå til neste / forrige ramme hver gang du skriver inn en ny ramme. I vårt tilfelle er det 30x per sekund. Legg til følgende kode.

funksjon fwdAnim (e: Event): void curl.nextFrame ();  funksjon tilbakeAnim (e: Event): void curl.prevFrame ();

Trinn 12: Klikk på Funksjon

Legg til listen lytteren og opprett en enkel klikk-funksjon.

curl.button.addEventListener (MouseEvent.CLICK, clickMe); funksjon clickMe (e: MouseEvent): void var myURL: URLRequest = ny URLRequest ("http://www.yourwebsite.com/"); navigateToURL (myURL);

Nå kan vi legge inn SWF-en på en nettside.

Trinn 13: Embedding på nettstedet

På HTML-siden der du vil at annonsen skal vises, må du legge inn SWF-en i en div med sidenCurl-identifikatoren.

Fest de følgende egenskapene til sidenCurl-objektet i CSS-filen din. De definerer dimensjonene til objektholderen og fikser posisjonen til øverst til høyre på siden.

 #pageCurl margin: 0; posisjon: fast; topp: 0; høyre: 0; venstre: auto; bredde: 250px; høyde: 250px;

Konklusjon

Det er det! Sjekk ut resultatet ved å rulle øverst til høyre på siden for å avsløre annonsen din. Jeg håper du finner bruk for denne Quick Tip!

Kode