Share
In deze snelle tip zal ik laten zien hoe je een zeer eenvoudige krulanimatie kunt maken voor een hoekadvertentie op je website.
Open een nieuw ActionScript 3.0-Flash-bestand en wijzig de afmetingen in het deelvenster Eigenschappen in 250 x 250 px. Stel de framesnelheid in op 30 fps.
Maak een rechthoek (240 px bij 240 px) en plaats deze op coördinaten (10, 0). Kies de rechterbovenhoek en sleep alles naar beneden tot je een driehoek ziet.
Ga naar het kleurenpalet en stel de buitenste verloopstops in op donkergrijs (# A6A6A6). De middelste gradiëntstop is lichter (#EEEEEE). Kies het verfemmergereedschap en sleep over de driehoek met de shift-toets ingedrukt.
Selecteer de driehoek en druk op F8. Noem deze nieuwe filmclip "krullen" en wijzig het registratiepunt in de rechterbovenhoek.
Bewerk de Krul voorwerp. Kopieer het driehoekje naar de nieuwe laag (hernoem het naar "bcg" voor achtergrond) en draai hem 180 graden. Stel de vulkleur in op donkergrijs (# 333333). Maak een dubbele laag van de "bcg" -laag en hernoem die in "maskeren".
Ga naar het tiende frame en maak keyframes in alle lagen. Klik met de rechtermuisknop op de eerste keyframes en selecteer Motion Tween maken. Ga naar het eerste frame en selecteer alle objecten (Ctrl + A). Kies het gereedschap Vrije transformatie (Q) en maak het kleiner met de Shift-toets omlaag. Het zal de initiële toestand zijn. Stel de gebruikswaarde in alle eerste hoofdframes in op 100.
Maak een nieuwe laag en sleep het tussen de BCG en masker lagen. Noem het "knop". Creëer elk logo of elke gewenste grafische afbeelding en converteer deze naar een knop (F8). Geef het een instantienaam "knop". Verlaat het krul-object.
Dubbelklik op de Layer Properties-knop van de masker laag en stel het type in op "Maskeren". Stel het type van de knooplaag in op "Gemaskeerd".
Maak een nieuwe laag met de naam acties. Ga naar het tiende frame en maak een keyframe. Ga naar het deelvenster Acties (F9) en typ in hou op();. Doe hetzelfde in het eerste keyframe.
Geef het krulobject op het werkvlak een instantienaam van Krul. In de acties laag op frame 1, open het actiescherm (F9). Nu willen we dat het krulobject luistert wanneer de muis heen en weer beweegt. Typ de volgende code in.
curl.addEventListener (MouseEvent.MOUSE_OVER, forward); curl.addEventListener (MouseEvent.MOUSE_OUT, backward); function forward (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, backAnim); stage.addEventListener (Event.ENTER_FRAME, fwdAnim); function backward (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim);
De fwdAnim () en backAnim () functies zegt om naar het volgende / vorige frame te gaan elke keer dat je een nieuw frame invoert. In ons geval is het 30x per seconde. Voeg de volgende code toe.
function fwdAnim (e: Event): void curl.nextFrame (); function backAnim (e: Event): void curl.prevFrame ();
Voeg de knoplistener toe en maak een eenvoudige klikfunctie.
Accentsconagua
curl.button.addEventListener (MouseEvent.CLICK, clickMe); function clickMe (e: MouseEvent): void var myURL: URLRequest = new URLRequest ("http://www.yourwebsite.com/"); navigateToURL (myURL); Nu kunnen we de SWF insluiten in een webpagina.
Plaats de SWF in de HTML-pagina waar u uw advertentie wilt laten verschijnen in een div met de curl-ID van de pagina.
Voeg de volgende eigenschappen toe aan de paginaCurl-object in uw CSS-bestand. Ze bepalen de afmetingen van uw objecthouder en bepalen de positie rechtsboven op de pagina.
#pageCurl margin: 0; positie: vast; boven: 0; rechts: 0; links: auto; breedte: 250 px; hoogte: 250 px;
Dat is het! Bekijk het resultaat door de rechterbovenhoek van de pagina om te draaien om uw advertentie te tonen. Ik hoop dat je gebruik kunt maken van deze Quick Tip!
