εμφάνιση lyrics με actionscript

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

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

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

εμφάνιση lyrics με actionscript

Δημοσίευση από spookyb52 » 17 Ιούλ 2004 21:37

Λίγα βασικά για τους πίνακες αρχικά

υπάρχουν διάφοροι τρόποι δημιουργίας πίνακα αλλά εγώ θα μείνω σε ένα

mypinakas = []

αυτό δημιουργεί ένα πίνακα με ονομασία mypinakas. ο πίνακας αυτός είναι κενός αλλα μπορούμε να του δώσουμε στοιχεία όπως ονόματα μεταβλητών αριθμούς, boolean values κτλ

πχ mypinakas = [12, 22]

ο πίνακας αυτός έχει δύο αριθμητικές τιμές ,τις 12 και 22
Η αρίθμηση αρχίζει από το 0. Στο παραπάνω παράδειγμα άν θέλαμε να προσπελάσουμε τα στοιχεία του πίνακα θα γράφαμε

mypinakas[0] η mypinakas[1]


πχ δώστε στο flash το παρακάτω

mypinakas = ["oops", 11]
trace(mypinakas[0])
trace(mypinakas[1])

Θα πάρετε αποτέλεσμα oops και 11
ο παραπάνω πίνακας αντί για mypinakas = ["oops", 11]
θα μπορούσε να γραφτεί και ώς

mypinakas = []
mypinakas[0] = "oops"
mypinakas[1] = 11

Βλέπουμε ότι τώρα αριθμούμε μόνοι μας ένα, ένα τα στοιχεία του πίνακα

Άς δούμε και τα nested arrays που θα χρησιμοποιήσουμε

ένας πίνακας μπορεί να περιέχει και εσωτερικούς πίνακες

πχ

mypinakas = [[11, 22] , [33, 44]]

Στην θέση mypinakas[0] τώρα βρίσκεται ο πίνακας [11, 22] και στην θέση mypinakas[1] τώρα βρίσκεται ο πίνακας [33, 44]

Η προσπέλαση των στοιχείων σε nested arrays είναι απλή και πάλι

πχ στον πίνακα mypinakas = [[11, 22] , [33, 44]]

έχουμε

mypinakas[0][0] = 11
mypinakas[0][1] = 22
//-------------------------
mypinakas[1][0] = 33
mypinakas[1][1] = 44

Για τους πίνακες μπορούν να γραφτούν αρκετά αλλά μόνο τα παραπάνω χρειαζόμαστε στο ακόλουθο tutorial

Η λογική που θα ακολουθήσουμε για την εμφάνιση των lyrics σε συγκεκριμένα χρονικά σημεία είναι αρκετά απλή

Σε ένα πίνακα θα κρατάμε τα δευτερόλεπτα στα οποία θα εμφανίζονται τα lyrics και σε εκείνα τα οποία θα διαγράφονται

Σε ένα δεύτερο πίνακα θα γράψουμε τα lyrics μας

Για να γίνει κατανοητό θα φτιάξουμε μαζί ένα παράδειγμα αλλά για αυτό θα χρειαστεί να κατεβάσετε

το παρακάτω zip που περιέχει τα απαραίτητα

http://users.freestuff.gr/spookyb52/racecar/lyrics.zip

δηλαδή :

α) ένα dynamic textbox με instance name lyrixs_text και ενεργοποιημένο από τα properties το multiline
και ένα button με instance ονομασία plbutton

και β) το mp3 το οποίο θα μπεί στη library του fla με ονομασία linkage hxos [ file/import > δεξί κλίκ πάνω στο αρχείο του ήχου μέσα στη library/ linkage/ τσεκάρουμε το export for actionscript και δίνουμε για identifier hxos]

ο κώδικας που θα χρησιμοποιήσουμε είναι ο παρακάτω και θα τον βάλουμε στο keyframe

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

secs = [[2, 9], [10, 17], [18, 27], [30, 35], [36, 38], [38.1, 40], [41, 45]];
lyrics = [];
lyrics[0] = "  I wish to wish \r I dream to dream";
lyrics[1] = "I try to try and I live to live";
lyrics[2] = "  But I die to die \r and I cry to cry";
lyrics[3] = "Somewhere in the dreams \r Those who should ";
lyrics[4] = "Still the willow weeps";
lyrics[5] = "On roses for the dead";
lyrics[6] = "In laughs of love";
onEnterFrame = function () {
	for &#40;i=0; i<7; ++i&#41; &#123;
		if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;0&#93;&#41; &#123;
			lyrics_txt.text = lyrics&#91;i&#93;;
			if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;1&#93;&#41; &#123;
				lyrics_txt.text = "";
			&#125;
		&#125;
		if &#40;soundthis.position == 0&#41; &#123;
			lyrics_txt.text = "";
		&#125;
	&#125;
&#125;;
soundthis = new Sound&#40;&#41;;
soundthis.attachSound&#40;"hxos"&#41;;
plbutton.onRelease = function&#40;&#41; &#123;
	lyrics_txt.text = "";
	stopAllSounds&#40;&#41;;
	soundthis.start&#40;0, 1&#41;;
&#125;;

ΑΝΑΛΥΣΗ :

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

secs = &#91;&#91;2, 9&#93;, &#91;10, 17&#93;, &#91;18, 27&#93;, &#91;30, 35&#93;, &#91;36, 38&#93;, &#91;38.1, 40&#93;, &#91;41, 45&#93;&#93;;
Δημιουργούμε τον πίνακα secs με 7θέσεις [0, 1, 2, 3 ,4 , , 5 , 6]
Σε κάθε θέση υπάρχει ένας εσωτερικός πίνακας

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

secs&#91;0&#93; = &#91;2, 9&#93;
secs&#91;1&#93; = &#91;10, 17&#93;
secs&#91;2&#93; = &#91;18, 27&#93;
secs&#91;3&#93; = &#91;30, 35&#93;
secs&#91;4&#93; = &#91;36 , 38&#93;
secs&#91;5&#93; = &#91;38.1 , 40&#93;
secs&#91;6&#93; = &#91;41, 45&#93;
Η πρώτη τιμή [0] κρατάει το δευτερόλεπτο στο οποίο θα εμφανιστούν τα lyrics και η δεύτερη [1] εκείνη στο οποίο θα εξαφανιστούν

πχ στο secs[0] = [2, 9] τα lyrics θα εμφανιστούν στο 2 και θα διαγραφούν στο 9 δευτερόλεπτο

//----------------

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

lyrics = &#91;&#93;;
lyrics&#91;0&#93; = "  I wish to wish \r I dream to dream";
lyrics&#91;1&#93; = "I try to try and I live to live";
lyrics&#91;2&#93; = "  But I die to die \r and I cry to cry";
lyrics&#91;3&#93; = "Somewhere in the dreams \r Those who should ";
lyrics&#91;4&#93; = "Still the willow weeps";
lyrics&#91;5&#93; = "On roses for the dead";
lyrics&#91;6&#93; = "In laughs of love";
Στη συνέχεια δημιουργούμε κατα αντιστοιχία ένα νέο πίνακα, τον lyrics. Και αυτός ο πίνακας έχει 7 θέσεις και όπως θα καταλάβατε κάθε θέση είναι αντίστοιχη με αυτή του πίνακα secs

πχ ο lyrics[4] αντιστοιχεί στον secs[4] δηλαδή τα lyrics : Still the willow weeps θα εμφανιστούν στο 36 δευτερόλεπτο και θα διαγραφούν στο 38

σημείωση : Το \r που υπάρχει μέσα σε κάποιους στίχους χρησιμεύει στο να αλλάξει σειρέ το κείμενο. το \r δέν εμφανίζεται κατά τη διάρκεια που το flash παίζει. πχ "Somewhere in the dreams \r Those who should ";
Υπάρχουν και άλλα τέτοια κολπάκια :)

//------------------------

Αυτό θα γίνει με τη χρήση βρόχων και συγκεκριμένα της for

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

onEnterFrame = function &#40;&#41; &#123;
	for &#40;i=0; i<7; ++i&#41; &#123;
		if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;0&#93;&#41; &#123;
			lyrics_txt.text = lyrics&#91;i&#93;;
			if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;1&#93;&#41; &#123;
				lyrics_txt.text = "";
			&#125;
		&#125;
		if &#40;soundthis.position == 0&#41; &#123;
			lyrics_txt.text = "";
		&#125;
	&#125;
&#125;;
βάζουμε τον κώδικα μέσα σε μιά onEnterFrame συνάρτηση που εκτελείτε συνεχώς

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

for &#40;i=0; i<7; ++i&#41; &#123;
		if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;0&#93;&#41; &#123;
			lyrics_txt.text = lyrics&#91;i&#93;;
			if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;1&#93;&#41; &#123;
				lyrics_txt.text = "";
			&#125;
		&#125;
		if &#40;soundthis.position == 0&#41; &#123;
			lyrics_txt.text = "";
		&#125;
	&#125;

for (i=0; i<7; ++i) {} για ι=0 [το i είναι μια μεταβλητή] και καθώς το 1 είναι μικρότερο από 7 [μέχρι και 6] αύξησε την τιμή του i κατά 1 [++i] και εκτέλεσε τις ενέργειες μέσα στην αγκύλη {}

το παραπάνω το κάναμε γιατί θα χρησιμοποιήσουμε την τιμή του i πιό κάτω. To i θέλουμε να είναι από 0 έως και 6 γιατί τα στοιχεία και των 2 πινάκων μας είναι 7 και η αρίθμησή τους όπως είδαμε αρχίζει από το 0 μέχρι το 6

secs[0], secs[1], ......, secs[6]
lyrics[0], lyrics[1],...., lyrics[6]

χωρίς την χρήση βρόχων το παραπάνω θα έπρεπε να γραφτεί ξεχωριστά για κάθε τιμή του πίνακα. κάτι αρκετά χρονοβόρο και βάρβαρο...

Επίσης αντί για for (i=0; i<7; ++i) {} θα μπορούσαμε να γράψουμε και for (i=0; i<lyrics.length; ++i) {} όπου lyrics.length επιστρέφεται το μέγεθος του πίνακα lyrics που είναι 7

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

if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;0&#93;&#41; &#123;
			lyrics_txt.text = lyrics&#91;i&#93;;
			if &#40;soundthis.position/1000>secs&#91;i&#93;&#91;1&#93;&#41; &#123;
				lyrics_txt.text = "";
			&#125;
		&#125;
Άν πούμε ότι το i είναι 2 πχ τότε το παραπάνω "θα έλεγε" :



if (soundthis.position/1000>secs[0]) όπου i βάζουμε 2

Άν η θέση του ήχου (soundthis είναι ο ήχος που δημιουργούμε λίγο πιό κάτω και η θέση του μπορεί να αναγνωσθεί με την ιδιότητα του ήχου position που επιστρέφει τη θέση του ήχου σε δευτερόλεπτα πολλαπλασιασμένα επί 1000. έτσι τα 6 δευτερόλεπτα θα επιστραφούν ώς 6000 για αυτό και τα διαιρούμε με 1000) είναι μεγαλύτερη από secs[2][0] δηλαδή από 18 ( γιατί secs[2][0] = 18 ) τότε το dyanamic textbox lyrics_text θα πάρει το περιεχόμενο του lyrics[2] δηλαδή But I die to die and I cry to cry (γιατί lyrics[2] = " But I die to die \r and I cry to cry";)


if (soundthis.position/1000>secs[1]) όπου i βάζουμε 2

Άν η θέση του ήχου είναι μεγαλύτερη από 27 ( γιατί secs[2][1] = 27 ) τότε το dyanamic textbox lyrics_text θα έχει κενό περιεχόμενο (lyrics_txt.text = "";)

.............
τέλος άν ό ήχος δέν έχει ακόμα αρχίσει

if (soundthis.position == 0) {
lyrics_txt.text = "";
}

τότε το dyanamic textbox lyrics_text θα έχει και πάλι κενό περιεχόμενο (lyrics_txt.text = "";)


//--------------------

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

soundthis = new Sound&#40;&#41;;
soundthis.attachSound&#40;"hxos"&#41;;
plbutton.onRelease = function&#40;&#41; &#123;
	lyrics_txt.text = "";
	stopAllSounds&#40;&#41;;
	soundthis.start&#40;0, 1&#41;;
&#125;;

soundthis = new Sound();
soundthis.attachSound("hxos");

Δημιουργούμε ένα νέο ήχο με ονομασία soundthis και τον κάνουμε attaach στη σκηνή (ο ήχος έχει ονομασία στo linkage hxos)
.....................

Τέλος αφήσαμε το button το οποιό εδώ δέν κάνει βασικά τίποτε άλλο από το να παίζει συνέχεια τον ήχο. Φυσικά μπορείτε να το προσαρμόσετε στις ανάγκες σας... η να φτιάξετε περισσότερα buttons

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

plbutton.onRelease = function&#40;&#41; &#123;
	lyrics_txt.text = "";
	stopAllSounds&#40;&#41;;
	soundthis.start&#40;0, 1&#41;;
&#125;
όταν αφήσουμε το button με instance name plbutton τότε

lyrics_txt.text = ""; το dyanamic textbox lyrics_text θα έχει κενό περιεχόμενο

stopAllSounds(); όλοι οι ήχοι θα σταματήσουν

soundthis.start(0, 1); θα ξεκινήσει ο ήχος να παίζει από την αρχή και θα κάνει Loop μια φορά (0, 1)

Τελικά δέν ήταν τόσο μικρό αλλά ελπίζω να έγινε κατανοητό.... :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

Απάντηση

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

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

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