• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Where to build data for path class?

New Here ,
Apr 24, 2010 Apr 24, 2010

Copy link to clipboard

Copied

Hi all!

I eas diving into the skinning some flex components and i founf that the small triangle on the combobox is made by a classe called Path with a bounch of numbers indicating theproperty Data.

Now, where can i make my own data?? I know that's SVG image format but on all design software that i have (Corel Draw X5 and AI CS4) every time i export or save as SVG file, with the code that is fenerated, there's no Data, Path, or anything similar.

An example:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
  x="0px" y="0px" width="612px" height="792px" viewBox="-145.534 -131.595 612 792"
  enable-background="new -145.534 -131.595 612 792" xml:space="preserve">
<defs>
</defs>
<g id="XMLID_2_">
<g>
  <polygon fill="#FFFFFF" points="185.136,215.825 144.575,259.965 157.945,318.405 103.425,293.476 51.985,324.245 58.855,264.695
   13.686,225.275 72.445,213.405 95.975,158.275 125.425,210.485   "/>
</g>
<g>
  <polygon fill="none" stroke="#000000" points="157.945,318.405 103.425,293.476 51.985,324.245 58.855,264.695 13.686,225.275
   72.445,213.405 95.975,158.275 125.425,210.485 185.136,215.825 144.575,259.965   "/>
</g>
</g>
<line fill="none" stroke="#000000" x1="0.466" y1="76.405" x2="105.466" y2="0.405"/>
<line fill="none" stroke="#000000" x1="105.466" y1="0.405" x2="203.466" y2="128.405"/>
<line fill="none" stroke="#000000" x1="203.466" y1="128.405" x2="23.466" y2="135.405"/>
<line fill="none" stroke="#000000" x1="23.466" y1="135.405" x2="0.466" y2="76.405"/>
</svg>


So, which one of you is going to explain to me how to generate my own simbol for my custom combobox this way?

Onde i saw a video talking about this but now that i need it i can't remember when...dam!!!

Hope you can help me!

LP

Views

1.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Apr 24, 2010 Apr 24, 2010

Copy link to clipboard

Copied

hi,

What I normal do with illustrator(i'm not very good with graphics programs ) is if I have an object I save as svg and it gives you a preview of the data, I just paste that into the data property of my path declaration.

David.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 24, 2010 Apr 24, 2010

Copy link to clipboard

Copied

Hi David, thank you for your reply.

I actualy tried that as well. But can you post an example of that code and which part o

f the code you will past it to Flex?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Apr 24, 2010 Apr 24, 2010

Copy link to clipboard

Copied

hi,

this is svg data in a flex path

<s:Group name="op_move" verticalCenter="0" horizontalCenter="0" width="36" height="36">

            <s:Path id="mv" data="M6.115,27.036L0,18l6.115-8.98v5.972c5.896,0,8.856-2.986,8.856-9.109H9.051L18,0l8.966,

5.883 h-5.972c0,6.123,2.986,9.109,9.059,9.109V9.02L36,18l-5.947,9.036v-6.072c-6.072,0-9.059,

3.036-9.059,9.159h5.972L18,36 l-9.152-5.877h6.124c0-6.123-3.062-9.159-8.856-9.159V27.036z"

fill="{defaultFill}" stroke="{defaultStroke}"/>

</s:Group>

this is the illustrator svg file

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve">
<path fill="none" stroke="#000000" d="M6.115,27.036L0,18l6.115-8.98v5.972c5.896,0,8.856-2.986,8.856-9.109H9.051L18,0l8.966,5.883
h-5.972c0,6.123,2.986,9.109,9.059,9.109V9.02L36,18l-5.947,9.036v-6.072c-6.072,0-9.059,3.036-9.059,9.159h5.972L18,36
l-9.152-5.877h6.124c0-6.123-3.062-9.159-8.856-9.159V27.036z"/>
</svg>
I just paste the d="......" from the ai svg into the path and change d= to data=, then I add the fills.
You can see the usage in this app http://gumbo.flashhub.net/pagedrop/ , load a local image then drag it onto the canvas, the dropped image has svg graphics that let you manipulate the image(they appear when you hover over the image)
David.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 24, 2010 Apr 24, 2010

Copy link to clipboard

Copied

Good!! How you did that???

I keep getting eveything than the path data.

Can you explain step by step?

I found a funny way to get it that is to AI, do the design i want, copy it (ctrl+c) and past it to Catalyst, then go to the Code View and there i can find the path data....but i'm sure that;s not the way that Adobe wants us to get the data path.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Apr 24, 2010 Apr 24, 2010

Copy link to clipboard

Copied

LATEST

hi,

I just use save to file then select svg, maybe AI CS5 is different to CS4 ?

if you want you can log into my PC and see what I do.

http://connectnow.acrobat.com/davidf57/testdev

David.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines