<?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>Dave Stockton&#039;s Official Blog</title>
	<atom:link href="http://davidstockton.com/feed" rel="self" type="application/rss+xml" />
	<link>http://davidstockton.com</link>
	<description>Programming, Photography and Cool Stuff</description>
	<lastBuildDate>Fri, 07 Oct 2011 03:27:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Upgrading RAM and HDD on a New MacBook Pro with OSX Lion</title>
		<link>http://davidstockton.com/computers/upgrading-ram-and-hdd-on-a-new-macbook-pro-with-osx-lion</link>
		<comments>http://davidstockton.com/computers/upgrading-ram-and-hdd-on-a-new-macbook-pro-with-osx-lion#comments</comments>
		<pubDate>Fri, 07 Oct 2011 03:27:25 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Computers]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=88</guid>
		<description><![CDATA[If you&#8217;re reading this to figure out how to do the hard drive upgrade on a MacBook Pro that came with Lion installed, I&#8217;d recommend either reading all the way through before starting since it will save you some time, or skip to the bottom as it will save you time. If you follow along, [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re reading this to figure out how to do the hard drive upgrade on a MacBook Pro that came with Lion installed, I&#8217;d recommend either reading all the way through before starting since it will save you some time, or skip to the bottom as it will save you time. If you follow along, you&#8217;ll end up doing the same stuff I did which will make your upgrade take longer than it should.</p>
<p>Last weekend (10/2/2011) I picked up a brand new 13&#8243; MacBook Pro (Dual-Core Core i7) from the Apple store. I also picked up 8GB of RAM and an OCZ Agility 3 120GB SSD to upgrade it with.</p>
<p>Both of these upgrades are within allowable modifications for the MacBook Pro without compromising your warranty. Also, for the most part, they are pretty easy upgrades, especially the RAM upgrade. I did, however run into some issues with the HDD &#8211;&gt; SSD upgrade which is why I am writing this.</p>
<p><span id="more-88"></span></p>
<p>To start with, flip the MBP over and remove the 10 screws from the bottom. I highly recommend getting a small phillips head screwdriver for this. I managed to get it done by using two different small flathead screw drivers but that probably made the physical part of the upgrade take about 4-5 times longer than it would have with the proper screw driver. Take a note of the screws you remove. Three of the ten will be long screws and the other seven are short. It&#8217;s vital to put the long screws back where you got them. If you end up messing up or forgetting, the positions of the screws are also noted in the manual that comes with your MBP in the sections about upgrading your RAM and HDD.</p>
<p>After you get the screws out, the bottom of the laptop should come off pretty easily. You should see the RAM chips near the center. To get them out, just pull the little tabs to the side and the chips should pop up and out easily. For the RAM chip on the bottom, you may have to move both tabs out of the way. To install the new RAM, you pretty much do the opposite. Make sure the little notch is on the correct side (to the right I believe) and lines up with the bump in the RAM slot. Once it&#8217;s all secured and seated, you should be good, assuming you got the right kind of RAM.</p>
<p>The physical part of the hard drive upgrade is also easy. There is a bar on one side of the hard drive (if the front of the laptop is facing you, it&#8217;s on the far side of the drive). Unscrew both of the phillips head screws and remove the bar. The screws are captive which means they will not come out all the way. When they are out far enough the bar should be easy to remove. There&#8217;s a plastic sticky tab on the drive that helps remove the drive. Pull out the drive. You can remove the sticky tab and put it on the SSD if you want but I don&#8217;t think it is necessary. When hard drive is out of the bay (don&#8217;t yank, there&#8217;s still a thin fragile cable) carefully unplug the cable from the hard drive.</p>
<p>What is a good idea is to take the four nubs off of the hard drive and install them in the SSD. To do this, you will need a Torx screwdriver. I think it&#8217;s a #5 or #6 but I don&#8217;t know which one for sure.</p>
<p>To install the new SSD, plug the cable in, slip the nubs into the holes closest to you and to the drive slide in the bay. Reattach the bar and secure it by screwing in the screws. Put the bottom plate back on and put all the screws in place.</p>
<p>At this point was where I ran into trouble. When I started up the MBP, using Command-R as the manual says, I ended up with an icon with a folder with a question mark on it. I googled this and it said that it indicated the hard drive was bad and would need to be replaced. Since the SSD I had was brand new, I figured this wasn&#8217;t the case, or at least it was unlikely.</p>
<p>The problem I was facing was how to get OSX Lion on the new Hard drive when Apple no longer includes a DVD with the OS and also does not include a thumb drive or any other copy of the OS in the box.</p>
<p>I replaced the SSD with the original HDD and rebooted. Everything started up and it showed I had 8GB of DDR3 1333Mhz RAM. So at least that part worked. I did some more googling and another one said reboot and hold the option key and it would let you start with the Recovery partition. So I replaced the HDD with the SSD, rebooted with option and&#8230; same thing. A folder with a question mark.</p>
<p>Other suggestions I found while googling were to re-download Lion from the App store and burn that to disc. I did not appear to be an option for me as the App store just shows Lion as being installed but not purchased. So the &#8220;option-click&#8221; on the installed button didn&#8217;t do anything.</p>
<p>Some other options that may have worked but I didn&#8217;t try were:</p>
<ol>
<li>Go back to the apple store and buy OSX Lion on a thumb drive. I didn&#8217;t want to do this because this is a brand-new machine and I shouldn&#8217;t have to pay extra to just upgrade my hard drive.</li>
<li>Go to the app store on another mac, download and burn the Lion upgrade. I didn&#8217;t do this for the same reason as above.</li>
<li>Use Carbon Copy Cloner to clone the original drive onto the SSD. If I had had an external drive bay where I could mount my HDD, this probably would have been the easiest. However, I don&#8217;t currently have any external bays that would take this hard drive.</li>
</ol>
<p>What I did end up doing is downloading an application call &#8220;<a title="Lion Recover Disk Assistant" href="http://support.apple.com/kb/dl1433">Lion Recovery Disk Assistant</a>&#8220;. You will also need a flash drive for this part. The Lion Recovery Disk Assistant will create a recovery partition on a flash drive or other external drive. I don&#8217;t think it works on an SD card though.</p>
<p>After trying a few different things, including a couple of different SD cards in the SD slot, an SD card in a USB reader (none of these worked to create the recovery disk), I borrowed my wife&#8217;s 8GB flash drive. I was able to successfully create a recovery disk on this. It will erase everything on the drive so make sure you&#8217;ve got it backed up if you need it.</p>
<p>Next up, I re-installed the SSD and then rebooted with the flash drive in and holding down the option key. This time it actually did start up with the recovery tools. There are a few options available. This includes searching the internet for help (it runs safari on its own), Disk Utility, Reinstall Lion and one other that I forget.</p>
<p>I started with the Reinstall Lion option. This tool could not seem to see that I had the SSD installed so I quit the tool and went back to Disk Utility. This tool saw the drive and let me format it. Unlike a windows install where the installation will let you partition and format during the install, the Mac OSX install doesn&#8217;t recognize unformatted drives at all. After formatting, I went back to the Reinstall Lion option and it found the drive.</p>
<p>The Reinstall Lion part works by checking that your computer is authorized to download Lion from the app store. If it is, it will start the download. For me this part took about an hour. Once it was done, I was back up and running with 8GB of RAM and a nice speedy SSD.</p>
<p>The plan now is to pick up an external drive bay and use the original 500GB drive for Time Machine for the MacBook Pro.</p>
<p>If you&#8217;ve got any suggestions or thoughts on other ways to get this upgrade to work, please leave a comment. I hope this helps someone.</p>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/computers/upgrading-ram-and-hdd-on-a-new-macbook-pro-with-osx-lion/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Upcoming Presentations – “Flexing Your PHP”</title>
		<link>http://davidstockton.com/presentations/upcoming-presentations-flexing-your-php</link>
		<comments>http://davidstockton.com/presentations/upcoming-presentations-flexing-your-php#comments</comments>
		<pubDate>Fri, 09 Jul 2010 05:42:54 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Presentations]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[FRPUG]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[presentations]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[Zend Framework]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=86</guid>
		<description><![CDATA[Just in case anyone is reading this, I will be presenting twice next week on integrating Zend Framework and Flex together. I&#8217;ll be presenting at the Front Range PHP User group on Tuesday, July 13 from 7:00-9:00 at the Big Game Restaurant in downtown Denver.  More information can be found on the meetings page.  After [...]]]></description>
			<content:encoded><![CDATA[<p>Just in case anyone is reading this, I will be presenting twice next week on integrating <a title="Zend Framework" href="http://framework.zend.com">Zend Framework</a> and <a href="http://www.adobe.com/products/flex/">Flex</a> together. I&#8217;ll be presenting at the <a title="Front Range PHP User Group" href="http://frontrangephp.org">Front Range PHP User</a> group on Tuesday, July 13 from 7:00-9:00 at the Big Game Restaurant in downtown Denver.  More information can be found on the <a title="Front Range PHP User Group Meetings" href="http://frontrangephp.org/meetings/">meetings</a> page.  After that I&#8217;ll be presenting at the <a title="Denver RIA Developer's Group" href="http://http://ria5280.org/">Denver RIA Developer&#8217;s Group</a> on Thursday, July 15, from 6:00-7:00. More information can be found on their <a href="http://ria5280.org/calendar/event/2010/7/15/178056">events page</a>.</p>
<p>In both cases, I&#8217;ll be co-presenting with Jay Whipple of <a href="http://111elm.com/">111ELM Design</a>.  Each presentation will be similar but we&#8217;ll be emphasizing different things for each group.  For instance, the Front Range PHP User group likely won&#8217;t need much if any background on PHP and Zend Framework, so the presentation will concentrate more on the Flex side of things and how to integrate Flex and Zend Framework from the Flex side of things while the Denver RIA developer presentation will go more in depth on the Zend Framework and PHP side since most of the attendees will likely already know how to integrate into server-side services, but not necessarily how to create them in PHP with Zend Framework.</p>
<p>To give a brief overview, it&#8217;s ridiculously simple to use Flash Builder to consume a PHP class as a service using Flex&#8217;s built in Data Services.  However, to use these, Flash Builder requires that you place your class in the web root of your web server which is not a very good practice and really runs quite contrary to best practices. In this presentation we&#8217;ll show you how to expose services using Zend Framework&#8217;s MVC and Zend_AMF while still maintaining a good structure and keeping your classes out of your web root. In reality, it&#8217;s only a little bit more work to hook Flex into your PHP application.</p>
<p>If you&#8217;re planning on coming to either presentation please follow the links and RSVP as there will be food and beverages provided at both.</p>
<p>Thanks,</p>
<p>David</p>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/presentations/upcoming-presentations-flexing-your-php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Flash Catalyst to Let Your Kids Make Computer Interfaces – Part 3</title>
		<link>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-3</link>
		<comments>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-3#comments</comments>
		<pubDate>Thu, 24 Jun 2010 08:53:52 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[flash builder]]></category>
		<category><![CDATA[flash catalyst]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=70</guid>
		<description><![CDATA[This is the final tutorial in getting your child&#8217;s artwork into Flash Catalyst and turning it into a working Twitter search application.  In Tutorial 1 you learned how to get your artwork into Photoshop and get everything all set up for Flash Catalyst.  Then you learned how to import the .psd into Flash Catalyst and [...]]]></description>
			<content:encoded><![CDATA[<p>This is the final tutorial in getting your child&#8217;s artwork into Flash Catalyst and turning it into a working Twitter search application.  In Tutorial 1 you learned how to get your artwork into Photoshop and get everything all set up for Flash Catalyst.  Then you learned how to import the .psd into Flash Catalyst and turn the artwork into working components.  In the Tutorial 2, you learned how to build the various states your application will need and to use Flash Catalyst to create animations when then application switches between states.</p>
<p>In this tutorial you&#8217;ll learn how to move from Flash Catalyst into Flash Builder 4 and hook your application into the Twitter search API.  Before you proceed make sure that you are happy with how your application looks and behaves.  Currently Adobe&#8217;s Flash Catalyst -&gt; Flash Builder work flow is one-way only.  There&#8217;s not really any way to move backwards from Flash Builder into Flash Catalyst.  You can do all the stuff you do in Flash Catalyst in Flash Builder 4, but for what we&#8217;re dealing with here, many of the steps are easier in Flash Catalyst.</p>
<p><span id="more-70"></span></p>
<p>Step 1: Start Flash Builder 4.</p>
<div id="attachment_71" class="wp-caption alignleft" style="width: 192px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/fb_icon.gif"><img class="size-full wp-image-71 " title="fb_icon" src="http://davidstockton.com/wp-content/uploads/2010/06/fb_icon.gif" alt="" width="182" height="172" /></a><p class="wp-caption-text">Click on the Flash Builder Icon</p></div>
<p>Click on the icon, navigate the menu, etc.</p>
<p>Step 2: Import the your Flash Catalyst project into Flash Builder 4.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/fb_import.png"><img class="alignnone size-full wp-image-72" title="fb_import" src="http://davidstockton.com/wp-content/uploads/2010/06/fb_import.png" alt="" width="353" height="221" /></a></p>
<p>Click on File and then Import Flex Project (FXP)&#8230;</p>
<p>Find your project by browsing and click open.  On the next screen you should be able to leave the defaults and click finish.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/fb_files.gif"><img class="alignnone size-full wp-image-73" title="fb_files" src="http://davidstockton.com/wp-content/uploads/2010/06/fb_files.gif" alt="" width="286" height="463" /></a></p>
<p>Your main application file is in Main.mxml.  Each of the custom pieces are shown under components.  All of the images that skin your custom components are located under assets.images.&lt;your project name&gt;</p>
<p>Step 3: Prepare your flex project</p>
<p>Open your Main.mxml by double-clicking on the icon.  If you see a bunch of code, switch to design mode by clicking on Design in the top left area of the workspace.  Click on your search text area and in the properties panel assign an id of searchText.  Click on your search button and assign an id of searchBtn.  You may need to switch to your searchResults states to see these elements.  The states are usually found in the top right of the Flash Builder interface. Next, click on the data grid and assign it an id of dataGrid.  If you have a signature button, click on it and assign it an id of signatureBtn. Next, switch to your start state and assign the id of startBtn to your start button.</p>
<p>Step 4: Create the data service to connect to Twitter</p>
<p>At the bottom of the work area, you should see a tab called Data/Services.  Activate it by clicking and then click on the Connect to Data/Service&#8230; link.  Choose XML.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/services.gif"><img class="alignnone size-medium wp-image-74" title="services" src="http://davidstockton.com/wp-content/uploads/2010/06/services-300x253.gif" alt="" width="300" height="253" /></a></p>
<p>Click next.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/services_step2.gif"><img class="alignnone size-full wp-image-75" title="services_step2" src="http://davidstockton.com/wp-content/uploads/2010/06/services_step2.gif" alt="" width="592" height="501" /></a></p>
<p>Click on URL for the XML source, and enter http://search.twitter.com/search.atom?q=catalyst.  This is the endpoint of the service for searching Twitter. Then click on the Invoke button.  Flash Builder will fetch the XML from Twitter so it knows about the data that will come back from it.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/services_step4.gif"><img class="alignnone size-full wp-image-76" title="services_step4" src="http://davidstockton.com/wp-content/uploads/2010/06/services_step4.gif" alt="" width="548" height="483" /></a></p>
<p>In the Select node drop down, you&#8217;ll see the structure of the XML that comes back from the Twitter search.  We only care about things in entry, so select entry. If Is Array? doesn&#8217;t get selected automatically, click on it to select it.  Click on Finish and Flash Builder will create the ActionScript needed to make a call to the Twitter search service.  In the Data/Services area, you should see a getData call.  Switch into design mode and choose the searchResults state.</p>
<p>Drag the getData call and drop it on the data grid.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/connect_service.gif"><img class="alignnone size-large wp-image-77" title="connect_service" src="http://davidstockton.com/wp-content/uploads/2010/06/connect_service-1024x598.gif" alt="" width="640" height="373" /></a></p>
<p>Since Flash Catalyst created the project with some sample data, when you do this it will tell you that the component is already bound and ask if you want to replace the binding.  Click Ok.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/already_bound.gif"><img class="alignnone size-full wp-image-78" title="already_bound" src="http://davidstockton.com/wp-content/uploads/2010/06/already_bound.gif" alt="" width="516" height="142" /></a></p>
<p>Next the service will ask what you want to bind into the data grid.  Choose title in the dropdown.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/data_bind.gif"><img class="alignnone size-full wp-image-79" title="data_bind" src="http://davidstockton.com/wp-content/uploads/2010/06/data_bind.gif" alt="" width="412" height="402" /></a></p>
<p>Click OK.</p>
<p>Flash Builder now switches into Source mode and shows some of the code it just generated. It now shows the call to the getData service. This service takes an input which we want to have come from the value in the search text box.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/code1.gif"><img class="alignnone size-full wp-image-80" title="code1" src="http://davidstockton.com/wp-content/uploads/2010/06/code1.gif" alt="" width="533" height="84" /></a></p>
<p>Replace the highlighted text with searchText.text, the text the user entered into the search box.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/code2.gif"><img class="alignnone size-full wp-image-81" title="code2" src="http://davidstockton.com/wp-content/uploads/2010/06/code2.gif" alt="" width="597" height="74" /></a></p>
<p>So this is pretty close to what we want, but the function above actually tries to call the service when the grid is created which is actually right when the application starts up, and before there&#8217;s anything in the text box.  If you run the app now you&#8217;ll get an error.</p>
<p>While you&#8217;re still in Source mode, find the code that represents the search button.  After the &lt;s:Button, type click=&#8221;.  Flash Builder will open a box with an option to generate code.  Press enter and it will create a function call and link it to the click event of the search button.</p>
<p>For me it added &#8216;click=&#8221;searchBtn_clickHandler(event)&#8221;&#8216;. Up above in the script area you will find the function called searchBtn_clickHandler.  It should be just below the list1_creationCompleteHandler.</p>
<p>Copy the contents of the list1_creationCompleteHandler into the searchBtn_clickHandler.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/code3.gif"><img class="alignnone size-full wp-image-82" title="code3" src="http://davidstockton.com/wp-content/uploads/2010/06/code3.gif" alt="" width="459" height="66" /></a></p>
<p>Now you can delete the list1_creationCompleteHandler() function.  By can, I mean, you should now delete the function.</p>
<p>Find your list element and delete the creationComplete event.</p>
<p>In my project, Flash Catalyst had already created a click handler to handle the state transition.  I moved the code from that click handler into my new click handler.  I also removed the extra click handler.  It ended up looking like:</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/code4.gif"><img class="alignnone size-full wp-image-83" title="code4" src="http://davidstockton.com/wp-content/uploads/2010/06/code4.gif" alt="" width="458" height="82" /></a></p>
<p>The component looks like:</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/code5.gif"><img class="alignnone size-large wp-image-84" title="code5" src="http://davidstockton.com/wp-content/uploads/2010/06/code5-1024x15.gif" alt="" width="640" height="9" /></a></p>
<p>You can now also delete the ArrayCollection of fake stuff that appears in the List object.</p>
<p>If you run your project now, you should be able to click the start button, see the transition to the search page, enter some text, click the search button and see a bunch of blank result areas appear.  This is actually good since it means we&#8217;re getting something back.  Now we just need to bind the data to the different parts of the result area.</p>
<p>To bind the results, open the components folder/package in the Package Explorer.  Find your RepeatedItem&lt;something&gt;.mxml.  For my project, &lt;something&gt; was 3.  I&#8217;m not sure how it determines the numbering or naming for Flash Catalyst imported projects.</p>
<p>Locate the &lt;s:RichText /&gt; elements.  One should have a text=&#8221;{data.text1}&#8221;.  This is the author area.  Replace the {data.text1} with {data.author.name}.  This tells it to use the author&#8217;s name for each entry.</p>
<p>Next find the RichText with the {data.text2}.  This is where the tweet appears.  Change {data.text2} to {data.title}.  This will make the tweet show up in the box.</p>
<p>The last bound piece is the image.  For me it&#8217;s bound to {data.image3}.  Change</p>
<p>source=&#8221;{data.image3}&#8221;</p>
<p>to</p>
<p>source=&#8221;{data.link.getItemAt(1).href}&#8221;</p>
<p>Run the project by going to Run -&gt; Run Main or clicking on the green play button at the top.</p>
<p>Everything should work at this point.  There&#8217;s still one more change though.  In the RepeatedItem&#8217;s image, remove the</p>
<p>smoothBitmapContent=&#8221;true&#8221;</p>
<p>attribute.  While everything works fine if you run this locally, once it&#8217;s on a real server things will go all wonky.  This is because smoothBitmapContent actually modifies the image that is coming from another server.  This is not allowed outside of the sandbox of running your .swf using file:///.</p>
<p>That&#8217;s it.  At this point you should have a working twitter search application build off of your child&#8217;s art (or yours if you want).  Please let me know what you think or ask questions or let me know if there are errors or problems you find when going through the tutorial.  I built this app, then went back and built it again and tried to keep track of each step.  It&#8217;s very possible I&#8217;ve missed a step or two or screwed up something in the instructions.</p>
<p>The final apps can be seen at the following links:  <a title="Joey Twitter - Kid's artwork with flash catalyst" href="http://davidstockton.com/joey_twitter">Joey Twitter</a> and <a title="Ana Twitter - Kid's artwork with Flash Catalyst" href="http://davidstockton.com/ana_twitter">Ana Twitter</a>. Both are twitter search apps.  It would be pretty simple to make them into something else (like Flickr search or something similar).  I hope you enjoyed this set of tutorials.</p>
<p>Thanks,</p>
<p>David Stockton</p>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-3/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Flash Catalyst to Let Your Kids Make Computer Interfaces &#8211; Part 2</title>
		<link>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-2</link>
		<comments>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-2#comments</comments>
		<pubDate>Tue, 22 Jun 2010 06:49:17 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[flash catalyst]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=52</guid>
		<description><![CDATA[In case you missed it, here&#8217;s part 1. In part 1 I showed you how to take your child&#8217;s artwork into Photoshop, chop, layer and label it, import that into Flash Catalyst and turn all that artwork into working components. If you follow all the way through these tutorials, you should have a working twitter [...]]]></description>
			<content:encoded><![CDATA[<p>In case you missed it, here&#8217;s <a href="http://davidstockton.com/cool-stuff/using-flash-catalyst-to-let-your-kids-make-computer-interfaces">part 1</a>. In part 1 I showed you how to take your child&#8217;s artwork into Photoshop, chop, layer and label it, import that into Flash Catalyst and turn all that artwork into working components. If you follow all the way through these tutorials, you should have a working <a href="http://twitter.com">twitter</a> search application built with your child&#8217;s (or your) artwork.</p>
<p>The final apps can be seen at the following links:  <a title="Joey Twitter - Kid's artwork with flash catalyst" href="http://davidstockton.com/joey_twitter">Joey Twitter</a> and <a title="Ana Twitter - Kid's artwork with Flash Catalyst" href="http://davidstockton.com/ana_twitter">Ana Twitter</a>.</p>
<p>And now on to part 2.</p>
<div id="attachment_53" class="wp-caption alignnone" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_interface.gif"><img class="size-medium wp-image-53" title="catalyst_interface" src="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_interface-300x175.gif" alt="" width="300" height="175" /></a><p class="wp-caption-text">Flash Catalyst Interface</p></div>
<p>We&#8217;re going to now build the application states and transitions within Flash Catalyst. If you haven&#8217;t created all your components yet or are not sure how to do that please check out the first part of the tutorial. For this application, we&#8217;ll have 3 states: start, searchPage and searchResults. The idea is that the start page will show the Start button.  When that is clicked, the application will transition to the searchPage state where the user can enter their search terms to search Twitter.  When the user searches for something and clicks the search button, the application will transition to the searchResults page and display the results of the search. For fun, we&#8217;ll also hook up the signature button.  If it is clicked on the searchResults page, the application will transition back to the searchPage state. If it is clicked on the searchPage state, it will transition back to the start state.</p>
<p><span id="more-52"></span></p>
<p>Step 1: Rename the Page1 state to start.  Double-click on the Page1 name</p>
<div id="attachment_55" class="wp-caption alignnone" style="width: 195px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/rename_state1.gif"><img class="size-full wp-image-55" title="rename_state" src="http://davidstockton.com/wp-content/uploads/2010/06/rename_state1.gif" alt="" width="185" height="62" /></a><p class="wp-caption-text">Rename to Start state</p></div>
<p>and type &#8220;start&#8221;.  Now we&#8217;ll get the start state configured.</p>
<p>Step 2: Hide all the components that don&#8217;t appear in the start state.</p>
<p>In the Flash Catalyst layers palette, click on the eye icon next to everything except for the startButton layer.  Drag the startButton object to where you want it to be when the app starts.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/hide_layers_start.gif"><img class="alignnone size-full wp-image-56" title="hide_layers_start" src="http://davidstockton.com/wp-content/uploads/2010/06/hide_layers_start.gif" alt="" width="285" height="138" /></a></p>
<p>The work area in Flash Catalyst should look something like below:</p>
<div id="attachment_57" class="wp-caption alignnone" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/start_state.gif"><img class="size-medium wp-image-57" title="start_state" src="http://davidstockton.com/wp-content/uploads/2010/06/start_state-300x225.gif" alt="" width="300" height="225" /></a><p class="wp-caption-text">Completed Start state</p></div>
<p>That&#8217;s it.  The first state is complete.  You can run the project and you should see a browser with your application.  Only the start button should be visible.  It should also behave correctly as far as mousing over or clicking the button.  But right now it won&#8217;t do anything.  We need to make some more states.</p>
<p>Step 2: Create the searchPage state.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/new_state.gif"><img class="alignnone size-full wp-image-58" title="new_state" src="http://davidstockton.com/wp-content/uploads/2010/06/new_state.gif" alt="" width="225" height="130" /></a></p>
<p>In the top left of Flash Catalyst, click on the + New Blank State button. The workspace will turn white and you should see a new Page1 state appear next to your start state.  Double click on Page1 and rename it to searchPage.</p>
<p>In the layers palette, make the searchButton, searchText and the signatureButton visible.  Move these components to where you want them to be for the search screen.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/search_layers1.gif"><img class="alignnone size-full wp-image-59" title="search_layers" src="http://davidstockton.com/wp-content/uploads/2010/06/search_layers1.gif" alt="" width="283" height="136" /></a></p>
<p>The searchPage state now looks like this:</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/search_state.gif"><img class="alignnone size-medium wp-image-60" title="search_state" src="http://davidstockton.com/wp-content/uploads/2010/06/search_state-300x224.gif" alt="" width="300" height="224" /></a></p>
<p>Step 3: Create the searchResults state</p>
<p>With the searchPage state selected, click on he Duplicate State button.  Rename this state to searchResults. Make the dataGrid layer visible.</p>
<p>At this point, I dragged the signatureButton down (using shift to constrain to only moving vertically).</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/searchResult_state.gif"><img class="alignnone size-medium wp-image-61" title="searchResult_state" src="http://davidstockton.com/wp-content/uploads/2010/06/searchResult_state-300x224.gif" alt="" width="300" height="224" /></a></p>
<p>If you run your application now, you&#8217;ll be able to see that start button but you will not be able to see any of the other states.</p>
<p>Step 4: Create the transitions</p>
<p>Click on the start state in the state palette in the top left of the Flash Catalyst interface. Click on the start button.  On the right is an interactions tab.  Click on the +Add Interaction button.</p>
<div id="attachment_62" class="wp-caption alignnone" style="width: 294px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/add_interaction.gif"><img class="size-full wp-image-62" title="add_interaction" src="http://davidstockton.com/wp-content/uploads/2010/06/add_interaction.gif" alt="" width="284" height="307" /></a><p class="wp-caption-text">Add Interactions in Flash Catalyst</p></div>
<p>By default this box is already set up almost how we need it to be.  In the CHOOSE STATE drop down, pick the searchPage state.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/pick_searchPage.gif"><img class="alignnone size-full wp-image-63" title="pick_searchPage" src="http://davidstockton.com/wp-content/uploads/2010/06/pick_searchPage.gif" alt="" width="295" height="258" /></a></p>
<p>This tells the search button that when it is clicked the application should change to the state to the searchPage state.</p>
<p>We can also set up animations for this state transition from within Flash Catalyst.</p>
<p>In the lower left area of Flash Catalyst, find the timelines tab.  Look for the start &gt; searchPage transition.  Click on the Smooth Transition button to allow Flash Catalyst to automatically create animations between states.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/state_transition.gif"><img class="alignnone size-full wp-image-64" title="state_transition" src="http://davidstockton.com/wp-content/uploads/2010/06/state_transition.gif" alt="" width="652" height="200" /></a></p>
<p>You can choose the amount of time the transition should take to play and also choose if you&#8217;d like simultaneous (all animations run at the same time) or smart smoothing (Catalyst makes things look cool).</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/smooth.gif"><img class="alignnone size-full wp-image-65" title="smooth" src="http://davidstockton.com/wp-content/uploads/2010/06/smooth.gif" alt="" width="212" height="208" /></a></p>
<p>You can also add your own animations to the transition effects.</p>
<p>You&#8217;ll also want to create transitions for the following states:</p>
<ul>
<li>searchPage &gt; start</li>
<li>searchPage &gt; searchResults</li>
<li>searchResults &gt; searchPage</li>
</ul>
<p>On the searchPage state, click on the search button and add an interaction to transition to the searchResults state.</p>
<p>Also, on the searchPage, click on the signature button, and add an interaction to transition to the start state.  Make sure you indicate that you change the &#8220;When in any state&#8221; selection to searchPage. The signature button is going to behave differently in different states.</p>
<p>On the searchResults page, click on the signature button and add an interaction to transition to the searchPage state.</p>
<p>At this point you&#8217;ve got a &#8220;working&#8221; app that will let you click on the buttons and see the transitions between the various states of your application.  To see if it works and looks right, go ahead and run your application in Flash Builder.</p>
<p><strong>Test Data:</strong></p>
<p>You may notice that you&#8217;ve now got 5 copies of your data in the searchResults page.  Flash Catalyst will let you modify this data so you can see what your app would look like with a variety of data.</p>
<p>In the lower left of the Flash Catalyst interface, you should see a tab titled &#8220;Design-Time Data&#8221; next to the timeline.  Click on it and you should see the various pieces of information in your repeating element.</p>
<div id="attachment_66" class="wp-caption alignnone" style="width: 756px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/design_time_data.gif"><img class="size-full wp-image-66" title="design_time_data" src="http://davidstockton.com/wp-content/uploads/2010/06/design_time_data.gif" alt="" width="746" height="181" /></a><p class="wp-caption-text">Flash Catalyst Design Time Data</p></div>
<p>In my example with my artwork, the Image 1 and Image 2 data will not change from one result to another.  To get rid of these pieces, double click on the Data List element.  Then double click on the repeated item. Then click to select the image or part of the repeated element that is not data driven.</p>
<p>You can select one or more of these pieces at once.  In any case, once you&#8217;ve selected the pieces that are not going to change from one result to another, click on the Remove Image from Design-Time Data.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/remove_design_time.gif"><img class="alignnone size-full wp-image-67" title="remove_design_time" src="http://davidstockton.com/wp-content/uploads/2010/06/remove_design_time.gif" alt="" width="425" height="213" /></a></p>
<p>When you look back at the Design Time data tab now, you should see only the parts that will change from one result to the next: the Tweeter&#8217;s picture, their name and their tweet.  In the design time data grid, you can now change the values including the images and text.  With a twitter app, it&#8217;s a good idea to make sure that a 140 character tweet will fit within the repeating data area so you could put in a 140 character message (put in all W&#8217;s to see the largest it should be).</p>
<p>Next, just test the app out again by running it.  If all the transitions are working and the data pieces are looking correct, then save your project.  The next tutorial will talk about how to get your Flash Catalyst project into Flash Builder and add in the Twitter functionality.</p>
<p>Look for part 3 to be posted soon.  Feel free to post comments and ask questions.</p>
<p>Thanks,</p>
<p>David Stockton</p>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-2/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Flash Catalyst to Let Your Kids Make Computer Interfaces &#8211; Part 1</title>
		<link>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces</link>
		<comments>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces#comments</comments>
		<pubDate>Sun, 20 Jun 2010 07:42:44 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[catalyst]]></category>
		<category><![CDATA[custom interface]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[flash catalyst]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=27</guid>
		<description><![CDATA[The other day I decided to have my two daughters draw what they think a computer program should look like.  I sketched out a few key components so they&#8217;d know what I needed.  I drew a search button, a search box, a start button, a scroll bar, a scroll bar thumb, an area to put [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_welcome.gif"><br />
</a>The other day I decided to have my two daughters draw what they think a computer program should look like.  I sketched out a few key components so they&#8217;d know what I needed.  I drew a search button, a search box, a start button, a scroll bar, a scroll bar thumb, an area to put data in, and a repeating data item.  The idea was that I&#8217;d take their drawings and turn them into working <a href="http://twitter.com">Twitter</a> search programs using Flash Catalyst to build the interface and then dropping that project into Flash Builder 4 and hooking it all into <a href="http://twitter.com">Twitter</a>.</p>
<p>The final apps can be seen at the following links:  <a title="Joey Twitter - Kid's artwork with flash catalyst" href="http://davidstockton.com/joey_twitter">Joey Twitter</a> and <a title="Ana Twitter - Kid's artwork with Flash Catalyst" href="http://davidstockton.com/ana_twitter">Ana Twitter</a>.</p>
<p>As it turns out, doing all of this with absolutely no Flash Catalyst experience and basically no Flex experience was pretty simple and the girls love it.  So without further adieu, here&#8217;s the tutorial.</p>
<p><span id="more-27"></span><strong>Skill Level</strong>: Beginner</p>
<p><strong>Software Used</strong>: Flash Catalyst CS5, Flash Builder 4 Standard, Adobe Photoshop CS5 Extended</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/icons.png"><img class="alignnone size-full wp-image-28" title="icons" src="http://davidstockton.com/wp-content/uploads/2010/06/icons.png" alt="" width="374" height="146" /></a></p>
<p><strong>Hardware Used</strong>: Flatbed scanner, markers, paper</p>
<p><strong>Step 1</strong>: Get the artwork.  I drew out some basic user interface components so my kids would have an idea of what I needed them to draw. For this tutorial, you&#8217;ll need a scroll bar and a scroll bar thumb (the part of the scroll bar that moves), a start button, a search button, a search text area (this is where you&#8217;ll be typing in the search term, a box to contain the search result items, a box to contain each individual search result.</p>
<p>Here&#8217;s what they came up with.</p>
<div class="mceTemp">
<div id="attachment_29" class="wp-caption alignleft" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/ana_scan.png"><img class="size-medium wp-image-29 " title="ana_scan" src="http://davidstockton.com/wp-content/uploads/2010/06/ana_scan-300x252.png" alt="" width="300" height="252" /></a><p class="wp-caption-text">Ana&#39;s Computer Interface Elements</p></div>
<dl id="attachment_30" class="wp-caption alignnone" style="width: 310px;">
<dt class="wp-caption-dt"><a href="http://davidstockton.com/wp-content/uploads/2010/06/joey_scan.png"><img class="size-medium wp-image-30 " title="joey_scan" src="http://davidstockton.com/wp-content/uploads/2010/06/joey_scan-300x219.png" alt="" width="300" height="219" /></a></dt>
<dd class="wp-caption-dd">Joey&#8217;s Computer Interface Elements</dd>
</dl>
</div>
<p><strong>Step 2</strong>: Scan the artwork into Photoshop.  You could do this with a camera if you don&#8217;t have a scanner but in any case, you need to get the artwork into the computer and into Photoshop.</p>
<div id="attachment_31" class="wp-caption alignnone" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/scanned_to_photoshop.png"><img class="size-medium wp-image-31" title="scanned_to_photoshop" src="http://davidstockton.com/wp-content/uploads/2010/06/scanned_to_photoshop-300x205.png" alt="" width="300" height="205" /></a><p class="wp-caption-text">Scanned into Photoshop</p></div>
<p><strong>Step 3</strong>: Make the artwork layered, grouped, transparent, etc.  The more work you do here, the easier everything will be in Flash Catalyst.  Basically you want to put together the interface in the way you want to see it. That means each of the components should be in its own layer and components that are built up of several pieces should have each of those pieces in its own layer and all of those layers should be in a group. I pretty much used the marquee tool to select each of the components, copy and paste it to another layer and then the magic wand to select and delete the background. This step should be pretty self explanatory and simple to do.  If you have questions please post a comment.  Here&#8217;s what it looks like after this step is done. I also put in some sample text to represent a search result.</p>
<div id="attachment_32" class="wp-caption alignnone" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/joey_grouped.png"><img class="size-medium wp-image-32" title="Joey grouped interface" src="http://davidstockton.com/wp-content/uploads/2010/06/joey_grouped-300x207.png" alt="" width="300" height="207" /></a><p class="wp-caption-text">Grouped and layered interface in Photoshop</p></div>
<p><strong>Step 4</strong>: Save your interface as a .psd file.</p>
<p><strong>Step 5</strong>: Open Flash Catalyst and import your Photoshop file. You can do this from the Flash Catalyst welcome screen or using the menu File &#8211;&gt; New Project from Design File..</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_welcome.gif"><img class="alignnone size-medium wp-image-35" title="catalyst_welcome" src="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_welcome-300x211.gif" alt="" width="300" height="211" /></a> <a href="http://davidstockton.com/wp-content/uploads/2010/06/import_project.gif"><img class="alignnone size-full wp-image-34" title="import_project" src="http://davidstockton.com/wp-content/uploads/2010/06/import_project.gif" alt="" width="250" height="272" /></a></p>
<p><!--more--><strong>Step 6</strong>: Import your Photoshop artwork into Flash Catalyst.</p>
<p>When you import, Flash Catalyst will ask you about how large to make the interface.  If you&#8217;ve sized your elements to the final size you want when you built it in Photoshop, then the defaults should work.  If you haven&#8217;t, then you&#8217;ll need to pick something that seems reasonable.  Please note though, if you build an interface in Photoshop at high resolution and then import into Flash Catalyst and shrink it there, your final .swf file will be large since it will contain the full resolution interface elements in your project.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/import_size.gif"><img class="alignnone size-medium wp-image-36" title="import_size" src="http://davidstockton.com/wp-content/uploads/2010/06/import_size-300x172.gif" alt="" width="300" height="172" /></a></p>
<p>When your artwork comes into Catalyst it should look pretty much like it did in Photoshop (you can use Illustrator with Catalyst as well, but that&#8217;s a different tutorial).  You&#8217;ll notice that the groups and named layers you created in Photoshop show up in Flash Catalyst.</p>
<div id="attachment_37" class="wp-caption alignnone" style="width: 295px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_layers.gif"><img class="size-full wp-image-37" title="catalyst_layers" src="http://davidstockton.com/wp-content/uploads/2010/06/catalyst_layers.gif" alt="" width="285" height="310" /></a><p class="wp-caption-text">Layers and Groups in Flash Catalyst</p></div>
<p><strong>Step 7</strong>: Convert the button art into a button component</p>
<p>Click on the start button.  You&#8217;ll see it get highlighted and you should see a box that looks like below:</p>
<div id="attachment_38" class="wp-caption alignnone" style="width: 478px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/start_component.gif"><img class="size-full wp-image-38" title="start_component" src="http://davidstockton.com/wp-content/uploads/2010/06/start_component.gif" alt="" width="468" height="133" /></a><p class="wp-caption-text">Creating a button component in Flash Catalyst</p></div>
<p>In the StartButton (Image) box, we want to convert the artwork to a button so using the select box, choose Button.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/convert_to_button.gif"><img class="alignnone size-full wp-image-39" title="convert_to_button" src="http://davidstockton.com/wp-content/uploads/2010/06/convert_to_button.gif" alt="" width="258" height="346" /></a></p>
<p>The box below will appear.  You can now modify each of the button states.  Click on Up.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/button_states.gif"><img class="alignnone size-full wp-image-40" title="button_states" src="http://davidstockton.com/wp-content/uploads/2010/06/button_states.gif" alt="" width="259" height="77" /></a></p>
<p>The interface will now change slightly (everything but the start button fades out a bit) and you can now modify what each of the states of your button look like.  On the right, you&#8217;ll find various filters like blur, drop shadow, inner shadow, glow, etc. You can experiment with changing the size, position and effects on each of the button states until you get what you want. For my girls&#8217; artwork, I put a drop shadow on the Over state. For the down state, I did a drop shadow but moved it closer so it looks like the graphics were pushed in.  When you are done with the button states, click on your project name. If you later decide to modify the button states, you can double click on the button or right click and choose Edit Component.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/edit_project.gif"><img class="alignnone size-full wp-image-41" title="edit_project" src="http://davidstockton.com/wp-content/uploads/2010/06/edit_project.gif" alt="" width="125" height="34" /></a></p>
<p>Do the same thing for the search button.  For my daughter&#8217;s artwork, I also made her signature into a button.</p>
<p>At any time if you want to see how things are working, you can run the project by clicking on File &#8211;&gt; Run Project or hitting Command + Enter.  You should be able to see the different states of the buttons working when you mouse over and click on them.</p>
<p><!--more--><strong>Step 8</strong>: Convert the text input art into a text input component</p>
<p>Click on the text input artwork and using the Convert Artwork to Component dropdown, choose Text Input.  Then double click on the art/component. If your text input artwork is pretty straight, you may not need to do this part, but if you actually have your kid draw the art, you may want to do this. In the layers palette, you&#8217;ll notice there are two layers &#8211; Text Display and SearchBox (or whatever you called the search box layer in Photoshop).</p>
<div id="attachment_42" class="wp-caption alignnone" style="width: 292px"><a href="http://davidstockton.com/wp-content/uploads/2010/06/search_layers.gif"><img class="size-full wp-image-42" title="search_layers" src="http://davidstockton.com/wp-content/uploads/2010/06/search_layers.gif" alt="" width="282" height="98" /></a><p class="wp-caption-text">Flash Catalyst Text Input Layers</p></div>
<p>The Text Display layer is where the text that you&#8217;ll be typing into the search box will be displayed. For me this part was trial and error since modifying the rotation property on this layer just changes the shape of the box and doesn&#8217;t really show where you&#8217;ll be typing.  You may also want to update the font size.  For my daughter&#8217;s artwork, she wrote a search term in the box which makes it hard to see what you&#8217;re typing when using the app.  I used Catalyst to drag a white rectangle over the area where the text should go.  I rotated it appropriately and changed the opacity so it would be easier to see what you&#8217;re typing but that my daughter&#8217;s original search term &#8220;rabbit&#8221; is somewhat visible. What you need to do may differ from this. Keep tweaking and running the project until the text shows up how you want it to.</p>
<p><strong>Step 9</strong>: Convert the scroll bar artwork into a scrollbar component</p>
<p>Click on the scrollbar group in the Flash Catalyst layers palette. You&#8217;ll see blue boxes appear on all the parts of the scrollbar.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/scrollbar.gif"><img class="size-full wp-image-43 alignleft" title="scrollbar" src="http://davidstockton.com/wp-content/uploads/2010/06/scrollbar.gif" alt="" width="110" height="401" /></a>For my daughter&#8217;s artwork artwork, I separated out the up and down arrows, the thumb (the round moving part) and the track. The only required pieces are the thumb and the track.  In any case, select all the parts that make up your scrollbar.  Select Vertical Scrollbar (or Horizontal if that&#8217;s what you need) from the Convert Artwork to Component dropdown.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/vertical_conversion.gif"><img class="size-medium wp-image-44 alignright" title="vertical_conversion" src="http://davidstockton.com/wp-content/uploads/2010/06/vertical_conversion-224x300.gif" alt="" width="224" height="300" /></a></p>
<p>You&#8217;ll see a box that tells you that you need to select the various parts of the Vertical scroll bar.  Click on the Edit Parts button.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/vertical_scrollbar_steps.gif"><img class="alignnone size-full wp-image-45" title="vertical_scrollbar_steps" src="http://davidstockton.com/wp-content/uploads/2010/06/vertical_scrollbar_steps.gif" alt="" width="259" height="138" /></a></p>
<p>Click on each of your parts of the scrollbar and choose what it represents.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/vertical_scrollbar_parts.gif"><img class="alignnone size-full wp-image-46" title="vertical_scrollbar_parts" src="http://davidstockton.com/wp-content/uploads/2010/06/vertical_scrollbar_parts.gif" alt="" width="260" height="220" /></a></p>
<p>As long as you at least assign art to the thumb and track parts, your scroll bar will work correctly.  If you don&#8217;t assign the up or down buttons it just means there won&#8217;t be any buttons to click to move the scroll bar, but you can still drag the thumb around to scroll.  Once you&#8217;ve assigned the parts, you can also modify the scrollbar&#8217;s states (Normal, Disabled and Inactive). When you&#8217;re all done assigning pieces, your thumb part may move.  From what I can tell, the top of the thumb moves to the top of the track.  When you are scrolling the bottom of the thumb can move down to the bottom of the track.  Keep that in mind when you build your artwork.</p>
<p><!--more--><strong>Step 10</strong>: Create the data list component</p>
<p>To create the data list, you need to select your scroll bar, the box that will hold the scroll results, and the other artwork that represents the results.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/create_data_area.gif"><img class="alignnone size-medium wp-image-47" title="create_data_area" src="http://davidstockton.com/wp-content/uploads/2010/06/create_data_area-300x144.gif" alt="" width="300" height="144" /></a></p>
<p>Click on Data List in the Convert Artwork to Component drop down.</p>
<p>In the component editor, choose all the artwork pieces that will be used to show the results of the search.</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/repeating_component.gif"><img class="alignnone size-medium wp-image-48" title="repeating_component" src="http://davidstockton.com/wp-content/uploads/2010/06/repeating_component-300x79.gif" alt="" width="300" height="79" /></a></p>
<p>For my daughter&#8217;s artwork, I chose the photo that represents the Twitter user&#8217;s icon, the text for the Twitter user&#8217;s name, the text for the tweet and the artwork that surrounds the image and the art that surrounds all the rest of the result.  Under Convert to Data List Part, choose Repeated Item (required).  As soon as you do this, it will repeat the repeated item:</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/repeated_item.gif"><img class="alignnone size-medium wp-image-49" title="repeated_item" src="http://davidstockton.com/wp-content/uploads/2010/06/repeated_item-300x243.gif" alt="" width="300" height="243" /></a></p>
<p>Shrink (or expand) the area where the repeated items can appear in.</p>
<p>Next double click on the repeated item component and edit its states.  By default the over state will be a large blue overlay which doesn&#8217;t look so good on this artwork.  I chose to put a colored glow around the art (using filters) for the Over and Selected states.</p>
<p>At this point, all your artwork should be converted to components.  In the Flash Catalyst layers area, you can rename the components to something that the Flex developer (this could be you) can use to easily tell the components apart (or you can let them do that later).</p>
<p><a href="http://davidstockton.com/wp-content/uploads/2010/06/rename_layers.gif"><img class="alignnone size-full wp-image-50" title="rename_layers" src="http://davidstockton.com/wp-content/uploads/2010/06/rename_layers.gif" alt="" width="285" height="141" /></a></p>
<p>To rename, just double click on any of the names.  It should let you edit the names inline.</p>
<p>So at this point, I&#8217;ve been working on writing this tutorial and doing screenshots and what-not and it&#8217;s 1:30 in the morning.  Also the tutorial is enormous.  So I&#8217;ll be splitting this tutorial into at least a couple of separate posts.</p>
<p>Look for part 2 to be posted soon. I&#8217;ll take you through building different states and transitions for your application.</p>
<p>Thanks,</p>
<p>David Stockton</p>
<p><a href="http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces-part-2">Part 2 is here</a></p>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/tutorials/using-flash-catalyst-to-let-your-kids-make-computer-interfaces/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Kelley&#8217;s Doves</title>
		<link>http://davidstockton.com/blog/kelleys-doves</link>
		<comments>http://davidstockton.com/blog/kelleys-doves#comments</comments>
		<pubDate>Fri, 28 May 2010 06:35:48 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=12</guid>
		<description><![CDATA[Last year we had a bird create a nest in the fence around our deck in the backyard.  I think squirrels got to it or something but the nest and the bird wasn&#8217;t there long.  This year we had a turtle dove build a nest in the other corner of our deck. A couple of [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_14" class="wp-caption alignright" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/05/dove_2.jpg"><img class="size-medium wp-image-14" title="Turtle Dove" src="http://davidstockton.com/wp-content/uploads/2010/05/dove_2-300x192.jpg" alt="" width="300" height="192" /></a><p class="wp-caption-text">Turtle dove keeping its babies warm in the nest made of shredded paper.</p></div>
<div id="attachment_13" class="wp-caption alignleft" style="width: 394px"><a href="http://davidstockton.com/wp-content/uploads/2010/05/dove_1.jpg"><img class="size-full wp-image-13 " title="Turtle Dove in nest" src="http://davidstockton.com/wp-content/uploads/2010/05/dove_1.jpg" alt="" width="384" height="238" /></a><p class="wp-caption-text">Turtle dove keeping babies warm in homemade nest.</p></div>
<p>Last year we had a bird create a nest in the fence around our deck in the backyard.  I think squirrels got to it or something but the nest and the bird wasn&#8217;t there long.  This year we had a turtle dove build a nest in the other corner of our deck.</p>
<p>A couple of days ago there was a huge windstorm and my wife found that the nest had been blown away.  She looked around and found the babies had hatched but had been blown into and dropped on the grass.  She picked them up and brought them inside and made a nest in a shoe box for them out of shredded paper.  She then fed them baby food with an eye dropper.  Things were not looking so good for them though, and we knew the babies needed their mommy.  Kelley saw later that day the mom came back and was looking all over for her babies.  My wife took the birds outside to give to the mommy but she was scared away and didn&#8217;t return for awhile.</p>
<div id="attachment_17" class="wp-caption alignright" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/05/breakfast_time.jpg"><img class="size-medium wp-image-17  " title="Breakfast Time" src="http://davidstockton.com/wp-content/uploads/2010/05/breakfast_time-300x194.jpg" alt="Baby dove being fed" width="300" height="194" /></a><p class="wp-caption-text">One of the baby doves goes after breakfast</p></div>
<div id="attachment_18" class="wp-caption alignleft" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/05/home_improvement.jpg"><img class="size-medium wp-image-18 " title="Home Improvement" src="http://davidstockton.com/wp-content/uploads/2010/05/home_improvement-300x127.jpg" alt="The doves working on improving the nest" width="300" height="127" /></a><p class="wp-caption-text">Dad dove returns from the Home Depot</p></div>
<p>My wife tried this a couple more times and then created a new nest out of half a ferret ball and shredded paper and waited for the wind to die down a little and then she put the plastic ball nest back on the fence and waited, hoping the mommy dove would return.  It was still pretty windy and cold so she and the girls were worried that the babies were not going to make it.  A little while later the mommy did return and cautiously approached the nest.  Eventually she made her way over and sat on the nest and warmed up and fed her babies.  We&#8217;ve been keeping track of the birds since then and I&#8217;ve taken a few pictures.</p>
<div id="attachment_19" class="wp-caption alignleft" style="width: 310px"><a href="http://davidstockton.com/wp-content/uploads/2010/05/mom_and_dad.jpg"><img class="size-medium wp-image-19 " title="Mom and Dad Dove" src="http://davidstockton.com/wp-content/uploads/2010/05/mom_and_dad-300x182.jpg" alt="Dove parents taking shifts watching the little ones" width="300" height="182" /></a><p class="wp-caption-text">Mom and dad take turns watching out for the babies</p></div>
<p>Each day the babies get larger and stronger.  This morning my wife was able to sneak over when the mom and the dad were gone and take some pictures of the babies.</p>
<p>It&#8217;s really cool to see these guys growing and getting stronger every day, especially when just two days ago we weren&#8217;t even sure if they would survive.</p>
<p>I also didn&#8217;t know until today that there were two parents that take care of the babies.</p>
<p>The mom and dad dove really seem to work well as a team to keep their babies safe, warm and fed.</p>
<div id="attachment_16" class="wp-caption alignleft" style="width: 490px"><a href="http://davidstockton.com/wp-content/uploads/2010/05/babies.jpg"><img class="size-full wp-image-16 " title="Close-up Turtle Dove Babies" src="http://davidstockton.com/wp-content/uploads/2010/05/babies.jpg" alt="" width="480" height="316" /></a><p class="wp-caption-text">A close-up of the babies</p></div>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/blog/kelleys-doves/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Exposure Denver: Lighting With Models</title>
		<link>http://davidstockton.com/photography/exposure-denver-lighting-with-models</link>
		<comments>http://davidstockton.com/photography/exposure-denver-lighting-with-models#comments</comments>
		<pubDate>Sun, 23 May 2010 07:55:41 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Photography]]></category>
		<category><![CDATA[exposure denver]]></category>
		<category><![CDATA[lighting]]></category>
		<category><![CDATA[models]]></category>
		<category><![CDATA[photography]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=6</guid>
		<description><![CDATA[Back in March, I participated in a photography workshop with Exposure Denver about lighting with models.  I think over the course of 2.5 hours I shot about 550 shots.  We covered using natural light and augmenting with reflectors and diffusers as well as using hot-shoe sync&#8217;d lights.  It was a lot of fun and I [...]]]></description>
			<content:encoded><![CDATA[<p>Back in March, I participated in a photography workshop with <a title="Exposure Denver" href="http://exposuredenver.com">Exposure Denver</a> about lighting with models.  I think over the course of 2.5 hours I shot about 550 shots.  We covered using natural light and augmenting with reflectors and diffusers as well as using hot-shoe sync&#8217;d lights.  It was a lot of fun and I learned a lot, although I am hoping I&#8217;ll be able to do something like that again.  I could definitely use the practice since I tend to mainly take picture of cake.</p>
<p>I was pretty nervous in my pathetic attempts to direct the models.  I think that&#8217;s something I could definitely learn to do better.</p>
<p>In any case, here&#8217;s a couple of the pictures that I think came out pretty well.  Looking at them now, about 2 months later, I think I could probably go back today and process them a little different to come out with an even better result.  I may have to look at doing that.</p>
<p>You can click through each of the images below to see a larger version and a little bit about each shot and my experience from the shoot.</p>

<a href='http://davidstockton.com/photography/exposure-denver-lighting-with-models/attachment/shriyasi' title='Shriyasi'><img width="150" height="150" src="http://davidstockton.com/wp-content/uploads/2010/05/shriyasi-150x150.jpg" class="attachment-thumbnail" alt="Shriyasi from Exposure Denver&#039;s Lighting with Models workshop" title="Shriyasi" /></a>
<a href='http://davidstockton.com/photography/exposure-denver-lighting-with-models/attachment/raquel_1' title='Raquel Closeup'><img width="150" height="150" src="http://davidstockton.com/wp-content/uploads/2010/05/raquel_1-150x150.jpg" class="attachment-thumbnail" alt="Raquel Closeup" title="Raquel Closeup" /></a>
<a href='http://davidstockton.com/photography/exposure-denver-lighting-with-models/attachment/jeanette' title='Jeanette'><img width="150" height="150" src="http://davidstockton.com/wp-content/uploads/2010/05/jeanette-150x150.jpg" class="attachment-thumbnail" alt="Jeanette from Exposure Denver&#039;s Lighting with Models workshop" title="Jeanette" /></a>
<a href='http://davidstockton.com/photography/exposure-denver-lighting-with-models/attachment/raquel_2' title='Raquel'><img width="150" height="150" src="http://davidstockton.com/wp-content/uploads/2010/05/raquel_2-150x150.jpg" class="attachment-thumbnail" alt="Raquel" title="Raquel" /></a>

]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/photography/exposure-denver-lighting-with-models/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hello world!</title>
		<link>http://davidstockton.com/blog/hello-world</link>
		<comments>http://davidstockton.com/blog/hello-world#comments</comments>
		<pubDate>Sat, 22 May 2010 08:07:43 +0000</pubDate>
		<dc:creator>David Stockton</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://davidstockton.com/?p=1</guid>
		<description><![CDATA[If you&#8217;re reading this it means that a) you&#8217;ve somehow found this site, and b) it&#8217;s on a new host and c) I&#8217;ve broken a 3 year lack of blogging streak.  I&#8217;ll be updating more often now that I have access to the server that this is hosted on now. This last part was done [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re reading this it means that a) you&#8217;ve somehow found this site, and b) it&#8217;s on a new host and c) I&#8217;ve broken a 3 year lack of blogging streak.  I&#8217;ll be updating more often now that I have access to the server that this is hosted on now.</p>
<p>This last part was done with Adobe Contribute CS5.  Very interesting&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://davidstockton.com/blog/hello-world/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

