Share
I det här snabba tipset kommer jag att visa hur man skapar en mycket enkel curl-animation för en hörnannons på din webbplats.
Öppna en ny ActionScript 3.0 Flash-fil och ändra dess dimensioner på Egenskaper-panelen till 250 x 250px. Ställ in bildfrekvensen till 30fps.
Skapa en rektangel (240px vid 240px) och placera den på koordinater (10, 0). Välj det övre högra hörnet och dra det hela tills du ser triangeln.
Gå till färgpalett och sätt den yttre gradienten till mörkgrå (# A6A6A6). Mellangradientstoppet är lättare (#EEEEEE). Välj paint bucket-verktyget och dra över triangeln med shift-knappen nedtryckt.
Välj triangeln och tryck på F8. Namn den här nya filmklippet "curl" och ändra registreringspunkten till det övre högra hörnet.
Redigera ringla objekt. Kopiera triangeln till det nya lagret (byt namn på det till "bcg" för bakgrund) och rotera den 180 grader. Ställ fyllfärgen till mörkgrå (# 333333). Skapa ett dubbletter av "bcg" -laget och byt namn på det till "mask".
Gå till den tionde ramen och skapa nyckelramar i alla lager. Högerklicka till första keyframes och välj Create Motion Tween. Gå till den första ramen och välj alla objekt (Ctrl + A). Välj det fria omvandlingsverktyget (Q) och gör det mindre med Shift-knappen nedåt. Det blir initialtillståndet. Ange larmvärdet i alla första nyckelramar till 100.
Skapa nytt lager och dra det mellan bcg och mask skikten. Namn den "knappen". Skapa någon logotyp eller grafik du vill ha och konvertera den till en knapp (F8). Ge det ett förekomstnamn "knapp". Lämna krökobjektet.
Dubbelklicka på knappen Layer Properties of the mask lager och sätt typen till "Mask". Ställ in knappslagets typ på "Masked".
Skapa ett nytt lager som heter åtgärder. Gå till den tionde ramen och skapa en keyframe. Gå till åtgärdspanelen (F9) och skriv in sluta();. Gör detsamma i den första keyframen.
Ge krökobjektet på scenen ett förekomstnamn på ringla. I åtgärder lager på ram 1, öppna åtgärdspanelen (F9). Nu vill vi att curl-objektet lyssnar när musen rör sig över och ut. Skriv in följande kod.
curl.addEventListener (MouseEvent.MOUSE_OVER, framåt); curl.addEventListener (MouseEvent.MOUSE_OUT, bakåt); funktionen framåt (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, backAnim); stage.addEventListener (Event.ENTER_FRAME, fwdAnim); funktionen bakåt (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim);
De fwdAnim () och backAnim () Funktionerna säger att du går till nästa / föregående ram varje gång du skriver in en ny ram. I vårt fall är det 30x per sekund. Lägg till följande kod.
funktion fwdAnim (e: Event): void curl.nextFrame (); funktionen backAnim (e: Event): void curl.prevFrame ();
Lägg till knappen lyssnaren och skapa en enkel klick funktion.
Accentsconagua
curl.button.addEventListener (MouseEvent.CLICK, clickMe); funktion clickMe (e: MouseEvent): void var myURL: URLRequest = ny URLRequest ("http://www.yourwebsite.com/"); navigateToURL (myURL); Nu kan vi bädda in SWF-en till en webbsida.
På den HTML-sida där du vill att din annons ska visas, bädda in SWF-en till en div med sidanCurl-identifieraren.
Fäst följande egenskaper på sidanCurl-objektet i din CSS-fil. De definierar dina objektinnehavares dimensioner och fixar positionen högst upp till höger på sidan.
#pageCurl margin: 0; position: fast; topp: 0; höger: 0; vänster: auto; bredd: 250px; höjd: 250px;
Det är allt! Kolla in resultatet genom att rulla längst upp till höger på sidan för att avslöja din annonsering. Jag hoppas att du hittar användning för denna snabba tips!
