A Flash Developer Resource Site

Page 1 of 3 123 LastLast
Results 1 to 20 of 50

Thread: [CS3] drawing a line between circles

  1. #1
    Member
    Join Date
    May 2008
    Posts
    78

    [CS3] drawing a line between circles

    Ok I want to make a game where there are lots of circles that are all different colours and when you click on two circles that are the same colour a line is drawn between the two circles you clicked on.

    I know how to draw a line using actionscript 3 and I can make it draw the line between the two circles but it only works one way. So when I click circle 1 and then circle 2 it draws the line but if I click circle 2 and then circle 1 it doesnt work. How do I get it so it will draw the line no matter which circle I click first. also I am going to have lots of circle so how would I do this with more than two circles.

    Here is my .fla file

    Cheers,
    James
    Attached Files Attached Files

  2. #2
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,377
    Use an array. You'd have to manage this array on every click, seeing if the circle push()'d into the array after it is the same color as the one before it. If this is the case, you could do:

    Code:
    // initialize array
    circleArray = [];
    
    // every circle should have it's onRelease set to this template
    someCircle.onRelease = checkColor(someCircle);
    
    function checkColor(circleLastClicked) {
    	if (circleArray.length == 0) {
    		circleArray.push(circleLastClicked);
    	} else {
    		if (circleLastClicked.color == circleArray[0].color) {
    			circleArray.push(circleLastClicked);
    			drawCircles();
    		} else {
    			// erase first circle and start over
    			circleArray = [];
    		}
    	}
    }
    
    function drawCircles() {
    	// assuming array name of circleArray
    	lineStyle(YourLineStyleHere);
    	c1 = circleArray[1];
    	c2 = circleArray[0];
    	moveTo(c1._x,c1._y);
    	lineTo(c2._x,c1._y);
    	// remove the circles any way you prefer here
    
    	// then reset the array
    	circleArray = [];
    }
    Notice c1 was actually the LAST item in the circleArray, which is because push() puts the new circle at the END of the array.

    Every time you click on a circle you could do this:
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  3. #3
    Member
    Join Date
    May 2008
    Posts
    78
    I kind of understand your code but I am a little confused. Also A lot of that code doesnt work. I am using actionscript 3 and I think most of that code is actionscript 2 so can you please fix it up and also could you put it in a .fla so I can see it working.

    Cheers,
    James

  4. #4
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,139
    Code:
    function circleClick(evt:MouseEvent):void {
    
    	//add this circle to an array
    	//keep the array's length below 2.
    	
    	clickedCircles.length %= 2;
    	clickedCircles.push(evt.currentTarget as SimpleButton);
    	
    	drawLines();
    }
    
    function drawLines():void {
    	
    	line1.graphics.clear();
    	line1.graphics.lineStyle(3, 000000);
    	
    	var len:int = clickedCircles.length - 1;
    	
    	for(var i:int = 0; i < len; i++){
    		
    		var c1:SimpleButton = clickedCircles[i];
    		var c2:SimpleButton = clickedCircles[i + 1];
    		
    		line1.graphics.moveTo(c1.x, c1.y);
    		line1.graphics.lineTo(c2.x, c2.y);
    	}
    }
    
    var clickedCircles:Array = new Array();
    
    circle1_btn.addEventListener(MouseEvent.CLICK, circleClick);
    circle2_btn.addEventListener(MouseEvent.CLICK, circleClick);
    
    var line1:Shape = new Shape();
    addChild(line1);
    do the 'ol copy and paste.
    lather yourself up with soap - soap arcade

  5. #5
    Member
    Join Date
    May 2008
    Posts
    78
    thanks mr_malee

    The code works but how would I do this with more than two circles. If I had another two circles that were say red how would I make it so if the two green circles are clicked it will draw a line betewn the green circles and if the red circles are clicked it will draw a line between the red circles but if I click a red and then a green circle it will not draw the line.

    Could you re-post the code and could you put comments in it so I can understand it

    Cheers,
    James

  6. #6
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,139
    sure thing boss.

    Code:
    //circle event function
    
    function circleClick(evt:MouseEvent):void {
    	
    	//clear the graphics for new lines
    	
    	line1.graphics.clear();
    	
    	//convert the current object processing the event to a MovieClip
    	//a MovieClip is dynamic, meaning it can have unlimited properties which can be anything
    	//they are good for quick prototyping, 
    	//what you should do instead is create your circles as instances of a Circle class
    	//then you know what data the circle has/hasn't got.
    	
    	var clicked:MovieClip = evt.currentTarget as MovieClip;
    	
    	//check if we have clicked something already
    
    	if(lastClicked != null){
    		
    		//do some checks
    		//don't allow the same button to be clicked and two types must match.
    		
    		if(clicked != lastClicked && lastClicked.type == clicked.type){
    			
    			drawLines(lastClicked, clicked);
    		}
    	}
    	
    	//update the last object pressed
    	
    	lastClicked = clicked;
    }
    
    //simplified drawing between two movieclips.
    
    function drawLines(c1:MovieClip, c2:MovieClip):void {
    	
    	line1.graphics.lineStyle(3, 000000);		
    	line1.graphics.moveTo(c1.x, c1.y);
    	line1.graphics.lineTo(c2.x, c2.y);
    }
    
    //the initalize function for circles
    
    function addCircle(circle:MovieClip, type:String):void {
    	
    	circle.buttonMode = true;
    	circle.addEventListener(MouseEvent.CLICK, circleClick);
    	circle.type = type;
    }
    
    //store a pointer to the last clicked object
    
    var lastClicked:MovieClip;
    
    //initalize the circles in the "addCircle" function
    //that function assigns the mouseEvent, turns the circle into a button and sets it type
    
    addCircle(circle1, "green");
    addCircle(circle2, "green");
    addCircle(circle3, "red");
    addCircle(circle4, "red");
    
    //define a shape to draw into
    
    var line1:Shape = new Shape();
    addChild(line1);
    lather yourself up with soap - soap arcade

  7. #7
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,377
    Missed you saying it was AS3.
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  8. #8
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    I hate it as well when people just write cs3 in the title- because it says basicly nothing- what matters is if the code is in AS1/2 or AS3

  9. #9
    Member
    Join Date
    May 2008
    Posts
    78
    Quote Originally Posted by ImprisonedPride
    Missed you saying it was AS3.
    You need to read more carefully next time.

    Quote Originally Posted by renderhjs
    I hate it as well when people just write cs3 in the title- because it says basicly nothing- what matters is if the code is in AS1/2 or AS3
    That is why I said in my post that I am using Actionscript 3 so everybody knew which Actionscript I was using.


    I still dont get the code. What if I made all the circles the same colour then I will not need to check if the two circles being pressed are the same colour because I think I could still work with that. So all I would need to do then is make it so two circles can be clicked and it will draw a line between the two clicked circles.

    Cheers,
    James

  10. #10
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,139
    maybe you should tell us what you're trying to achieve. I can't read your mind so I have no idea what you're trying to do. You ask for things, and I've shown you how to do those things, and nothing more.
    lather yourself up with soap - soap arcade

  11. #11
    Member
    Join Date
    May 2008
    Posts
    78
    Sorry, let me start again.

    I originally wanted to have a number of circles, say 10 that were all different colours and when you clicked on two circles that are the same colour it would draw a line between them. If you clicked two circles that are different colours then it would not draw a line because the two circles are different colours.

    The code you gave me mr malee I dont quite understand and I have changed my mind. Instead of making all the circles different colours they are now all going to be the same colour and what I want is when two circles are clicked it will draw a line between them. So when say circle 1 and 2 are clicked it will draw a line between those two circles. Then a new line will begin from the last clicked circle, in this case circle 2. then when another circle is clicked, say circle 3 it will draw a line from circle 2 which was the last clicked circle to circle 3 and so on. Once all the circles have been connected by drawing a line between them it will then go to the next scene/frame/level what ever.

    Does this make sense now, if not I can explain it again

    Cheers,
    James

  12. #12
    Developer
    Join Date
    Apr 2007
    Location
    UK
    Posts
    324
    Quote Originally Posted by Gathanderoth
    You need to read more carefully next time.
    You didn't implictly say you were using AS3, only that you knew how to draw a line in AS3. You could have easily found code to do that in AS3 but wanted to do that in AS2.

    It'd be much better to put AS3 in the title next time.
    now known as dVyper

  13. #13
    Member
    Join Date
    May 2008
    Posts
    78
    Quote Originally Posted by Cortana
    You didn't implictly say you were using AS3, only that you knew how to draw a line in AS3. You could have easily found code to do that in AS3 but wanted to do that in AS2.

    It'd be much better to put AS3 in the title next time.
    Ok I am using Actionscript 3. There do you understand now

    So does anybody know

  14. #14
    Senior Member webgeek's Avatar
    Join Date
    Sep 2000
    Posts
    1,352
    A suggestion - don't be terse or pushy with people that are giving you source code.

  15. #15
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,377
    Nice leet post count, webgeek.
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  16. #16
    Member
    Join Date
    May 2008
    Posts
    78
    Quote Originally Posted by webgeek
    A suggestion - don't be terse or pushy with people that are giving you source code.

    Im not being pushy. Im just making sure everybody knows what I wantg and that im using actionscript 3

    so now that everybody knows that can we work ion getting the code I neeed

    Cheers,
    James

  17. #17
    Member
    Join Date
    May 2008
    Posts
    78
    ok lets make this simple I what to make a connect the dots game where there are a number of dots and when two dost are clicked it will draw a line between them. All the dots must be connected to win.

    If someone could post the code for this with comments than that will be all.

    Cheers

  18. #18
    Developer dVyper's Avatar
    Join Date
    Oct 2008
    Location
    UK
    Posts
    168
    I think this tutorial on the drawin api should help:
    http://www.gotoandlearn.com/play?id=52

  19. #19
    Member
    Join Date
    May 2008
    Posts
    78
    ok thanks I shall have a look and see if it helps

  20. #20
    Member
    Join Date
    May 2008
    Posts
    78
    Quote Originally Posted by dVyper
    I think this tutorial on the drawin api should help:
    http://www.gotoandlearn.com/play?id=52
    Thanks dVyper but that tutorial didnt help. I already know how to draw lines and it was in actionscript 2 and I am doing it in actionscipt 3.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center