Sfat rapid dezvăluiți anunțul dvs. cu o curbare a paginii

În acest sfat rapid vă voi demonstra cum să creați o animație foarte curată pentru o coloană de anunțuri pe site-ul dvs..


Pasul 1: Configurarea scenei

Deschideți un nou fișier Flash ActionScript 3.0 și modificați dimensiunile din panoul Proprietăți la 250 x 250 pixeli. Setați rata cadrelor la 30fps.


Pasul 2: Desen dreptunghiular

Creați un dreptunghi (240px la 240px) și plasați-l la coordonate (10, 0). Alegeți colțul din dreapta sus și trageți-l în jos până când vedeți triunghiul.


Pasul 3: Umpleți dreptunghi

Mergeți în paleta de culori și setați gradientul exterior oprește la gri închis (# A6A6A6). Oprirea gradului de mijloc este mai ușoară (#EEEEEE). Alegeți instrumentul pentru vopseaua de vopsea și trageți deasupra triunghiului cu ajutorul tastei Shift ținută în jos.


Pasul 4: Conversia în clipul video

Selectați triunghiul și apăsați F8. Denumiți acest nou film Clip "curl" și schimbați punctul de înregistrare în colțul din dreapta sus.


Pasul 5: Pregătirea măștii și a fundalului

Editați răsuci obiect. Copiați triunghiul în noul strat (redenumiți-l la "bcg" pentru fundal) și rotiți-l cu 180 de grade. Setați culoarea de umplere la gri închis (# 333333). Creați un strat duplicat al stratului "bcg" și redenumiți-l pentru a "masca".


Pasul 6: Crearea animației Curl

Mergeți la cel de-al zecelea cadru și creați cadre cheie în toate straturile. Faceți clic dreapta pe primele cadre cheie și selectați Create Motion Tween. Mergeți la primul cadru și selectați toate obiectele (Ctrl + A). Alegeți instrumentul Transformare liberă (Q) și micșorați-l cu tasta Shift. Va fi starea inițială. Setați valoarea de ușurință în toate primele cadre cheie până la 100.


Pasul 7: Crearea butonului

Creați un strat nou și trageți-l între BCG și masca straturi. Denumiți "butonul". Creați orice logo sau grafică dorită și convertiți-o într-un buton (F8). Dați-i un nume de exemplu "buton". Lăsați obiectul curl.


Pasul 8: Mascarea butonului

Faceți dublu clic pe butonul Proprietăți straturi din masca layer și setați tipul la "Mască". Setați tipul stratului de butoane la "Mascat".


Pasul 9: Strat de acțiune

Creați un nou layer numit acţiuni. Mergeți la cel de-al zecelea cadru și creați un cadru cheie. Accesați panoul de acțiuni (F9) și introduceți textul Stop();. Faceți același lucru în primul keyframe.


Pasul 10: ascultătorii obiectului curl

Dați obiect curl pe scenă un nume de instanță al răsuci. În acţiuni stratul de pe cadrul 1, deschideți panoul de acțiuni (F9). Acum vrem ca obiectul curl să se asculte atunci când mouse-ul se mișcă deasupra și în afară. Introduceți codul următor.

curl.addEventListener (MouseEvent.MOUSE_OVER, înainte); curl.addEventListener (MouseEvent.MOUSE_OUT, înapoi); funcția înainte (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, backAnim); stage.addEventListener (Event.ENTER_FRAME, fwdAnim);  funcția înapoi (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim); 

Pasul 11: Funcțiile de animație

fwdAnim () și backAnim () funcțiile spun că pentru a merge la cadrul următor / anterior de fiecare dată când introduceți un nou cadru. În cazul nostru este de 30 de ori pe secundă. Adăugați următorul cod.

funcția fwdAnim (e: Event): void curl.nextFrame ();  funcția backAnim (e: Event): void curl.prevFrame (); 

Pasul 12: Faceți clic pe Funcție

Adăugați butonul ascultător și creați o funcție de clic simplu.

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

Acum putem incorpora SWF-ul intr-o pagina web.


Pasul 13: Încorporarea pe site

În pagina HTML în care doriți să apară anunțul dvs., încorporați SWF într-o div cu identificatorul paginii.

 

Atașați următoarele proprietăți la obiectul pageCurl din fișierul CSS. Ele definesc dimensiunile suportului pentru obiecte și își fixează poziția în partea dreaptă sus a paginii.

 #pageCurl margine: 0; poziție: fixă; top: 0; dreapta: 0; stânga: auto; lățime: 250px; înălțime: 250px; 

Concluzie

Asta e! Verificați rezultatul rulând în colțul din dreapta sus al paginii pentru a vă dezvălui anunțul. Sper că găsiți o utilizare pentru acest sfat rapid!

Cod