Δημιουργία Preloader

Λύσεις προβλημάτων για το δημοφιλές πρόγραμμα κατασκευής παρουσιάσεων στο διαδίκτυο.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 10 Ιαν 2004 17:24

Update: 29/09/2006


1) ΔΗΜΙΟΥΡΓΙΑ ΑΠΛΟΥ PRELOADER


O παρακάτω preloader εμφανίζει απλά το ποσοστο του loading


1) Δημιουργήστε στο πρώτο frame ένα Dynamic text box ( Επιλέξτε το text tool πρώτα ( T ) και μετά από τα properties dynamic text αντί για static που είναι to default )

Εικόνα

2) Επιλέξτε το και δώστε ώς instance name τη λέξη dynam

Εικόνα

3) Κάντε δεξί κλίκ πάνω στο πρώτο keyframe και επιλέξτε Actions

Εικόνα

Στα actions του keyframe κάντε paste τον παρακάτω κώδικα :

Κώδικας: Επιλογή όλων

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100); 
dynam.text = percent+"% is loaded";
Εικόνα


4) Κάντε δεξί κλίκ πάνω στο δεύτερο frame και επιλέξτε insert keyframe

Εικόνα

5) Γράψτε τώρα στα actions του δεύτερου keyframe το παρακάτω

Κώδικας: Επιλογή όλων

if (percent == 100) {
	gotoAndStop(3);
} else {
	gotoAndPlay(1);
}
Εικόνα

Ο κώδικας λέει στο flash άν η μεταβλητή percent, που μετράει το ποσοστό του load, είναι 100 να πάει και να σταματήσει το flash movie στο τρίτο frame ή άν δέν είναι ίσο με 100 να ξαναπάει στο πρώτο frame και να μετρήσει έκ νέου το ποσοστό.

Για μεγαλύτερη ακρίβεια θα μπορούσαμε στην if να έχουμε για condition αντί για percent == 100, getBytesLoaded() == getBytesTotal() δηλαδή η if να γινόταν

Κώδικας: Επιλογή όλων

if (getBytesLoaded() == getBytesTotal()) {
	gotoAndStop(3);
} else {
	gotoAndPlay(1);
}
η παραπάνω εντολή μπορεί να γραφεί και ώς

Κώδικας: Επιλογή όλων

(getBytesLoaded() == getBytesTotal()) ? gotoAndStop(3) : gotoAndPlay(1);
Επίσής άν το περιεχόμενό σας ήταν σε άλλο frame η scene η απλά θέλετε να μήν σταματήσει σε ένα συγκεκριμένο frame μετά το load το movie θα πρέπει να αλλάξετε την σειρά gotoAndPlay(3) με ότι ταιριάζει στις ανάγκες σας

πχ
gotoAndPlay(2);

gotoAndStop(21);

gotoAndStop("Scene 2", 1);
...κτλ

Για να δοκιμάσετε τον preloader βάλτε μια εικόνα στο τρίτο frame του movie
πατήστε ctrl + Enter για να ανοίξει το preview παράθυρο
πατήστε πάλι ctrl + Enter για να δείτε τον preloader

Μπορείτε να κάνετε και simulate την ταχύτητα του download

Εικόνα

Κατεβάστε το fla με το παράδειγμα από εδώ (απαιτεί flash 7 και άνω)

http://users.freestuff.gr/spookyb52/probar/prel.fla


2) PRELOADER με μπάρα - animation

-Αρχικά φτιάξτε τον preloader όπως δείξαμε παραπάνω

Στη συνέχεια δημιουργήστε ένα νέο Layer κάτω από το layer 1 με τον preloader
To layer θέλουμε να έχει 2 frames μόνο (σβήστε όσα περισσέυουν)

Εικόνα

Τώρα δημιουργήστε ένα νέο movie symbol (ctrl + F8 η insert / new symbol)
Φτιάχτε ένα animation που θα ολοκληρώνεται σε 100 frames. Το animation μπορεί να είναι οτιδήποτε, μια μπάρα που γεμίζει, μια πεταλούδα που πετάει κτλ. θα πρέπει όμως να ολοκληρώνεται σε 100 frames για να εμφανίζεται ολόκληρο

Στη συνέχεια τοποθετήστε το movie στο main timeline στο layer 2 που φτιάξατε ( το movie θα υπάρχει στη library - Ctrl+L)

Στα properties του clip δώστε για instance name: progbar

Συμπληρώστε τον κώδικα που γράψατε στo πρώτο keyframe
percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
dynam.text = percent+"% is loaded";
με την παρακάτω σειρά

Κώδικας: Επιλογή όλων

progbar.gotoAndStop(percent);
Κατεβάστε το fla με το παράδειγμα από εδώ (απαιτεί flash 7 και άνω)

http://users.freestuff.gr/spookyb52/probar/prel.fla


Υποδείξεις :

άν θέλετε να βάλετε μια εικόνα για background στον preloader ή κάποιο γραφικό φροντίστε να είναι το ελάχιστο δυνατό μέγεθοε

Άν ο preloader αργεί να ανοίξει η φορτώνει από ένα ποσοστό και μετά αυτό οφείλεται στό ότι γίνεται κάτι load πρίν τον preloader. Προσοχή σε ξεχασμένα αρχεία που έχουν γίνει export in first frame.
Τελευταία επεξεργασία από το μέλος spookyb52 την 29 Σεπ 2006 17:45, έχει επεξεργασθεί 5 φορές συνολικά.
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

Άβαταρ μέλους
Chronis
Δημοσιεύσεις: 26
Εγγραφή: 03 Απρ 2003 20:08
Τοποθεσία: Peiraias
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από Chronis » 21 Φεβ 2004 01:58

Να 'σαι καλα φιλε μου, εψαχνα καιρο πως να φτιαξω εναν preloader!
Εγω ευτυχως ξεμπερδεψα με την εξεταστική μου, οταν τελειωσεις κι εσυ ελπιζω να μας πεις πως μπορουμε να βαλουμε περισσοτερα στοιχεια σε εναν preloader - πχ θα ηθελα να μαθω πως να φτιαξω μια μπαρα που γεμιζει. :D
Εικόνα

spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 21 Φεβ 2004 12:05

Και εγώ μόλις ξεμπέρδεψα με την εξεταστική... Έχω πρόβλημα με τα windows και με το flash (δέν έχω το flash στον υπολογιστή μου), έτσι δέν μπορώ να σου πώ με σιγουριά και λεπομέρειες πώς να φτιάξεις ένα preloader με μπάρα. Αλλά θα προσπαθήσω...

Έστω οτι έφτιαξες τον πρώτο απο τους δύο preloaders.

Φτιάξε ένα νέο layer και εκεί μέσα δημιούργησε ένα νέο movie clip. Βάλε μέσα στο Movie clip 100 frames.--- Κάνε δηλαδή κλίκ πάνω στο 100 frame και πάτησε το F5-----. Φτιάξε ένα γραφικό (μια μπάρα άν θές η ότι άλλο νομίζεις) και δημιούργησε ένα motion tween. ////Πάτησε πάνω σε ένα frame και μετά απο το μενού insert/create motion tween////

Το animation που θα φτιάξεις όπως ίσως κατάλαβες θα μετακινείτε ανάλογα με το ποσοστό του loading. Οπότε άν θές μια μπάρα φτιάξε ένα animation που θα δείχνει μια μπάρα να γεμίζει. H βάλε όλη τη φαντασία σου και φτιάξε ένα ανθρωπάκι πχ που θα πηγαίνει απο ένα σημείο σέ ενα άλλο η ότι άλλο σκεφτείς. (κόιτα μόνο να είναι όσο μικρότερο γίνεται σε μέγεθος, ο preloader πρέπει να εμφανίζεται πολύ γρήγορα)

Βγές απο το animation και στα properties του νέου movie δώσε για instance name το myclip
Στον κώδικα, εκεί που έγραψες :

Κώδικας: Επιλογή όλων

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100); 
dynam.text = percent+"% is loaded";


... άλλαξε το σε

Κώδικας: Επιλογή όλων

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100); 
dynam.text = percent+"% is loaded"; 
_root.myclip.gotoAndStop(percent);
Δέν θυμάμαι μήπως το percent μέσα στην τελευταία παρένθεση πρέπει να γραφτεί "percent" αντί για σκέτο percent. Άν το percent ήταν ονομασία σε label θα έπρεπε να γραφτεί σαν "percent" αλλά για εδώ δέν μπορώ να θυμηθώ σίγουρα...

Επειδή δέν έχω το flash αυτή τη στιγμή δέν μπορώ να το δοκιμάσω το παραπάνω... :-?
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 21 Φεβ 2004 15:40

Okay, το έφτιαξα to flash και μπόρεσα να το τσεκάρω. :)
Ο κώδικας δέν πρέπει να έχει και "". Όπως σου τον έδωσα πιο πάνω λοιπόν

Δές το παράδειγμα εδώ : http://www.geocities.com/worms3dt/preloan.html

Κατέβασε το flashaki εδώ : http://www.geocities.com/worms3dt/preloan.zip [ με δεξί κλίκ ]

Άν κάνεις download το flashaki θα δείς πως έχω φτιάξει 3 layers. Ένα για τα actions, ένα για το animation και ένα για το dynamic text box. Τα περιεχόμενα δέν είναι ανάγκη να τα έχεις σε δεύτερο scene. Εγώ για παράδειγμα έχω τοποθετήσει μια screenshot στο 4 frame.

Αυτα..

[ και τώρα που το είδα, θέλει και λίγη ευθυγράμμιση ο preloader :lol: ]
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

Άβαταρ μέλους
Chronis
Δημοσιεύσεις: 26
Εγγραφή: 03 Απρ 2003 20:08
Τοποθεσία: Peiraias
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από Chronis » 22 Φεβ 2004 00:36

Ευχαριστω φιλε μου, οταν χρησιμοποιησω τον preloader θα σου στειλω παραδειγματα να μου πεις τη γνωμη σου.
Εικόνα

john
Δημοσιεύσεις: 45
Εγγραφή: 21 Απρ 2003 16:11

Δημιουργία Preloader

Δημοσίευση από john » 19 Απρ 2004 19:03

re c spookyb52, vrika to frame kai to evala alla to dynamic text box pou vrisketai? eimai arxarios ...
exo to front page 2003. 3ereis?

spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 21 Ιουν 2004 15:45

john δέν σου απάντησα γιατί όπως ίσως να έχεις καταλάβει το frontpage δέν έχει καμία σχέση :)

και παρακάτω η γρήγορη εκδοχή του preloader :P

Φτιάξτε ένα dynamic textbox με ονομασία instance pososto και δώστε στα actions του πρώτου keyframe τον παρακάτω κώδικα

Κώδικας: Επιλογή όλων

onEnterFrame = function () {
	percent = Math.round((_root.getBytesLoaded()*100)/_root.getBytesTotal());
	(percent == 100) ? gotoAndStop(2) : donoth;
	pososto.selectable = false
	pososto.text = percent+" % is loaded";
};
το περιεχόμενο σας βάλτε το από το 2 και μετά frame
Τελευταία επεξεργασία από το μέλος spookyb52 την 21 Ιουν 2004 21:43, έχει επεξεργασθεί 1 φορά συνολικά.
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

john
Δημοσιεύσεις: 45
Εγγραφή: 21 Απρ 2003 16:11

Δημιουργία Preloader

Δημοσίευση από john » 21 Ιουν 2004 21:26

to dynamic text box pos to ftiaxnoun?????????

spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 21 Ιουν 2004 21:42

Μέσα στο flash εννοείς?

Επιλέγεις ένα απλό textbox (static) και από τα properties έχει ένα drop menu με 3εις επιλογές static / dynamic / input

Μπορείς και δυναμικά να δημιουργήσεις ένα textbox

πχ βάλε σέ ένα keyframe το παρακάτω

createTextField("keimeno", 1, 11, 11, 100, 22);
keimeno.type = "input";
keimeno.text = "write something";
keimeno.border = true
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

john
Δημοσιεύσεις: 45
Εγγραφή: 21 Απρ 2003 16:11

Δημιουργία Preloader

Δημοσίευση από john » 22 Ιουν 2004 10:28

apo pou 8a ginoun ola afta re paidia? me pio programma?? Sorry pou sas paideuo...

Άβαταρ μέλους
Yiannis Resbithas
Δημοσιεύσεις: 68
Εγγραφή: 08 Μάιος 2003 10:16
Τοποθεσία: Netherlands
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από Yiannis Resbithas » 22 Ιουν 2004 17:39

spookyb52 poli kalo.

Mipos omos mpori na mou eksigisis pos mporo na kano preload xoris flas mono Html.

diladi ti enoo: Exo mia selida me polles fotografies kai thelo na emfanizete prota ena minima "Parakalo perimenete" me an einai dinaton kapio gif arxio kai otan fortosi oles tis foto na emfanizete h selida.

Zitao polla? :lol:

spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 22 Ιουν 2004 20:33

John :

Με το flash της Macromedia γίνονται όλα αυτά. Το flash είναι άσχετο με html! :P Για αυτό είπα ότι το frontpage δέν έχει καμιά σχέση :)
//---------

Yannis :P
Για αυτό θα πρέπει να ρωτήσεις στο html section του forum εγώ δέν ξέρω για να βοηθήσω... :roll:
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

Άβαταρ μέλους
V@nt$
Δημοσιεύσεις: 17
Εγγραφή: 02 Δεκ 2004 01:37

Δημιουργία Preloader

Δημοσίευση από V@nt$ » 02 Δεκ 2004 02:28

Αν θέλω να βάλω μπάρα στον 2ο preloader πως θα την βάλω;;
Προσπάθησα να το κάνω όπως με τον πρώτο αλλά μάταια.. :cry:

ευχαριστώ

spookyb52
Δημοσιεύσεις: 1891
Εγγραφή: 23 Ιαν 2002 01:00
Τοποθεσία: Lost in the mansion
Επικοινωνία:

Δημιουργία Preloader

Δημοσίευση από spookyb52 » 02 Δεκ 2004 14:44

_root.myclip.gotoAndStop(percent_done);

Αντί για percent η μεταβλητή έχει ονομασία percent_done στο δεύτερο παράδειγμα

[το tutorial θέλει αναβάθμιση..είναι λίγο χύμα]
Life is like a fast car on an icy road. Brakes don't work, yes I know it, but I step on the gas
Garage punk | Rockabilly | Rock 'n' Roll | Stoner

Άβαταρ μέλους
V@nt$
Δημοσιεύσεις: 17
Εγγραφή: 02 Δεκ 2004 01:37

Δημιουργία Preloader

Δημοσίευση από V@nt$ » 05 Δεκ 2004 20:52

έχεις δίκιο, ok, δουλεύει, ευχαριστώ!

Απάντηση

Επιστροφή στο “Flash γενικά”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες