Question

I have the following component:

<?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas  xmlns:mx="http://www.adobe.com/2006/mxml" width="16" height="16" >
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;       
            public function init(i:Number):void {
                this.setStyle("backgroundColor", userFrame.colors[i]);
            }
        ]]>
    </mx:Script>
    <mx:Image x="0" y="0" width="16" height="16" 
        source="@Embed(source='../border16x16.png')"/>

    </mx:Canvas>

I then add it to the stage with addChild(block)
Then I want to move it by altering block.x which fails. How can I change my code to implement the moving effect?

Answer 1

You don’t have a variable, or component, named block in your sample, so I’m unclear what you’re trying to move.

If you want to move the image, first you’ll have to give it an ID:

<mx:Image id="myImage" x="0" y="0" width="16" height="16" source="@Embed(source='../border16x16.png')"/>

And then at some point, just change the x and y values to move it:

myImage.x = newXValue;
myImage.y = newYValue;

You can also use the move method:

myImage.move(newXValue, newYValue);

Keep in mind that x and y values are ignored in some Flex MX containers, such as HBox or VBox and in some Flex 4 Spark layouts, such as HorizontalLayout and VerticalLayout. In Spark, be sure to use a Basic Layout if you want to position elements using x and y. In Flex 3, be sure to use a container or a canvas for basic layout.