Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în iulie 2009.
Un aspect web fluid utilizează lățimea (și înălțimea) 100% a browserului, plutitoarele toate elementele conținute în anumite poziții. Acest lucru este în contrast cu aspectul lățimii fixe, unde conținutul rămâne fix, indiferent de mărimea browserului.
Această tehnică este populară în site-urile HTML / CSS, dar acest tut vă va arăta cum să creați un efect asemănător cu aspect fluid în Flash. Fiecare element se va repoziționa cu animație ușoară atunci când browser-ul este redimensionat.
În următorii pași vom crea clase ActionScript 3 care fac fluidul site-ului nostru flash. Toate simbolurile afișate vor păstra alinierea atunci când Flash-ul este redimensionat.
Clasele ActionScript create în acest tutorial pot fi ușor reutilizate în diferite proiecte.
După cum se arată în imaginea de mai jos, toate elementele care plutesc în funcție de dimensiunea browser-ului vor fi denumite "obiecte fluide".
Fiecare obiect fluid va conține parametri de aliniere. Parametrii stochează valoarea x, y, x offset, y offset a obiectului pentru a indica modul în care se aliniază.
Alocarea valorilor x și y la 0 va face obiectul fluid să se alinieze la colțul din stânga sus. Alocarea valorilor x și y la 1 va face ca obiectul fluid să se alinieze la colțul din dreapta jos. Prin urmare, atribuirea valorilor x și y între 0 și 1 va face ca obiectul să plutească la un procentaj din lățimea și înălțimea browserului.
Decalajul X și Y ajustează poziția obiectelor fluide în timp ce se aliniază. Compensarea utilă atunci când poziționați un obiect al cărui punct de aliniere nu este în centru. Decalajul este, de asemenea, util pentru a face margini la aliniere.
Creați un director numit "FluidLayout" în directorul de lucru. Acest director va stoca toate clasele care se referă la clasele de aspect fluid.
Este un obicei bun pentru a pune fișierele de clasă ActionScript în directoarele pe categorii. De exemplu, clasele de aspect fluid vor fi plasate în folderul "FluidLayout" în acest caz.
Rețineți că toate denumirile de directoare, numele de fișiere și codurile sunt sensibile la minuscule.
Deschideți un nou fișier ActionScript numit "FluidObject.as". Salvați acest fișier ActionScript în directorul "FluidLayout".
Clasa FluidObject va stoca parametrii de aliniere ale simbolurilor și va repoziționa simbolurile atunci când browser-ul este redimensionat.
Să începem codarea FluidObject.as acum.
pachet FluidLayout / * Adăugați clase de import aici * / public class FluidObject / * Declarați variabilele de instanță aici * / / * Constructorul clasei * / funcția publică FluidObject (țintă: DisplayObject, paramObj: Object) obiectul monitorizat * / repoziționarea funcției protejate (): void / * Funcția care este apelată atunci când evenimentul RESIZE este declanșat * / funcția protejată onStageResize (e): void
Adăugați următorul cod în care vedeți: / * Adăugați clase de import aici * /
/ * clasa necesară pentru redimensionarea Event * / import flash.events.Event; / * clase necesare pentru MovieClip și DisplayObject * / import flash.display. *;
Există trei variabile de instanță pentru această clasă:
Există, de asemenea, un setter pentru "_param" pentru a permite schimbarea parametrilor de aliniere. Adăugați următorul cod în care vedeți: / * Declare variabile de instanță aici * /
/ * parametrii de aliniere * / protejat var _param: Object; / * obiect țintă care urmează să fie monitorizat * / var_target protejat: DisplayObject; / * instanța de scenă a documentului flash * / var varstă protejată: Stage; / * Setter pentru parametrul de aliniere * / param set de funcții publice (valoare: Object): void _param = value; this.reposition ();
Constructorul va inițializa simbolul monitorizat țintă și va stoca parametrii de aliniere dat.
/ * Constructorul clasei * / funcția publică FluidObject (țintă: DisplayObject, paramObj: Object) / * Atribuirea variabilelor de instanță * / _target = țintă; _param = paramObj; _stage = target.stage; / * adăugați un handler de evenimente pentru redimensionarea etapei * / _stage.addEventListener (Event.RESIZE, onStageResize); / * repoziționați obiectul cu setarea de aliniere aplicată * / this.reposition ();
Funcția de repoziționare este responsabilă pentru calcularea noii poziții x / y a obiectului fluide monitorizat.
/ * Funcția care repoziționează obiectul monitorizat * / repoziționarea funcției protejate (): void / * obține lățimea și înălțimea curentă a documentului flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * actualizarea valorilor x și y ale obiectului monitorizat * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stadiuH * _param.y) + _param.offsetY;
Funcția onStageResize este un handler de evenimente care se numește atunci când browser-ul este redimensionat.
/ * Funcția care se numește atunci când evenimentul RESIZE este declanșat * / funcția protejată onStageResize (e): void / * repoziționați țintă * / this.reposition ();
Clasa finită FluidObject este terminată în acest pas.
pachet FluidLayout / * clasa necesară pentru redimensionarea Event * / import flash.events.Event; / * clase necesare pentru MovieClip și DisplayObject * / import flash.display. *; clasa publică FluidObject / * parametrii de aliniere * / protejat var _param: Object; / * obiect țintă care urmează să fie monitorizat * / var_target protejat: DisplayObject; / * instanța de scenă a documentului flash * / var varstă protejată: Stage; / * Setter pentru parametrul de aliniere * / param set de funcții publice (valoare: Object): void _param = value; this.reposition (); / * Constructorul clasei * / funcția publică FluidObject (țintă: DisplayObject, paramObj: Object) / * Atribuirea variabilelor de instanță * / _target = țintă; _param = paramObj; _stage = target.stage; / * adăugați un handler de evenimente pentru redimensionarea etapei * / _stage.addEventListener (Event.RESIZE, onStageResize); / * repoziționați obiectul cu setarea de aliniere aplicată * / this.reposition (); / * Funcția care repoziționează obiectul monitorizat * / repoziționarea funcției protejate (): void / * obține lățimea și înălțimea curentă a documentului flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * actualizarea valorilor x și y ale obiectului monitorizat * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stadiuH * _param.y) + _param.offsetY; / * Funcția care se numește atunci când evenimentul RESIZE este declanșat * / funcția protejată onStageResize (e): void / * repoziționați țintă * / this.reposition ();
Începeți un nou document Flash cu versiunea ActionScript 3.0 și o numiți "site.fla". Apoi, setați clasa Document ca "Website".
Dacă se afișează o casetă de dialog cu mesajul: "O definiție pentru clasa de documente nu a putut fi găsită în calea de clasă, ..." trebuie doar să faceți clic pe "OK" pentru a o ocoli. Vom crea acea clasă după desenarea simbolurilor grafice.
Imaginea de fundal va fi întunecată în acest tutorial (mi-am pus împreună propria mea imagine asemănătoare spațiului folosind Photoshop). Prin urmare, culoarea de fundal a documentului flash trebuie să fie setată pe negru. Faceți clic pe Modificați> Document pentru a deschide fereastra de dialog Document proprietăți și a schimba culoarea de fundal.
Pe scenă vor apărea 5 simboluri de bliț:
Să facem primul titlu. Scopul acestui tutorial este de a crea simboluri plutitoare în aspectul fluid, mai degrabă decât crearea de componente de site web. Simbolurile vor conține doar un câmp text care indică numai scopul.
Pentru simbolul titlului, există un fundal semi-transparent. Pentru a se potrivi diferitelor lățimi ale browserului, lățimea fundalului trebuie să fie suficient de mare.
După ce ați terminat desenarea simbolului, faceți clic pe Modificare> Conversie la simbol (F8). Faceți clic pe butonul "Avansat" pentru a afișa setările detaliate ale simbolului.
Faceți clic pe "Export pentru ActionScript" pentru a permite ActionScript-ului să acceseze acest simbol. Apoi găsiți câmpul "Clasă" din dialog și setați valoarea la "Titlu" pentru simbolul titlului. Aceasta înseamnă că am atribuit acestei simboluri o nouă clasă numită "Titlu". Putem folosi acest simbol mai târziu în ActionScript.
Nu uitați să denumiți simbolul pentru recunoaștere ușoară înainte de a da clic pe OK. Dacă apare o casetă de dialog cu mesajul "O definiție pentru această clasă nu a putut fi găsită în calea de clasă, ...", dați din nou clic pe "OK" pentru ao ocoli. Deoarece nu vom adăuga niciun comportament simbolului, vom lăsa Flash să creeze o clasă goală pentru noi.
Ștergeți instanța simbolului "titlu" pe scenă, deoarece va fi creată ulterior de ActionScript.
Vom folosi aceeași metodă pentru a desena "fundal", "meniu", "conținut de mijloc" și "subsol". Numele de clasă al acestor simboluri va fi fundal, Meniul, Mijloc și Subsol în consecinţă.
Imaginea de fundal poate fi descărcată din fișierele sursă. Alte simboluri sunt numai câmpurile text.
Creați un fișier ActionScript și denumiți "Website.as"; acest fișier de clasă ar trebui salvat în același director ca fișierul site.fla.
Această clasă trebuie, de asemenea, să aibă același nume cu cel setat în Clasa de documente (consultați pasul 12). De exemplu, clasa Document "Website" se referă la "Website.as" din același director. Această clasă ActionScript va fi încărcată imediat după încărcarea blițului.
Iată scheletul clasei de documente:
pachet import flash.display. *; import FluidLayout. *; site-ul public de clasă extinde MovieClip funcția publică a site-ului ()
pachet import flash.display. *; import FluidLayout. *; site-ul clasa publică extinde MovieClip funcția publică funcția () / * Setați modul de scară a scenei * / stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; / * Adăugați simbolurile în stadiu * / var bg = Background (); addChild (bg); var titlu = nou Titlu (); addChild (titlu); var meniu = nou Meniu (); addChild (meniu); var mediu = nou mediu (); addChild (mijloc); var footer = nou subsol (); addChild (subsol); / * Aplicați alinierea la fundal * / var bgParam = x: 0, y: 0, offsetX: 0, offsetY: 0 nou FluidObject (bg, bgParam); / * Aplicați alinierea la titlu * / var titluParam = x: 0, y: 0, offsetX: 0, offsetY: 0 FluidObject nou (titlu, titluParam); / * Aplicați alinierea la meniu * / var meniuParam = x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20 FluidObject nou (meniu, meniuParam); / * Aplicați alinierea la conținut * / var middleParam = x: 0.5, y: 0.5, offsetX: -middle.width / 2, offsetY: -middle.height / 2 nou FluidObject (middle, middleParam); / * Aplicați alinierea la subsol * / var footerParam = x: 1, y: 1, offsetX: -footer.width - 10, offsetY: -footer.height -10 nou FluidObject (subsol, footerParam);
Deschideți site.fla în Flash și verificați din nou înainte de a trimite textul filmului.
Nu este nevoie să plasați simbolurile pe scenă, deoarece Website.as va crea instanțe de simboluri din bibliotecă utilizând numele lor de clasă. Numele de clase de legare ale simbolurilor trebuie să fie corecte pentru ca scriptul să le folosească. Numele clasei de legare poate fi verificat în panoul bibliotecii.
Faceți clic pe Control> Text Movie sau Ctrl (Cmd) + Enter pentru a testa site-ul flash.
Încercați să redimensionați fereastra și verificați dacă toate obiectele sunt repoziționate la alinierea corectă.
Fiecare FluidObject trebuie acum să aibă valori specifice ale proprietăților x, y, offsetX și offsetY. O nouă clasă va fi creată în pașii următori pentru a simplifica viitorul cod atunci când adăugați noi obiecte fluide.
Deschideți un nou fișier ActionScript numit "SimpleFluidObject.as". Salvați acest fișier în directorul "FluidLayout" deoarece acesta face parte din pachetul FluidLayout.
Acest fișier extinde clasa FluidObject astfel încât să ofere o aliniere simplă folosind nume precum TOP, MIDDLE, BOTTOM_RIGHT în loc să precizeze proprietățile x, y.
Iată scheletul clasei:
pachet FluidLayout import flash.events.Event; import flash.display. *; clasa publică SimpleFluidObject extinde FluidObject funcția publică SimpleFluidObject (țintă: DisplayObject, paramObj: Object)
pachet FluidLayout import flash.events.Event; import flash.display. *; clasa publica SimpleFluidObject extinde FluidObject funcția publică SimpleFluidObject (țintă: DisplayObject, paramObj: Object) / * Spuneți clasei părinților să init constructorul * / super (target, paramObj); / * atribuiți alinierea și valoarea marjei de către parametrii constructorului * / var alignment = paramObj.alignment; var marginea = paramObj.margin; / * Presetarea aliniamentului și valoarea marjei dacă este necesar * / if (alignment == undefined) alignment = "MIDDLE"; dacă (marja == undefined) margin = 0; / * converti alinierea (de ex. "TOP", "BOTTOM_RIGHT") la x, y, offsetX și offsetY * / var params = Object nou (); comutator (aliniere) caz "TOP_LEFT": paramuri = x: 0, y: 0, offsetX: margine, offsetY: margine; pauză; cazul "TOP": paramuri = x: .5, y: 0, offsetX: -target.width / 2, offsetY: margin; pauză; caz "TOP_RIGHT": paramuri = x: 1, y: 0, offsetX: -target.width - margine, offsetY: margine; pauză; caz "LEFT": paramuri = x: 0, y: .5, offsetX: margine, offsetY: -target.height / 2; pauză; caz "MIDDLE": paramuri = x: .5, y: .5, offsetX: -target.width / 2 - margine / 2, offsetY: -target.height / 2 - margin / 2; pauză; cazul "DREAPTA": paramuri = x: 1, y: .5, offsetX: -target.width - margine, offsetY: -target.height / 2; pauză; caz "BOTTOM_LEFT": paramuri = x: 0, y: 1, offsetX: margine, offsetY: -target.height-margin; pauză; cazul "BOTTOM": paramuri = x: .5, y: 1, offsetX: -target.width / 2, offsetY: -target.height-margin; pauză; cazul "BOTTOM_RIGHT": paramuri = x: 1, y: 1, offsetX: -target.width - margine, offsetY: -target.height-margin; pauză; _param = params; / * repoziționați obiectul fluid în poziția corectă * / this.reposition ();
Consultați fișierul Website.as și încercați să utilizați noua metodă de aliniere pentru a alinia obiectele fluide.
Vechea metodă de a aplica alinierea titlului:
/ * Aplicați alinierea la titlu * / var titluParam = x: 0, y: 0, offsetX: 0, offsetY: 0 FluidObject nou (titlu, titluParam);
Noua metodă de a aplica alinierea titlului:
var titleParam = aliniere: "TOP_LEFT", margine: 0 nou SimpleFluidObject (titlu, titluParam);
Aliniere disponibile:
Acum, alinierea fluidului funcționează pe "Test Movie" în Flash IDE, dar există una cheie punct pentru a face acest lucru pe browser.
Deschideți site-ul web.fla. Accesați Fișier> Setări publicare și asigurați-vă că este activat codul HTML. Faceți clic pe fila HTML și modificați dimensiunea la "Procent". Asigurați-vă că procentul este setat la 100 la lățime și înălțime.
Faceți clic pe "Publicați" pentru a publica site-ul web ca fișiere "site.swf" și "site.html".
Acum, deschideți fișierul "site.html" cu editorul dvs. de text preferat și adăugați următorul cod în antet. Adăugarea codului imediat după tag-ul ar fi o alegere bună.
Aceste stiluri CSS elimină decalajul dintre partea din stânga sus a fișierului HTML și fișierul SWF.
Un efect de relaxare poate fi aplicat atunci când browser-ul este redimensionat astfel încât obiectele să se miște în poziția corectă cu un efect de ușurare.
Deschideți "FluidObject.as". Adăugați următoarele linii după "import flash.display. *;". Aceste linii vor importa clasa de animație tweening pentru a da abilității codului de a ușura obiectele.
/ * clase necesare pentru Easing Animation * / import fl.transitions.Tween; import fl.transitions.easing. *;
Apoi găsiți următoarele rânduri în fișierul "FluidObject.as". Ele se află în cadrul funcției de "repoziționare".
_target.x = stageW * _param.x + _param.offsetX; _target.y = stageH * _param.y + _param.offsetY;
Înlocuiți-le cu următorul cod:
/ * setați durata animației de relaxare (secunde) * / var duration = 0.5; / * declara noua valoare X / Y * / var newX = _target.x; var newY = _target.y; / * calcula noua valoare X în funcție de stadiul Lățime * / dacă (_param.x! = undefined) newX = (stageW * _param.x) + _param.offsetX; / * calculează noua valoare Y bazată pe stadiul Înălțime * / dacă (_param.y! = undefined) newY = (stageH * _param.y) + _param.offsetY; / * Spuneți blițului de la obiectul țintă la noua poziție X / Y * / nou Tween (_target, "x", Strong.easeOut, _target.x, newX, duration, true); noul Tween (_target, "y", Strong.easeOut, _target.y, newY, duration, true);
Testați filmul, obiectele vor fi relaxate atunci când browserul este redimensionat
Tocmai am creat două clase care se ocupă de obiectele fluide plutitoare. De asemenea, am creat un exemplu pentru a alinia diferite obiecte pe scenă folosind clasele. Acest exemplu este doar un exemplu; puteți utiliza imaginația dvs. pentru a juca cu aliniamentele. De exemplu, un simbol poate fi interactiv și alinierea acestuia se poate schimba de sus în jos când utilizatorul face clic pe el.
Structura fișierului ar trebui să fie aceeași ca în cele de mai jos, după ce ați terminat acest tutorial. Mai exact, FluidObject.as și SimpleFluidObject.as ar trebui să fie în directorul "FluidLayout" pentru a lucra.
Bucurați-vă de aspectul fluid!
Accentsconagua