Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Draw with Flash

  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Draw with Flash

    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

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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/
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Draw with Flash-untitled.jpg  

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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/acti...rawing_api.htm
    http://www.kirupa.com/developer/acti...t/dragdrop.htm

    There are many more tutorials out there, but use the terms 'drawing api' and 'drag and drop' to find more.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #5
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!)



    Code:
    #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;   
    }

  • #6
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Any Help ? Please!!!
    Last edited by neo_philiac; 03-31-2008 at 04:53 PM.

  • #7
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #8
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry it took me a while:

    here you go...

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

    Thanks
    Last edited by neo_philiac; 04-03-2008 at 03:41 PM.

  • #9
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Can you also post the included file at the beginning?
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #10
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for taking a look at it.

    Here you go..


    http://www.mntp.pitt.edu/Personal&#37;20Pages/personal.html
    Last edited by neo_philiac; 04-07-2008 at 03:48 PM.

  • #11
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    I need the file mc_tween2.as still. This is the included file at the start.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #12
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts

  • #13
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Quote Originally Posted by neo_philiac View Post
    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

    Code:
       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

    Code:
    	  	tmp_mc.moveTo(0, (rectHeight));
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #14
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    Code:
    /*		
    		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

    Code:
    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!
    Last edited by neo_philiac; 04-10-2008 at 04:15 PM.

  • #15
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    You want to control the end point? What do you mean exactly, how long it is?
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •