Draw with Flash

[neo_philiac]

Hello all:

I have simple problem. I am very new to flash and I need a simple program (I thought doing it in flash would be very simple!) that would draw a rectangle or circle and move it with the cursor (when mouse button pressed down). Does anyone know of an example that I can take a look at (googling didnt help). I would really appreciate any help.

Thanks

[Medyman]

Do you want to have an animation play of the rectangle being drawn and then move it have it move with the cursor or do you just want a rectangle to move with the cursor.

Not sure if the drawing of the rectangle is supposed to be done before or after the movie is compiled.

[neo_philiac]

Thanks for the reply. Its actually very simple. No animation I would input the width and height of the rectangle at the input box and when click draw it will draw the image and then I want to press the left mouse button and move the drawing.

[Medyman]

Ahh, that's fairly easy...

I'll make up a quick .swf for you, with comments. It's easier to read the code than for me to explain it.

[Medyman]

Ok here you are....

I've made something up. It's ver basic, but should be good to learn from. I've commented out as much as I thought was necessary.

Demo (http://img141.imageshack.us/my.php?image=resizerectanglelu6.swf)
Source (http://www.mediafire.com/?9lrwibmv1um)

[evan]

Is this actionscript 2.0 or 3.0?

[Medyman]

Is this actionscript 2.0 or 3.0?

It's 2.0

[neo_philiac]

Hello I am back ! Here is what I have been working on:

Everything is working the way I want but I need three things

1. The bouncing effect needs angular movement (so, if I say it to bounce along the 30 deg it should bounce along the 30 degree line)

2. I need the bouncing to stop whenever I create a new line.

3. I need to draw the line and make the registration point in the middle. (in other words when I hit rotate it should rotate along the center. It does that now but its a little bit off.)

I am a noob so please excuse my way of coding. (hey! I am learning!)






#include "mc_tween2.as"


/* Initial Setup
When the movie first loads, we want the rectangle to have a width & height of "0"
If you want a different height, adjust the values below.

Sample syntax: rect_mc.resizeTo (width, height, time (in seconds), animation type);

We also want to set the text inputs to show that the dimensions are 0 x 0 */

rect_mc.resizeTo(0, 0, .5, "easeOutQuad"); //Initial Rectangle Resize Function
width_text.text = "10"; // Width text field
height_text.text = "100"; // Height text field rot_text
rot_text.text = "0";

//Background color Radio Button.

rb_shape_ln.data = "line";
rb_shape_cr.data = "circle";

//Create new movie

createEmptyMovieClip("tmp_mc", 1);


line1_mc.moveTo(0,0);

//Background color Radio Button.

base_mc.cacheAsBitmap = true;
rb_color_w.data = "0xFFFFFF";
rb_color_b.data = "0x000000";

//Background color Radio Button.

rb_shape_ln.data = "line";
rb_shape_cr.data = "circle";


/* createBtn.onRelease function - activates when you click on the "Create" button */
createBtn.onRelease = function() {

text_mc.text = shapeGroup.selectedData;

this.stop();
tmp_mc.clear();
base_mc.clear();
var rectWidth = width_text.text; // Read in what's in the text input
var rectHeight = height_text.text;
var rectRot = rot_text.text;
var colorData = (Number(baseColorGroup.selectedData));
var tmp;
base_mc.opaqueBackground=colorData;

//Selecting Fill color

if (colorData == 16777215){
tmp = 0x000000;
}
else {
tmp = 0xFFFFFF;
}

if (shapeGroup.selectedData == "line"){

tmp_mc.lineStyle(rectWidth,tmp,100);
tmp_mc.moveTo(0, (rectHeight/2));
tmp_mc.lineTo(0, (-(rectHeight)));
tmp_mc._y = Stage.height/2;
tmp_mc._x = Stage.width/2;
tmp_mc.rotateTo(rectRot, .5, "linear");
}

else if (shapeGroup.selectedData == "circle"){
// use the method to draw a circle in movieclip c
// at x=100, y=100 with a 70-pixel radius
tmp_mc.beginFill(tmp, 100);
tmp_mc.drawCircle(rectWidth, Stage.height/2, Stage.height/2);
tmp_mc.endFill();
}
else {
text_mc.text = "Please Select Shape";
}

}

/* On press rotates */

rot_Button.onRelease = function() {
var i = 0;
while (i<=1000){
tmp_mc.rotateTo(i,3,"linear");
i +=1;
}

}

/* On press bounces the shape */

bounce_Button.onRelease = function() {


var gravity = 100;
var floor = tmp_mc._y+200;
var Vy = 0;
//tmp_mc._y = 40;

tmp_mc.onEnterFrame = function() {
Vy += gravity;
this._y += Vy/4;

if (this._y > floor) {
this._y = floor;
Vy = -Vy;
}
}

}

/* rect_mc.onPress function - activates when you click on the rectangle */

tmp_mc.onPress = function() {
this.startDrag();
}

/* rect_mc.onRelease function - activates when you release the mouse */

tmp_mc.onRelease = function() {
this.stopDrag();
}
// Draw circle method

MovieClip.prototype.drawCircle = function (r, x, y) {
var TO_RADIANS:Number = Math.PI/180;
// begin circle at 0, 0 (its registration point) -- move it when done
this.moveTo(0, 0);
this.lineTo(r, 0);

// draw 12 30-degree segments
// (could do more efficiently with 8 45-degree segments)
var a:Number = 0.268; // tan(15)
for (var i=0; i < 12; i++) {
var endx = r*Math.cos((i+1)*30*TO_RADIANS);
var endy = r*Math.sin((i+1)*30*TO_RADIANS);
var ax = endx+r*a*Math.cos(((i+1)*30-90)*TO_RADIANS);
var ay = endy+r*a*Math.sin(((i+1)*30-90)*TO_RADIANS);
this.curveTo(ax, ay, endx, endy);
}
this._x = x;
this._y = y;
}

[neo_philiac]

Any Help? Please !! :(

[neo_philiac]

Sorry it took me a while. Here is the fla file.

here you go... hey, Medyman can you take a look at this?

http://www.mntp.pitt.edu/Personal%20Pages/personal.html

Thanks

[Medyman]

1. The bouncing effect needs angular movement (so, if I say it to bounce along the 30 deg it should bounce along the 30 degree line)

I'm not 100% sure what you mean. If you wan't some sort of 3D movement, that's not going to be possible with mc_tween. You need a 3D engine -- PaperVision, Sandy3D...something like that.

But, if you're just talking about 2D movement. You'll need to figure out the math...but I image if you tween both the x and y axis at the same time and the same distance, you'll achieve what you want. Look into the slideto() method of mc_tween (http://hosted.zeh.com.br/mctween/doc_slideto.html).


2. I need the bouncing to stop whenever I create a new line.
A couple of ways to do that -- stopTween() (http://hosted.zeh.com.br/mctween/doc_stoptween.html), onTweenComplete() (http://hosted.zeh.com.br/mctween/doc_ontweencomplete.html), onTweenUpdate() (http://hosted.zeh.com.br/mctween/doc_ontweenupdate.html)


3. I need to draw the line and make the registration point in the middle. (in other words when I hit rotate it should rotate along the center. It does that now but its a little bit off.)

There is no way to change the registration point with ActionScript. Take a look at the following pages for some options:

http://www.kirupa.com/forum/showthread.php?t=70919
http://www.actionscript.org/forums/showthread.php3?t=64170&highlight=registration+point+dynamically

[neo_philiac]

Thank you

[neo_philiac]

One more thing


take a look at this function: (Its in the script)


/* On press bounces the shape */

bounce_Button.onRelease = function() {


var gravity = 100;
var floor = tmp_mc._y+200;
var Vy = 0;
//tmp_mc._y = 40;

tmp_mc.tween = function() {

Vy += gravity;
tmp_mc._y += Vy/4;

if (tmp_mc._y > floor) {
tmp_mc._y = floor;
Vy = -Vy;
}
}

}

How can i make it frame independent? So, I can either make it bounce for a certain period of time (in a for loop) but i encounter the problem of running slideTo() on both direction at the same time. Its not like I can slide the line to X direction and the come back for a certain time. How do I do it?

I was abel to do it by putting -- tmp_mc.tween = function() {

But I cant stop it with stopTween().


Please help.

[neo_philiac]

OK i have been able to do that this way,



bounce_Button.onRelease = function() {
while (i<=2){

tmp_mc.slideTo((tmp_mc._x+100),undefined,1);

tmp_mc.onTweenComplete = function(){

tmp_mc.slideTo((tmp_mc._x-100),undefined,1);

tmp_mc.onTweenComplete = function(){

tmp_mc.stopTween();
}
}
i=i+1;
}
}


But ! without the while loop. If put the while loop, it crashes. It says it cant run the script. What am i doing wrong?

[Medyman]

It crashes because you're running a while loop inside of the for loop. So you're actually doing everything 2 or 3 times (depending on how your for loop is set up).

What's your reason for using the while loop? It looks like an if statement would be better used here.

[neo_philiac]

Thanks Medyman for all your replies. The answer is simple. I want to setup the time for iterated bounce. At this point without the while loop there is only one cycle. Say I want it to bounce for 10 sec. Thats is!

Thanks again!

[Medyman]

Thanks Medyman for all your replies. The answer is simple. I want to setup the time for iterated bounce. At this point without the while loop there is only one cycle. Say I want it to bounce for 10 sec. Thats is!

Thanks again!

Ahh, I see. In that case, I would probably use a function that would keep track of how many times the function has run and keep running it until the limit is set.

Maybe something like this:


var bounced:Number = 0;
function bounce(limit) {
if (bounced< limit) {
bounced++;
// Bounce Tween with 1 second
mc.onTweenComplete = function() { bounce(limit) };
}
else { trace ("limit expired") };
}

If you're only doing it once, you can get rid of the passed limit variable and just hard code the value, otherwise you can pass it dynamically. The limit would be how many times you want the function to run. So if you're doing 1 tween per second and want to run it for 10 seconds, the limit would be 10. If the tween is .5 seconds, the limit would be 20, etc...

You could also use a setInterval() that does pretty much the same thing as above.

Be sure to clear the "bounced" variable the first time you run it.

With this, I'm assuming you want the tween to run over and over again for a period of 10 seconds, not that one tween should run for 10 seconds.

Note: I just wrote the code above in the browser. There are probably some mistakes but the logic should work.

[neo_philiac]

Thanks but am I doing something wrong? Its not working - here is what i did


/* On press bounces the shape */

bounce_Button.onRelease = function() {

var bounced:Number = 0;
var limit:Number = 10;

function bounce(limit) {
if (bounced< limit) {
bounced++;
// Bounce Tween with 1 second

tmp_mc.slideTo((tmp_mc._x+100),undefined,1);

tmp_mc.onTweenComplete = function(){

tmp_mc.slideTo((tmp_mc._x-100),undefined,1);

tmp_mc.onTweenComplete = function(){

tmp_mc.stopTween();
}
}

tmp_mc.onTweenComplete = function() { bounce(limit) };
}
else { trace ("limit expired") };
}

[neo_philiac]

Medyman I need help!!!:eek:

[Medyman]

Post your .fla in it's current state and I'll have a look. It's impossible to get a sense of what's going on with just that small snippet.

There's nothing explicitly wrong in that code block. Whatever is happening is because of its interaction with the rest of your code.

[neo_philiac]

http://www.mntp.pitt.edu/Personal%20Pages/personal.html


Its the "New" one! I was trying different codes before i send it to you!

Thank you!

[Medyman]

Hey Neo...

Ok, I'm a little confused as to what you're trying to do with the block of code that you posted before...the bounce function.


bounce_Button.onRelease = function() {

var x_pos = tmp_mc._x;

tmp_mc.onEnterFrame = function() {

tmp_mc.slideTo((x_pos+100),undefined,1);

tmp_mc.slideTo((x_pos),undefined,1);
}

Your syntax is off, but basically what I can glean is that you want to move it back and forth 100 pixels. Is that correct?

This isn't a "bounce" as I would define it, so that's why I'm a little confused. A bounce, for me, would be if it dropped to the bottom and actually bounced ( as in the last three animation types of mcTween (http://hosted.zeh.com.br/mctween/animationtypes.html)).

[neo_philiac]

OK yeah you are right. All I want to do is to move back and forth 100px for a certain period of length. I should have made myself clear! The problem is they are both in sync (they r executed at the same time not one after the another)


tmp_mc.onEnterFrame = function() {

tmp_mc.slideTo((x_pos+100),undefined,1);

tmp_mc.slideTo((x_pos),undefined,1);
}

How do I overcome this?



Thanks

[Medyman]

Ok...
I *think* this will work for you.

Replace your entire bounce_Button.onRelease function with this:


bounce_Button.onRelease = function() {
mover();
}
var count:Number = 0;

function mover() {
var x_pos = tmp_mc._x;
if (count<10) {
tmp_mc.xSlideTo(x_pos+100, .5, "Linear")
tmp_mc.xSlideTo(x_pos, .5, "linear", .5, mover)
count++
trace(count + "seconds");
}
else {
count = 0;
}
}

[neo_philiac]

Hey you r tha man!

It works!!

THANKS! (Dont be scared if I come up with more questions!) :)