<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>Gareth Shapiro | London Based Freelance Web &amp; Mobile Consult</title>
    <link>http://www.garethshapiro.com/</link>
    <description></description>
    <language>en-us</language>           
    <generator>Nucleus CMS v3.51</generator>
    <copyright>©</copyright>             
    <category>Weblog</category>
    <docs>http://backend.userland.com/rss</docs>
    <image>
      <url>http://www.garethshapiro.com//nucleus/nucleus2.gif</url>
      <title>Gareth Shapiro | London Based Freelance Web &amp; Mobile Consult</title>
      <link>http://www.garethshapiro.com/</link>
    </image>
    <item>
 <title>University Of Kent : Mobile Development Lecture</title>
 <link>http://www.garethshapiro.com/index.php?itemid=55</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/20090920-university_of_kent_logo.gif">University of Kent logo</a></div>Earlier this month I enjoyed one of the perks of being a member of the universities' <a href='http://www.garethshapiro.com/item/university-of-kent--industrial-panel-2009'>Digital Media Industrial Panel</a> and delivered a lecture to the students studying digital media.  There was obviously only one thing for me to talk about ... <i>Native vs Cross Platform Mobile Development</i>.<a href="http://www.garethshapiro.com/media/university-of-kent/native-cross-mobile-banner.jpg">Native vs Cross Mobile Banner</a><br />
<br />
If you were one of the students who attended thank you for coming and as promised, <a href='/media/university-of-kent/native-cross-mobile.mov'>here are the slides</a>.  This is a 47Mb (.mov) Quicktime Movie which has been set up to behave like a presentation in that it moves to the next slide when you click or press the right arrow.<br />
<br />
If you work for a London or Kent based digital enterprise and are interested in how you can benefit from university students participating in a work placement with you <a href='mailto:K.Van-Sanden@kent.ac.uk'>get in touch</a>.]]></descriptionnnn>
 <category>Consultant</category>
<comments>http://www.garethshapiro.com/index.php?itemid=55</comments>
 <pubDate>Tue, 20 Mar 2012 22:31:39 +0000</pubDate>
</item><item>
 <title>Native or Cross Platform Mobile Development?</title>
 <link>http://www.garethshapiro.com/index.php?itemid=50</link>
<descriptionnnn><![CDATA[Recently I have been looking into the popular choices, platforms and frameworks, currently used to develop mobile phone apps and I have collated my findings here.  This post has a day to day production considerations, is reasonably technical and is aimed at decision makers, team leaders and senior developers.  If you are a freelance mobile developer you may find this article a primer when deciding which mobile phone technology you feel is worth pursuing.
<b>Introduction</b><br />
<br />
At the time of writing this, and from a technical production perspective, the mobile landscape is quite a challenging one.  Mobile phone apps have captured everyone's imagination.  As our phones are with us all the time these days we have a more personal relationship with them then perhaps our laptop or work machine.  Their dulcet tones wake us in the morning and they retain our shopping list for our after work shop.  <br />
<br />
Single purpose small applications, with a small name 'apps', is an idea that speaks out to developers and project managers all too familiar with that time in the middle of a project when you can't seem to see either side and can't remember or imagine doing anything else.<br />
<br />
The truth of the matter is developing apps for mobile phones can be just as frustrating, tedious, and often as costly (pro rata) as web or desktop development.  The reason for this comes down to one thing.  Fragmentation.<br />
<br />
]]></descriptionnnn>
 <category>Consultant</category>
<comments>http://www.garethshapiro.com/index.php?itemid=50</comments>
 <pubDate>Fri, 10 Feb 2012 12:49:48 +0000</pubDate>
</item><item>
 <title>Dual : Adobe Air Database Update &amp; Access Layer</title>
 <link>http://www.garethshapiro.com/index.php?itemid=49</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/20111208adobe-air-icon.png">Adobe Air Runtime</a></div>We've all been in this situation.  You have developed a mobile app, or desktop application. It has been accepted to the Android Marketplace / Apple's App Store, or you have uploaded it onto your website or intranet for distribution.  People have installed it and are using it.<br />
<br />
It's time for version 2 and you make the inevitable changes to the database.  You have to write code, in the model of your MVC pattern usually, that copes both with a upgrading the database from version 1 and creating a database from scratch for a user who is using your application for the first time at version 2.<br />
<br />
And so the pattern continues, and the problem grows, for each version.  In version 3 you have to write code that handles people upgrading from version 2 to version 3, version 1 to version 3 and people installing the app for the first time.<br />
<br />
What a pain!  Not anymore …
<b>Introduction</b><br />
<br />
Dual is a library written in AS3 that provides an improvement to many database tasks in an Adobe Air application whether the app is intended for an Android phone, iPhone, iPad or desktop.  Dual was written to make the task of database version control across many different versions of your application easy to manage but that's not all it does ...<br />
<br />
Dual is :<ul><li>Lightweight, adding about 100k to your application.</li><li>Easy to use.  Honest.  It's really easy.</li><li>Part of my AS3 utilities.</li></ul>Dual helps you : <ul><li>Easily upgrade your application database from one version to another.</li><li>Run more than one query in one go on your database, this is not currently supported in Air.</li><li>Listen to only one set of events when accessing your database.</li><li>Implement robust and secure database code..</li></ul><b>Licensing</b> <br />
<br />
There is no license restrictions at all.  Obviously if you let me know, or even better let other people know that you are using it and where to get it, that would be great.  <br />
<br />
If you really need a license for legal reasons then I am happy for you to <a href=' http://sam.zoy.org/wtfpl/' target='blank'>apply this one</a>. <br />
<br />
Dual is open source and if you would like to improve it please feel free.  I have taken care to make sure that it is constructed well, there are no memory leaks caused by using the library and it is both easy to use and understand.  <br />
<br />
<b>Where I can you get it?</b><br />
<br />
Dual is available as part of my <a href='https://github.com/GarethShapiro/Actionscript-3-Utilities/tree/master/utilities/air/dual' target='blank'>Actionscript 3 /Air Utilities on GitHub<a/>, grab the <a href='https://github.com/GarethShapiro/Actionscript-3-Utilities/zipball/master'>zip</a>.<br />
<br />
]]></descriptionnnn>
 <category>Developer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=49</comments>
 <pubDate>Tue, 3 Jan 2012 12:31:44 +0000</pubDate>
</item><item>
 <title>Ubuntu : Desktop Adobe Air Applications</title>
 <link>http://www.garethshapiro.com/index.php?itemid=47</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/20111031-ubuntu-logo.png">Ubuntu Logo</a></div>Canonical, the company behind <a href='http://www.ubuntu.com/' target='blank'>Ubuntu</a>, one of the world's <a href='http://distrowatch.com/dwres.php?resource=major' target='blank'>most popular Linux distributions</a>, has teamed up with <a href='http://www.dell.co.uk/'>Dell</a> to make roads in to the Chinese personal computer market, which has recently become the <a href='http://www.theregister.co.uk/2011/08/24/china_overtakes_us_in_pc_purchasing/'>largest market in this sector in the world</a>.<br />
<br />
Ubuntu's latest version 11.10 will be available pre installed on a range of Dell machines and Canonical has planned a number of strategies to convince consumers that Ubuntu is as good as any operating system they can choose from.<br />
<br />
In addition to the operating system a number of applications are preinstalled on the machines to immediately meet the needs of people taking them home.  Two of these applications I am proud to say were developed by myself using <a href='http://www.adobe.com/products/air.html' target='blank'>Adobe Air</a>.<b>Music an MP3 player</b><br />
<br />
<a href="http://www.garethshapiro.com/media/1/20111031-ubuntu-music-app.png">Music Application Screen Shot</a><br />
<br />
A requirement of this project was that the applications needed to be lightweight and straight forward to use.  There is after all a much loved fully featured music player that comes with Ubuntu, called Banshee, that doesn't need replacing.<br />
<br />
The idea is to get a user up and running quickly enjoying their own media.  While the ins and outs of Ubuntu are absorbed for the first time the apps provide the type of rich engaging experience the Flash platform is known and loved for. <br />
<br />
<b>ID3 Tags</b><br />
<br />
When run for the first time all the MP3 files in the folder structure beneath the user's Music folder are interrogated and the ID3 data retrieved and stored on the internal Sqlite database.  On subsequent starts the application gives the user access to their music immediately and looks for changes in the background.<br />
<br />
The ID3 tags proved part of the biggest challenge for this application.  <br />
<br />
The Sound (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Sound.html' target='blank'>flash.media.Sound</a>)  class which provides a developer with the id3 property (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/ID3Info.html' target='blank'>flash.media.ID3Info</a>) was not good enough as you have to open a file before you get access to the information.  Obviously this would slow the indexing process down and so an approach to extract the ID3 info directly from the binary was implemented.<br />
<br />
There are two versions of ID3 tags and retrieving information from them is approached in different ways.  ID3 V2 is a more up to date protocol, and popular, however I was unable to open file streams asynchronously, while with ID3 V1 it is possible .  Obviously opening more than one file at a time is going to speed up the initial index, enhancing the user experience, however this does present a more intricate coding challenge making sure events handling the file once it is opened and tag read are attributed to the correct file.  There are many edge cases in this type of operation such as files that are not successfully interrogated for V2 are ear marked to fallback to V1 interrogation.  Also when a file is interrogated and tags are not found but no error events are dispatched.  The process had to incorporate a time out on each file to avoid the app becoming stuck in index mode.  <br />
<br />
<b>Picture an Image Viewer </b><br />
<br />
<a href="http://www.garethshapiro.com/media/1/20111031-ubuntu-picture-app.png">Picture Application Screen Shot</a><br />
<br />
This application was created with the same goals as its sibling “Music”.  The intention is a very lightweight application that allows a new Ubuntu user the ability to start looking at their images as soon as possible while enjoying Ubuntu for the first time.  Once the Ubuntu landscape becomes more familiar users can move their image viewing on to the well established and respected Shotwell application which comes with Ubuntu.<br />
<br />
<b>EXIF data</b><br />
<br />
As with the ID3 tags in the MP3 files images had to be interrogated for EXIF data.  Binary operations such as EXIF or ID3 tag extraction have to be handled with extreme care and this project reinforced the idea that all user generated content has to be treated with extreme suspicion!<br />
<br />
One of the pieces of information it is possible to get from EXIF data is the orientation of the image.  This delivered the biggest challenge of this application.  Ensuring the image was rotated correctly and resized according to the space allocated by the fluid resizable layout.<br />
<br />
I immediately turned to <a href='http://www.greensock.com/' target='blank'>Greensock</a> and coded up a solution using <a href='http://www.greensock.com/autofitarea/ ' target='blank'>AutoFitArea</a>.  Take a look at the interactive demo on the AutoFitArea page and you can see that this library provides exactly the type of functionality I needed.  It is easy to use and was almost an ideal fit.  What stopped me using it in the final release was sometimes when the app window was resized the AutoFitArea lagged behind and the image ended up being positioned incorrectly.<br />
<br />
Lucky all was not lost, although I got pretty frustrated with it at one stage!  I discovered that the Image Spark Component (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Image.html'>spark.components.Image</a>)  automatically provides the same functionality without the glitch I was having.  It's non trivial functionality and this component gives it to you out the box.<br />
<br />
<b>Localisation / Internationalisation</b><br />
<br />
Similar to the <a href='http://www.garethshapiro.com/item/nokia--touch-screen-air-application' target='blank'>Nokia Touch Screen</a> project I was involved in these applications needed support for different languages.  Unlike the other project which supported 3 languages these applications support 23 dialects, including two Chinese and two right to left languages Arabic and Hebrew. The locale used by each application is determined by the global settings of the operating system rather than a configuration file.<br />
<br />
Luckily for me Flex / Air is really good at <a href='http://livedocs.adobe.com/flex/3/html/help.html?content=l10n_6.html' target='blank'>bundling locale resources</a> and you can easily chose whether to compile them in to the application or load them at run time.<br />
<br />
<b>Licences</b><br />
<br />
One aspect of this project that I have never experienced before was the legal side.  For obvious reasons code going into an open source project could not have a licence that restricted its reuse.  Every third party library I wanted to use was submitted to two legal teams for ratification and you can imagine sometimes their answers were not what I wanted to hear.  Especially in terms of Greensock's Club code which was a pain as I am a big fan but it is worth bearing in mind for distributed apps. If you use Greensock code you are going to have to keep your <a href='http://www.greensock.com/club/' target='blank'>Club membership</a> up to date as long as the app is offered in an app store.  I am happy to do this; the code is rock solid, high quality and value for money but in this case the legal side of life dictated how things were going to be.<br />
<br />
<b>TheTeam</b><br />
<br />
I spent 9 months working at <a href='http://theteam.co.uk/' target='blank'>TheTeam</a>, the marketing agency hired to produce the work, and by the end of it I was sad to leave despite my dedication to the freelance life.  It wasn't very long before I felt comfortable working there and it was the first time in ages I thought about life on the other side!<br />
<br />
Ultimately I am grateful to them for the opportunity to work on this project and am super proud that potentially many thousands of people are going to use my applications.  Having my work distributed with such a fantastic bit of software, the Ubuntu operating system, is a dream come true for a geek like me.]]></descriptionnnn>
 <category>Freelancer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=47</comments>
 <pubDate>Mon, 31 Oct 2011 16:25:30 +0000</pubDate>
</item><item>
 <title>Using Flex 4 Spark Text Components</title>
 <link>http://www.garethshapiro.com/index.php?itemid=45</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/adobe_flex_logo.png">Flex Framework</a></div>Recently I needed to make changes to two desktop Air applications I have been working on for a major Operating System (more details when I am allowed).  The task was to change the <i>TextField</i> datatypes (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html' target='blank'>flash.text.Textfield</a>) to Spark <i>Label</i> (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Label.html' target='blank'>spark.components.Label</a>) and a couple of Spark <i>RichText</i> (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichText.html' target='blank'>spark.components.RichText</a>) components and I thought I would record what I learned to help other developers.  I have also included some information about the handy <i>RichEditableText</i> (<a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichEditableText.html' target='blank'>spark.components.RichEditableText</a>) component.
<b>Page 1</b><br />
<br />
<b>Advantages</b><br />
<br />
These new components are great and once you have adjusted to how they work they offer some real advantages.<ul><li>Lightweight<br />
<br />
These 3 Spark Text Components are designed so that you avoid components that provide functionality you don't need.  This is especially useful if you are developing mobile applications, whether for Android or the iOS/iPhone/iPad, using <a href='http://www.adobe.com/products/flex/mobile/' target='blank'>Flex for Mobile</a>.  For example <i>Label</i> has limited styling and <i>RichText</i> cannot be edited, this is provided by the <i>RichEditableText</i>.  Adobe recommends you do not use the <i>RichText</i> or <i>RichEditableText</i> components in mobile applications and so <i>Label</i> provides very lightweight text support for mobile apps.</li><br />
<li>Measuring<br />
<br />
The <i>RichText</i> and <i>RichEditableText</i> fields use something called the <a href='http://blogs.adobe.com/tlf/ ' target='blank'>Text Layout Framework</a> (TFL).  This allows super control of text using AS3.  If you ever struggled with this type of thing in the bad old AS2 days you would not have never imagined how much better things would get.  Take a look at these screen shots of an <a href='http://www.adobe.com/products/air/' target='blank'>Air Desktop Application</a> built by the <a href='http://www.nytimes.com/content/help/extras/reader/reader.html' target='blank'>New York Times</a>.</li></ul> <br />
<a href="http://www.garethshapiro.com/media/1/20110812-ny-times-reader-2-col.png">New York Times Reader Air Application Two Column</a><br />
<ul><li style='list-style-type: none'>As you can see when comparing the image above and the ones below the same content is presented in many different ways depending on the size of the screen.  The first two images are at their original size and the third one has been resized to fit on this page.</li></ul> <a href="http://www.garethshapiro.com/media/1/20110812-ny-times-reader-1-col.png">New York Times Reader Air Application One Column</a><a href="http://www.garethshapiro.com/media/1/20110812-ny-times-reader-3-col.png">New York Times Reader Air Application Short</a><ul><li style='list-style-type: none'><a href='http://www.nytimes.com/content/help/extras/reader/reader.html' target='blank'>Download it</a> and try it for yourself.  The layout is fluid and changes as you drag the screen to be a different size.  Make no mistake TFL is powerful stuff and capable of handling the many different screen sizes our applications might end up being displayed on.<br />
<br />
The <i>Label</i> Spark Component does not use TFL but it still provides much improved ways of measuring over <i>TextField</i>.</li><br />
<a name="internationalisation"></a><br />
<li>Internationalisation<br />
<br />
The reason I had to do this work was because I needed to support Arabic.  <i>TextField</i> simply does not render Arabic correctly.  Take a look at the two lines of text below.<br />
<br />
<div style="text-align: center; margin-top: 5px" class='img_box'><br />
<a href="http://www.garethshapiro.com/media/1/20110812-compare-arabic.png">Compare Arabic</a><br />
</div><br />
The top line is a <i>TextField</i> and the bottom one a Spark <i>Label</i>.  The are both attempting to render the same text which should say something like "Missing Images".  As you can see they are completely different.<br />
<br />
If you are developing an application that is going to be internationalised or there is any chance that you are going to need to support things like right to left text you will benefit greatly from getting these components into your application from the outset.</li><br />
<li>Aesthetics<br />
<br />
Simple this one.  These new components render text beautifully whether you are rendering in a browser, desktop or on your phone.  While Flash used to butcher text Flex and Air do not, it looks amazing.</li></ul><br />
]]></descriptionnnn>
 <category>Trainer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=45</comments>
 <pubDate>Thu, 18 Aug 2011 20:47:58 +0000</pubDate>
</item><item>
 <title>ActionScript 3 Frame Buffer</title>
 <link>http://www.garethshapiro.com/index.php?itemid=44</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/adobe_flash_logo.png">Flash Platform</a></div>All AS3 programmers have had to cope with situations where what they can see on the screen is different to what their code is telling them.  Within Air, Flex and Flash applications the two main contributors to this are; the Flash Player is single threaded, apart from a few exceptions in Air, and internally is based around a frame rate.<br />
<br />
Have you ever tried to measure something you have just added to the Display List and even though you can see it on the screen your measurement, something like width or height, is coming back as 0?  How about when you are preloading, does your preloader get stuck at 10% and then jump to 100% at the end?<b>Elastic Racetrack Cure</b><br />
<br />
First things first, download my <a href='https://github.com/GarethShapiro/Actionscript-3-Utilities/archives/master' target='blank'>Actionscript 3 utilities</a>.<br />
<br />
The reason why sometimes you can't measure items you have just added to the Display List in AS3 is because of the "Elastic Racetrack".  If you don't know what that is then I recommend you <a href='http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/' target='blank'>scoot off and read up about it first</a>.  Understanding this is <i>essential</i> for intermediate / advanced Actionscripters.<br />
<br />
One cure for the Elastic Racetrack is to use <a href='http://gskinner.com/libraries/' target='blank'>Grant Skinner's excellent Chunker</a> approach.  It's not always suitable for all situations though and a more straight forward approach is to simply wait 1 frame before carrying on with your measurement.  I recently had a project where I needed to wait 1 frame in quite a few places and so the <i>FrameBuffer</i> was born.<br />
<br />
Create a new Flex 4 project and type in the following code :<br />
<br />
<div class="actionscript"><span style="color: #66cc66;">&lt;</span>mx:Application <br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; creationComplete=<span style="color: #ff0000;">&quot;setUp()&quot;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;</span>fx:Script<span style="color: #66cc66;">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayList</span>;<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _years:ArrayList = <span style="color: #000000; font-weight: bold;">new</span> ArrayList<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> setUp<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _years.<span style="color: #006600;">source</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;2010&quot;</span> , <span style="color: #ff0000;">&quot;2009&quot;</span> , <span style="color: #ff0000;">&quot;2008&quot;</span> <span style="color: #66cc66;">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.<span style="color: #0066CC;">text</span> = &nbsp; <span style="color: #ff0000;">&quot; &nbsp; &nbsp; &nbsp; yearTabBar.width = &quot;</span> + yearTabBar.<span style="color: #0066CC;">width</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;/</span>fx:Script<span style="color: #66cc66;">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;</span>s:TabBar<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id=<span style="color: #ff0000;">&quot;yearTabBar&quot;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataProvider=<span style="color: #ff0000;">&quot;{_years}&quot;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">/&gt;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;</span>mx:<span style="color: #0066CC;">Text</span> id=<span style="color: #ff0000;">&quot;output&quot;</span><span style="color: #66cc66;">&gt;&lt;/</span>mx:Text<span style="color: #66cc66;">&gt;</span> &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
<span style="color: #66cc66;">&lt;/</span>mx:Application<span style="color: #66cc66;">&gt;</span></div><br />
When you publish you will see the Flex 4 Spark TabBar.<br />
<br />
<div style="text-align: center" class='img_box'><br />
<a href="http://www.garethshapiro.com/media/1/20110202-view-buffer-screen1.png">Spark Component TabBar</a></div><br />
<br />
Frustratingly the output text will tell you that : <br />
<br />
	yearTabBar.width = 0<br />
<br />
The reason is of course that we need to wait 1 frame for the Flash Player to get through the render part of it's cycle.  During this part the component is be measured and its width recorded.  <br />
<br />
There are many situations where this crops up and many ways of dealing with it.  The best approach is to architect your application differently so it does not fall victim to this.  Your <i>Views</i> should go through separate <i>Draw</i> and <i>Layout </i> phases and this problem will be avoided.  Like using <i>Chunker</i>, which I linked to above, this is not always possible or desirable.  It's not going to help your preloader for example. <br />
<br />
The easiest way is to set up an Event Handler to listen for <i>Event.ENTER_FRAME</i> and then to retrieve the width.  This is of course quite easy to do but on a recent project it was cropping up a bit and I was looking for an straight forward way achieve this and so I create the <i>FrameBuffer</i> utility.<br />
<br />
If you haven't done so already make the FrameBuffer code available to your project.<br />
<br />
	Step 1.  Create a folder called <i>com</i> inside your <i>src</i> folder.<br />
	Step 2.  Create a <i>garethshapiro</i> folder inside your <i>com</i> folder.<br />
	Step 3.  Add the <i>utilities</i> folder from the download and everything in it to the <i>garethshapiro</i> folder.<br />
<br />
Change the code you typed above to include the lines that have //2 at the end below <br />
<br />
<div class="actionscript"><span style="color: #66cc66;">&lt;</span>fx:Script<span style="color: #66cc66;">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">collections</span>.<span style="color: #006600;">ArrayList</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">garethshapiro</span>.<span style="color: #006600;">utilities</span>.<span style="color: #006600;">framebuffer</span>.<span style="color: #006600;">FrameBuffer</span>; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// 2</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _years:ArrayList = <span style="color: #000000; font-weight: bold;">new</span> ArrayList<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// Create the TabBar</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> setUp<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _years.<span style="color: #006600;">source</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;2010&quot;</span> , <span style="color: #ff0000;">&quot;2009&quot;</span> , <span style="color: #ff0000;">&quot;2008&quot;</span> <span style="color: #66cc66;">&#93;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.<span style="color: #0066CC;">text</span> = &nbsp; <span style="color: #ff0000;">&quot; &nbsp; &nbsp; &nbsp; yearTabBar.width = &quot;</span> + yearTabBar.<span style="color: #0066CC;">width</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">var</span> __frameBuffer : FrameBuffer = <span style="color: #000000; font-weight: bold;">new</span> FrameBuffer<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// 2</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __frameBuffer.<span style="color: #006600;">buffer</span><span style="color: #66cc66;">&#40;</span> &nbsp; measureTabBar &nbsp; <span style="color: #66cc66;">&#41;</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">// 2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// 2</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> measureTabBar<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080; font-style: italic;">// 2</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.<span style="color: #0066CC;">text</span> = &nbsp; <span style="color: #ff0000;">&quot; &nbsp; &nbsp; &nbsp; yearTabBar.width = &quot;</span> + yearTabBar.<span style="color: #0066CC;">width</span>; &nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">// 2</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">// 2</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&lt;/</span>fx:Script<span style="color: #66cc66;">&gt;</span></div><br />
This time the output text will tell you :<br />
<br />
	yearTabBar.width = 211<br />
<br />
A result.  Happy face.<br />
<br />
By default the <i>FrameBuffer</i> will wait 1 frame.  If you want it to wait longer then you can supply a second argument a <i>Number</i> which is the number of frames to wait.<br />
<br />
<div class="actionscript">__frameBuffer.<span style="color: #006600;">buffer</span><span style="color: #66cc66;">&#40;</span> &nbsp; measureTabBar &nbsp; , <span style="color: #cc66cc;">5</span> <span style="color: #66cc66;">&#41;</span>;</div><br />
<br />
It is also very likely that you would need to supply arguments to the method that is to be called and this is possible through another optional parameter.  The arguments to be supplied are wrapped up in an <i>Array</i>.<br />
<br />
<div class="actionscript">__frameBuffer.<span style="color: #006600;">buffer</span><span style="color: #66cc66;">&#40;</span> &nbsp; measureTabBar &nbsp; , <span style="color: #cc66cc;">5</span> , <span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;Trace Message&quot;</span> , <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;</div> <br />
<b>Preloading</b><br />
<br />
To get this to help you in preloading simply divide your preloading tasks into pieces and at the end of each piece use the <i>FrameBuffer</i> to wait one frame before moving on to the next piece.  If you have a large amount of data then instead of having one for loop handle it all use some variables to keep track of how far you are in the data and only process a small amount each time, wait 1 frame, and carry on.<br />
<br />
<b>Context</b><br />
<br />
This code is still dependant on the frame rate of the Flash Player.  If you give the player too much to do in one frame everything in your application, including the <i>FrameBuffer</i> is going to wait until that code is finished.<br />
<br />
The <i>FrameBuffer</i> is the easiest way but not the most efficient way of solving this problem.  If you are writing code that is sensitive to performance then there are better ways of achieving results, two of which I have mentioned in this article.  We are adding a type of pause into our program.  Expecting better performance this way is the same as expecting more flavour from food by adding water.<br />
<br />
That aside quite often user feedback is more important than performance, especially when the difference is milliseconds.  This is not an article aimed at C++ programmers writing financial trading software after all.<br />
<br />
Hope this helps.]]></descriptionnnn>
 <category>Developer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=44</comments>
 <pubDate>Thu, 3 Feb 2011 10:05:08 +0000</pubDate>
</item><item>
 <title>Nokia : Touch Screen Air Application</title>
 <link>http://www.garethshapiro.com/index.php?itemid=43</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/20110116-nokia_logo.png">Nokia Company Logo</a></div>Nokia is the worlds largest manufacturer of mobile phones, selling about <a href="http://www.nokia.com/about-nokia/financials/quarterly-and-annual-information/q3-2010" target="blank">a third of the world's handsets in 2010</a>.<br />
<br />
Like other mobile phone companies they appreciate the benefit of a store for customers to visit and this is especially true of the markets in Russia and Asia.  Upon arriving at a Nokia store customers experience funky and cool interior design and of course access to all of the latest Nokia devices.  To help enhance the experience through digital technology Nokia turned to the London branch of <a href="http://www.rga.com/" target="blank">R/GA, Digital Agency of the Decade</a>.<b>Touch Screen Air Application</b><br />
<br />
<a href="http://www.garethshapiro.com/media/1/20110116-nokia-c3.png">Nokia C3</a><br />
<br />
When visiting a store, especially a mobile phone store, we all want to get out hands on, interact with and get excited about, the wonderful devices to be found.  R/GA was tasked with creating a touch screen application that enables access to the features, specifications, applications and accessories of each of the phones available in the store.  Customers are able to experience all the combinations available for the devices they are thinking about, and perhaps discover new ones.<br />
<br />
<b>Localised Content For A Global Audience</b><br />
<br />
<a href="http://www.garethshapiro.com/media/1/20110116-nokia-x6.png">Nokia X6</a><br />
<br />
Each installation of the application is completely customisable to contain localised content, demonstrating devices available in that specific region, linking to available applications and accessories in the relevant language.  <br />
<br />
Woven into the application is analytics which show each users' journey from the start at the home screen as they explore devices, related applications and accessories various options such as colour and preconfigured packs.  Never before have such powerful tools been available to a retailer to understand their customers' browsing priorities in such detail.<br />
<br />
As this is a desktop application issues such as the size of the image files, and other assets,   are not as important as within a web environment.  Fantastic hero shots of the phones are a key aspect of the visual design and I think it is safe to say everyone in the team was taken aback by how exciting Chinese typography looks alongside these images.<br />
<br />
<b>Built with Robotlegs </b><br />
<br />
<a href="http://www.garethshapiro.com/media/1/20110116-nokia-n8.png">Nokia N8</a><br />
<br />
This is the bit that probably only interests other geeks who are building desktop apps with Adobe Air using AS3.  The application framework is quite big, as you can imagine, the brain child of lead developer Mike Lawrence and based on Robotlegs.  Also on the team was <a href="http://www.karlfreeman.co.uk/" target="blank">Karl Freeman</a> who I enjoyed collaborating with many times in 2010.<br />
<br />
This was the second project I have been involved in that used Robotlegs and it will come as no surprised to my two colleagues on the project when I say I am not a massive fan.  <a href=" http://www.garethshapiro.com/item/interactive-data-visualisation-map-of-london" target="blank">The first project was my own Interactive Map of Carbon Emissions In London</a> and I ended up with something that was almost identical to what I would have built in PureMVC.  In this application Michael's approach is very different to mine and it was a real treat to learn and experience first of all someone else's approach.<br />
<br />
My conclusion is that Robotlegs is too loose.  I love the fact that when using something like PureMVC you can sit down and look at code you did not write and get to grips with it reasonably quickly.  Don't get me wrong neither of these frameworks will prevent you from writing bad code but there is too much <i>“invisible automatic magic that just works”</i> going on with Robotlegs.  When I am coding this type of things make me feel like I have less control of what's going on.  <br />
<br />
An advantage the Robotlegs does have over PureMVC is that native events are used as part of the framework. As such as Command can listen for events broadcast by a Proxy which allows one Command to establish a reasonably complex process and react to events that are broadcast.  With PureMVC you would need different Commands for each Event/Notification and you could end up with many.  An experiment I am going to try soon is whether Signals can bring this functionality to PureMVC.<br />
<br />
As you can imagine the <i>"great framework debate”</i> came up many times on this project, and I am sure will rage on in many pubs and bars filled only with spectacled jedi ninjas the world over for a long time to come.<br />
<br />
That's one of the nice things about developing with Actionscript 3.  You have choices.  It's exciting time especially for Air developers with interactive tables, mobile phones and tablets all embracing this fantastic platform. ]]></descriptionnnn>
 <category>Freelancer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=43</comments>
 <pubDate>Fri, 21 Jan 2011 13:41:43 +0000</pubDate>
</item><item>
 <title>Preparing Web Content for Mobile Devices</title>
 <link>http://www.garethshapiro.com/index.php?itemid=42</link>
<descriptionnnn><![CDATA[As a web developer who is interested in mobile phone development I thought the first part of my journey into learning what the new wonderful world of mobile is like would be to get this website, my portfolio, to render well on my phone.<b>Page 1</b><br />
<br />
<b>Introduction</b><br />
<br />
A few disclaimers at the outset are necessary I think.  The phone I have, and used to test this on, is the HTC Desire which is an Android phone.  Android uses Webkit which is the same browser as iPhone and some Blackberry models and so this this the browser I focused on.  After some testing I decided to also include some basic support for Opera Mini but limit this to the landing page.  This tutorial by no means sets out to cover all the phones and browser combinations out there or even explore the subject completely but should be taken an introduction to the concepts and challenges in getting your web content to look good on a mobile phone.<br />
<br />
This blog uses the wonderful <a href='http://nucleuscms.org/' target='blank'>NucleusCMS</a> blogging software and the way that this is set up, particularly with regards to templates, helped me out.  If you aren't afraid of PHP I can really recommend this blogging software it's great and some of the comments left in the code by the Japanese developers are hilarious.  Anyway, onto the task at hand ...<br />
<br />
]]></descriptionnnn>
 <category>Trainer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=42</comments>
 <pubDate>Fri, 10 Sep 2010 16:11:16 +0000</pubDate>
</item><item>
 <title>Renault : Flash Mini Site</title>
 <link>http://www.garethshapiro.com/index.php?itemid=35</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/20100825-renault-logo.jpg">Renault Company Logo</a></div><a href='http://www.renault.com/en/Vehicules/renault/Pages/wind.aspx'>The new Renault Wind</a> is a snazzy looking coupé-roadster.  When you feel like letting the sunshine in the top comes down, folds away and the whole trick is completed in 12 seconds.<br />
<br />
To promote the new car Renault held a competition to win one based around this theme and the 12 Second Strip was born.<a href="http://www.garethshapiro.com/media/1/20100825-renault-flash-mini-site-1.jpg"></a><br />
<br />
<b>Top down in 12 seconds</b><br />
<br />
Competition entries are videos in which the entrants strip, down to their boxer shorts / bikinis, in 12 seconds.  A mechanism on the site to use a web cam to record an entry was planned but the competition also needed a method to upload a video from a mobile phone.  Many up to date handsets now come with a YouTube application preinstalled and so videos uploaded to YouTube that are tagged appropriately needed to be combined with the videos recorded on the site itself.<br />
<br />
<a href="http://www.garethshapiro.com/media/1/20100825-renault-flash-mini-site-2.jpg"></a><br />
<br />
<b>Flash Interactive Server vs Scene7 Flash Video Content Delivery</b><br />
<br />
As Renault already had a Scene7 account which delivers super fast video onto their corporate website, it was decided that this would be used to deliver the videos that were not uploaded onto YouTube into our <i>Flash Video Wall Extravaganza</i>.<br />
<br />
Being a content delivery network Scene7 is optimised for delivering video, whether that is streaming or progressive download, rather than recording or encoding.  To get round this the videos recorded on the site were initially captured by a Flash Interactive Server, which is part of the Flash Media Server family, and thumbnails were automatically generated using FFmpeg. The captured videos were then automatically FTP'd to and published on the Scene7 platform for delivery to the competition website.<br />
<br />
<b>Asynchronous You Tube API vs Custom REST Service</b><br />
<br />
As soon as you have two sources of data that can arrive in any order over a non specified period of time you have to do a lot of extra work.  Easily more than double the logic of handling one source.  Our two sources were 1. the YouTube API and 2. a custom REST service which returned details of the videos that had been recorded via the website's mechanism.  Much of the coding was making sure that there was flexibility to handle these two services being called asynchronously and also details such as time outs and connection failures.  <br />
<br />
As usual PureMVC was employed as the framework of choice.  I have now settled in to a particular way of working which meant it was super easy for <a href='http://www.karlfreeman.co.uk/' target='blank'>Karl Freeman</a> to join the project for a couple of weeks as he and I have <a href='http://www.garethshapiro.com/item/nissan-flex-application'>worked this way before</a>.<br />
<br />
<b>Social Media integration using Facebook 'Share'</b><br />
<br />
Like most online campaigns at the moment the users of the site had to have a way to share individual clips with their friends on Facebook.  We built in deep linking using SWF Address and then wired these addresses up to a custom Facebook <i>Share</i> button.  One lesson learned is the Facebook <i>Share</i> button is out and the <i>Like</i> button is in.  If you are planning some Facebook integration be sure to have your approach aligned with the new <i>Like</i>.]]></descriptionnnn>
 <category>Freelancer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=35</comments>
 <pubDate>Wed, 25 Aug 2010 15:42:47 +0000</pubDate>
</item><item>
 <title>Interactive Data Visualisation / Map of London</title>
 <link>http://www.garethshapiro.com/index.php?itemid=34</link>
<descriptionnnn><![CDATA[<div class='item_list_rightbox'><a href="http://www.garethshapiro.com/media/1/20100429-town_hall.jpg">London&#039;s City Hall</a></div>A recent trend within the UK government is one of providing access to the data sets they hold to the public.  It appears to me at least that the thinking behind this is that transparency is promoted, the public may well come up with ways of using the data that are useful to everyone, and after all the public has paid for the creation of these data sets and so it seems correct that they should have access to it.  <br />
<br />
Not too long ago I attended a meeting at London's amazing city hall which focused on the <a href='http://www.london.gov.uk/' target='_blank'>Greater London Authority</a>'s contribution to this movement, The <a href='http://data.london.gov.uk/' target='_blank'>London Datastore</a>.  For someone like myself who develops compelling rich interactive digital media for a living it was obvious that here is a rich source of potential to tell a story using  this data and <i>Flash / Flex</i>. <div id="london_map">This Flash content requires you to have the Flash Player and to <a href='http://www.garethshapiro.com' target='_blank'>visit my blog</a>.</div><br />
<script src="/nucleus/javascript/swfobject.js"></script>
<script type="text/javascript">

	var params = {};
	params.quality = "high";
	params.allowScriptAccess='always';
	var attributes = {};

	var fo2 = new FlashObject("/media/londonmap/public1/bin-debug/LondonMap_Public_1.swf", "london_map", "660px", "560px", "9", "#FFFFFF");
	fo2.write("london_map");

</script>
<br/><br />
<b>More Than Meets The Eye</b><br />
<br />
In reaction to so many data visualisations built with Flex or Flash that are crowded and claustrophobic a goal in my work is to develop interfaces that appear deceptively simple at first but which reveal information as you interact with them.  This of course not only improves the aesthetics but makes everything easier to use and requires less explanation.  My intention is that it is immediately obvious how to use the map and perhaps the only detail that would require interacting with it to discover is that the Boroughs can be interacted with.<br />
<br />
<b>Web Technology and Data Sets</b><br />
<br />
This piece has been created using <i>Flex</i> and I have experimented with a Framework called <i>RobotLegs</i> for the first time, which was a very satisfying experience.  The data needed to be normalised, worked into a format that most databases use, and a goal of the design of the code was that it would be easy to get use the map with any data set arranged in this way.  I also experimented with using Google Docs as a data source which worked well although I have not implemented some of the features which react when the data does not arrive, or is late in arriving, yet and so opted for old fashioned <i>XML</i> files for this version.<br />
<br />
<b>A little rough around the edges</b><br />
<br />
I feel it needs a little bit more polish and there are a few bugs.  I would be very interested in, and grateful for, any comments that people have about their experience and how it may be improved. ]]></descriptionnnn>
 <category>Freelancer</category>
<comments>http://www.garethshapiro.com/index.php?itemid=34</comments>
 <pubDate>Thu, 29 Apr 2010 06:44:45 +0000</pubDate>
</item>
  </channel>
</rss>
