Reteta de creatie - cauciuc - roller

sarcină: aflați cum să creați filme flash care ocupă întreaga fereastră a browserului.

Rețeta arată modul de organizare a modificării locației și dimensiunii clipurilor, în funcție de mărimea ferestrei player-ului flash (sau plug-in-ului). Ține-o simplu. )







De mult timp, nimeni nu va surprinde cu site-ul "cauciuc" html - site-ul care conține modificări pentru umplerea tuturor ferestrelor unui browser. În ciuda faptului că a face același lucru cu blițul este destul de simplă, site-urile flash din cauciuc nu sunt atât de frecvente.

În plus față de nevoile de proiectare, cauciucul poate fi necesară într-un caz - dacă nu știți în avans, care poate fi vizibilă în pagina film, sau bănuiți că poate fi necesar pentru a schimba dimensiunea video în pagină, fără a fi nevoie de sprijin suplimentar Flash Developer. Înapoi la început

Principalul lucru este să vă asigurați că setul de acțiuni pentru poziționarea obiectelor se efectuează cu fiecare schimbare a dimensiunilor ferestrei.

Mecanism general. Informațiile despre dimensiunile și setările scenei filmului sunt preluate de clasa Stage încorporată. Această clasă are câteva proprietăți statice pe care le vom avea nevoie:
  • Stage.width - lățimea ferestrei filmului în pagina HTML sau în flash player.
  • Stage.height - înălțimea ferestrei filmului în pagina HTML sau în flash player.
  • Stage.scaleMode - modul de scalare a scenei. Valorile posibile pentru această proprietate și o descriere detaliată a acțiunii lor se găsesc în articolul Help. Voi spune doar că avem nevoie de modul Stage.scaleMode = "noScale". Când Flash nu încearcă să mărească conținutul clipului sub dimensiunile ferestrei.
  • Stage.align - alinierea clipului cinematic în fereastra playerului sau a browserului. Proprietatea indică alinierea de-a lungul liniilor verticale și orizontale. În exemplele pentru acest material, voi folosi alinierea în colțul din stânga sus al ferestrei, de unde este Stage.align = "TL" (T - sus, L - stânga). Cred că acest lucru este foarte convenabil. Dar, în principiu, puteți folosi orice alt fel de aliniere care este convenabilă pentru dvs., nu este esențială.
Clasa Stage difuzează mesajele "onResize" atunci când fereastra playerului sau a browser-ului este redimensionată. Acum este important să înțelegem doar un singur lucru: dacă dimensiunile ferestrei se schimbă, metoda onResize va funcționa automat în toate obiectele special pregătite pentru aceasta. Pentru a pregăti un obiect pentru a răspunde la modificările dimensiunii ferestrei, trebuie să efectuați două acțiuni:





  • Creați o metodă onResize în obiect
  • Asociați acest obiect cu clasa Stage
Atenție vă rog! Mecanismul evenimentului onResize va funcționa numai dacă Stage.scaleMode = "noScale" este activat.

Primul lucru pe care îl puteți face este: Acum trebuie să spuneți clasei Stage că obiect_reactiv ar trebui să primească notificări despre modificările dimensiunii ferestrei. Aceasta se face astfel: Traducând literal această linie a scriptului: "adăugați object_reacting la lista ascultătorilor din clasa Stage". Merită menționat faptul că "ascultătorul" este, în acest caz, termenul. Ascultătorii sunt numiți obiecte care sunt abonate pentru a primi notificări despre unele evenimente.

Deci, rețeta pentru pregătirea unui obiect pentru a răspunde la modificările dimensiunii ferestrei: În principiu, nu este necesar să creați un obiect nou pentru plasarea metodei onResize pe acesta. De asemenea, puteți utiliza oricare dintre obiectele existente de orice tip, de exemplu _root: Acest lucru este mai convenabil și mai logic, dacă există doar una sau două acțiuni.

Încercați să modificați dimensiunea ferestrei browserului și asigurați-vă că titlul rămâne întotdeauna în colțul din dreapta jos al ferestrei blițului.

Recepție, facilitarea vieții. Adesea, atunci când proiectați o rolă cu dimensiuni diferite, este necesar să poziționați multe obiecte în funcție de dimensiunea ferestrei. Și, adesea, este necesară o schimbare proporțională a dimensiunilor / poziției clemelor. Acest lucru se poate face așa cum se arată în Exemplul 1. Dar vă puteți gândi la ceva mai interesant. )

De exemplu, să creăm următoarele obiecte pe scenă:

Acum vom forța toate aceste obiecte să fie poziționate proporțional cu dimensiunea ferestrei, presupunând o dimensiune "normală" de 400x300 (până acum vom schimba poziția numai).
Rezultatul 2: [vezi].

Încercați să întindeți și să comprimați fereastra browserului și să vedeți cum se mișcă obiectele în acest fel. Ne amintim raportul dintre coordonatele fiecărui obiect și dimensiunea normală a scenei. Când se modifică dimensiunile ferestrei, este suficient să se înmulțească dimensiunile corespunzătoare cu valorile salvate ale proporțiilor pentru a obține valorile dorite ale coordonatelor.

Acum adăugați redimensionarea. Lăsați clema cu cercul întotdeauna să fie scalată proporțional cu dimensiunile ferestrei, să se întindă pătratul numai orizontal și triunghiul să se întindă numai vertical. Pentru a adăuga o modificare a dimensiunilor, trebuie să vă amintiți proporțiile de înălțime și lățime în același mod în care am memorat proporțiile coordonatelor. Părțile adăugate sunt marcate cu caractere aldine.
Rezultat 3: [vezi].

Încercați să redimensionați fereastra browserului și să vedeți modul în care obiectele sunt mutate și scalate. Rețineți că literele din câmpul de text din dreapta nu sunt deformate atunci când se modifică proprietatea _width a câmpului. În schimb, câmpul text își reconstruiește liniile în funcție de lățimea specificată.

Atingerea finală a funcției miracol peResize: adăugați câteva linii pentru a afișa dimensiunea curentă a scenei flash. Acum vom ști întotdeauna care este dimensiunea curentă a scenei flash în pixeli.







Trimiteți-le prietenilor: