Jump to content
GreenSock

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

Adding items, and adding them as selected

Recommended Posts

I am beginning to make a Flex 4 game with my newly-purchased Transform Manager.

 

What I will need to do is present a user with a tile list of images, and when the user clicks one, add it to the transform manager for positioning etc. Kind of like colorforms or dress-up paper dolls.

 

So in my initial testing, I have created a basic add an item function like:

protected function button1_clickHandler(event:MouseEvent):void
		{
			var newImage:Image = new Image();
			newImage.source = "Sunflower.gif";
			newImage.id = "image2";
			myManager.addItem(newImage);
			newImage.x = 100;
			newImage.y = 200;
		}

 

This seems to work. A new sunflower is added on each click, and I can then transform it. Very sweet!

 

Is this the proper way to go about this sort of process? And how would I make the new object appear as "selected" immediately upon adding it?

Link to comment
Share on other sites

Sure, to select the item right away, you can just use the selectItem() method, like:

 

myManager.addItem(newImage);
myManager.selectItem(newImage);

 

There are other ways you could do it too, but this is probably the most straightforward one :)

 

Enjoy!

Link to comment
Share on other sites

I tried that, but it didn't seem to work. I notice now that it is, in fact, selected, except there is no bounding box (or, there is an incorrect one):

 

Xtv

 

If I de-select it and then click again, I get the correct transform frame:

 

XtD

Link to comment
Share on other sites

Two things can cause this:

 

1) If you moved/transformed the item directly after adding the item to TransformManager and forgot to call the update() method on the TransformItem to force it to calibrate

 

2) If you're dynamically loading the asset and add it to the TransformManager BEFORE it has finished loading and initializing (because TransformManager can't accurately measure its size/position until it is fully loaded and initialized).

 

Again, the update() method will force a calibration, but that won't help if the asset hasn't finished loading/initializing.

Link to comment
Share on other sites

This is all I am doing:

<?xml version="1.0" encoding="utf-8"?>
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="955" minHeight="600" xmlns:transform="com.greensock.transform.*" creationComplete="init()">












Link to comment
Share on other sites

When you do this:

 

var newImage:Image = new Image();
newImage.source = "Sunflower.gif";

 

It must load Sunflower.gif which takes time. It's not immediate. But you're trying to call update() when the image hasn't even loaded yet. And when you selectItem() immediately like that, it's trying to select Sunflower.gif even though it hasn't fully loaded and instantiated yet, so TransformManager has no idea how big it is. You must add a listener to your Image so that AFTER it fully loads and instantiates, THEN you addItem() and selectItem(). Make sense?

Link to comment
Share on other sites

I get the concept, if not the methodology. I tried this, but I'm not sure how to then get the TransformItem I want highlighted from the first function to the second:

 

protected function addNewItem(src:String):void
		{
			var newImage:Image = new Image();
			newImage.source = src;
			newImage.addEventListener(FlexEvent.UPDATE_COMPLETE, selectMe);
			myManager.addItem(newImage);
			newImage.x = 100;
			newImage.y = 200;
		}

		private function selectMe(e:FlexEvent):void {
			trace("update complete");
		}

Link to comment
Share on other sites

Frankly, I'm not a Flex guy, but I'd guess it'd be something like:

 

protected function addNewItem(src:String):void {
           var newImage:Image = new Image();
           newImage.source = src;
           newImage.addEventListener(FlexEvent.UPDATE_COMPLETE, selectMe);
           newImage.x = 100;
           newImage.y = 200;
}

private function selectMe(e:FlexEvent):void {
    e.target.removeEventListener(FlexEvent.UPDATE_COMPLETE, selectMe);
    var item:TransformItem = myManager.addItem(e.target);
    myManager.selectItem(item);
}

Link to comment
Share on other sites

No, doesn't work. Complains with the line var item:TransformItem = myManager.addItem(e.target); cannot coerce item object to item display object.

 

I give up. Let's say in most cases I know the size of the image I am adding. Then, why wouldn't this work:

protected function addNewItem(src:String):void
		{
			var newImage:Image = new Image();
			newImage.source = src;
			myManager.addItem(newImage);
			newImage.width = 48;
			newImage.height = 48;
			newImage.x = 100;
			newImage.y = 200;
			myManager.selectItem(newImage);
		}

Link to comment
Share on other sites

That error just means you need to cast the target like this:

 

var item:TransformItem = myManager.addItem(e.target as DisplayObject);

Link to comment
Share on other sites

I am using the wrong event I think. So I am abandoning that methodology.

 

I would rather just specify the width and height of the image, so that the transform item will be the right size. So why does this not work?

protected function addNewItem(e:MouseEvent):void {
			var newImage:Image = new Image();
			newImage.source = "Spiked.gif";
			newImage.x = 100;
			newImage.y = 200;
			newImage.width = 48;
			newImage.height = 48;
			myManager.addItem(newImage);
			myManager.selectItem(newImage);
		}

 

I can also embed the image, which also works but is less than practical.

[Embed(source="Sunflower.gif")]
public static const flower:Class;			

		protected function addNewItem(e:MouseEvent):void {
			var newImage:Image = new Image();
			newImage.source = flower;
			newImage.x = 100;
			newImage.y = 200;
			myManager.addItem(newImage);
			myManager.selectItem(newImage);
		}

Link to comment
Share on other sites

It likely won't work by just setting the width/height because getBounds() won't accurately reflect that - it's dummy data that doesn't accurately reflect the reality of the object. See what I mean?

 

Just so you know, tons of people use dynamically-loaded images/assets with TransformManager, so it's very doable. I believe that most people use the Loader or FlexLoader, but I believe the Image object works fine too - just listen for the Event.COMPLETE event.

Link to comment
Share on other sites

I see. This seems to work:

			protected function addNewItem(e:MouseEvent):void {
			var newImage:Image = new Image();
			newImage.source = "Spiked.gif";
			newImage.addEventListener(Event.COMPLETE, selectMe);
			newImage.x = 100;
			newImage.y = 200;
			myManager.addItem(newImage);
		}

		private function selectMe(e:Event):void {
			var item:TransformItem = myManager.addItem(e.target as DisplayObject);
			myManager.selectItem(item);
			e.target.removeEventListener(Event.COMPLETE, selectMe);
		}

This adds the item and correctly selects it.

 

But only when I have the "addItem" in the first function. If it's only in the second, nothing gets added (although the handler is called). Seems odd that I have "addItem" twice, although there seems to be (correctly) only one image.

Link to comment
Share on other sites

Not sure - maybe the e.target should be e.currentTarget. I'd need to see your project to troubleshoot further. Glad to hear you got it working, though.

Link to comment
Share on other sites

Not sure - maybe the e.target should be e.currentTarget.

 

I tried that. But, it should be noted that this works:

var item:TransformItem = myManager.addItem(e.target as DisplayObject);
           myManager.selectItem(item);

 

So it is getting the object that should be selected. It just doesn't appear on the stage unless added in the first function.

 

I'd need to see your project to troubleshoot further

Sure, here's the project.

Link to comment
Share on other sites

The problem has to do with the fact that Flex apparently doesn't dispatch Events for Image objects that aren't in the display list. Very frustrating. Sure seems like a bug to me. When you addItem(), Flex is smart enough to add it to the display list if it's not already there, so that's why it worked for you only when you used addItem() in the first function.

 

Hope that clears things up.

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