În acest articol, vom învăța cum să realizăm un aspect simplu de cauciuc pentru un site flash. Prin "cauciuc" înțelegem un aspect al site-ului care, atunci când este redimensionat, ajustează automat la o nouă dimensiune.
Toate acestea sunt necesare pentru ca site-ul nostru flash să se adapteze automat la orice dimensiune a monitorului. În final, ar trebui să obținem ceva de genul:
Se presupune că sunteți suficient de familiarizat cu programul Adobe Flash și știți cum să desenați elemente grafice, astfel încât în această parte să nu ne concentrăm asupra lucrurilor mici și să oferim o descriere destul de generală.
Creați grafică
Creați un nou document .fla cu dimensiunile de 550 x 400. Utilizați instrumentul dreptunghi pentru a umple fundalul cu un gradient alb-negru, ca în figura de mai jos. Apăsați F8 și convertiți-l în Movie Clip cu punctul de înregistrare din centru. Atribuiți numele instanței cu numele de bg_mc.
Acum, creați un nou strat de mai sus și din nou cu instrumentul dreptunghi trageți antetul. Dimensiunile pe care le-am setat 550 X 124, îl umplem cu un gradient albastru și îl convertim în Clip video apăsând F8 pentru aceasta. Setați punctul de înregistrare în centru. În inspectorul Proprietăți, setați numele de instanță la acesta ca header_mc. Toate ca în imaginea de mai jos.
Creați un alt strat, deasupra. Pe acest nou strat, utilizați instrumentul Text pentru a scrie cuvântul Header într-o culoare galbenă frumoasă și adăugați o umbră. Convertiți inscripția noastră la filmul Clip cu înregistrarea în centru (înregistrarea în centru este importantă pentru calculele noastre viitoare). Setați numele instanței ca headertxt_mc.
Ei bine, aici. Acum rămâne să creăm două blocuri de text. Pe un nou strat, utilizați instrumentul dreptunghi pentru a desena două blocuri dreptunghiulare cu marginile rotunjite, o rază de rotunjire de 10 px. Completați-le cu negru, setați transparența la 20%. În partea de sus a blocurilor noastre, utilizați instrumentul Text alb pentru a scrie titlurile Bloc 1 și Bloc 2 și completați-le cu text gol. Conversia blocurilor noastre separat în film clip cu înregistrarea în centru. Stabiliți-le numele de instanță ca text_mc1 și respectiv text_mc2.
Deci, cu partea grafică, am terminat, iar acum este timpul să începem cea mai interesantă parte - scrierea codului pe AS3.
Creați un strat nou, mai presus de toate, numiți acțiunile, selectați primul cadru și deschideți panoul Acțiuni. Primul lucru pe care trebuie să-l facem este să împiedicăm playerul flash să-și scalneze automat clipul. De asemenea, din motive de simplitate a calculelor, trebuie să fim siguri că alinierea este stabilită în colțul din stânga sus. Pentru aceasta, în panoul Acțiuni, scrieți următorul cod:
Următoarea linie va afișa ascultătorul addEventListener () pentru evenimentul Event.RESIZE.
Apoi, scrieți o funcție care se numește când se modifică dimensiunea ferestrei.
Acum, în interiorul acestei funcții, trebuie să înregistrăm locația fiecărei părți a aspectului nostru. Să începem gradientul de fundal. Acesta trebuie să fie scalat împreună cu fereastra, atât în lățime cât și înălțime.
După cum probabil vă amintiți, am setat punctul de înregistrare în centru și, prin urmare, coordonatele x și y ale fundalului nostru sunt contorizate din centru. Am setat coordonata x ca lățimea totală a clipului nostru, împărțită la jumătate. Același lucru se aplică și coordonatei y. Înălțime și lățime, pur și simplu ne echivalăm cu înălțimea și lățimea clipului nostru. Acum, hai să mergem la heder. Ar trebui să se întindă în lățime, dar să păstreze o înălțime constantă.
Aici, setăm coordonatele x ca jumătate din lățimea clipului, ca în cazul anterior, iar coordonata y este fixată la 62 de pixeli. Am comparat lățimea antetului cu lățimea clipului. Înălțimea nu a început să se înregistreze deloc, deoarece nu ar trebui să se schimbe.
Să ne luăm inscripția noastră frumoasă. Ar trebui să fie fix în centrul antetului nostru și să nu reacționăm în vreun fel la schimbarea dimensiunii ferestrei. Prin urmare, coordonata x va fi scrisă ca jumătate din lățime, iar pentru y specificăm o poziție fixă în 62 de poze.
Acum era timpul să trecem la partea cea mai complicată din codul nostru - blocurile de testare. Coordonata x a blocului din stânga, vom calcula diferența 1/3 din lățimea clemei și 73 de pixeli. Figura 73 se obține prin scăderea coordonatele inițiale x (egal cu 110 pixeli.) De 1/3 din lățimea inițială a clemei. Y-coordonate se calculează prin adăugarea de 65 până la 1/2 din înălțimea clemei. Numărul 65 este diferența dintre original coordonate y și jumătate înălțimea clipului original. In blocul x drept coordonate se calculează ca suma 2/3 și lățimea clemei 10. Figura 10 reprezintă diferența dintre coordonatele x originale și 2/3 din lățimea inițială a clemei. Y-coordonate se calculează, la fel ca și în cazul cu blocul din stânga.
Ei bine, aici. Codul nostru este gata pentru asta. Puteți verifica clipul dvs. apăsând pe Ctrl + Enter.
Trimiteți-le prietenilor: