Î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..
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.
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.
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.
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.
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".
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.
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.
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".
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.
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);
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 ();
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.
Î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;
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!