I need to create flash content dynamically- towards that need to build images. I need help on two points
a) are vector graphics always better than raster graphics on size/ do vector graphics take longer to render
b) do we have open-source tools to create fxg files to import into flex builder
rg
for your b) point: just use Inkscape SVG editor.
It will allows you to convert svg to fxg starting version 0.49 thanks to the svg2fxg plug-in.
In the mean time (version 0.48) you can install the svg2fxg plug-in manually:
Install Inkscape http://inkscape.org/download/
Get the 2 svg2fxg plug-in files from here:
http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/svg2fxg.inx
http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/svg2fxg.xsl
and copy them in Inkscape extension folder (C:\Program Files (x86)\Inkscape\share\extensions on Windows 7)
You can now start Inkscape and will get a new "File -> Save As -> Flash XML graphics (*.svg)" entry.
I successfully tested it and used the fxg generated assets in on IPhone: it works fine :-)
WRT b)
I don't know an OpenSource tool, however FXG is not hard to create by hand. Just look at the button skin for example and copy the FXG definitions and play around. FXG is pretty intuitive.
Found this handy FXG editor, the only one that ive found so far:
http://fxgeditor.7jigen.net/edit/id/309
Also downloadable as an AIR app:
http://labs.7jigen.net/2010/05/15/fxg-editor-air-app/
Another solution - use a good SVG editor such as SVG Edit or yEd, then convert SVG to FXG using S2F Converter.
Related
Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this:
http://raphaeljs.com/icons/
Update: in recent versions of Photoshop, there is a built-in option to export the image as SVG, which works well on paths and custom shapes. Just do:
File -> Export -> Export as... and select SVG in the file settings.
Original Answer:
Starting from Photoshop CC 14.2, you can create SVG files directly from Photoshop:
Create a file named generator.json with the content below in your user home folder.
Restart Photoshop and open your PSD file.
Activate the generator: File > Generate > Image Assets.
Rename your layer to <something>.svg.
The svg file will be created in the assets directory next to your PSD file.
Content for generator.json:
{
"generator-assets": {
"svg-enabled": true
}
}
Source: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/
Select and copy the path in Photoshop
Launch Adobe Illustrator
Create a new Document
Paste
Save as SVG
If you have Illustrator and have not created all the paths, however, it is probably easier to create them directly in Illustrator.
If you do not have Illustrator, you are probably better off using the free Inkscape SVG editor to draw your paths.
If you do already have the paths in Photoshop, and do not have Illustrator, the best I can think of is to turn on the Info palette in Photoshop select the path points one at a time and manually record the positions of the point itself as well as its handles, and from those manually create the path using absolute curveto commands, 'C' (for the points with handles) and absolute lineto commands, 'L' for those points that have no handles.
Another option is to save the file as EPS in photoshop making sure to have export vectors checked, and then loading that into illustrator and saving as SVG
All answers were good, but for me they were too much, there is an online tool provided by Adobe:
http://adobe.com/go/extract_tryitnow_en
All you have to do is upload /drag & drop/ your .psd file, choose the path layer and download as svg. And you can extract the svg path, d attribute in particular.
Then what I did is put the path into a g element, then scaled g and translated the path
For custom shapes, you may want to have a look at the recently released open-source script called Convert Custom Shapes File to SVG Set (for Photoshop CS3 or later), used to convert a custom shapes file (.csh) or a custom shapes preferences file (CustomShapes.psp) into a set of SVG files.
I was given an .ai file (Illustrator) with 2 styled words.
Is it possible for Photoshop or any image software to read the file and provide me with certain properties, such as font, size, decoration?
Adobe Fireworks has a Mobile Extension package for CS5, that includes a feature "CSS Properties". http://www.adobe.com/devnet/fireworks/articles/css3-mobile-pack-extracting.html
Most designers I work with use Photoshop. Fireworks can import those psd files, but the file is usually not suitble to extract css properties from. Haven't tried it with .ia files yet. For web design, everyone should use Fireworks, as that's the software that's designed to be used for the web. IA is for print, Ps is for image manipulation, Fw is for the web. There, I said it :).
Nope.............................
Try Adobe Dreamweaver or write your own HTML/CSS code, or a mixture of both. You can import things from Illustrator or Photoshop into Dreamweaver and create HTML pages.
I made a drawing in Illustrator and exported it as FXG file to be used in my Flex App which is working fine. But now I want to change some settings inside FXG programatically, namely changing color inside the FXG file. How do I do that?
If you are using a .fxg file you won't be able access anything inside of the file since the compiler optimizes it. You can almost think of it as an image file that can scale. Sounds like you might want to be using MXML Graphics, see this post for an explanation of the difference: http://help.adobe.com/en_US/flex/using/WS145DAB0B-A958-423f-8A01-12B679BA0CC7.html
Has anyone got experience in converting AS3 projects (no mxml) in Flex, to Flash CS4? Are there any resources out there as to what works in Flex Builder that doesn't work in Flash, and how to get the project running? I read somewhere that (for instance) certain Metadata tags don't work.
If I've got all my code in the src folder, should I just create the .fla file in that folder and basically copy all code from the .as file which launched the Flex project? Or create the .fla file somewhere else and point assign that src folder in the classpath? Also, not being familiar with the CS4 IDE, do I create a new Flash Project?
Thanks!
So here's the issue I'm having. The code in the Flex AS3 looks like this:
[Embed(source='C:/WINDOWS/Fonts/ArialBD.TTF', fontWeight = 'bold', fontName='ArialBold', unicodeRange='U+0020-U+0020,U+0021-...')] //a bunch of other unicode
public static var _VerdanaFontBold:Class;
[Embed(source='C:/WINDOWS/Fonts/Arial.TTF', fontWeight = 'regular', fontName='Arial', unicodeRange='U+0020-U+0020...')] //a bunch of other unicode
public static var _VerdanaFont:Class;
And in constructor of the extended textfield in which my text appears I have:
Font.registerFont(_VerdanaFontBold);
Font.registerFont(_VerdanaFont);
CS4 doesn't allow use of the Embed metadata. So I've commented that out. In CS4, I understand that I'm supposed to create a blank textfield in design mode, which I've done. I then can select fonts to embed. I've selected verdana (upper and lower case, punctuation, number, etc).
When I run the app in CS4, the textfield is blank.
What am I doing wrong? Do I need to give the verdana font an instance name of _VerdanaFont? I wouldn't think so, since I've had to comment out the Font.registerFont as well. The fact that I'm embedding the font in a blank textfield, and not the one that's called by the document class I've set, shouldn't matter, right -- the font should just be embedded in the swf and available for use. But it's blank.
Does anyone know what to do here?
Edit: Well given that the apparent reason this isn't working now has to do with fonts not showing up correctly, I better create that as a new Question. Also, there's a clearer description than the one in the link provided above regarding the document class, here: http://www.heaveninteractive.com/weblog/2008/03/04/introduction-to-the-document-class-in-actionscript-30-tutorial/
It really depends. If it's just a pure AS3 project that relies only on playerglobal.swc it should be fairly easy. Just copy your .as files and add them to your new project as Cameron has suggested.
If however you've written a pure AS3 Flex app that relies on any of the other SWCs (flex.swc, framework.swc, etc) it's not really possible, as CS4 can't use SWC files. If you google around you might find somebody who's disassembled the SWC into various .abc files and a SWF full of resources, but you'll probably end up having to embed the entire Flex framework and all support code into your final SWF, which will bloat it big-time.
I'm trying to use an SVG file in my Flex app - but it seems the best way to do that is to convert it to MXML. However, I cannot find an SVG to MXML converter. There seem to be a number of SVG to XAML converters (for Silverlight/C#), but I can't find anything analogous for Flash/Flex.
Any help would be appreciated.
Thanks,
Karthik
You should be able to Embed the SVG directly, without a converter.
yes, there are few libraries but i haven't come across any mature one-
- http://code.google.com/p/as3svgrendererlib/
- http://www.degrafa.org/
- http://code.google.com/p/svg-viewer/
- http://labs.zavoo.com/?p=65
Well, the SVG is an XML file, basically. So if you want to import it at runtime, you could read it as an XML file and then use the AS3 drawing API to render it. Check out this ActionScript 3 SVG renderer on Google Code!