Jump to content
Search Community

handles and selection box not showing

Louissi test
Moderator Tag

Recommended Posts

Hi. I just bought TransformManager.

 

I am working on a flex project. The project is a map editor.

 

In my map editor, there is a component to create and manage objects. These objects are visual objects.

 

I have an object viewer, that is a simple .as class. This class is loading an external swf, creating a movie clip and displays it. My goal is to be able to scale and move the loaded mc, instead of having to enter its coordinates manually.

 

Here are some screenshots of the project:

 

http://screencast.com/t/NWU1YjQxZ

http://screencast.com/t/NmU3MTNhZD

http://screencast.com/t/MzllN2Qw

 

Here is the code of the component containing the viewer.as

(ObjectViewer.mxml)

<?xml version="1.0" encoding="utf-8"?>
	 xmlns:s="library://ns.adobe.com/flex/spark" 
	 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">






















 

And here is the viewer.as class

(viewer.as)

package net.louissi.Conflict.ObjectViewer
{
import com.greensock.transform.TransformManager;

import flash.display.MovieClip;
import flash.display.Sprite;
import flash.geom.Rectangle;

import mx.controls.SWFLoader;
import mx.events.ResizeEvent;

import net.louissi.Conflict.dataObjects.VisualObjectData;
import net.louissi.Conflict.utils.Data;
import net.louissi.Conflict.visual.VisualObject;

public class Viewer extends Sprite
{
	public function Viewer(loader:SWFLoader)
	{
		super();
		this.loader = loader;
		this.content = loader.content as MovieClip;
		gridSpacing = 25;
		scale = 1;
		objectDisplay = new MovieClip();
		limits = new MovieClip();
		this.content.addChild(objectDisplay);
		this.content.addChild(limits);
		this.content.mask = limits;
		transformManager = new TransformManager();
		/*
		transformManager.allowDelete = false;
		transformManager.allowMultiSelect = false;
		transformManager.forceSelectionToFront = false;
		transformManager.arrowKeysMove = false;
		transformManager.autoDeselect = true;*/
		//render background and stuff
		drawWindow();

	}

	public function updateObjectTransform(data:VisualObjectData):void{
		if(objectClip){
			objectClip.scaleX = data.scale;
			objectClip.scaleY = data.scale;
			objectClip.x = -data.centerX;
			objectClip.y = -data.centerY;
		}
		objectDisplay.x = centerX;
		objectDisplay.y = centerY;
	}
	public function resetObjectTransform():void{
		if(objectClip){
			objectClip.scaleX = 1;
			objectClip.scaleY = 1;
			objectClip.x = 0;
			objectClip.y = 0;
		}
		objectDisplay.x = centerX;
		objectDisplay.y = centerY;
	}
	public function loadObject(data:VisualObjectData,canTransform:Boolean = false):void{
		resetObjectTransform();
		if(objectClip){
			objectDisplay.removeChild(objectClip);
			objectClip.destroy();
		}
		//deal with the transform tool

		transformManager.removeAllItems();




		objectClip = new VisualObject(data);
		objectDisplay.addChild(objectClip);

		updateObjectTransform(data);

		if(canTransform){
			transformManager.addItem(objectClip);
		}

	}
	public function unLoad():void{
		if(objectClip){
			objectDisplay.removeChild(objectClip);
			objectClip.destroy();
		}
		objectClip = null;
	}
	public function setScale(scale:Number):void{
		this.scale = scale / 100;
		drawWindow();
	}
	private function drawWindow():void{
		w = loader.width;
		h = loader.height;
		centerX = w / 2;
		centerY = h / 2;
		content.graphics.clear();
		limits.graphics.clear();
		drawBackground();
		drawObject();
	}
	public function resizedWindow(e:ResizeEvent):void{
		w = loader.width;
		h = loader.height;
		centerX = w / 2;
		centerY = h / 2;
		drawBackground();
		drawObject();
	}
	private function drawGrid():void{
		var i:int;
		//draw the grid
		// --- >
		var spacing:Number = gridSpacing*scale;
		content.graphics.lineStyle(1,0xCCCCCC,1);
		for (i = centerX + spacing; i < w; i += spacing){
			content.graphics.moveTo(i,0);
			content.graphics.lineTo(i,h);
		}
		// < ---
		for (i = centerX - spacing; i > 0; i -= spacing){
			content.graphics.moveTo(i,0);
			content.graphics.lineTo(i,h);
		}
		// up
		for (i = centerY - spacing; i > 0; i -= spacing){
			content.graphics.moveTo(0,i);
			content.graphics.lineTo(w,i);
		}
		// down
		for (i = centerY + spacing ; i < h; i += spacing){
			content.graphics.moveTo(0,i);
			content.graphics.lineTo(w,i);
		}
		//draw the center cross
		content.graphics.lineStyle(1,0xEEEEEE,1);
		content.graphics.moveTo(centerX,0);
		content.graphics.lineTo(centerX,h);
		content.graphics.moveTo(0,centerY);
		content.graphics.lineTo(w,centerY);
	}
	private function drawBackground():void{
		content.graphics.clear();
		//update the background
		content.graphics.beginFill(0xAAAAAA,1);
		content.graphics.drawRect(0,0,w,h);
		content.graphics.endFill();

		//update the object mask
		limits.graphics.clear();
		limits.graphics.beginFill(0xAAAAAA,1);
		limits.graphics.drawRect(0,0,w,h);
		limits.graphics.endFill();

		drawGrid();
	}
	private function drawObject():void{
		objectDisplay.x = centerX;
		objectDisplay.y = centerY;
		objectDisplay.scaleX = scale;
		objectDisplay.scaleY = scale;
	}
	private var transformManager:TransformManager;
	private var limits:MovieClip;
	private var objectClip:VisualObject;
	private var objectDisplay:MovieClip;
	private var objectData:MovieClip;
	private var gridSpacing:Number;
	private var centerX:Number;
	private var centerY:Number;
	private var scale:Number;
	private var w:Number;
	private var h:Number;
	private var zoom:Number;
	private var content:MovieClip;
	private var loader:SWFLoader;
}
}

 

My problem is that the handles are not showing on the clip. I can move it around but thats it. I know there is a flex manager version of the transform tool, but it seems to only accept flex components as items. Any idea how to make it all work?

Link to comment
Share on other sites

I just bought the component and have exactly the same issue.

 

1) .as class

2) Wrapped in a Flex project

3) Shows move cursor and allows for movement, but

4) Doesn't show handles and selection box

 

Let me know what helped Louissi or if you would like me to send my source.

 

Thank you so much!

Link to comment
Share on other sites

Aha! Thanks for sending the sample. It helped me diagnose the issue relatively quickly. The problem was caused by the fact that Adobe decided to change the way children are added to DisplayObjectContainers in Spark components (Flex 4 only). Instead of remaining consistent with addChild()/removeChild()/setChildIndex(), they force the use of new addElement()/removeElement()/setElementIndex() methods. Yet another reason I'm not a fan of the Flex framework. Unbelievable. Anyway, I just updated TransformManager by adding conditional logic to sniff out whether the parent is a spark component or not. That seemed to fix the issue in your sample project. Thanks again for providing the files that helped diagnose things.

 

Log into your GreenSock account to get the latest version: http://www.greensock.com/account/

Link to comment
Share on other sites

  • 1 year later...

Thanks for posting that example - very helpful. It looks like it's another bug in the Flex framework that causes raw UIComponents inside other raw UIComponents not to display properly, but I just posted an update that should work around that issue. Please download it and let me know if it works well for you. https://www.greensock.com/account/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...