...

View Full Version : Draw with Flash



neo_philiac
03-18-2008, 08:46 PM
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

gnomeontherun
03-18-2008, 10:37 PM
Do you want the user to draw the rectangle or circle (like you see in paint?) or do you want the actionscript to do it automatically?

As far as moving around: http://www.monkeyflash.com/flash/drag-and-drop/

neo_philiac
03-19-2008, 08:48 PM
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.

gnomeontherun
03-19-2008, 11:31 PM
Well short of writing the code, you would need to have two text input boxes (width and height), and then a submit button. When you click the button, it will call a function which will draw the box and apply a drag and drop property. I have two different tutorials which if you put together would do what you want for the most part.

http://www.kirupa.com/developer/actionscript/tricks/drawing_api.htm
http://www.kirupa.com/developer/actionscript/dragdrop.htm

There are many more tutorials out there, but use the terms 'drawing api' and 'drag and drop' to find more.

neo_philiac
03-28-2008, 08:49 PM
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
03-31-2008, 03:36 PM
Any Help ? Please!!! :(

gnomeontherun
03-31-2008, 09:36 PM
Could you post the fla so it is easier to see what you have going? Or if not could you link to an example swf so I can see what happens now? Thanks

neo_philiac
04-03-2008, 02:38 PM
Sorry it took me a while:

here you go...

http://www.mntp.pitt.edu/Personal&#37;20Pages/personal.html

Thanks

gnomeontherun
04-04-2008, 10:25 PM
Can you also post the included file at the beginning?

neo_philiac
04-07-2008, 02:44 PM
Thank you for taking a look at it.

Here you go..


http://www.mntp.pitt.edu/Personal&#37;20Pages/personal.html

gnomeontherun
04-07-2008, 08:28 PM
I need the file mc_tween2.as still. This is the included file at the start.

neo_philiac
04-08-2008, 02:37 PM
http://hosted.zeh.com.br/mctween/downloads.html

gnomeontherun
04-09-2008, 09:42 PM
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.)

Ok I can now see whats going on! I have to say I don't understand what you are asking about for #1.

#2 - Added the bolded part


createBtn.onRelease = function() {

if (tmp_mc) {
tmp_mc.stopTween("_x","_y");
delete tmp_mc.onEnterFrame;
}

text_mc.text = shapeGroup.selectedData;

#3 - Just delete the /2 here


tmp_mc.moveTo(0, (rectHeight));

neo_philiac
04-10-2008, 03:13 PM
Thank you very much.

I have a another question. I have been trying to use the slideTo() function because I want to control the end point of the shape.

So instead of


/*
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;
}
}
*/


I used this


bounce_Button.onRelease = function() {

tmp_mc.onEnterFrame = function() {

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

tmp_mc.onTweenComplete = function(){

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

tmp_mc.onTweenComplete = function(){

tmp_mc.stopTween();
}
}
}


But its not working ! What am I doing wrong? Please help! :(

gnomeontherun
04-10-2008, 09:38 PM
You want to control the end point? What do you mean exactly, how long it is?

neo_philiac
04-11-2008, 03:14 PM
Oh its nothing complicated i just want to give it the final position. like i want to just move from 0,0 to 135,458 or wherever I move the shape i want it to bounce from that position. Thats all!

gnomeontherun
04-11-2008, 09:13 PM
Your new function sends the object to the right forever instead of bounce. Why did you change it? If you change the location of the line while it is bouncing, it gets goofy though.

I thought it already bounced from that position where it started to a floor of 200px underneath its position. Sorry if I am not understanding correctly, I'm just reading through this thread and not getting what your goal is with the bounce.

neo_philiac
04-14-2008, 05:45 PM
I got it figured

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum