Sprite(ly) zëvendëson Flash
<p style="text-align: center;">
</p>
Ok, e di që titulli është pak i guximshëm. Më duhet ta pranoj që teknika që do ju tregoj nuk zëvendëson Flash, por ju siguroj që është aq interesante sa për t’ju ngritur vetullën.</p>
Në 2 guida të mëparshme ju kam treguar si të përdorni Sprites në CSS dhe si të bëni Sprites të animuara me JQuery. Sprites janë vërtetë një teknikë e mirë dhe ti kombinosh me JQuery bëhen edhe interaktive. Po sikur ti japim Sprite-eve një dozë steroidesh e të krijojmë animacione komplekse, me disa frames dhe shtresa? Lexoni më poshtë!</p>
Po ju prezantoj Spritely, një plugin për JQuery që shërben për të krijuar disa animacione shumë interesante me Sprites. Për momentin është akoma e kufizuar në mundësitë që ofron, por më besoni, nëse e lini fantazinë të lirë, me Spritely mund të arrihen rezultate fantastike. Më e bukura është se instalohet dhe vihet ne përdorim për pak minuta. Pa humbur kohë po kalojmë në shpjegimin e teknikës.</p>
Nëse nuk e keni parë akoma Demon e kësaj guide, atëherë bëjeni tani. Ok, si ju duk? S’mund të jem animuesi më i mirë në Botë, por rezultati është goxha impresionues duke llogaritur që është vënë në jetë vetëm me 3 imazhe dhe pak HTML, CSS dhe JavaScript. Kur them pak, e kam seriozisht. Vetëm disa rrjeshta që do i kuptoni dhe fiksoni me leximin e parë.</p>
Gjëja e parë që do të bejmë është të shkarkojmë JQuery dhe Spritely. I vendosim të 2 skriptet në një folder “js” (për organizim të mirë) dhe i thërrasim ne <head> të dokumentit.</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.spritely.js"></script>
Platforma për të bërë animacionin tonë është gati. Do ta nisim me sfondin ku “ecja” ndodh, që është një imazh i thjeshtë i bërë në Photoshop ku tregohet një rrugë dhe 2 palma. Imazhi është më poshtë:</p>
<p class="wp-caption-text">Rruga me Palma</p>
Imazhi është perfekt për tu përsëritur horizontalisht në pafundësi dhe largësinë e palmave e kam llogaritur që (pak a shumë) distanca midis të dyjave të jetë e njëjtë sa dyfishi i distancës nga njëra palmë në skajin më të afërt. Llogaritja vlen edhe për vijat e rrugës, si elementi i dytë në imazh që do të spostohet për të dhënë sensin e lëvizjes. Syri i njeriut gënjehet lehtë
.</p>
Kodi HTML dhe CSS për ta shfaqur si duhet imazhin është tërësisht minimal. Shikoni më poshtë:</p>
<div id="fusha">
</div>
#fusha{
position:relative;
width:705px;
height:400px;
background:url(../images/rruga.png) repeat-x;
}
Gjithçka që na duhet është të krijojmë një element <div> bosh, të cilit i vendosim përmasat me CSS sa përmasat e vetë imazhit dhe si background do vendosim kë? Imazhin pra
. Sigurohemi që përsëritja është repeat-x, përndryshe efekti nuk funksionon.</p>
Mbetet tani ta animojmë me JavaScript. Kjo është pjesa më interesante dhe për fat të mirë edhe më e lehta. Spritely ofron një metodë që quhet pan() dhe është e dedikuar për ta zhvendosur horizontalisht imazhin. Pas elementit <div> që krijuam shtojmë kodin më poshtë:</p>
$(document).ready(function() {
$('#fusha').pan({fps: 30, speed: 2, dir: 'left'});
});
Ju duket e thjeshtë?! Sigurisht që është! Më thjeshtë dhe bukur se kaq ska ku të shkojë. Mos të shpërqëndrohemi dhe më lini t’ju shpjegoj pak çfarë parametrash merr funksioni. Parametri fps përcakton numrin e kuadrove për sekond; sa më e lartë aq më i “rrjedhshëm” animacioni, por më tepër ngarkesë për faqen. Parametri speed përcakton shpejtësinë e animacionit; sa më e lartë, aq më i shpejtë. Ndërsa parametri dir merr vlerat “left” (spostim majtas) ose “right” (spostim djathtas). Duke eksperimentuar me fps dhe speed mund ti jepni animacionit tuaj shpejtësinë që po kërkoni dhe këtë do ja u tregoj pak më poshtë.</p>
Kalojmë tek elementi i dytë që duam të animojmë: Retë. Ajo që doja të arrija me retë ishtë një levizje më e ngadaltë se rruga, sepse retë spostohen ngadalë, apo jo?! Më poshtë është imazhi që kam përdorur:</p>
<p class="wp-caption-text">Imazhi i Reve</p>
Brenda elementit <div id=”fusha”> do krijojmë një element <div> tjetër që mban retë. Ideja është egzaktësisht e njëjtë me Rrugën, kështu që mos prisni ndonjë gjë të re përveç pozicionimit absolut.</p>
<div id="fusha">
<div id="rete"></div><!-- shtuam kete div -->
</div>
#rete{
position:absolute;
top:0;
left:0;
width:705px;
height:103px;
background:url(../images/rete.png) repeat-x;
}
Na mbetet të shtojmë një tjetër funksion pan() në JavaScript-in që ju tregova pak më sipër. Këtë rradhë do e ulim parametrin fps në 15 dhe parametrin speed në 1, sepse duam që retë të lëvizin më ngadalë. Një pikë plus për Spritely, sepse na lejon të shtojmë shtresa [virtualisht] pa fund dhe ti animojmë me shpejtësi të ndryshme. Kodi JavaScript që kemi deri tani është:</p>
$(document).ready(function() {
$('#fusha').pan({fps: 30, speed: 2, dir: 'left'});
$('#rete').pan({fps: 15, speed: 1, dir: 'left'}); //shtova kete rresht
});
Deri tani kemi krijuar rrugën dhe retë që lëvizin rrjedhshëm në faqe. Na mbetet elementi më interesant i guidës: Feniksi që ecën për qejf në një ditë me diell
. Proçesi grafik i krijimit të Feniksit është paksa më i ndërlikuar, sepse kam krijuar 3 imazhe për secilën kuadro (frame) të animacionit. Imazhi paraqitet më poshtë e mund të vini re diferencën e vogël midis 3 kuadrove të cilat japin idenë e një ecje (e cila s’është cikli i ecjes më i saktë në botë, por idenë e jep).</p>
<p class="wp-caption-text">3 kuadrot e Feniksit</p>
Tashmë nuk na mbetet shumë punë për përfundimin e animacionit tonë. Si kemi bërë deri tani, shkruajmë kodin e thjeshtë HTML dhe CSS. Logjika është egzaktësisht si krijimi i një sprite, ku elementin <div> e bëjmë me gjerësi sa 1/3 e imazhit dhe gjatësi të njëjtë me imazhin.</p>
<div id="fusha">
<div id="feniksi"></div><!-- shtova kete div -->
<div id="rete"></div>
</div>
#feniksi{
width:127px;
height:173px;
position:absolute;
top:200px;
left:100px;
background:url(../images/zogjt.png) no-repeat;
}
Hapi i fundit, ju premtoj! Do eskplorojmë funksion sprite() që do i japë jetë figurës statike të Feniksit. Më parë po e shkruaj të gjithë kodin JavaScript që vë në jetë animacionin, e më pas do ju them 2 fjalë për funksionin sprite().</p>
$(document).ready(function() {
$('#fusha').pan({fps: 30, speed: 2, dir: 'left'});
$('#rete').pan({fps: 15, speed: 1, dir: 'left'});
$('#feniksi').sprite({fps: 6, no_of_frames: 3}); //shtova kete rresht
});
Edhe unë u çudita herën e para që lexova dokumentimin e Spritely. Kaq e thjeshtë për të krijuar një animacion me disa kuadro? Besoj se koduesit e Spritely e kanë arritur qëllimin plotësisht, sepse krijuam një animacion me vetëm 3 rrjeshta JavaScript. Tani për funksionin sprite(). Parametri fps, ashtu si tek pan() përcakton numrin e kuadrove për sekond. Në parametrin no_of_frames (number of frames) shkruajmë sa kuadro ka imazhi që do të animohet. Në rastin tonë janë 3. Ofrohen gjithashtu disa parametra të tjerë për lëvizje të rastësishme apo metodë për afrimin e elementin kur mouse-i klikohet të cilat mund ti eksploroni në dokumentimin (shumë të shkurtër) të Spritely.</p>
Mendoni akoma se Flash mund të zëvendësohet me JavaScript? Për momentin akoma jo, por puna fantastike që kanë bërë koduesit e librarive dhe teknika pionere si kjo që ju tregova po e afrojnë atë ditë akoma më tepër. S’kam asgjë me Flash, përkundrazi! Megjithatë mendoj se webi do të jetë një vend më i mirë e më i sigurt pa përdorimin e plugineve. Zgjedhja juaj!</p>
Për të bërë një përmbledhje: Kam krijuar 3 imazhe në Photoshop; kam shkruar pak HTML e CSS dhe kam shkruar gjithashtu vetëm disa rrjeshta JavaScript për të përfituar një animacion interesant. Duke përdorur fantazinë mund të krijoni animacione komplekse dhe mahnitëse për vizitorët tuaj, por kini parasysh diçka: Shumë animacione = ngarkesë më e madhe për faqen. Përdoreni me kujdes dhe mos egzagjeroni, përndryshe do shkatërroni eksperiencën në faqe në vend që ta përmirësoni.</p>
Mësim të mbarë.</p>
Sprite(ly) zëvendëson Flash është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=935
<p style="text-align: center;">
Ok, e di që titulli është pak i guximshëm. Më duhet ta pranoj që teknika që do ju tregoj nuk zëvendëson Flash, por ju siguroj që është aq interesante sa për t’ju ngritur vetullën.</p>
Në 2 guida të mëparshme ju kam treguar si të përdorni Sprites në CSS dhe si të bëni Sprites të animuara me JQuery. Sprites janë vërtetë një teknikë e mirë dhe ti kombinosh me JQuery bëhen edhe interaktive. Po sikur ti japim Sprite-eve një dozë steroidesh e të krijojmë animacione komplekse, me disa frames dhe shtresa? Lexoni më poshtë!</p>
Po ju prezantoj Spritely, një plugin për JQuery që shërben për të krijuar disa animacione shumë interesante me Sprites. Për momentin është akoma e kufizuar në mundësitë që ofron, por më besoni, nëse e lini fantazinë të lirë, me Spritely mund të arrihen rezultate fantastike. Më e bukura është se instalohet dhe vihet ne përdorim për pak minuta. Pa humbur kohë po kalojmë në shpjegimin e teknikës.</p>
Nëse nuk e keni parë akoma Demon e kësaj guide, atëherë bëjeni tani. Ok, si ju duk? S’mund të jem animuesi më i mirë në Botë, por rezultati është goxha impresionues duke llogaritur që është vënë në jetë vetëm me 3 imazhe dhe pak HTML, CSS dhe JavaScript. Kur them pak, e kam seriozisht. Vetëm disa rrjeshta që do i kuptoni dhe fiksoni me leximin e parë.</p>
Gjëja e parë që do të bejmë është të shkarkojmë JQuery dhe Spritely. I vendosim të 2 skriptet në një folder “js” (për organizim të mirë) dhe i thërrasim ne <head> të dokumentit.</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.spritely.js"></script>
Platforma për të bërë animacionin tonë është gati. Do ta nisim me sfondin ku “ecja” ndodh, që është një imazh i thjeshtë i bërë në Photoshop ku tregohet një rrugë dhe 2 palma. Imazhi është më poshtë:</p>
Imazhi është perfekt për tu përsëritur horizontalisht në pafundësi dhe largësinë e palmave e kam llogaritur që (pak a shumë) distanca midis të dyjave të jetë e njëjtë sa dyfishi i distancës nga njëra palmë në skajin më të afërt. Llogaritja vlen edhe për vijat e rrugës, si elementi i dytë në imazh që do të spostohet për të dhënë sensin e lëvizjes. Syri i njeriut gënjehet lehtë
Kodi HTML dhe CSS për ta shfaqur si duhet imazhin është tërësisht minimal. Shikoni më poshtë:</p>
<div id="fusha">
</div>
#fusha{
position:relative;
width:705px;
height:400px;
background:url(../images/rruga.png) repeat-x;
}
Gjithçka që na duhet është të krijojmë një element <div> bosh, të cilit i vendosim përmasat me CSS sa përmasat e vetë imazhit dhe si background do vendosim kë? Imazhin pra
Mbetet tani ta animojmë me JavaScript. Kjo është pjesa më interesante dhe për fat të mirë edhe më e lehta. Spritely ofron një metodë që quhet pan() dhe është e dedikuar për ta zhvendosur horizontalisht imazhin. Pas elementit <div> që krijuam shtojmë kodin më poshtë:</p>
$(document).ready(function() {
$('#fusha').pan({fps: 30, speed: 2, dir: 'left'});
});
Ju duket e thjeshtë?! Sigurisht që është! Më thjeshtë dhe bukur se kaq ska ku të shkojë. Mos të shpërqëndrohemi dhe më lini t’ju shpjegoj pak çfarë parametrash merr funksioni. Parametri fps përcakton numrin e kuadrove për sekond; sa më e lartë aq më i “rrjedhshëm” animacioni, por më tepër ngarkesë për faqen. Parametri speed përcakton shpejtësinë e animacionit; sa më e lartë, aq më i shpejtë. Ndërsa parametri dir merr vlerat “left” (spostim majtas) ose “right” (spostim djathtas). Duke eksperimentuar me fps dhe speed mund ti jepni animacionit tuaj shpejtësinë që po kërkoni dhe këtë do ja u tregoj pak më poshtë.</p>
Kalojmë tek elementi i dytë që duam të animojmë: Retë. Ajo që doja të arrija me retë ishtë një levizje më e ngadaltë se rruga, sepse retë spostohen ngadalë, apo jo?! Më poshtë është imazhi që kam përdorur:</p>
Brenda elementit <div id=”fusha”> do krijojmë një element <div> tjetër që mban retë. Ideja është egzaktësisht e njëjtë me Rrugën, kështu që mos prisni ndonjë gjë të re përveç pozicionimit absolut.</p>
<div id="fusha">
<div id="rete"></div><!-- shtuam kete div -->
</div>
#rete{
position:absolute;
top:0;
left:0;
width:705px;
height:103px;
background:url(../images/rete.png) repeat-x;
}
Na mbetet të shtojmë një tjetër funksion pan() në JavaScript-in që ju tregova pak më sipër. Këtë rradhë do e ulim parametrin fps në 15 dhe parametrin speed në 1, sepse duam që retë të lëvizin më ngadalë. Një pikë plus për Spritely, sepse na lejon të shtojmë shtresa [virtualisht] pa fund dhe ti animojmë me shpejtësi të ndryshme. Kodi JavaScript që kemi deri tani është:</p>
$(document).ready(function() {
$('#fusha').pan({fps: 30, speed: 2, dir: 'left'});
$('#rete').pan({fps: 15, speed: 1, dir: 'left'}); //shtova kete rresht
});
Deri tani kemi krijuar rrugën dhe retë që lëvizin rrjedhshëm në faqe. Na mbetet elementi më interesant i guidës: Feniksi që ecën për qejf në një ditë me diell
Tashmë nuk na mbetet shumë punë për përfundimin e animacionit tonë. Si kemi bërë deri tani, shkruajmë kodin e thjeshtë HTML dhe CSS. Logjika është egzaktësisht si krijimi i një sprite, ku elementin <div> e bëjmë me gjerësi sa 1/3 e imazhit dhe gjatësi të njëjtë me imazhin.</p>
<div id="fusha">
<div id="feniksi"></div><!-- shtova kete div -->
<div id="rete"></div>
</div>
#feniksi{
width:127px;
height:173px;
position:absolute;
top:200px;
left:100px;
background:url(../images/zogjt.png) no-repeat;
}
Hapi i fundit, ju premtoj! Do eskplorojmë funksion sprite() që do i japë jetë figurës statike të Feniksit. Më parë po e shkruaj të gjithë kodin JavaScript që vë në jetë animacionin, e më pas do ju them 2 fjalë për funksionin sprite().</p>
$(document).ready(function() {
$('#fusha').pan({fps: 30, speed: 2, dir: 'left'});
$('#rete').pan({fps: 15, speed: 1, dir: 'left'});
$('#feniksi').sprite({fps: 6, no_of_frames: 3}); //shtova kete rresht
});
Edhe unë u çudita herën e para që lexova dokumentimin e Spritely. Kaq e thjeshtë për të krijuar një animacion me disa kuadro? Besoj se koduesit e Spritely e kanë arritur qëllimin plotësisht, sepse krijuam një animacion me vetëm 3 rrjeshta JavaScript. Tani për funksionin sprite(). Parametri fps, ashtu si tek pan() përcakton numrin e kuadrove për sekond. Në parametrin no_of_frames (number of frames) shkruajmë sa kuadro ka imazhi që do të animohet. Në rastin tonë janë 3. Ofrohen gjithashtu disa parametra të tjerë për lëvizje të rastësishme apo metodë për afrimin e elementin kur mouse-i klikohet të cilat mund ti eksploroni në dokumentimin (shumë të shkurtër) të Spritely.</p>
Mendoni akoma se Flash mund të zëvendësohet me JavaScript? Për momentin akoma jo, por puna fantastike që kanë bërë koduesit e librarive dhe teknika pionere si kjo që ju tregova po e afrojnë atë ditë akoma më tepër. S’kam asgjë me Flash, përkundrazi! Megjithatë mendoj se webi do të jetë një vend më i mirë e më i sigurt pa përdorimin e plugineve. Zgjedhja juaj!</p>
Për të bërë një përmbledhje: Kam krijuar 3 imazhe në Photoshop; kam shkruar pak HTML e CSS dhe kam shkruar gjithashtu vetëm disa rrjeshta JavaScript për të përfituar një animacion interesant. Duke përdorur fantazinë mund të krijoni animacione komplekse dhe mahnitëse për vizitorët tuaj, por kini parasysh diçka: Shumë animacione = ngarkesë më e madhe për faqen. Përdoreni me kujdes dhe mos egzagjeroni, përndryshe do shkatërroni eksperiencën në faqe në vend që ta përmirësoni.</p>
Mësim të mbarë.</p>
Sprite(ly) zëvendëson Flash është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=935