Σχεδιάστε με κώδικα - Μέρος πρώτο

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

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

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

Σχεδιάστε με κώδικα - Μέρος πρώτο

Δημοσίευση από spookyb52 » 09 Οκτ 2006 19:12

Διαβάστε μια φορά όλο το tutorial πρίν επιχειρήσετε τους δικούς σας πειραματισμούς!

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

moveTo(x, y)
Αυτά είναι τα σημεία x & y από τα οποία θα εκκινήσει η σχεδίαση

πχ moveTo(11, 24) η σχεδίαση θα ξεκινήσει από το σημείο χ=11 και y =24

lineTo(x, y)

Αυτά είναι τα σημεία x & y στα οποία καταλήγει η σχεδίαση.

Άς δούμε μερικά παράδειγματα :

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

moveTo(0,0) 
lineTo(111, 11)
Τί σημαίνει το παραπάνω?

Σχεδιάζουμε μιά "γραμμή" από το σημείο x=0, y = 0 στο νέο σημείο χ=111, y=11, εικόνα από κάτω ( η μπλέ διαγώνιος γραμμή )

Εικόνα

Με τον ίδιο τρόπο μπορούμε να συνεχίσουμε απο το σημείο που έιχαμε μείνει

π.χ στο προηγούμενο παράδειγμα σταματήσαμε στο σημείο x = 111 & y =11

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

moveTo(0,0) 
lineTo(111, 11)

lineTo(250, 11)
Προσθέσαμε μιά επιπλέον γραμμή. Με την lineTo(250, 11) σχεδιάζουμε μια γραμμή από το προηγούμε σημείο x = 111 στο νέο χ =250 και από το y =11 στο y =11. Επειδή το y παραμένει ίδιο (11) η γραμμή θα είναι ευθεία

Άν δέ θέλαμε να συνεχίσουμε τη σχεδίαση από το προηγούμενο σημείο αλλά από ένα άλλο νέο θα χρησιμοποιούσαμε την moveTo()

π.χ

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

moveTo(0,0) 
lineTo(111, 11)

moveTo(200,22) 
lineTo(250, 11)
Σε αυτή την περίπτωση η νέα γραμμή θα σχεδιαζόταν από το σημείο χ = 200, y =22 στο χ = 250 και y=11

Άν και αρχικά μπορεί να μπερδευτείτε η αλήθεια είναι ότι η σχεδίαση γραμμών είναι απλή υπόθεση και το μόνο που χρειάζεται είναι απλή λογική

Πχ για να σχεδιάσουμε μια ευθεία γραμμή χρειαζόμαστε ένα αρχικό και ένα τελικό σημείο για τον οριζόντιο άξονα των χ και αντίστοιχα για τον κάθετο των y. Από τη στιγμή που θέλουμε να είναι ευθεία η γραμμή το αρχικό y θα πρέπει να είναι ίδιο με το τελικό ενώ τα x να διαφέρουν

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

lineTo(x1, y) 
lineTo(x2, y)
ΣΗΜΕΙΩΣΗ : όσο πιό αριστερά πηγαίνουμε οι τιμές των χ μειώνονται και το αντίθετο. Ανάλογα για τα y, όσο πιό πάνω τα y μειώνονται και όσο πιό κάτω αυξάνουν.


Δώστε στα actions του frame τον παρακάτω κώδικα

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

moveTo(0, 0); 
lineTo(111, 11); 
lineTo(250, 11); 
lineTo(250, 111);
και πατήστε ctrl+enter

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

Θα ξεκινήσουμε από την lineStyle() η οποία χρωματίζει γραμμές και δέν γεμίζει τα σχήματα

Για την ακρίβεια
lineStyle(thickness, rgb, alpha)
Η lineStyle δέχεται λοιπόν 3εις ρυθμίσεις
thickness : Το πάχος της γραμμής. Παίρνει τιμές από 0 - 255. Τίμες μεγαλύτερες ή μικρότερες από τις επιτρεπόμενες αναγνωρίζονται αυτόματα ώς η αντίστοιχιστα μέγιστη η ελάχιστη δεκτή ακραία τιμή ( πχ το 355 ανάγνωρίζεται ώς 255 και το -22 ώς 0)
rgb : Το χρώμα που θα έχουν οι γραμμές. Οι rgb τιμές των χρωμάτων είναι της μορφής 0x?????? Όπου ερωτημάτικα οι δικές σας τιμές
πχ : 0x336699. Το μάυρο είναι 0x000000 ενώ το λευκό είναι 0xFFFFFF κτλ. Άν πάτε σε κάποιο πρόγραμμα επεξεργασίας γραφικών ακόμα και μέσα στο flash και επιλέξετε κάποιο χρώμα [ εικόνα από κάτω] μπορείτε να δείτε τιμές χρωμάτων

Εικόνα

Φυσικά άν η τιμή εμφανίζεται ώς #336699 εσείς δέν θα πληκτρολογήσετε 0x#336699 αλλά 0x336699

alpha : Το άν θα υπάρχει διαφάνεια στο χρώμα η όχι . Οι τιμές είναι από 0 - 100. 0 = μεγιστη διαφάνεια και 100 = καθόλου διαφάνεια. Και εδώ ισχύει το ίδιο με την thickness για την υπέρβαση των ορίων

Π.χ άν θέλουμε μια γραμμή να έχει πάχος 1, μαύρο χρώμα και καθόλου διαφάνεια γράφουμε :

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

lineStyle(1, 0x336699, 100)
Στην περίπτωση που δέ μας ενδιαφέρει η διαφάνεια μπορούμε να την παραλέιψουμε και η εντολή να γραφτεί ώς lineStyle(1, 0x336699)

Η linestyle μπάινει στην αρχή έτσι ο προηγούμενος κώδικας γίνεται

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

lineStyle(1, 0x336699, 100)

moveTo(0, 0); 
lineTo(111, 11); 
lineTo(250, 11); 
lineTo(250, 111);
Δώστε τον στα actions του frame και δείτε τί έχει σχεδιάσει

για να κάνουμε την lineStyle να σταματήσει απλά γράφουμε lineStyle()

π.χ δοκιμάστε το παρακάτω

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

lineStyle(1, 0x336699, 100)
; 
moveTo(0, 0); 
lineTo(111, 11); 
lineTo(250, 11); 
lineTo(250, 111); 
lineStyle(); 
lineTo(150, 111);
Έχουμε προσθέσει μια νέα ευθεία γραμμή η οποία όμως δέν φαίνεται γιατί στην προτελευταία γραμμή δώσαμε την εντολή να σταματήσει το χρωμάτισμα

Εκτός από την lineStyle υπάρχει και η beginFill() η εντολή αυτή σε αντίθεση με την lineStyle δε χρωματίζει το περίγραμμα αλλά γεμίζει τα σχήματα με κάποιο χρώμα

Η εντολή beginFill(rgb, alpha) δέχεται δύο τιμές που αναλύσαμε πιό πάνω. Και εδώ άν δέ μας ενδιαφέρει η διαφάνεια την παραλέιπουμε.

Έτσι η εντολή beginFill(0x336699, 100) είναι ίδια με την beginFill(0x336699). Η εντολή beginFill() κλέινει με την endFill()

π.χ

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

beginFill(0x336699); 
moveTo(0, 0); 
lineTo(111, 11); 
lineTo(250, 11); 
lineTo(250, 111); 
endFill();
H beginFill μπορεί να χρησιμοποιηθεί μαζί με την lineStyle πχ

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

lineStyle(1, 0x00FF00); 

beginFill(0x336699); 
moveTo(0, 0); 
lineTo(111, 11); 
lineTo(250, 11); 
lineTo(250, 111); 
endFill();
Κάντε κλίκ και μετακινείστε στο παρακάτω flashaki τα κυκλικά clips για να καταλάβετε καλύτερα.

http://www.greekflasher.com/flash/flashline.swf

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

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

lineStyle(1, 0x336699); 
moveTo(205, 62); 
lineTo(299, 130); 
lineTo(281, 243); 
lineTo(141, 243); 
lineTo(119, 130); 
lineTo(205, 62);
(είναι τα ίδια σημεία με τα αρχικά στο παραπάνω flash αν κοιτάξετε πιό προσεχτικά).

Για τέλος αφήσαμε την εντολή clear() με την οποία μπορείτε να καθαρίσετε τα σχεδιασμένα αντικέιμενα

π.χ δώστε τον παρακάτω κώδικα.

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

lineStyle(1, 0x336699); 
lineTo(299, 130); 
lineTo(281, 243);
και στη συνέχεια αφού δείτε το σχέδιο προσθέστε στο τέλος την εντολή clear() και ξαναδοκιμάστε

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

lineStyle(1, 0x336699); 
lineTo(299, 130); 
lineTo(281, 243);

clear();
Όταν θέλουμε να σχεδιάσουμε σε μιά συνεχή διαδικασία σχήματα η clear() θα πρέπει να μπαίνει στη αρχή και όχι στο τέλος
π.χ δοκιμάστε το παρακάτω

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

onEnterFrame = function () { 
 clear(); 
 lineStyle(1, 0x336699); 
 moveTo(200, 230); 
 lineTo(_xmouse, _ymouse); 
};
Όλες οι παραπάνω εντολές έτσι όπως είναι γραμμένες σχεδιάζουν στο main timeline. Άν θέλουμε να χρησιμοποιήσουμε τις εντολές αυτές μέσα σε ένα movie clip βάζουμε το instance name πρίν κάθε εντολή

Π.χ

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

myclip.moveTo(12, 22) 
myclip.clear() 
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

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Σχεδιάστε με κώδικα - Μέρος πρώτο

Δημοσίευση από chchrist » 09 Οκτ 2006 19:49

Πολύ καλό spookyb52! :D

Επίσης καλό θα ήταν να γίνεται ένα empty movie clip με την createEmptyMovieClip() και εκεί να μέσα να σχεδιάζεις. Εκτός αν τα έχεις αφήσει αυτά για το δεύτερο μέρος.

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

Σχεδιάστε με κώδικα - Μέρος πρώτο

Δημοσίευση από spookyb52 » 10 Οκτ 2006 17:02

Δέν το ανέφερα γιατί δέν έχει να κάνει με την σχεδίαση :wink:

Φυσικά όταν σχεδιάζουμε με κώδικα κάτι χρησιμοποιούμε συνήθως και Movie symbols που σχεδιάζουμε με κώδικα και σε συνδυασμό με χρήση της with όπως το παράδειγμα από κάτω

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

createEmptyMovieClip('new_clip', getNextHighestDepth());
with (new_clip) {
	lineStyle(1, 0x336699, 100);
	moveTo(0, 0);
	lineTo(100, 0);
	lineTo(100, 100);
	lineTo(0, 100);
	lineTo(0, 0);
	//-------
	_x = _y=200;
}
Το tutorial θα συμμπληρωθεί γιατί στο flash 8 έχουν μπεί και νέεs παράμετροι στις παραπάνω εντολές :)
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

JohnL
Δημοσιεύσεις: 95
Εγγραφή: 15 Μάιος 2005 14:04

Σχεδιάστε με κώδικα - Μέρος πρώτο

Δημοσίευση από JohnL » 25 Οκτ 2006 00:42

Μπορείς να περιγράψεις και πώς γίνεται αυτό και για καμπύλες?

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

Σχεδιάστε με κώδικα - Μέρος πρώτο

Δημοσίευση από spookyb52 » 25 Οκτ 2006 12:37

Θα ανεβάσω κάτι σχετικό μέσα στις επόμενες ημέρες JohnL :wink:
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 επισκέπτες