» »

Flash preloader Tutorial!

Flash preloader Tutorial!

iElectric ::

Lep Pozdrav! Odločil sem se, da napišem članek. Zakaj? Zato, ker sem sam zgubil veliko časa za iskanje tutoriala kako se naredi preloader in bi lahko v tem času napisal tri takšne članke. Ker sem dober človek, vam bom prikrajšal to mučenje. Kaj sploh je preloader? To je del flash filmčka/internet strani, v katerem uporabniku pove, koliko se je že prenesela datoteka na njegov PC, da jo bo lahko videl. No, pa začnimo...

Članek bom pisal za program Macromedia Flash MX 2004 professional. Čeprav se druge verzije ne razlikujejo veliko, vseeno bodite pozorni na to. Zaženite Flash in shranite novo datoteko z ukazom File>save as. V Timeline označite prvi frame in skopirajte v actionscirpt naslednjo kodo:

var soundDLPercent:Number;
progressBar.onEnterFrame = function() {
var Loaded:Number = _root.getBytesLoaded();
var Total:Number = _root.getBytesTotal();
soundDLPercent = ((Loaded/Total)*100);
progressBar.bar._width = soundDLPercent;
progressBar.txt = Math.round(soundDLPercent) + "%";
if (Loaded == Total) {
_root.gotoAndPlay(2);
delete progressBar.onEnterFrame;
}
};
stop();




Naredite movie clip (z pritiskom Ctrl + FCool in mu napišite instance name "progressBar".



Odprite movie clip (dvojni klik) in v njem narišite pravokotnik. Pravokotnik naj bo dolg 100 pikslov. Naredite tri layerje in v prvem naj bo okvir kvadrata, v drugem in tretjem pa polnilo. V tretjem layerju določite polnilu barvo, ki bo zgledala pri loadnju (uporabite linear, solid ali pa radial možnosti). Izberite drugi layer in mu določite mask. Spremenite polnilo, ki je v drugem layerju v movie clip in mu določite instance name "bar". Polnilo v drugem layerju zmanjšaje na 1 pixel (sedaj mora biti na začetku rpavokotnika).



Dodajte še en layer in v njega vstavite dynamic text, Var pa naj bo "txt". V drugi frame filmčka vstavite kar želite da bo vseboval ta flash movie. Movie stestirajte z ukazom Ctrl + Enter.



Da vidite učinek izberite ukaz View>simulate downlaod

FLA: KLIK
SWF: KLIK

Opombe:

1. Največkrat naredite napake pri prepisavanju (bodite pozorni na velike začetnice)!
2. Ne pišite narakovajev (so samo zato, da se bolje vidi)
3. Pri tekstu bodite pozorni, da ni barva teksta enaka ozadju.
4. Vodič nisem pisal do potankosti, zato če kdo želi naj vpraša če česa ne zna.


V drugem delu bom razložil kaj se dogaja v Actionscript

PS:prosil bi admina, da prestavi datoteke na SLO_TECH strežnik.
  • zavaroval slike: Tody ()

iElectric ::

var soundDLPercent:Number;
progressBar.onEnterFrame = function() {
var Loaded:Number = _root.getBytesLoaded();
var Total:Number = _root.getBytesTotal();
soundDLPercent = ((Loaded/Total)*100);
progressBar.bar._width = soundDLPercent;
progressBar.txt = Math.round(soundDLPercent) + "%";
if (Loaded == Total) {
_root.gotoAndPlay(2);
delete progressBar.onEnterFrame;
}
};
stop();



V tem delu bom napisal kako deluje AS bolj podrobno.

var soundDLPercent:Number;



Naredimo novo spremenjivko in ji določimo zapis kot številka. Ali drugače povedano "soundDLPercent" vsebuje številko, katera se bo spreminjala. Številka bo v našem primeru od 0 do 100 in nam sporoči, koliko procentov filma že imamo.

progressBar.onEnterFrame = function()



"progressBar" je movie clip, ki mu določimo funkcijo onEnterFrame. Ta funkcija je v bistu loop in če bi prevedli onEnterFrame, bi nekako dobili od vstopu v frame, ali drugače vsak frame, ki se predvaja naj se izpelje naslednja akcija, ki ej v oklepajih: { in }.

var Loaded:Number = _root.getBytesLoaded();
var Total:Number = _root.getBytesTotal();



Narecimo dve novi številki in v eno shranimo število bytov, ki so se prenesli iz strežnika, druga pa nam pove koliko bytov vsebuje cel film.

soundDLPercent = ((Loaded/Total)*100);



V spremenljivko "soundDLPercent" shranimo precente. Seveda moramo z nekaj znanja matematike napisati račun. "Loaded/Total" - v spremenjivki Loaded imamo byte, ki so že prenešeni, v Total pa število vseh bytov. In ko število prenešenih delimo z številom vseh, dobimo procente prenosa ampak moramo pomnožiti še z 100, da je številka od 0 do 100 (ker v nasprotnem primeru bi imeli 0.01 do 1). Ker imamo onEnterFrame funkcijo, se številka zračuna vsak frame.

progressBar.bar._width = soundDLPercent;



"progressBar" je movie clip in .bar je insance name od polnila pravokotnika, ki smo ga zmanjšali na 1 piksel (po dolžini). Z _width povemo flashu, da bomo spreminjali dolžino tega predmeta. Ker smo v 1. delu določili okvirju pravokotnika, da meri 100 pikslov, lahko sedaj rečemo, da naj bo ta predmet dolg toliko pikslov, kolikor je vrednost spremenjivke soundDLPercent (sepravi od 0 do 100).

progressBar.txt = Math.round(soundDLPercent) + "%";



"progressBar.txt" - v ta dynamic text, ki smo mu določili var: "txt", vstavimo številko soundDLPercent. Ker številka ni okrogla, uporabimo funkcijo "Math.round", ki zaokroži števila na cela števila (1,2,3...). + "%" pa napišemo, da nam zraven še izpiše znak za procente.

if (Loaded == Total) {
_root.gotoAndPlay(2);
delete progressBar.onEnterFrame;
}



"Loaded == Total" - Primerjamo, če je številka vseh bytov in prenešenih bytov enaka. Če je, Zažene skrpto v oklepajih {}. Sepravi:

_root.gotoAndPlay(2);
delete progressBar.onEnterFrame;



Prvi del pove, da začne igrat frame 2, kjer imamo animacijo. Drugi frame pove, da zbrise loop, ker ni več potreben in porablja moč procesorja.

Prosil bi vse, da ocenite tutorial od 1 do 10.

segi ::

---------------------------------------------
Segi podobo na ogled postavi,
ker bolj resnico ljubi kakor hvalo,
zad skrit vsevprek posluša, kaj zijalo
neumno, kaj umetni od nje pravi
----------------------------------------------

planetparty ::

Točno tole sem iskal, zdaj pa še rabim nekoliko dodatne pomoči:
Kako se integrira ta preloader v stran? Kam moram dati tisto datoteko oz kako treba narediti.
Http://www.directoryelite.com - Elite Directory

Cross ::

zelo fajn da si se potrudu in tole spisu, sam škoda je da če si že pisu, bi lahk vsaj tko spisu da bi koristl vsem, tut tistim mal večjim laikom za katere je zdej ta stvar neuporabna. kako lahko kao spremeniš polnilo v layerju2 k je maskan, ker prav da je kao lockan. kot drugo, domnevam da to polnilo je kao nov pravokotnik. kako ga lahko spremeniš na 1 pixel. sej bom pač prebral še un slo tutorial, mejbi bom tam najdu odgovor.
entering the subspace


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

copy/paste ne dela tako kot bi moral

Oddelek: Pomoč in nasveti
81872 (1739) satriani
»

Flash in Video problem

Oddelek: Izdelava spletišč
71322 (1257) Misi666
»

Kako bi naredil en ultra simple programček?

Oddelek: Programiranje
492218 (1499) AtaStrumf
»

Windows Commander 5.1

Oddelek: Novice / Operacijski sistemi
52521 (2521) darh
»

VB6 kako uporabiti

Oddelek: Programiranje
8900 (762) Area_51

Več podobnih tem