Quick Tips: Reveal Your Ad Med en Page Curl
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne raske tips jeg vil demonstrere hvordan å lage en veldig enkel curl animasjon til corner annonse på nettstedet ditt.
Trinn 1: Sette opp Scene
Åpne en ny Actionscript 3.0 flash-fil og endre dimensjoner i Properties panelet til 250 x 250 piksler. Sett bildefrekvens 30 bilder i sekundet
Trinn 2:. Tegning rektangulært
Lag et rektangel (240px by 240px) og plassere den på koordinater (10, 0). Plukk øverst i høyre hjørne, og dra det hele ned til du ser trekant
Trinn 3:. Rektangulært Fyll
Gå til fargepaletten og sette den ytre gradient stopper til mørk grå (# A6A6A6). Den midterste gradient stopp er lettere (#EEEEEE). Plukk maling bøtte verktøyet og dra over trekanten med shift-tasten nede
Trinn 4:. Konvertering til Movie Clip
Velg trekanten og trykke F8. Kalle denne nye filmklipp "krølle" og endre registreringspunkt til øverste høyre hjørne
Trinn 5:. Klar Mask og Bakgrunn
Rediger curl Gå til tiende ramme og lage keyframes i alle lag . Høyreklikk for første nøkkelbilder og velg Create Motion Tween. Gå til det første bildet og velge alle objekter (Ctrl + A). Plukk Free Transform Tool (Q) og gjøre det mindre med Skift-tasten nede. Det vil være den opprinnelige tilstand. Sett letthet verdien i alle første keyframes til 100. Opprett nytt lag, og dra det mellom BCG Hotell og maskere Dobbeltklikk på Layer Properties knappen på maske Lag et nytt lag som heter handlinger Gi curl objekt på scenen en forekomst navn curl. I handlinger fwdAnim () og backAnim () funksjoner sier for å gå til neste /forrige bilde hver gang du skriv ny ramme. I vårt tilfelle er det 30x per sekund. Legg til følgende kode Legg på knappen lytteren og lage et enkelt klikk funksjon Nå kan vi legge inn SWF i en web side I HTML-side hvor du vil at din. annonsen skal vises, legge inn SWF inn i en div med pageCurl identifikator Legg ved følgende egenskaper til pageCurl objekt i CSS-filen. De definerer dimensjonene på objektet holderen og fikse sin posisjon til høyre på siden Det er det! Sjekk ut resultatet ved å rulle over øvre høyre hjørne på siden for å avsløre din annonse. Jeg håper du finner bruk for dette Quick Tips! Anmeldelser
objekt. Kopier trekanten inn i det nye laget (endre navnet til "BCG" for bakgrunn
) og roter den 180 grader. Sett fyllfarge til mørk grå (# 333333). Lag et duplikat lag av "BCG" lag og endre navnet til "maske"
Trinn 6:. Opprette Curl Animasjon
Trinn 7: Opprette Button
lag. Name it "knapp". Lag noen logo eller design du ønsker og konvertere den til en knapp (F8). Gi den en forekomst navnet "knappen". La curl objektet
Trinn 8:. Maske Button
lag og angi typen til " Maske". Sett knappen lagets typen til «Masked"
Trinn 9:. Handling Layer
. Gå til tiende ramme og lage en keyframe. Gå til handlinger panel (F9) og skriv inn stop ();. . Gjør det samme i første keyframe
Trinn 10: Curl Objekt Lyttere
lag på ramme 1, åpne handlinger panelet (F9). Nå ønsker vi curl objekt til å lytte når musen beveger seg over og ut. Skriv inn følgende kode
curl.addEventListener (MouseEvent.MOUSE_OVER, forover), curl.addEventListener (MouseEvent.MOUSE_OUT, bakover), funksjon fremover (e: MouseEvent):. Void {stage.removeEventListener (Event.ENTER_FRAME, backAnim ); stage.addEventListener (Event.ENTER_FRAME, fwdAnim);} funksjon bakover (e: MouseEvent): void {stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim);}
Trinn 11: Animasjon Funksjoner
funksjon fwdAnim (e: Hendelses):. Void {curl.nextFrame ();} funksjon backAnim (e: Hendelses): void {curl.prevFrame ();}
Trinn 12 Klikk Funksjon
curl.button.addEventListener (MouseEvent.CLICK, clickMe), funksjon clickMe (e: MouseEvent):. void {var myURL: URLRequest = new URLRequest ("http://www.yourwebsite.com/"); navigateToURL (myURL);}
Trinn 13: Inkludering på nettstedet
. < div id = "pageCurl" > < objekt classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" kodebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29 , 0 "width =" 250 "height =" 250 "align =" middle "> < param name = "movie" value = "pageCurl.swf" > < param name = "wmode" value = "transparent" > < param name = "kvalitet" value = "high" > < embed src = "pageCurl.swf" width = "250" wmode = "transparent" height = "250" align = "middle" quality = "high" pluginspage = "http://www.macromedia.com/shockwave/? laste ned /index.cgi P1_Prod_Version = ShockwaveFlash "type =" application /x-shockwave-flash "> < /embed > < /object > < /div >
#pageCurl {margin:. 0; stilling: fast; top: 0; høyre: 0; venstre: auto; width: 250px; høyde: 250px; }
Konklusjon