Home Tutorials Forums Articles Blogs Movies Library Employment Press

 ActionScript.org Forums dynamic rounded rectangle
 Register FAQ Members List Social Groups Calendar Search Today's Posts Mark Forums Read

 01-27-2007, 02:58 PM #1 pbreah Registered User   Join Date: Jan 2007 Posts: 1 dynamic rounded rectangle I'm trying to make a lite version of the game of Word Search, but I'm having huge problems drawing the rounded rectangle to select a word on the Word Search. I have the formula for building the rounded rectangle, but the problems are: 1-) The rectangle doesn't follow exactly the direction (or angle) of the mouse coordinates, even through I used the Math.atan2(). 2-) I would like to limit the angles to 0, 45 and 90. The rounded rectangle must rotate with the mouse position in reference of the first coordinate that I clicked 3-) The scale of the rounded rectangle must be toward the angle of the mouse in reference of the first letter you clicked. This is the code I have so far: (the drawRoundRect method is bound to the onPress event of the grid) private function drawRoundRect():Void { var refGrid_mc:MovieClip = pParent_mc.mainGrid; var ellipse_mc:MovieClip; var nextDepth:Number = refGrid_mc.getNextHighestDepth(); var intId:Number; var xPos, startX:Number; var yPos, startY:Number; ellipse_mc = refGrid_mc.createEmptyMovieClip('ellipse'+nextDept h, nextDepth); xPos = Math.floor(refGrid_mc._xmouse/40); yPos = Math.floor(refGrid_mc._ymouse/40); startX = (xPos * 40) + 5; startY = (yPos * 40) + 5; trace('startX: '+startX); trace('startY: '+startY); trace('position: '+ "letter"+xPos+"_"+yPos); pIntId = setInterval(refreshRoundRect, 50, ellipse_mc, startX, startY) } private function refreshEllipse(ellipse_mc:MovieClip, x:Number, y:Number):Void { var width, height, round, rotation:Number; width = _root._xmouse - x; height = 20; /*if(height>width) { height -= width; width += height; height = width - height; }*/ round = 10; rotation = Math.atan2(-(_root._ymouse - y), _root._xmouse - x); ellipse_mc.clear(); ellipse_mc.lineStyle(1, 0x000000, 100); // Make sure the rectangle is at least as wide and tall as the rounded corners if (width < (round * 2)) { width = round * 2; } if (height < (round * 2)) { height = round * 2; } trace('rotation: '+rotation*180/Math.PI); // Convert the rotation from degrees to radians //rotation = Math.degToRad(rotation); // Calculate the distance from the rectangle's center to one of the corners // (or where the corner would be in rounded-cornered rectangles). // See the line labeled r in Figure 4-2. var r = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2)); // Calculate the distance from the rectangle's center to the upper edge of // the bottom-right rounded corner. See the line labeled rx in Figure 4-2. // When round is 0, rx is equal to r. var rx = Math.sqrt(Math.pow(width/2, 2) + Math.pow((height/2) - round, 2)); // Calculate the distance from the rectangle's center to the lower edge of // the bottom-right rounded corner. See the line labeled ry in Figure 4-2. // When round is 0, ry is equal to r. var ry = Math.sqrt(Math.pow((width/2) - round, 2) + Math.pow(height/2, 2)); // Calculate angles. r1Angle is the angle between the X axis that runs through // the center of the rectangle and the line rx. r2Angle is the angle between rx // and r. r3Angle is the angle between r and ry. And r4Angle is the angle // between ry and the Y axis that runs through the center of the rectangle. var r1Angle = Math.atan( ((height/2) - round) /( width/2) ); var r2Angle = Math.atan( (height/2) / (width/2) ) - r1Angle; var r4Angle = Math.atan( ((width/2) - round) / (height/2) ); var r3Angle = (Math.PI/2) - r1Angle - r2Angle - r4Angle; // Calculate the distance of the control point from the arc center for the // rounded corners. var ctrlDist = Math.sqrt(2 * Math.pow(round, 2)); // Declare the local variables used to calculate the control point. var ctrlX, ctrlY; // Calculate where to begin drawing the first side segment, and then draw it. rotation += r1Angle + r2Angle + r3Angle; var x1 = x + ry * Math.cos(rotation); var y1 = y + ry * Math.sin(rotation); ellipse_mc.moveTo(x1, y1); rotation += 2 * r4Angle; x1 = x + ry * Math.cos(rotation); y1 = y + ry * Math.sin(rotation); ellipse_mc.lineTo(x1, y1); // Set rotation to the starting point for the next side segment and calculate // the x and y coordinates. rotation += r3Angle + r2Angle; x1 = x + rx * Math.cos(rotation); y1 = y + rx * Math.sin(rotation); // If the corners are rounded, calculate the control point for the corner's // curve and draw it. if (round > 0) { ctrlX = x + r * Math.cos(rotation - r2Angle); ctrlY = y + r * Math.sin(rotation - r2Angle); ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1); } // Calculate the end point of the second side segment and draw the line. rotation += 2 * r1Angle; x1 = x + rx * Math.cos(rotation); y1 = y + rx * Math.sin(rotation); ellipse_mc.lineTo(x1, y1); // Calculate the next line segment's starting point. rotation += r2Angle + r3Angle; x1 = x + ry * Math.cos(rotation); y1 = y + ry * Math.sin(rotation); // Draw the rounded corner, if applicable. if (round > 0) { ctrlX = x + r * Math.cos(rotation - r3Angle); ctrlY = y + r * Math.sin(rotation - r3Angle); ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1); } // Calculate the end point of the third segment and draw the line. rotation += 2 * r4Angle; x1 = x + ry * Math.cos(rotation); y1 = y + ry * Math.sin(rotation); ellipse_mc.lineTo(x1, y1); // Calculate the starting point of the next segment. rotation += r3Angle + r2Angle; x1 = x + rx * Math.cos(rotation); y1 = y + rx * Math.sin(rotation); // If applicable, draw the rounded corner. if (round > 0) { ctrlX = x + r * Math.cos(rotation - r2Angle); ctrlY = y + r * Math.sin(rotation - r2Angle); ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1); } // Calculate the end point for the fourth segment, and draw it. rotation += 2 * r1Angle; x1 = x + rx * Math.cos(rotation); y1 = y + rx * Math.sin(rotation); ellipse_mc.lineTo(x1, y1); // Calculate the end point for the next corner arc, and if applicable, draw it. rotation += r3Angle + r2Angle; x1 = x + ry * Math.cos(rotation); y1 = y + ry * Math.sin(rotation); if (round > 0) { ctrlX = x + r * Math.cos(rotation - r3Angle); ctrlY = y + r * Math.sin(rotation - r3Angle); ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1); } Any help will be greatly appreciated. Thanks.

 Thread Tools Display Modes Rate This Thread Linear Mode Rate This Thread: 5 : Excellent 4 : Good 3 : Average 2 : Bad 1 : Terrible

 Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is Off HTML code is Off Forum Rules
 Forum Jump User Control Panel Private Messages Subscriptions Who's Online Search Forums Forums Home ActionScript Forums Group     ActionScript 3.0     ActionScript 2.0     ActionScript 1.0 (and below)     Simple Stuff (Newbies) Flash General Questions     Flash 10 General Questions     Flash 9 General Questions     Flash 8 General Questions     Other Flash General Questions Flex     Flex 2, 3 & 4     Flex 1 Extensions and Plugins     Components     JSFL - Extending Flash Desktop, Mobile and non-browser Environments     AIR (Apollo)     FlashLite / Portable Devices Development     Projectors and CDs Supporting Technologies     HTML and JavaScript     haXe     Server-Side Scripting     Flash Remoting     Flash Media Server General     Best Practices     Gaming and Game Development     Animation and Effects     Flashants Support Forum Community Boards     General Chat     Just for Kicks Challenges     Detention Flash In Action     Site Check     Cool Sites     Widgets Decommissioned     Projects and Positions CMS Forums     Announcements Board     Content Postings / Updates     Product Review Requests     CMS Technical Questions     Process Questions     Collaboration & Suggested Articles

 Similar Threads Thread Thread Starter Forum Replies Last Post martyf ActionScript 2.0 6 01-21-2009 07:40 PM SebCH Simple Stuff (Newbies) 4 01-13-2006 03:34 PM Bal Animation and Effects 1 07-21-2005 09:53 PM wharfrat ActionScript 2.0 3 07-04-2005 04:13 AM Big_Rich1 Other Flash General Questions 2 01-11-2005 02:11 PM

All times are GMT. The time now is 07:13 AM.

///