Jump to content
Sign in to follow this  
music_lp90

Allow user to rotate movieclip

Recommended Posts

First off, here's the link to the project I am working on: http://www.webtests.info/planCreator.html if it helps you to see it.Right now, the user can enter in how long the rectangle will be, then click create and it gives them the rectangle at the specified length. The width will always remain constant. They can then drag and drop this shape around and it snaps to a grid to make alignment easier. The next piece of functionality I need is to allow the user to rotate the shape. How might I go about this? Can I somehow create anchor points at the ends of the shape for them to click on and rotate? I would like to rotate at maybe 5 degree increments. One of my problems is onPress is used for dragging the shape, so if I try to use onPress, the shape is no longer draggable.I would also like for the user to be able to save their project. Can you give me some general direction about how to go about this? Here's my code:

/*NOTES5 pixels equals 1 foot*///Countersvar $i = 2000;var $dynamicName = "a" + $i;//datavar $placeWallX = 10;var $placeWallY = 590;//colorsvar $wallColor = 0x663300;//EVENTSmc_draw.onPress = function() : Void {	$dynamicName = "a" + $i;	$i++;	/*instanceName, layer, Xwidth, Yheight, Xplacement, Yplacement, drag */  	newRect($dynamicName, $i, int(mc_length.text) * 12, 6, $placeWallX, $placeWallY, $wallColor, "yes");}//User Functions// Shape Functions//Create Rectangle functionfunction newRect(instanceName, layer, $x, $y, $startX, $startY, $color, $drag, $opacity){	$x+=$startX; /*correct the offset for placement since object starts at (10,10)*/	$y+=$startY; /*correct the offset for placement since object starts at (10,10)*/	if ($opacity == undefined){		$opacity = 100;	}	//Draw Shape	var instanceName = createEmptyMovieClip(instanceName, layer);	instanceName.beginFill($color, $opacity);	instanceName.moveTo($startX, $startY);	instanceName.lineTo($x, $startY);	instanceName.lineTo($x, $y);	instanceName.lineTo($startX, $y);	instanceName.lineTo($startX, $startY);	instanceName.endFill();	//Drag Shape	if ($drag == "yes"){		drag(instanceName);		drop(instanceName);	}}//Drag and drop functions. Should be able to apply to any movieclipfunction drag(a){	a.onPress = function(): Void {	this.startDrag();	}}function drop(a){	a.onRelease = function(): Void {	this.stopDrag();	//Snap to grid	var g_gridSpacing = 6;	var X = this._x; // Reference X Pos	var Y = this._y; // Reference Y Pos	this._x = Math.round(X/g_gridSpacing) * g_gridSpacing; // Round to nearest GridSpace (Default 20)	this._y = Math.round(Y/g_gridSpacing) * g_gridSpacing; // Round to nearest GridSpace (Default 20)	}}

Thanks!

Share this post


Link to post
Share on other sites

Your onPress function will need to determine where they are clicking and either do drag or rotate. For saving, the only thing that Flash can save is a shared object, which will only be available on the computer where it was saved. It's not practical to copy shared objects from one computer to another, they are buried pretty deep in the application data folder.

Share this post


Link to post
Share on other sites

I was thinking maybe there was some way to save the info into an xml file. Would that be possible? I'll see if I can figure out how to tell where the movieclip is being clicked to rotate it. Thanks!

Share this post


Link to post
Share on other sites

When we have a Flash application save to an XML file we send the XML data to a PHP page which just sends back a few headers and spits the data out for the user to save. Flash doesn't have a way to do that itself. We use a file like this to prompt the user to save:

<?phpif (isset($_GET['data']))  $data = $_GET['data'];else  $data = $_POST['data'];  if (get_magic_quotes_gpc())  $data = stripslashes($data);  if (stripos($data, 'xml') !== false)  $ext = 'xml';else  $ext = 'txt';header('Cache-Control: "no-cache, must-revalidate"');header('Content-type: application/octet-stream');header('Content-disposition: attachment; filename="data.' . $ext . '"');header('Content-length: ' . strlen($data));echo $data;?>

Share this post


Link to post
Share on other sites

Okay, I'm starting to get somewhere with the rotation, but I'm not sure why it doesn't rotate on its center. To rotate the user must hold down the shift key and then click the shape. It rotates, but it shifts to the left and up quite a bit. Does this have to do with the registration point? It's a dynamically created movieclip, so how can I tell what the registration point is?Here's the link so you can see what happens when you try to rotate it: http://www.webtests.info/planCreator.htmlHere's the code for the rotation:

function drag(a){	a.onPress = function(): Void {		this.startDrag();		if (Key.isDown(Key.SHIFT)) {		   a._rotation += 5;		   a._x += 20;		   a._y += 20;		   a.stopDrag();		}		if (Key.isDown(Key.CONTROL)) { //NEEDS TO BE TWEAKED		   a._rotation += 20;		   		   a.stopDrag();		   a._x = 200;		   a._y = 200;		}		if (Key.isDown(Key.RIGHT)) {		   a._xscale += 3;		   a.stopDrag();		}		if (Key.isDown(Key.LEFT)) {		   a._xscale -= 3;		   a.stopDrag();		}	}}

Here's the entire code if that helps:

/*NOTES12 pixels equals 1 foot*///Countersvar $i = 200;var $dynamicName = "a" + $i;//datavar $placeWallX = 10;var $placeWallY = 590;//colorsvar $wallColor = 0x000000;var $windowColor = 0x66ccff;//EVENTSmc_draw.onPress = function() : Void {	$dynamicName = "a" + $i;	$i++;	/*instanceName, layer, Xwidth, Yheight, Xplacement, Yplacement, drag */  	newRect($dynamicName, $i, int(mc_length.text) * 12, 6, $placeWallX, $placeWallY, $wallColor, "yes", 60);}mc_drawV.onPress = function() : Void {	$dynamicName = "a" + $i;	$i++;	/*instanceName, layer, Xwidth, Yheight, Xplacement, Yplacement, drag */  	newRect($dynamicName, $i, 6, int(mc_length.text) * 12, $placeWallX, $placeWallY, $wallColor, "yes", 60);}btn_window.onPress = function() : Void {	$dynamicName = "a" + $i;	$i++;	/*instanceName, layer, Xwidth, Yheight, Xplacement, Yplacement, drag */  	newRect($dynamicName, $i, 36, 6, $placeWallX, $placeWallY, $windowColor, "yes", 60);} mc_addText.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, mc_cstmLabel.text);}mc_kitchen.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, "Kitchen");}mc_living.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, "Living");}mc_dining.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, "Dining");}mc_bedroom.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, "Bedroom");}mc_loft.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, "Loft");}mc_garage.onPress = function() : Void {	$i++;	$dynamicName = "label" + $i;	mc_label($dynamicName, $i, "Garage");}//User Functions// Shape Functions//Create Rectangle functionfunction newRect($instanceName, layer, $x, $y, $startX, $startY, $color, $drag, $opacity){	$x+=$startX; /*correct the offset for placement since object starts at (10,10)*/	$y+=$startY; /*correct the offset for placement since object starts at (10,10)*/	if ($opacity == undefined){		$opacity = 100;	}		//Draw Shape	var instanceName = createEmptyMovieClip($instanceName, layer);	instanceName.beginFill($color, $opacity);	instanceName.moveTo($startX, $startY);	instanceName.lineTo($x, $startY);	instanceName.lineTo($x, $y);	instanceName.lineTo($startX, $y);	instanceName.lineTo($startX, $startY);	instanceName.endFill();	//Drag Shape	if ($drag == "yes"){		drag(instanceName);		drop(instanceName);	}}//Drag and drop functions. Should be able to apply to any movieclipfunction drag(a){	a.onPress = function(): Void {		this.startDrag();		if (Key.isDown(Key.SHIFT)) {		   a._rotation += 5;		   a._x += 20;		   a._y += 20;		   a.stopDrag();		}		if (Key.isDown(Key.CONTROL)) { //NEEDS TO BE TWEAKED		   a._rotation += 20;		   		   a.stopDrag();		   a._x = 200;		   a._y = 200;		}		if (Key.isDown(Key.RIGHT)) {		   a._xscale += 3;		   a.stopDrag();		}		if (Key.isDown(Key.LEFT)) {		   a._xscale -= 3;		   a.stopDrag();		}	}}function drop(a){	a.onRelease = function(): Void {		this.stopDrag();		//Snap to grid		var g_gridSpacing = 6;		var X = this._x; // Reference X Pos		var Y = this._y; // Reference Y Pos		this._x = Math.round(X/g_gridSpacing) * g_gridSpacing; // Round to nearest GridSpace (Default 20)		this._y = Math.round(Y/g_gridSpacing) * g_gridSpacing; // Round to nearest GridSpace (Default 20)		/* Could potentially use these values to store coordinates in XML file to save floor plan		var Xcoordinate = this._x;		var Ycoordinate = this._y;		*/	}}//Create Text Labelsfunction mc_label(dynamicName, layer, txt){	var a = createEmptyMovieClip(dynamicName, layer);	a.createTextField("my_txt", 1, 0,0,100,100);	a.my_txt.multiline = true;	a.my_txt.wordWrap = true;	a.my_txt.text = txt;	drag(a);	drop(a);	a._x = 10;	a._y = 590;	var my_fmt:TextFormat = new TextFormat();	my_fmt.color = 0x0000ff;	my_fmt.font = "arial";	my_fmt.size = 14;	a.my_txt.setTextFormat(my_fmt);}

Thanks for your help!

Share this post


Link to post
Share on other sites

Yeah it sounds like an issue with the registration point. Check the Flash reference for the MovieClip object to see if there's a method there to set the registration point, I've never done that.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...