Skip navigation
Currently Being Moderated

How do I create a custom arrow-shaped rectangle in MXML?

Jun 29, 2013 7:35 PM

Tags: #flex_mobile #flex4.6 #mxml_code

I know that the common answer is to create a skin, and I know that this is correct. However, I am not sure of the process that I need to take to actually create the arrow-shaped rectangles in the MXML skin.

I don't know how to create the arrow shape at the end of the rectangles. These rectagles should also be somewhat like a progress bar. They are in a mobile app that I am working on, and their purpose is to show the user to where they are in the list of a few steps that they must take. The bottom line is that I just need to know how to create the arrow shape at the end of the rectangles. Any suggestions?

 
Replies
  • Currently Being Moderated
    Jun 29, 2013 10:47 PM   in reply to ic3man7019

    You can use Path to draw a triangle.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 11:54 AM   in reply to ic3man7019

    To create a Path object you first need to draw out your arrow using the standard drawing api, then convert the instructions into the vector format used by the the Path command.  Once you do that you can create a new arrow anywhere you want at any rotation, scale etc. using the methodsof the path command.

     

     

    First, you nee an arrow though.  This might help. 

     

     

     

     

    var arrow:Shape = new shape;

    arrow.graphics.beginFill(0xFF0000)

    arrow.graphics.moveTo(0,40);

    arrow.graphics.lineTo(40,0);

    arrow.graphics.lineTo(40,20);

    arrow.graphics.lineTo(140,20);

    arrow.graphics.lineTo(140,60);

    arrow.graphics.lineTo(40,60);

    arrow.graphics.lineTo(40,80);

    arrow.graphics.lineTo(0,40);

    myDisplayObject.addChild(arrow);

     

     

     

     

    The old way would be to create a new Arrow Class, then apply transforms (like rotation and scale) to arrow instances, but the advanced drawing api is much better.

     

    To turn your arrow into a path, go here: http://help.adobe.com/en_US/as3/dev/WSA8BD9022-BAB1-46d3-9B26-0D964974 3C8E.html

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points