Using the Path Command in Flex 4 to Draw Shapes like Stars and Arrows

8 Sep
2008
Delicious

This Example and tag are pretty self-explanatory and can’t be explained much without looking at the code. All it does is you give it coordinates and it plots them. Example <Path data=”M 55 0 L 67 36 L 109 36 L 73 54 L 83 96 L 55 72 L 27 96 L 37 54 L 1 36 L 43 36 Z”> This draws a Star. M stands for Move To, L stands for Line to and Z stands for stop/Close line you can read more about it here.This is alot easier than having to use the lineTo and moveTo commands. It’s pretty concise. Here is the Code and Sample. As Usual Flash Player 10 to view it. First Data path draws a Star and Second Data path draws an arrow, more examples on the way. Here is Where you can Ask Questions if you have any. 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:adobe/flex/halo"
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:ns="library:adobe/flex/gumbo" 
         xmlns:local="*" 
         backgroundImage="{null}" 
                backgroundColor="0xFFFFFF">
 
	<!-- M Stands for MOVE, L 
              Stands for Line To, Z = Close, Read more
	      here http://opensource.adobe.com/
               wiki/display/flexsdk/FXG+1.0+Specification -->
<Group>
    <Path data="M 55 0 L 67 36 L 109 36 L 73 54 
                        L 83 96 L 55 72 L 27 96 L 37 54 
                        L 1 36 L 43 36 Z">
        <fill>
            <SolidColor color="#FFCC00" />
        </fill>
        <stroke>
            <SolidColorStroke weight="3" color="#0340FF" />
        </stroke>
    </Path>
</Group>
 
 
<Group>
    <Path data="M 80 20 L 120 20 L 120 10 
                    L 140 30 L 120 50 L 120 40 L 80 40 Z">
        <fill>
            <SolidColor color="#FFCC00" />
        </fill>
        <stroke>
            <SolidColorStroke weight="3" color="#0340FF" />
        </stroke>
    </Path>
</Group>	
</mx:Application>
Incoming Search Terms :flex 4 path , flex4 path , path flex 4 , flex 4 paths , flex 4 s:path , drawing shapes in flex , flex draw arrow , flex drawing shapes , flex 4 draw line , flex 4 shape

Share this story with a friend !
Join SherifAbdou's Rss Feed Stumble This Article! Add this to your Delicious Bookmarks! Digg this story ! Add this story to Reddit ! Tweet This Brush


2 Responses to Using the Path Command in Flex 4 to Draw Shapes like Stars and Arrows

Avatar

Fredericton Designers » Blog Archive » Using the Path Command in Flex 4 to Draw Shapes like Stars and Arrows

September 8th, 2008 at 9:16 am

[...] Link to the original site [...]

Avatar

avinashNo Gravatar

July 12th, 2010 at 2:02 am

i liked the above detail..simple and crisp…i”m trying to locate something which could move a point from(0,0) to (x,y) such that its a point in one state and animates and elongates from a point to a line to reach (x,y).. any suggestions..

Comment Form