Flash Catalyst and Illustrator - vector shadows, gradients and primitives

July 29th, 2009

Everybody is asking me - how is it with converting vector shadows and gradients from Illustrator to Flash Catalyst.

Answer is YES, Flash Catalyst can do this. Thanks to new MXML 2009 graphic primitives library combined with powerful gradient fills and drop shadow - which are natively supported classes in ActionScript 3.0.

FAQ:
- Gradients are converted to LinearGradient Class or RadialGradient Class
- Shadows are converted to DropShadowFilter Class
- Rounded rectangles are converted to Paths (not RoundedRectangle Class - while it’s defined in Illustrator as Path
- Patterns are transfered as PNGs and put into Library
- Star, Spiral, Polygon and others are represented as Paths
- Opacity/Alpha is reflected as well as native ActionScript 3.0 parameter

I have created this demo Ai file and imported into Flash Catalyst:
flash-catalyst-shadows-gradients-primitives1

Download Ai file and try importing by yourself

Generated code:

<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:lib="Main_library.*" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/thermo/2009" xmlns:ai="http://ns.adobe.com/ai/2008" height="595" width="841" backgroundColor="#ffffff">
	<fx:DesignLayer d:id="2" d:userLabel="Layer 1">
		<s:Group x="264" y="58" ai:knockout="0" d:id="3">
			<s:filters>
				<s:DropShadowFilter alpha="0.75" blurX="10" blurY="10" distance="9.8995" quality="3"/>
			</s:filters>
			<s:Ellipse x="4.5" y="4.5" width="173" height="173" ai:knockout="0">
				<s:fill>
					<s:RadialGradient x="90.9761" y="90.9756" scaleX="172.952" scaleY="172.952">
						<s:GradientEntry color="0xffffff" ratio="0.0236982"/>
						<s:GradientEntry ratio="0.539877"/>
						<s:GradientEntry color="0xe71d17" ratio="1"/>
					</s:RadialGradient>
				</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
				</s:stroke>
			</s:Ellipse>
		</s:Group>
		<s:Group x="334" y="258">
			<s:Group ai:knockout="0">
				<s:BitmapImage width="245" height="151" source="@Embed('assets/stiny-a-prechody/ai12488672807.png')" ai:alphaIsShape="1" ai:knockout="0" resizeMode="scale"/>
			</s:Group>
		</s:Group>
		<s:Group x="111" y="243" d:id="4">
			<s:Path winding="nonZero" ai:knockout="0" data="M 184.966 185.4 C 165.716 204.202 136.716 192.202 112.373 195.095 C 109.85 195.095 107.294 195.095 104.701 195.099 C 79.716 190.202 66.716 203.202 59.716 227.202 C 55.716 240.202 34.716 223.202 23.716 215.202 C 19.716 212.202 18.716 208.202 15.716 204.202 C 12.716 198.202 11.716 191.202 10.716 185.202 C 9.716 167.202 15.716 150.202 16.502 132.111 C 16.503 129.365 16.502 126.578 16.464 123.718 C 16.716 97.202 15.716 69.202 5.716 43.202 C 1.716 31.202 7.716 14.202 21.716 11.202 C 24.716 10.202 27.716 12.202 30.716 13.202 C 35.466 16.702 40.279 19.764 45.174 22.387 C 47.621 23.699 50.089 24.9 52.58 25.992 C 59.716 28.202 67.716 31.202 74.716 27.202 C 86.716 17.202 97.716 -3.798 115.716 8.202 C 130.716 18.202 141.716 35.202 160.44 34.384 C 162.544 33.709 164.603 32.751 166.641 31.984 C 170.716 30.452 174.716 29.702 178.716 33.202 C 181.716 34.202 180.716 39.202 181.716 43.202 C 183.716 49.202 192.716 50.202 194.716 57.202 C 201.716 88.202 184.716 123.202 203.937 149.631 C 206.078 152.369 208.05 155.202 209.716 158.202 C 215.716 168.202 204.716 175.202 195.866 178.666 C 188.481 182.631 184.966 185.4 184.966 185.4 Z">
				<s:fill>
					<s:LinearGradient x="-7.10674" y="39.6916" scaleX="270.492" rotation="37.8954">
						<s:GradientEntry color="0xffffff" ratio="0.0236982"/>
						<s:GradientEntry color="0x818386" ratio="0.168626"/>
						<s:GradientEntry ratio="0.496933"/>
						<s:GradientEntry color="0x7e4f43" ratio="0.562332"/>
						<s:GradientEntry color="0xeb4332" ratio="1"/>
					</s:LinearGradient>
				</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
				</s:stroke>
			</s:Path>
		</s:Group>
		<s:Group x="491" y="36" d:id="5">
			<s:Path winding="nonZero" ai:knockout="0" data="M 93.774 107.789 L 59.783 90.573 L 26.33 108.813 L 32.201 71.166 L 4.517 44.987 L 42.135 38.937 L 58.477 4.517 L 75.857 38.425 L 113.641 43.331 L 86.764 70.338 L 93.774 107.789 Z">
				<s:fill>
					<s:LinearGradient x="19.1543" y="38.1108" scaleX="117.931" rotation="37.8954">
						<s:GradientEntry color="0xffffff" ratio="0.0236982"/>
						<s:GradientEntry color="0x818386" ratio="0.168626"/>
						<s:GradientEntry ratio="0.496933"/>
						<s:GradientEntry color="0x7e4f43" ratio="0.562332"/>
						<s:GradientEntry color="0xeb4332" ratio="1"/>
					</s:LinearGradient>
				</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
				</s:stroke>
			</s:Path>
		</s:Group>
		<s:Group y="66" d:id="6" x="62">
			<s:Rect x="4.5" y="4.5" alpha="0.46" width="77" height="77" ai:knockout="0">
				<s:fill>
					<s:LinearGradient x="0.16748" y="9.66699" scaleX="116.977" rotation="37.8954">
						<s:GradientEntry color="0xffffff" ratio="0.0236982"/>
						<s:GradientEntry color="0x818386" ratio="0.168626"/>
						<s:GradientEntry ratio="0.496933"/>
						<s:GradientEntry color="0x7e4f43" ratio="0.562332"/>
						<s:GradientEntry color="0xeb4332" ratio="1"/>
					</s:LinearGradient>
				</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
				</s:stroke>
			</s:Rect>
		</s:Group>
		<s:Group x="170" d:id="7" y="29">
			<s:Path winding="nonZero" ai:knockout="0" data="M 70.074 58.074 C 70.074 64.701 64.701 70.074 58.074 70.074 L 16.5 70.074 C 9.873 70.074 4.5 64.701 4.5 58.074 L 4.5 16.5 C 4.5 9.873 9.873 4.5 16.5 4.5 L 58.074 4.5 C 64.701 4.5 70.074 9.873 70.074 16.5 L 70.074 58.074 Z">
				<s:fill>
					<s:RadialGradient x="37.2871" y="37.2871" scaleX="65.5732" scaleY="65.5732">
						<s:GradientEntry alpha="0" ratio="0.738792"/>
						<s:GradientEntry alpha="0.325622" ratio="0.840383"/>
						<s:GradientEntry alpha="0.651245" ratio="0.887329"/>
						<s:GradientEntry alpha="0.800622" ratio="0.923226"/>
						<s:GradientEntry alpha="0.95" ratio="1"/>
					</s:RadialGradient>
				</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
				</s:stroke>
			</s:Path>
		</s:Group>
		<s:Path winding="nonZero" ai:knockout="0" data="M 99.842 80.78 C 77.26 103.361 40.649 103.361 18.068 80.78 C 0.004 62.715 0.004 33.426 18.069 15.362 C 32.52 0.91 55.951 0.91 70.403 15.362 C 81.965 26.923 81.965 45.667 70.403 57.229 C 61.154 66.478 46.158 66.478 36.909 57.229 C 29.509 49.829 29.509 37.833 36.909 30.434 C 42.829 24.515 52.425 24.515 58.345 30.434 C 63.081 35.17 63.081 42.847 58.344 47.583 C 54.556 51.371 48.415 51.371 44.626 47.582 C 41.595 44.552 41.595 39.638 44.626 36.607" x="600" y="211">
			<s:stroke>
				<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
			</s:stroke>
		</s:Path>
		<s:Path winding="nonZero" ai:knockout="0" data="M 4.494 101.524 C 4.494 47.888 47.896 4.488 101.53 4.488" x="551" y="347">
			<s:stroke>
				<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
			</s:stroke>
		</s:Path>
		<s:Group x="662" y="72" d:id="8">
			<s:Path winding="nonZero" ai:knockout="0" data="M 35.843 113.088 L 4.496 58.794 L 35.843 4.5 L 98.536 4.5 L 129.883 58.794 L 98.536 113.088 L 35.843 113.088 Z">
				<s:fill>
					<s:LinearGradient x="21.8447" y="22.9551" scaleX="125.678" rotation="37.8954">
						<s:GradientEntry color="0xffffff" ratio="0.0236982"/>
						<s:GradientEntry color="0x818386" ratio="0.168626"/>
						<s:GradientEntry ratio="0.496933"/>
						<s:GradientEntry color="0x7e4f43" ratio="0.562332"/>
						<s:GradientEntry color="0xeb4332" ratio="1"/>
					</s:LinearGradient>
				</s:fill>
				<s:stroke>
					<s:SolidColorStroke color="0xffec4b" caps="none" weight="9" joints="miter" miterLimit="4"/>
				</s:stroke>
			</s:Path>
		</s:Group>
	</fx:DesignLayer>
	<fx:Private>
	     <!--  ~~~~~ -->
	</fx:Private>
</s:Application>

Posted in Uncategorized |

Facebook comments:

2 Comments »

[...] Flash Catalyst and Illustrator - vector shadows, gradients and primitives by tom [...]

Pingback by localToGlobal » Blog Archive » news review -> 31th week of 2009 — July 31, 2009 @ 3:47 pm
I just wanted to extend this by posting a method to take vectors created in Flash CS4 into Illustrator and then into Flash Catalyst Beta2. Why would I do this? As an interaction designer, I have spent years building up a vector icon library in Flash for use in my interactive prototypes. I want to use these vector graphics in Flash Catalyst Beta2. Then I want to export them to a Flex4 project from Flash Catalyst. My developers have had trouble working with Flash CS4 swf files, so I didn’t want to export as a swf from Flash CS4 to import into Flash Catalyst, plus I wanted to keep my layers. So far, there does not seem to be an easy way to do this. (Adobe Catalyst Development team, this should be cut and paste for vector shapes! Even better, cut and paste for a Flash symbol. Even better than that: drag and drop from Flash CS4 to Flash Catalyst if you guys wanted to really rock my ‘lil world.) Anyway, here’s how to get it done…

1. In Flash CS4 paste vector graphic in new file.
2. Export Image as an AI from Flash CS4
3. Open AI in illustrator, convert color space to RGB mode. The gradients will STILL be messed up because Adobe never added proper support for taking vectors from Flash to Illustrator while retaining RGB or gradients correctly. Don’t bother trying to fix the colors now because Flash Catalyst completely won’t notice if you do and the gradients will still be messed up. You’ll do this step later. Just save the converted file for now.
4.Import the converted AI in Flash Catalyst. Yup, the colors and gradients are even more messed up, but the vectors are decent.
Select each shape and “Modify>Edit in Illustrator” to launch Illustrator from Flash catalyst to fix the gradients and colors. It’s a good idea to have your flash CS4 file open in another window so you can copy the RGB values. One of the issues I noted is that even when Catalyst had the correct colors for my gradient it wasn’t applying it correctly to the shape. There isn’t a gradient transform tool to fix it (yet?) so it must be fixed in Illustrator. In order to get Illustrator to like the gradient I had to toggle the fill type from linear to radial and then back to linear. Then suddenly it will look right and you can press save in Illustrator then OK to accept the edits in Flash Catalyst. And there you are, the Flash CS4 vector in Flash Catalyst!

An aside to Adobe: This workflow is painful. Code faster! Love you guys…

Comment by Susan Stevens — April 1, 2010 @ 3:21 am

RSS feed for comments on this post. / TrackBack URL

Hey amigo! These are my notes. I'm Platform Evangelist with Adobe.