<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Online Timesheet Software - TiMeister - Weblog &#187; Design</title>
	<atom:link href="http://blog.timeister.com/category/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.timeister.com</link>
	<description>Free Online Timesheet Software - Calendar, StopWatch, Reports, Exports</description>
	<lastBuildDate>Wed, 09 Dec 2009 23:02:27 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex: Unable To Open locale en_US or fr_FR</title>
		<link>http://blog.timeister.com/2009/07/13/flex-unable-to-open-locale-en_us-or-fr_fr/</link>
		<comments>http://blog.timeister.com/2009/07/13/flex-unable-to-open-locale-en_us-or-fr_fr/#comments</comments>
		<pubDate>Mon, 13 Jul 2009 19:38:31 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flash]]></category>
		<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[en_us]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[Unable To Open locale]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/?p=378</guid>
		<description><![CDATA[If you want to create a localized application you may find yourself in a strange situation when you did all the steps like in the book, but you continue to receive the &#8220;Unable to open locale xx_XX&#8221; error messages.
To simulate a fix on this issue we will take the example of adding French to your [...]]]></description>
			<content:encoded><![CDATA[<p>If you want to create a localized application you may find yourself in a strange situation when you did all the steps like in the book, but you continue to receive the &#8220;Unable to open locale xx_XX&#8221; error messages.</p>
<p>To simulate a fix on this issue we will take the example of adding French to your app.</p>
<p><strong>Basic steps:</strong><br />
- The first step is to create a fr_FR folder under the /locale/ one exactly like in the Flex documentation and then add the translated bundle.properties file.<br />
- The second step is to add the compiler options:  -locale en_US,fr_FR</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
<p><span style="color: #ff0000;"><strong>Extra steps</strong> you need to make in order to get rid of the ugly &#8220;unable to open locale&#8221; error message:</span></p>
<p>1. goto the following path :</p>
<blockquote><p><span style="color: #000080;"> &lt;flex-install-folder&gt;/sdks/&lt;current-sdk-folder&gt;/bin/</span></p></blockquote>
<p>for windows it&#8217;s: C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\</p>
<p>2. Execute the following command:</p>
<blockquote><p>&gt; <span style="color: #000080;">copylocale.exe en_US fr_FR</span></p></blockquote>
<p>That&#8217;s all, hope we helped you!<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</p>
<p>The TiMeister Team</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/07/13/flex-unable-to-open-locale-en_us-or-fr_fr/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>FLEX: Why is stage == null?</title>
		<link>http://blog.timeister.com/2009/07/13/flex-null-stage/</link>
		<comments>http://blog.timeister.com/2009/07/13/flex-null-stage/#comments</comments>
		<pubDate>Mon, 13 Jul 2009 19:11:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flash]]></category>
		<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[null]]></category>
		<category><![CDATA[null stage]]></category>
		<category><![CDATA[stage]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/?p=365</guid>
		<description><![CDATA[Hello,
If you are trying to access the stage of your application right when your app is completed then you&#8217;re doing something wrong.
BAD CODE Most of the cases programmers make the following mistake:
&#60;?xml version="1.0" encoding="utf-8"?&#62;
&#60;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"&#62;
    &#60;mx:Script&#62;
        &#60;![CDATA[
            import flash.display.StageDisplayState;
            private [...]]]></description>
			<content:encoded><![CDATA[<p>Hello,</p>
<p>If you are trying to access the stage of your application right when your app is completed then you&#8217;re doing something wrong.</p>
<p><strong><span style="color: #ff0000;">BAD CODE</span> </strong>Most of the cases programmers make the following mistake:</p>
<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"&gt;
    &lt;mx:Script&gt;
        &lt;![CDATA[
            import flash.display.StageDisplayState;
            private function init():void
            {
                <span style="color: #ff6600;">var s:Stage = this.stage;</span> //&lt;&lt;-- this.stage == null...why??
                s.scaleMode = StageScaleMode.EXACT_FIT;
            }
        ]]&gt;
    &lt;/mx:Script&gt;
&lt;/mx:WindowedApplication&gt;
</code></pre>
<p><strong><span style="color: #99cc00;">GOOD CODE</span> </strong>: The correct approach is the following:</p>
<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:WindowedApplication
       xmlns:mx="http://www.adobe.com/2006/mxml"
       creationComplete="init()"&gt;
    &lt;mx:Script&gt;
        &lt;![CDATA[
            import flash.display.StageDisplayState;
            private function init():void
            {
                <span style="color: #008000;">this.systemManager.stage</span>.scaleMode = StageScaleMode.EXACT_FIT;
            }
        ]]&gt;
    &lt;/mx:Script&gt;
&lt;/mx:WindowedApplication&gt;
</code></pre>
<p>Hope we helped you with this issue we also had in our beginning as Flex Devlopers</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/07/13/flex-null-stage/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Flex and Silverlight: What Will the Next Five Years Look Like</title>
		<link>http://blog.timeister.com/2009/07/05/flex-and-silverlight/</link>
		<comments>http://blog.timeister.com/2009/07/05/flex-and-silverlight/#comments</comments>
		<pubDate>Sun, 05 Jul 2009 08:39:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flash]]></category>
		<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[future]]></category>
		<category><![CDATA[ria]]></category>
		<category><![CDATA[silverlight]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/?p=341</guid>
		<description><![CDATA[



]]></description>
			<content:encoded><![CDATA[<p><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/dZHC3PuHUqs&#038;hl=en&#038;fs=1&#038;color1=0x006699&#038;color2=0x54abd6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dZHC3PuHUqs&#038;hl=en&#038;fs=1&#038;color1=0x006699&#038;color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></p>
<div style="height=20px"></div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/07/05/flex-and-silverlight/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Call function from Flex to Flash</title>
		<link>http://blog.timeister.com/2009/06/24/call-function-from-flex-to-flash/</link>
		<comments>http://blog.timeister.com/2009/06/24/call-function-from-flex-to-flash/#comments</comments>
		<pubDate>Wed, 24 Jun 2009 20:47:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flash]]></category>
		<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[call]]></category>
		<category><![CDATA[communication]]></category>
		<category><![CDATA[comunication]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[function]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/2009/06/24/call-function-from-flex-to-flash/</guid>
		<description><![CDATA[

How to call a flash function from flex?

Load the AS3 swf file using an instance of SWFLoader.
Call the function like this:

  mySWFLoader.content.functionName();   

How to listen for flash events from flex?

// In your Flex app
/* called when your SWFLoader finishes loading the SWF */
private function onMySWFLoaded( p_event:Event ) :void
{
&#160;&#160;&#160;&#160;&#160;&#160;mySWFLoader.content.addEventListener( &#8220;clicked&#8221;, onSWFClick );
}
/* callback [...]]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
<blockquote><p><strong>How to call a flash function from flex?</strong></p></blockquote>
<ol>
<li>Load the AS3 swf file using an instance of SWFLoader.</li>
<li>Call the function like this:</li>
</ol>
<div style="border: 1px solid #000000; background-color:#f0f0f0"><span style="COLOR: #0000ff;">  mySWFLoader.content.functionName();   </span></div>
<div style="height:12px"></div>
<blockquote><p><strong>How to listen for flash events from flex?</strong></p></blockquote>
<ol>
<li><span><strong>// In your Flex app</strong><br />
/* called when your SWFLoader finishes loading the SWF */<br />
private function onMySWFLoaded( p_event:Event ) :void<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mySWFLoader.content.addEventListener( &#8220;clicked&#8221;, onSWFClick );<br />
}</p>
<p>/* callback for the clicked event */<br />
private function onSWFClick( event:Event ) :void<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mx.controls.Alert.show( &#8216;Click event raised!&#8217; );<br />
}</p>
<p></span></li>
<li><span><strong>// In Flash Movie </strong><br />
/* called when the button in your flash movie is clicked */<br />
private function onButtonClick( p_event:Event ) :void<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dispatchEvent( new Event( &#8220;clicked&#8221; );<br />
}</span></li>
</ol>
<blockquote><p><strong>How to call a flex function from flash at a specific frame?</strong></p></blockquote>
<p>Embed<span style="COLOR: #000000">(</span><span style="COLOR: #004993">source</span>=<span style="COLOR: #990000">&#8220;../assets/swf/myFlashComponent.swf&#8221;</span><span style="COLOR: #000066; FONT-WEIGHT: bold">,</span> symbol=<span style="COLOR: #990000">&#8220;Preloader&#8221;</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">]</span><br />
<span style="COLOR: #0033ff; FONT-WEIGHT: bold">private</span> <span style="COLOR: #6699cc; FONT-WEIGHT: bold">var</span> FlashPreloaderSymbol<span style="COLOR: #000066; FONT-WEIGHT: bold">:</span><span style="COLOR: #004993">Class</span><span style="COLOR: #000066; FONT-WEIGHT: bold">;</span><br />
<span style="COLOR: #0033ff; FONT-WEIGHT: bold">private</span> <span style="COLOR: #6699cc; FONT-WEIGHT: bold">var</span> clip<span style="COLOR: #000066; FONT-WEIGHT: bold">:</span><span style="COLOR: #004993">MovieClip</span><span style="COLOR: #000066; FONT-WEIGHT: bold">;</span></p>
<p>clip = <span style="COLOR: #0033ff; FONT-WEIGHT: bold">new</span> FlashPreloaderSymbol<span style="COLOR: #000000">(</span><span style="COLOR: #000000">)</span><span style="COLOR: #000066; FONT-WEIGHT: bold">;</span><br />
<span style="COLOR: #004993">addChild</span><span style="COLOR: #000000">(</span>clip<span style="COLOR: #000000">)</span><span style="COLOR: #000066; FONT-WEIGHT: bold">;</span></p>
<p><span style="COLOR: #0033ff; FONT-WEIGHT: bold">private</span> <span style="COLOR: #339966; FONT-WEIGHT: bold">function</span> onFlexInitComplete<span style="COLOR: #000000">(</span> event<span style="COLOR: #000066; FONT-WEIGHT: bold">:</span>FlexEvent <span style="COLOR: #000000">)</span><span style="COLOR: #000066; FONT-WEIGHT: bold">:</span><span style="COLOR: #0033ff; FONT-WEIGHT: bold">void</span><br />
<span style="COLOR: #000000">{</span><br />
clip<span style="COLOR: #000066; FONT-WEIGHT: bold">.</span>addFrameScript<span style="COLOR: #000000">(</span>47<span style="COLOR: #000066; FONT-WEIGHT: bold">,</span> callMyFunction<span style="COLOR: #000000">)</span><span style="COLOR: #000066; FONT-WEIGHT: bold">;</span><br />
<span style="COLOR: #000000">}</span></p>
<p><span style="COLOR: #000000;height:10px"><br />
</span><br />
<script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/06/24/call-function-from-flex-to-flash/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Create applications with Adobe Catalyst</title>
		<link>http://blog.timeister.com/2009/06/24/create-applications-with-catalyst/</link>
		<comments>http://blog.timeister.com/2009/06/24/create-applications-with-catalyst/#comments</comments>
		<pubDate>Wed, 24 Jun 2009 17:58:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flash]]></category>
		<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[button]]></category>
		<category><![CDATA[catalyst]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/?p=294</guid>
		<description><![CDATA[

We wanted to share with you a great video tutorial about how to use Adobe Flash Catalyst and create Flex Applications starting just with an image.
The tutorial explains in details how you can create a Flex button and a scrollbar using Catalyst.

]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<br />
We wanted to share with you a great video tutorial about how to use Adobe Flash Catalyst and create Flex Applications starting just with an image.<br />
The tutorial explains in details how you can create a Flex button and a scrollbar using Catalyst.</p>
<p><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/tNAde32pWT0&#038;hl=en&#038;fs=1&#038;rel=0&#038;color1=0x3a3a3a&#038;color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/tNAde32pWT0&#038;hl=en&#038;fs=1&#038;rel=0&#038;color1=0x3a3a3a&#038;color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/06/24/create-applications-with-catalyst/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex Builder 4 Refactored to Flash Builder</title>
		<link>http://blog.timeister.com/2009/06/06/flex-builder-4-flash/</link>
		<comments>http://blog.timeister.com/2009/06/06/flex-builder-4-flash/#comments</comments>
		<pubDate>Sat, 06 Jun 2009 08:55:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flash]]></category>
		<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[builder]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[flex]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/?p=215</guid>
		<description><![CDATA[

The next version of our IDE, Flex Builder, will be called Flash Builder 4.
There is already available a public beta for Flash Builder 4 and Flash Catalyst (check Adobe Labs for downloads).
Mihai Corlan (Platform Evangelist for Adobe):
&#8220;At the same time, we will not change the name of Flex Builder 3. This will stay as it [...]]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
<p><strong>The next version of our IDE, Flex Builder, will be called Flash Builder 4.</strong></p>
<p>There is already available a public beta for Flash Builder 4 and Flash Catalyst (check <a href="http://labs.adobe.com/">Adobe Labs for downloads</a>).</p>
<p><strong>Mihai Corlan</strong> (Platform Evangelist for Adobe):<br />
&#8220;<span style="color: #808080;">At the same time, we will not change the name of Flex Builder 3. This will stay as it is now. Furthermore, the names of the Flex framework, and the Flex SDK, remain unchanged. The same goes for Flash Professional, which remains unchanged.&#8221;<br />
&#8230;.<br />
&#8220;This has happened to me more than once. When I ask people at conferences “Who’s a Flex developer?” many people are unsure how to answer. Why? Because some of you are using the Flex framework, to create Flex or AIR applications, and not our IDE (Flex Builder), some of you are using Flex Builder, but without using the Flex framework (you use ActionScript 3 to create Flash applications). Thus the uncertainty.</span></p>
<p><span style="color: #808080;">Of course, the correct answer is this: anyone who uses the Flex framework, is a Flex developer. It doesn’t matter what tools you use to create these applications. At the same time, any Flex application gets compiled into a SWF file, which is played by the Flash Player. The same happens with the applications written using ActionScript and not the Flex framework.</span></p>
<p><span style="color: #808080;">So looking at it from this perspective, I think it makes a lot of sense. Have the developer tool that is used for creating Flash/AIR applications with or without the Flex framework called Flash Builder 4.</span>&#8221;</p>
<table style="border-style: none none none none;" border="0">
<tbody>
<tr>
<td><img src="http://corlan.org/wp-content/uploads/2009/05/image.png" alt="Flex Builder 3" width="128" /></td>
<td><img src="http://corlan.org/wp-content/uploads/2009/05/image1.png" alt="Flash Catalyst" width="128" /></td>
<td><img src="http://corlan.org/wp-content/uploads/2009/05/fb.png" alt="Flash Builder 4" width="128" /></td>
</tr>
</tbody>
</table>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/06/06/flex-builder-4-flash/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Adobe Flex Button with Photoshop (web 2.0 button skin)</title>
		<link>http://blog.timeister.com/2009/06/01/flex-button-skin-photoshop/</link>
		<comments>http://blog.timeister.com/2009/06/01/flex-button-skin-photoshop/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 20:09:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Adobe Flex & AIR]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[builder]]></category>
		<category><![CDATA[button]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[custom]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[skin]]></category>

		<guid isPermaLink="false">http://blog.timeister.com/?p=163</guid>
		<description><![CDATA[





Here you can see the live result and also download the project source code by right clicking inside the application.


  Please upgrade your browser


Step 1: Create Up, Over, Down, Disabled states for the button with Photoshop
1.1 Open Photoshop and choose the desired button size. I will choose 90&#215;28px with transparent background.




1.2 Using the &#8220;rounded [...]]]></description>
			<content:encoded><![CDATA[<p>
<div style="height:8px"></div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<br />

<div style="height:8px"></div>
<p><b>Here you can see the live result and also download the project source code by right clicking inside the application.</b><br />
<br />
<div class="iframe-wrapper">
  <iframe src="http://pirvulescu.110mb.com/pirvulescu/wp-content/uploads/PhotoshopButton/PhotoshopButton.html" frameborder="0" style="height:60px;width:270px;">Please upgrade your browser</iframe>
</div>
<div style="height:18px"></div>
<p><span style="font-size:12pt;"><b>Step 1: <br />Create Up, Over, Down, Disabled states for the button with Photoshop</b></span></p>
<p>1.1 Open Photoshop and choose the desired button size. I will choose 90&#215;28px with transparent background.<br />

<div style="height:8px"></div>
<p><a href="http://blog.timeister.com/wp-content/uploads/1_button_size.png"><img src="http://blog.timeister.com/wp-content/uploads/1_button_size.png" alt="1_button_size" title="1_button_size" width="560" height="320"/></a></p>
<div style="height:8px"></div>
<p>1.2 Using the &#8220;rounded rectagle tool&#8221; create the button to look like in the image<br />
<br /><a href="http://blog.timeister.com/wp-content/uploads/2_rectangle.png"><img src="http://blog.timeister.com/wp-content/uploads/2_rectangle.png" alt="1_button_size" title="1_button_size" width="560" height="320"/></a></p>
<p>1.3 Duplicate the existing layer, set the &#8220;Fill&#8221; property to 0 and then apply a gradient effect like in the image below.<br />
<br /><img src="http://blog.timeister.com/wp-content/uploads/3_glow_effect.png" width="560px" height="320"></img><br />

<div style="height:8px"></div>
<p>1.4 now let&#8217;s make the button cloured <img src='http://blog.timeister.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> . Apply to the first layer (original) an horizontal gradient overlay like in the image.<br />
<br /><img src="http://blog.timeister.com/wp-content/uploads/4_horiz_grad.png" width="560px" height="320"></img><br />

<div style="height:8px"></div>
<p>1.5 To make the button look even better we add a border and some inner glow to the originl layer like in the images below<br />
<br /><img src="http://blog.timeister.com/wp-content/uploads/5_border.png" width="560px" height=""320></img><br />

<div style="height:8px"></div>
<p><img src="http://pirvulescu.110mb.com/pirvulescu/wp-content/uploads/2009/05/6_inner-glow.png" width="560px"></img><br />

<div style="height:8px"></div>
<p>1.6 Duplicate the first layer (original) and edit the colors so you can get all 4 states of our button.<br />
<br /><img src="http://blog.timeister.com/wp-content/uploads/7_final_buttons.png" width="280px" height="80"></img><br />

<div style="height:8px"></div>
<p>1.7 after getting ready all states for the buttons export them 1 by 1 as .png and name them button_up.png button_over.png button_down.png and button_dis.png</p>
<div style="height:18px"></div>
<div style="height:18px"></div>
<p><span style="font-size:12pt;"><b>Step 2:<br /> Add images to project and create CSS for the button</b></span></p>
<div style="height:18px"></div>
<p>2.1 Create an Adobe Flex project and name it PhotoshopButton.<br />
<br /><img src="http://blog.timeister.com/wp-content/uploads/8_project.png" width="560px" height="320"></img><br />

<div style="height:8px"></div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<br />

<div style="height:8px"></div>
<p>2.2 Create a folder inside the /src folder and name it /images</p>
<p>2.3 Copy the 4 png images to /src/images/</p>
<p>2.4 Create a folder inside the /src folder and name it /css, inside this folder Add a new css file and name it main.css</p>
<p>2.5 Inside the main.css file add the following button style:<br />
<code><br />
<span style="color:#0520d9"><br />
/* CSS file */<br />
Button<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;	up-skin:			Embed(source="/images/button_up.png");<br />
&nbsp;&nbsp;&nbsp;&nbsp;	over-skin:			Embed(source="/images/button_over.png");<br />
&nbsp;&nbsp;&nbsp;&nbsp;	down-skin:			Embed(source="/images/button_down.png");<br />
&nbsp;&nbsp;&nbsp;&nbsp;	disabled-skin:		Embed(source="/images/button_dis.png");<br />
&nbsp;&nbsp;&nbsp;&nbsp;	selected-down-skin:	Embed(source="/images/button_down.png");<br />
&nbsp;&nbsp;&nbsp;&nbsp;	selected-up-skin:	Embed(source="/images/button_down.png");<br />
&nbsp;&nbsp;&nbsp;&nbsp;   <br />	<br />
&nbsp;&nbsp;&nbsp;&nbsp;	color:				#ffffff;<br />
&nbsp;&nbsp;&nbsp;&nbsp;	roll-over-color:	#000000;<br />
&nbsp;&nbsp;&nbsp;&nbsp;	disabled-color:		#efefef;<br />
}<br />
</span><br />
</code><br />
</p>
<p>2.6 Your project should look until now like this<br />
<br /><img src="http://blog.timeister.com/wp-content/uploads/9_project2.png" width="560px" height="320"></img><br />

<div style="height:8px"></div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8937083430127082";
google_ad_slot = "8143431074";
google_ad_width = 300;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<br />

<div style="height:8px"></div>
<p>2.7 Open the PhotoshopButton.mxml file and add the reference to your css file</p>
<p><code><br />
<span style="color:#0520d9"><br />
&lt;mx:Style source="css/main.css"/&gt;</p>
<p><span style="color:#25c209">//Then add some buttons and let's see how does it look <img src='http://blog.timeister.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
<br />
<span style="color:#0520d9">&lt;mx:HBox width= "100%" horizontalAlign="center"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;mx:Button label= "Click Me!"/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;mx:Button label= "Disabled" enabled= "false"/&gt;<br />
&lt;/mx:HBox&gt;<br />
</span></span><br />
</span><br />
</code></p>
<p><b>And again the result&#8230;</b><br />
<br />
<div class="iframe-wrapper">
  <iframe src="http://pirvulescu.110mb.com/pirvulescu/wp-content/uploads/PhotoshopButton/PhotoshopButton.html" frameborder="0" style="height:60px;width:270px;">Please upgrade your browser</iframe>
</div><br />

<div style="height:8px"></div>
<p><b>That&#8217;s all, enjoy!</b><br />

<div style="height:8px"></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.timeister.com/2009/06/01/flex-button-skin-photoshop/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
