Κίνηση σχετική με το ποντίκι tutorial

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

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

Απάντηση
Άβαταρ μέλους
Garakatsamol
Honorary Member
Δημοσιεύσεις: 919
Εγγραφή: 08 Μάιος 2007 00:27

Κίνηση σχετική με το ποντίκι tutorial

Δημοσίευση από Garakatsamol » 03 Οκτ 2007 15:13

Με το παρακάτω tutorial τροποποιείται μια property ενός movieclip ανάλογα με κάποια άλλη μεταβλητή (στο παράδειγμα τη θέση του mouse). Δηλαδή μία τιμή η οποία θα ληφθεί από κάπου (θέση του mouse), ανάγεται σε μία νέα τιμή (mc property) σύμφωνα με μία εξίσωση που θα ορίσουμε.

Στο συγκεκριμένο παράδειγμα θέλουμε το movie clip μας να αλλάζει το _x του ανάλογα με τη θέση _x του mouse σε ένα stage 500x400 και πιο αναλυτικά

Οριακές τιμές:
για y1: _xmouse=0 , x1: mc._x=150
για y2: _xmouse=500 , x2: mc._x=350

η εξίσωση με την οποία η τιμή του _mouse Θα υπολογιστεί εδώ θα είναι η γραμμική πρώτου βαθμού δηλαδή του τύπου:

y=ax+b (τα x kai y στην εξίσωση δεν πρέπει να συγχέονται με τα _x και _y properties)

Πιο συγκεκριμένα
y: η τιμή του property που θέλουμε να μεταβάλλουμε(_χ)
x: η αρχική τιμή (_xmouse)

Μένει να βρεθούν τα a και b έτσι ώστε να έχουμε την πλήρη εξίσωση και τα οποία βρίσκονται μετά από πράξεις:

a = (y2-y1)/(x2-x1)
b = (y1*x2-y2*x1)/(x2-x1)

όπου x1, x2, y1, y2 οι οριακές μας τιμές όπως ανφέρθηκαν πιο πάνω.

Για να κάνουμε πράξη αυτά που θεωρητικά ανέλυσα πιο πάνω κάνουμε τα εξής


Στο πρώτο frame σχεδιάζουμε ένα τετράγωνο, το κάνουμε symbol και του δίνουμε Instance name (εδώ box)

Σε άλλο layer στο πρώτο frame βάζουμε τον κώδικα:

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

//βρίσκουμε τα a,b
function findab(x1, x2, y1, y2) {
	a = (y2-y1)/(x2-x1);
	b = (y1*x2-y2*x1)/(x2-x1);
	return a, b;
}

//καλούμε την function που δημιουργήσαμε ορίζοντας τις οριακές μας τιμές 
//και αποθηκεύουμε τα αποτελέσματα σε ένα Array

findab(0, 500, 150, 250);
var myArrayx = Array(a, b);

//σύμφωνα με τα αποτελέσματα μεταβάλλουμε συνεχώς τη θέση του box 
//ανάλογα με τη θέση του Mouse 

onEnterFrame = function () {
	_root.box._x = myArrayx [0]*_root._xmouse+myArx[1];
};
Μπορούμε καλώντας δεύτερη φορά τη function για διαφορετικό property (πχ _y) και αποθηκεύσουμε τις τιμές σε νέο Array na μεταβάλλουμε και αυτή την ιδιότητα

πχ:

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

function findab(x1, x2, y1, y2) {
	a = (y2-y1)/(x2-x1);
	b = (y1*x2-y2*x1)/(x2-x1);
	return a, b;
}
findab(0, 500, 150, 250);
var myArx = Array(a, b);
findab(0, 400, 100, 300);
var myAry = Array(a, b);
onEnterFrame = function () {
	this.box._x = myArx[0]*_root._xmouse+myArx[1];
	this.box._y = myAry[0]*_root._ymouse+myAry[1];
};
Επίσης μπορούμε αντί της πρωτοβάθμιας εξίσωσης αχ+β να χρησιμοποιήσουμε όποια θέλουμε για διαφορετικό εφέ (πχ δευτεροβάθμια: αχ^2 + βχ +γ) αλλά σε αυτές τις περιπτώσεις είναι πιο δύσκολος ο υπολογισμός των συντελεστών (α,β,γ) και απαιτούνται και κάποιες επιπλέον γνώσεις μαθηματικών.

Την ίδια μέθοδο μπορούμε να τη χρησιμοποιήσουμε και για αναγωγή άλλων μεγεθών όπως πχ: να αλλάζει το _alpha ανάλογα με το μέγεθος ενός movie clip και πάει λέγοντας.

Επισυνάπτω .fla και .swf

Ελπίζω κάποιος να το βρεί χρήσιμο και επίσης ελπίζω να βγαίνει κάποιο νόημα από αυτά που λέω πιο πάνω :lol:
Συνημμένα
relativeMove.zip
(5.26 KiB) Μεταφορτώθηκε 651 φορές

relativeMove.swf [ 2.49 KiB | Προβλήθηκε 4318 φορές ]



Άβαταρ μέλους
Garakatsamol
Honorary Member
Δημοσιεύσεις: 919
Εγγραφή: 08 Μάιος 2007 00:27

Κίνηση σχετική με το ποντίκι tutorial

Δημοσίευση από Garakatsamol » 04 Οκτ 2007 13:34

Με μια μικρή παραλλαγή μπορούμε να προσθέσουμε και κάποιο easing

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

function findab(x1, x2, y1, y2) {
	a = (y2-y1)/(x2-x1);
	b = (y1*x2-y2*x1)/(x2-x1);
	return a, b;
}
findab(0, 500, 150, 250);
var myArx = Array(a, b);
findab(0, 400, 100, 300);
var myAry = Array(a, b);
onEnterFrame = function () {
	this.box._x += (myArx[0]*_root._xmouse+myArx[1]-this.box._x)/10;
	this.box._y += (myAry[0]*_root._ymouse+myAry[1]-this.box._y)/10;
};
Συνημμένα

relativeMove.swf [ 2.52 KiB | Προβλήθηκε 4262 φορές ]


Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Κίνηση σχετική με το ποντίκι tutorial

Δημοσίευση από dva_dev » 04 Οκτ 2007 18:14

Ωραίο αλλά θέλει λίγο φινίρισμα ακόμα.
Αν κουνήσεις το ποντίκι γρήγορα το movie clip βγαίνει έξω από τα κόκκινα όρια.

Άβαταρ μέλους
Garakatsamol
Honorary Member
Δημοσιεύσεις: 919
Εγγραφή: 08 Μάιος 2007 00:27

Κίνηση σχετική με το ποντίκι tutorial

Δημοσίευση από Garakatsamol » 04 Οκτ 2007 18:22

Ναι , το όριο είναι στο περίπου,για να δείξω τι συμβαίνει, αλλά δεν είναι αυτό το θέμα. Απλώς ήθελα να δείξω πώς μπορούμε να ανάγουμε ένα μέγεθος σε κάποιο άλλο με τη βοήθεια μιας απλής εξίσωσης. Τα γραφικά είναι ενδεικτικά.
Ευχαριστώ που σχολίασες.

alien34
Δημοσιεύσεις: 5
Εγγραφή: 16 Δεκ 2006 22:00
Τοποθεσία: Θεσσαλονίκη

Κίνηση σχετική με το ποντίκι tutorial

Δημοσίευση από alien34 » 04 Οκτ 2007 19:48

Πολύ καλό για μένα που ψιλοάσχετος με actionscript..Είχα βρεί πως θα μετακινώ αντικείμενα με τον δείκτη του ποντικιού...αλλά δεν ήξερα πως θα βάλω όρια κίνησης ...
'Οσο ζω ελπίζω... να συνεχίσω να ελπίζω...

Απάντηση

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

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

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