Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Handycam

Tranformable item with non-transformable "tool tip"

Recommended Posts

I need to have transform manager objects which, when selected, displays another object (sort of like a "tool tip", but I will use a component). This tip should only appear when selected, follow the object around when moved, but not scale or rotate if the object is scaled or rotated.

 

How should I approach this?

 

I am using Flex 4. I can't make the tip part of the object being added to my TM, since then it would be included in the bounding box and be affected.

Link to comment
Share on other sites

You'd probably need to listen for the SELECTION_CHANGE event and when things are selected, put your object on the stage and use an ENTER_FRAME event handler to reposition your object on every frame according to whatever logic you want (I'm not sure where exactly you want it positioned). When things are deselected, remove your object.

Link to comment
Share on other sites

I thought so.

 

How do i figure out which instance is selected, specifically information associated with it? I have used a function like this to add an item:

protected function addNewItem(img:String):void {
			var newImage:Image = new Image();
			newImage.source = "images/full/"+img;
			newImage.addEventListener(Event.COMPLETE, selectMe);
			newImage.x = 200;
			newImage.y = 200;
			myManager.addItem(newImage);
		}

 

When a user clicks a list of possible images, i get the "img" data point of xml the clicked item in the list, and pass it:

// add an item when clicked in the list
		protected function thumbList_changeHandler(event:IndexChangeEvent):void
		{
			var list:List = List( event.currentTarget );
			var img:String = event.currentTarget.selectedItem.@img;
			addNewItem(img);
			list.selectedIndex = -1;
		}

 

So, assume I also have a "name" property which is assigned to the newItem. How do I get this on selection change? I have tried

private function onSelectionChange(e:TransformEvent):void {
			for (var i : int = 0; i < myManager.selectedItems.length; i++) {
				trace(myManager.selectedItems[i].name);
			}

 

But get null or undefined.

Link to comment
Share on other sites

The TransformManager's "selectedItems" refer to TransformItem instances, not your targetObjects. For those, you can use selectedTargetObjects. Or use each TransformItem's "targetObject" property to find out which DisplayObject it controls.

 

Also keep in mind that each TransformEvent contains an "items" array that refers to the TransformItems that were affected by the event. So you can loop through that array and get whatever data you need (each targetObject, which ones are selected, etc.)

 

Does that help?

Link to comment
Share on other sites

Yes, that's very helpful.

 

I have done some more with this. For example, my xml file for my selection list might have an entry like


 

So, my list currently uses @img and @name. Click an item uses this:

// add an item when clicked in the list
		protected function itemList_changeHandler(event:IndexChangeEvent):void
		{
			var list:List = List( event.currentTarget );
			var img:String = event.currentTarget.selectedItem.@img;
			var name:String = event.currentTarget.selectedItem.@name;
			var id:String = event.currentTarget.selectedItem.@id;
			addNewItem(img, name, id);
			list.selectedIndex = -1;
		}

 

And addNewItem is

protected function addNewItem(img:String, name:String, id:String):void {
			var newImage:Image = new Image();
			newImage.source = "images/full/"+img;
			newImage.x = 100;
			newImage.y = 200;
			newImage.name = name;
			newImage.id = id;
			newImage.toolTip = name;
			myManager.addItem(newImage);
		}

 

Everything works, I'd get an image of pizza14, correct tooltip. So now in the selectionChange handler:

private function onSelectionChange(e:TransformEvent):void {
			for (var i : int = 0; i < myManager.selectedItems.length; i++) {
				trace(myManager.selectedTargetObjects[i].id);
				var objID:String = myManager.selectedTargetObjects[i].id;
				snapTip(objID)
}
			}

private function snapTip(s:String):void {
			var msg:String = dataList..food.(@id==s).@description;
			Alert.show(msg);
		}

 

That last part is a little kloodgy; what I want to do is figure out which xml node is associated with that transform object, and display other data attributes. That e4x expression seems to work, but I'd love to come up with a cleaner way.

 

Eventually, however, I need to replace the Alert with a different component and have that component (e.g. a Panel) snap to a fixed position above the currently selected item and above it. Sort of like a Tool Tip, but I need users to interact with it.

 

The goal is to have a panel with action items on it for the selected item, such as "view more info" or "visit web site". I only want this panel to appear when the given item is selected.

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.
×