Actionscript created clip .... startDrag #*$^[email protected]#$^)

k … so today i’ve been doing all sorts of experiments learning to draw and control MCs with actionscript … so here’s my next problem

i’m trying to create a circle (but i can’t get a circle perfectly round so i’m using a square here) to be draggable

this is the script i’m using:
it’s all on the actions layer of one frame on the main timeline


onenterframe = function () {
_root.createEmptyMovieClip ("cube", 1);
	with (_root.cube){
		lineStyle (1, 0x560000, 100);
		beginFill (0xFeFEEB, 50);
		moveto (100, 100);
		lineto (100, 120);
		lineto (120, 120);
		lineto (120, 100);
		lineto (100, 100);
		endFill();
}
_root.cube.onPress = function () {
startDrag(_root.cube);
}
_root.cube.onRelease = function () {
stopDrag();
}
}

but the startDrag isn’t working … it has an onPress event so i get the hand cursor when i put the cursor over the object … but it won’t move :sigh:

try checking your }

embedded functions are really kinda funny, you have to tweak them just right.

In your case, I would try the onpress function outside of your enterframe function. Right now it looks like it is inside. Then again, I’m kinda sleepy, so I could be wrong.

Ok, problem 1…

You do not need an onEnterFrame event handler. Start Drag allows the ability to drag a clip outside of an enterFrame. And as your code was, you keep telling it that onEnterFrame it should keep recreating your clip (which overwrites the old one) and keep redrawing the lines, therefore, you don’t get a chance to drag it because it keeps getting overwritten and redrawn in the same spot.

That is really your only problem, the next thing is a bit of optimization.

[AS]_root.cube.onPress = function () {
startDrag(_root.cube);
}[/AS]

Since you are defining the onPress for the cube clip, you don’t need to define the cube clip in the startDrag, it would be just “this”

[AS]_root.cube.onPress = function () {
this.startDrag();
}[/AS]

leaving you with…
[AS]_root.createEmptyMovieClip(“cube”, 1);
with (_root.cube) {
lineStyle(1, 0x560000, 100);
beginFill(0xFeFEEB, 50);
moveto(100, 100);
lineto(100, 120);
lineto(120, 120);
lineto(120, 100);
lineto(100, 100);
endFill();
}
_root.cube.onPress = function() {
this.startDrag();
};
_root.cube.onRelease = function() {
stopDrag();
};[/AS]

Nice to see you Montoya… MISS YOU LOTS!!! :love:


onenterframe = function () {
Mouse.hide();

_root.createEmptyMovieClip ("border", 1);
	with (_root.border){
		lineStyle (1, 0x560000, 100);
		moveTo (0, 0);
		lineTo (0, 480);
		lineTo (640, 480);
		lineTo (640, 0);
		lineTo (0, 0);
}
_root.createEmptyMovieClip ("vline", 2);
	with (_root.vline){
		lineStyle (1, 0x560000, 20);
		moveTo (0, 0);
		lineTo (0, 480);
}
_root.createEmptyMovieClip ("hline", 3);
	with (_root.hline){
		lineStyle (1, 0x560000, 20);
		moveTo (0, 0);
		lineTo (640, 0);
}
_root.createEmptyMovieClip ("txtBrdr", 4);
	with (_root.txtBrdr){
		lineStyle (1, 0x560000, 100);
		moveto (640, 460);
		lineto (580, 460);
		lineto (580, 480);
}
_root.createEmptyMovieClip("A", 5);
with (_root.A) {
        lineStyle(1, 0x560000, 100);
        beginFill(0xFeFEEB, 50);
        moveto(100, 100);
        lineto(100, 120);
        lineto(120, 120);
        lineto(120, 100);
        lineto(100, 100);
        endFill();
}

_root.createEmptyMovieClip("B", 6);
with (_root.B) {
        lineStyle(1, 0x560000, 100);
        beginFill(0xFeFEEB, 50);
        moveto(200, 200);
        lineto(200, 220);
        lineto(220, 220);
        lineto(220, 200);
        lineto(200, 200);
        endFill();
}

_root.createEmptyMovieClip("C", 7);
with (_root.C) {
        lineStyle(1, 0x560000, 100);
        beginFill(0xFeFEEB, 50);
        moveto(300, 300);
        lineto(300, 320);
        lineto(320, 320);
        lineto(320, 300);
        lineto(300, 300);
        endFill();
}

_root.createEmptyMovieClip ("triangle", 8);
	with (_root.triangle){
		lineStyle (1, 0x560000, 20);
		moveTo (_root.A._x, _root.A._y);
		lineTo (_root.B._x, _root.B._y);
		lineTo (_root.C._x, _root.C._y);
		lineTo (_root.A._x, _root.A._y);
}
_root.createEmptyMovieClip ("bezier", 9);
	with (_root.bezier){
		lineStyle (1, 0x560000, 20);
		moveTo (_root.A._x, _root.A._y);
		curveTo (_root.C._x, _root.C._y, _root.B._x, _root.B._y);
}


_root.vline._x = _root._xmouse;
_root.hline._y = _root._ymouse;
_root.val.text = Math.round(_root._xmouse)+","+Math.round(_root._ymouse);
}


_root.A.onPress = function() {
        this.startDrag(_root.A);
}
_root.A.onRelease = function() {
        stopDrag();
}
_root.B.onPress = function() {
        this.startDrag(_root.B);
}
_root.B.onRelease = function() {
        stopDrag();
}
_root.C.onPress = function() {
        this.startDrag(_root.C);
}
_root.C.onRelease = function() {
        stopDrag();
}

but the drag still isn’t working … and neither is the triangle or the bezier curve between the points that i created :frowning:

Ok, you are doing it again, You are having the onEnterFrame recreate the new empty clips and then redraw them all over again and again and again.

The only thing the onEnterFrame needs to be run for are these…

[AS] _root.vline._x = _root._xmouse;
_root.hline._y = _root._ymouse;
_root.val.text = Math.round(_root._xmouse)+","+Math.round(_root._ymouse);[/AS]

And to be more efficient, you don’t need to run an onEnterFrame. Since they are simple coodinates of when the mouse moves, you can use an onMouseMove instead of onEnterFrame.

That leaves us with…
[AS]_root.onMouseMove = function() {
_root.vline._x = _root._xmouse;
_root.hline._y = _root._ymouse;
_root.val.text = Math.round(_root._xmouse)+","+Math.round(_root._ymouse);
};[/AS]

Now, another thing you are doing again is the startDrag stuff. You have
[AS]_root.A.onPress = function() {
this.startDrag(_root.A);
}[/AS]

Why do you defined _root.A as a parameter when you already tell it to drag the clip that the onPress refers to? When you say _root.A.onPress, any time you use “this” inside that handler it will refer to the _root.A clip, so you just need this.startDrag(). Leaving us with…

[AS]_root.A.onPress = function() {
this.startDrag();
};
_root.A.onRelease = function() {
stopDrag();
};
_root.B.onPress = function() {
this.startDrag();
};
_root.B.onRelease = function() {
stopDrag();
};
_root.C.onPress = function() {
this.startDrag();
};
_root.C.onRelease = function() {
stopDrag();
};[/AS]

Hold on, more optimization coming, just gotta go for one minute.

Ok, I just realized I have this other thing I gotta work on, pretty important, so I will just leave you with tips on how to optimize.

Ok, my tip is this.

I see you are using the drawing API to draw a square over and over and over to create different clips. With the use of a prototype you could easily set up a function that draws your square for you, and you can call that function when you wanted to draw the square.

Like… _root.A.drawSquare().

You can use prototypes for a lot of your repeat coding in the above.

i don’t understand how to do that but i’m going to keep working on it … i’ll probably work on it more tomorrow at work :slight_smile:

thanks for your help beta

Alright, well I have a quick working version on my end. Not super optimized, but optimized.

When you show me that you tried, I will show you what you are doing right and wrong (if I need to) and how to fix it.

ok beta, i put the mouse hide inside the onenterframe function and then closed it

i put the line movements in a onmousemove function and everything else is not in a function.

stuff works fine except triangle and bezier are never created

the code to create them works fine when i put it in another movie that is attatched to actual symbols instead of 3 symbols that are drawn by as

so i’m not sure why those aren’t working

how would i set up and then call a prototype like you were talking about. that sounds like a really good way to do some cool stuff. so i’m interested to learn that

thanks again for the help and here’s the code


onenterframe = function () {
Mouse.hide();
}

_root.createEmptyMovieClip ("border", 1);
    with (_root.border){
        lineStyle (1, 0x560000, 100);
        moveTo (0, 0);
        lineTo (0, 480);
        lineTo (640, 480);
        lineTo (640, 0);
        lineTo (0, 0);
}
_root.createEmptyMovieClip ("vline", 2);
    with (_root.vline){
        lineStyle (1, 0x560000, 20);
        moveTo (0, 0);
        lineTo (0, 480);
}
_root.createEmptyMovieClip ("hline", 3);
    with (_root.hline){
        lineStyle (1, 0x560000, 20);
        moveTo (0, 0);
        lineTo (640, 0);
}
_root.createEmptyMovieClip ("txtBrdr", 4);
    with (_root.txtBrdr){
        lineStyle (1, 0x560000, 100);
        moveto (640, 460);
        lineto (580, 460);
        lineto (580, 480);
}
_root.createEmptyMovieClip("A", 5);
with (_root.A) {
        lineStyle(1, 0x560000, 100);
        beginFill(0xFeFEEB, 50);
        moveto(100, 100);
        lineto(100, 120);
        lineto(120, 120);
        lineto(120, 100);
        lineto(100, 100);
        endFill();
}

_root.createEmptyMovieClip("B", 6);
with (_root.B) {
        lineStyle(1, 0x560000, 100);
        beginFill(0xFeFEEB, 50);
        moveto(200, 200);
        lineto(200, 220);
        lineto(220, 220);
        lineto(220, 200);
        lineto(200, 200);
        endFill();
}

_root.createEmptyMovieClip("C", 7);
with (_root.C) {
        lineStyle(1, 0x560000, 100);
        beginFill(0xFeFEEB, 50);
        moveto(300, 300);
        lineto(300, 320);
        lineto(320, 320);
        lineto(320, 300);
        lineto(300, 300);
        endFill();
}

_root.createEmptyMovieClip ("triangle", 8);
    with (_root.triangle){
        lineStyle (1, 0x560000, 20);
        moveTo (_root.A._x, _root.A._y);
        lineTo (_root.B._x, _root.B._y);
        lineTo (_root.C._x, _root.C._y);
        lineTo (_root.A._x, _root.A._y);
}
_root.createEmptyMovieClip ("bezier", 9);
    with (_root.bezier){
        lineStyle (1, 0x560000, 20);
        moveTo (_root.A._x, _root.A._y);
        curveTo (_root.C._x, _root.C._y, _root.B._x, _root.B._y);
}


_root.onMouseMove = function() {
        _root.vline._x = _root._xmouse;
        _root.hline._y = _root._ymouse;
        _root.val.text = Math.round(_root._xmouse)+","+Math.round(_root._ymouse);
};


_root.A.onPress = function() {
        this.startDrag();
};
_root.A.onRelease = function() {
        stopDrag();
};
_root.B.onPress = function() {
        this.startDrag();
};
_root.B.onRelease = function() {
        stopDrag();
};
_root.C.onPress = function() {
        this.startDrag();
};
_root.C.onRelease = function() {
        stopDrag();
};

Ok, with Mouse.hide(), you don’t need to define that in an onEnterFrame either. Once the mouse is told to hide, it will stay hidden until it is told to show (Mouse.show()). So you can remove the onEnterFrame for that. That is just using up extra CPU usage for no reason.

Ok, and last night I made a mistake, I saw some extra statements in your script that needed to be in the onMouseMove handler.

That would be the “with” code for the bezier and the triangle.

We can create the empty movie clips for them OUTSIDE of the onMouseMove handler because as long as the clips are created int he first place, the code will work, but the clips don’t have to be recreated everytime the mouse moves.

Alright, now for the prototypes.

First lets start with the one that draws your crosshair. That you just have draw a line.
[AS]//create prototype that builds the lines that make the crosshair
//notice the function(x,y) the x and y are parameters
MovieClip.prototype.drawLine = function(x, y) {
this.lineStyle(1, 0x560000, 20);
this.moveTo(0, 0);
//use x, y parameters to say where to line to
this.lineTo(x, y);
};[/AS]

That would be the prototype for the line. You use the parameters x and y to decide where to draw the line to. In your case it would be (0,480) and (640,0) as you had before.

Alright, so how do we use this? Pretty simple, you must first create the clip to use it on, then after the create of the clip we can call the prototype to it.
[AS]_root.createEmptyMovieClip(“vline”, 2).drawLine(0, 480);
_root.createEmptyMovieClip(“hline”, 3).drawLine(640, 0);[/AS]
And that draws your crosshair.

Now to make the prototype for your squares. What we want to achieve in this prototype is the drawing of the square, and then making it draggable. Well you already know how the drawing API works apparently, so I shouldn’t have to explain much in this.
[AS]MovieClip.prototype.buildSquare = function(halfClip, x, y) {
this.lineStyle(1, 0x560000, 100);
this.beginFill(0xFEFEEB, 50);
this.moveTo(-halfClip, -halfClip);
this.lineTo(halfClip, -halfClip);
this.lineTo(halfClip, halfClip);
this.lineTo(-halfClip, halfClip);
this.lineTo(-halfClip, -halfClip);
this.endFill();
this._x = x;
this._y = y;
this.onPress = function() {
this.startDrag();
};
this.onRelease = this.onReleaseOutside=function () {
stopDrag();
};
};[/AS]

halfClip is a parameter that lets you define half of the width of your square, it then takes the halfClip value and builds you a square with a center registration point. Then it moves it to the x and y position according to the x and y parameter. You already know what the onPress, onRelease, and onReleaseOutside do.

We use this code the same way we did with the crosshair. Just make the clip and call the prototype.
[AS]_root.createEmptyMovieClip(“A”, 5).buildSquare(10, 100, 100);
_root.createEmptyMovieClip(“B”, 6).buildSquare(10, 200, 200);
_root.createEmptyMovieClip(“C”, 7).buildSquare(10, 300, 300);[/AS]
This builds 3 clips, which are 3 seperate squares that are 20x20 px (10 is the halfClip, which is half of the width). After the clips are made the are positioned according to the x and y parameters (100,100) for the first clip for example.

Then we create your bezier and triangle clips, you already know how to do that, but I will put it anyway…
[AS]_root.createEmptyMovieClip(“triangle”, 8);
_root.createEmptyMovieClip(“bezier”, 9);[/AS]

And this is now your onMouseMove statement. It updates the vlaues of your textbox, your triangle clip, and your bezier curve.
[AS]_root.onMouseMove = function() {
_root.vline._x = _root._xmouse;
_root.hline._y = _root._ymouse;
_root.val.text = Math.round(_root._xmouse)+","+Math.round(_root._ymouse);
//didn’t create prototype for this because it is used only once
with (_root.triangle) {
clear();
lineStyle(1, 0x560000, 20);
moveTo(_root.A._x, _root.A._y);
lineTo(_root.B._x, _root.B._y);
lineTo(_root.C._x, _root.C._y);
lineTo(_root.A._x, _root.A._y);
}
//didn’t create prototype for this for same reason
with (_root.bezier) {
clear();
lineStyle(1, 0x560000, 20);
moveTo(_root.A._x, _root.A._y);
curveTo(_root.C._x, _root.C._y, _root.B._x, _root.B._y);
}
//since these values are within the onMouseMovie handler
//they will be updated everytime the mouse moves
};[/AS]

The rest of your code can stay the same.

This is what I came up with real quick last night…
[AS]Mouse.hide();
//create prototype that builds the lines that make the crosshair
//notice the function(x,y) the x and y are parameters
MovieClip.prototype.drawLine = function(x, y) {
this.lineStyle(1, 0x560000, 20);
this.moveTo(0, 0);
//use x, y parameters to say where to line to
this.lineTo(x, y);
};
//create prototype to draw draggable squares
//notice the parameters in relationship to the code inside
//halfClip is half of your squares width
MovieClip.prototype.buildSquare = function(halfClip, x, y) {
this.lineStyle(1, 0x560000, 100);
this.beginFill(0xFEFEEB, 50);
this.moveTo(-halfClip, -halfClip);
this.lineTo(halfClip, -halfClip);
this.lineTo(halfClip, halfClip);
this.lineTo(-halfClip, halfClip);
this.lineTo(-halfClip, -halfClip);
this.endFill();
this._x = x;
this._y = y;
this.onPress = function() {
this.startDrag();
};
this.onRelease = this.onReleaseOutside=function () {
stopDrag();
};
};
//create clips AND assign proper prototypes to them
_root.createEmptyMovieClip(“vline”, 2).drawLine(0, 480);
_root.createEmptyMovieClip(“hline”, 3).drawLine(640, 0);
_root.createEmptyMovieClip(“A”, 5).buildSquare(10, 100, 100);
_root.createEmptyMovieClip(“B”, 6).buildSquare(10, 200, 200);
_root.createEmptyMovieClip(“C”, 7).buildSquare(10, 300, 300);
//create triangle clip
_root.createEmptyMovieClip(“triangle”, 8);
//create bezier clip
_root.createEmptyMovieClip(“bezier”, 9);
//create onMouseMove dynamic event handler
_root.onMouseMove = function() {
_root.vline._x = _root._xmouse;
_root.hline._y = _root._ymouse;
_root.val.text = Math.round(_root._xmouse)+","+Math.round(_root._ymouse);
//didn’t create prototype for this because it is used only once
with (_root.triangle) {
clear();
lineStyle(1, 0x560000, 20);
moveTo(_root.A._x, _root.A._y);
lineTo(_root.B._x, _root.B._y);
lineTo(_root.C._x, _root.C._y);
lineTo(_root.A._x, _root.A._y);
}
//didn’t create prototype for this for same reason
with (_root.bezier) {
clear();
lineStyle(1, 0x560000, 20);
moveTo(_root.A._x, _root.A._y);
curveTo(_root.C._x, _root.C._y, _root.B._x, _root.B._y);
}
//since these values are within the onMouseMovie handler
//they will be updated everytime the mouse moves
};
//create border
_root.createEmptyMovieClip(“border”, 1);
with (_root.border) {
lineStyle(1, 0x560000, 100);
moveTo(0, 0);
lineTo(0, 480);
lineTo(640, 480);
lineTo(640, 0);
lineTo(0, 0);
}
//create txt border
_root.createEmptyMovieClip(“txtBrdr”, 4);
with (_root.txtBrdr) {
lineStyle(1, 0x560000, 100);
moveTo(640, 460);
lineTo(580, 460);
lineTo(580, 480);
}[/AS]

It is sloppy and unorganized because it was rushed, but it works. I commented the code in various areas.

Sorry for being so short with explanations, I am always afraid to max out the character limit.

If there are any parts of the script you need more explanation on, don’t hesitate to ask. I would rather go into better explanations on the stuff you don’t know then in the stuff you already know and see no point in explaining.

thanks a lot beta … it’s kindof neat now that i understand it all

i don’t understand what’s with the clear();

what does that do and why’d you put it there =)

clear()

It is a command that clears the previously drawn line. If you comment out that line (make it say //clear() instead of clear() ) you will see exactly what I mean.

If you don’t have clear() in there the line will be drawn repeatedly over and over and over, and will never be erased. This makes for a very ugly look and after a few lines a very processor intensive effect as well.

Sorry, I forgot that I added clear() into your script.

the prototype thing is really cool. i want to practice more with that =)

Very awesome stuff. The fact that you could do that with it shows that you understand what I did, and that makes me happy, because I SUCK at explaining stuff…lol.

:tb: you are too … good at explaining stuff

i usually understand you.

i’m really glad i understand that lil thing

but now i’m having a problem with my site … i guess i’ll make a new thread for that

but the deeper i get into making this thing the more complex my fla becomes and i fear no one will want to help because it’s so big

sniffle