Gareth Shapiro London Based Flex/AS3 Freelance Web Developer http://www.garethshapiro.com/ Specialising in the technical aspects of AS3, Flex , Flash and Air. Gareth Shapiro, based in London, provides Consultancy, Production and Training services to UK clients. en-us Nucleus CMS v3.24 © Weblog http://backend.userland.com/rss http://www.garethshapiro.com//nucleus/nucleus2.gif Gareth Shapiro London Based Flex/AS3 Freelance Web Developer http://www.garethshapiro.com/ BlackBerry : Flex Marketing Application http://www.garethshapiro.com/index.php?itemid=28 BlackBerry LogoLike many companies BlackBerry have undertaken sophisticated analysis of the types of people that buy their products and also identified some that don't yet but are likely candidates for the future. This is of course invaluable information to those responsible for developing marketing campaigns and strategies. It is the way that BlackBerry has gone about distributing the information internally that is different.Internal Application

Working alongside the team at Brushfire Design a Flex based standalone application was developed to deliver this research data. I am bound by an NDA so am limited in what I can say about it (and no screenshots - sorry). What I will say is using PureMVC the dynamic rich experience that people usually expect of Flex and Flash was leveraged to allow marketing executives to explore the data sections in turn and also compare two sections in a grid format.

Much more exciting than your ordinary spreadsheet of facts. This application delivers the same information in a compelling and exciting way expected by professionals marketing cutting edge technology products, both from within a browser and from the desktop.]]> Work http://www.garethshapiro.com/index.php?itemid=28 Sun, 7 Feb 2010 22:29:57 +0000 The Economist : World In 2010 Flash Infographic http://www.garethshapiro.com/index.php?itemid=29 Isn't it great when digital work lasts longer than 5 min? I recently updated a piece I did exactly a year ago for The Economist's annual World In project.Two for the price of one. Almost!

In exactly the same format as last year there are two Flash pieces; Countries and Industries. The structure of the information and assets inside each of the Flash files was also identical and so we were able to use the PHP Code Igniter data capture tool once again and after an afternoon of mainly proof reading everything was updated for 2010 and ready to go.

Economist The World In 2010 screen shot]]> Work http://www.garethshapiro.com/index.php?itemid=29 Thu, 17 Dec 2009 08:39:18 +0000 Underwired : Flash Optimisation http://www.garethshapiro.com/index.php?itemid=30 Underwired LogoUnderwired are a London based ECRM strategy and execution agency.

Recently they produced their first Flash site but being specialists in digital relationship marketing, retention and email marketing and not Actionscript, it was not running as well as it should. I restructured their site so that it would load quickly while maintaining the clever HTML/Javascript/PHP code they had written to maintain some search engine readable HTML on each page.ECRM Website Screenshot

Felix Velarde, Underwired's Managing Director had this to say about it.


The site's always been a favourite of journalists, partly because it was Elaine's first piece of Flash and that reflected well on our general standards, and partly because it reflects Underwired's personality. But it was slow. Gareth made it work in the way it was intended to - he's brought the site, literally, up to speed. Fantastic work, done quickly and without fuss - thank you!


Flash Designer vs Actionscript Developer - Round 1

This situation came about through something I have seen a few times so it is worth noting down. Graphic Designers and Animators are often drawn to Flash because of the excellent results you can achieve with it. You can see the great character achieved on this site as a great example.

A problem often arises when a site is not set up correctly at the beginning of the project, our brothers and sisters with the creative flair are not always the most structured people. A great approach is to let a developer set it up; establish the architecture, how things are grouped together, what loads into what and other details far too boring for any self respecting designer to think about. This will help make the site run and load in the quickest possible time and will increase your chance of being able to change and extend the site at a later stage. ]]> Work http://www.garethshapiro.com/index.php?itemid=30 Mon, 30 Nov 2009 11:54:30 +0000 Body Shop : Flash Shopping Cart http://www.garethshapiro.com/index.php?itemid=27 The Body ShopChristmas seems to come around so quickly. One minute you are enjoying long summer days in the park and the next thing you know you are building Flash based shopping cart applications for Christmas promotions. Where does the time go?Flash E-commerce

I spent a few days at Duke Interactive recently helping the team there put together a shopping cart for The Body Shop's Christmas Gift Finder.

Body Shop E-commerce

The application had already been created using PureMVC, which I am a big fan of so I was able to get going really quickly. My task was to build the cart functionality and all the usual suspects were present; adding items, deleting items, cart totals etc. There are two versions of the product database driving the application one, for the US market and one for Europe. Once a customer was ready to move to the check out we collected all of the shopping cart details and seamlessly passed the data to the already established e-commerce system used by The Body Shop.

Body Shop E-commerce

I really enjoyed my short time working at Duke Interactive, who have done some great digital work for people like Nissan, Levis and PlayStation. Everyone was super friendly and I felt very welcome there right from the start.





]]> Work http://www.garethshapiro.com/index.php?itemid=27 Mon, 16 Nov 2009 15:43:48 +0000 Flash on the Beach 2009 http://www.garethshapiro.com/index.php?itemid=26 Flash on the Beach 2009The first part of this week was spent in Brighton attending the 2009 edition of Flash on the Beach. I had heard good things about it and I was not disappointed. I have come away feeling injected with inspiration, something that had been replaced by fatigue after some demanding deadlines recently. This is filed under 'Work'. I am not sure it should be, it was way too much fun.

Code vs Design vs Inspire

There were two main things I came away with this year. I seemed to spend more time listening to inspiration talks from people doing slightly different things to me, sometimes not even Flash. This made me think about the people in the web industry in general. Usually this comes down to 'are you a developer?' or 'are you a designer?' type conversation but what I was experiencing here was ideas, images and concepts that were appealling to both sets of folk. This has left me with a great sense of warmth towards the people in the web. The nerds are really cool and the cool designer types are really nerdy about things like type faces. We all love a good adventure or a wonderfully communicated story. Our heroes are people you can walk up to and talk to and every hour or so I had a new hero to add to the list.

Nature

The second thing I came away with was everything we are trying to do has been done before. Even before there was digital, people were messing with big blocks of colour, injecting a sense of movement into their art and skewing text so it fitted into 3D landscapes. Even if it we are not intentionally not trying to copy something many of the ideas explored in modern art in the last century have already covered many things that you see on the web. Perhaps this fits in with the fact the Flash can still not do some of the things Director could years ago? Then again, tools aren't ideas. Tools are tools.

Perhaps it was for this reason that I came away with so many images of nature in my head. There were many of them presented to us, on big screens or as part of an idea, over the 3 days. Molecular shapes of water, 3D modeling of sound with sand, balls, even fire so that it ended up looking just like the shapes in the water. Spiral maps of prime numbers that looked like geometry found in ancient tiling art. The people talking to us, those at the top of their game, seemed to share this inspiration found in faces, horizons, the weather and the joy of playing.

Links

Here is a list of people that I saw at the conference and their work or the club houses they hang out in online.

]]> Work http://www.garethshapiro.com/index.php?itemid=26 Thu, 24 Sep 2009 18:18:09 +0000 University of Kent : Industrial Panel 2009 http://www.garethshapiro.com/index.php?itemid=25 University of Kent logoWhen Actionscript 3 first arrived on the scene I was asked to introduce the technology to a lecturer at the University of Kent so that it could be incorporated into their syllabus. At the end of the two days I was asked if I wanted to be a member of the School of Engineering and Digital Arts Multimedia, Technology & Design Industrial Panel, and I signed up immediately.
University of Kent campus
Plans for 2010

Panel members come from a wide range of new media business interests in Kent and London and meet once a year to provide some commercial perspective on the direction of the Bsc in Multimedia Technology and Design Course. This year we learnt of the plans to invigorate this course which incorporates design , technology and software engineering. The faculty have been putting a lot of thought into how the two worlds of developers and designers can both be explored by students who might not quite know where their strength lies when they first begin studying.

The university is keen to increase the engagement with us and we discussed members giving lectures, master classes and mentoring students on the course. Quite exciting and it seems a worthwhile activity to be putting something back into an industry which I love so much. Also the train ride down to Cantebury is great on a bright day.

Interaction Lab

We also learnt about the department's ideas on establishing an Interaction Lab which could provide services to web companies in the South East. The response was very favorable from those attending and I am really looking forward to seeing the lab in one of my future visits.

Knowledge Transfer Partnerships

The department is a big fan of Knowledge Transfer Partnerships and we were presented with the outline to what seems a very decent way for companies to subsidise projects, while providing invaluable work experience to students looking for that sometimes elusive first rung on the ladder. If you have a project that could so with some extra hands, and help with funding you could do worse than learning more about Knowledge Transfer Partnerships (KTP).

]]> Work http://www.garethshapiro.com/index.php?itemid=25 Sun, 20 Sep 2009 17:08:15 +0000 The Economist : Interactive Flex Chart http://www.garethshapiro.com/index.php?itemid=24 If you have been following the posts on this blog you will know about a ”proof of concept” prototype I built for The Economist earlier in the year. This post is about the refinement of that work into online interactive content now published on The Economist website.

User Interface Design

Aesthetically the main challenge for graphic designers at The Economist was creating an interface that fitted into a small space and the refinements from the prototype achieved that quite well. A feature that enhanced the usability immeasurably is the inclusion of the ability of the user to preview how data would appear on the chart by rolling over a country. Should the user then decide to add this country to the chart this is achieved with a single click.


Flex 3 Components

Using this approach instead of two columns of country names helped save a great deal of space. The previewing did bring with it a set of challenges though, isn't it always the case? On the horizontal bar chart, a scroll bar is employed so that as many countries as the user wishes can be compared. Typically issues that should be trivial, such as ensuring the scroll bar remains completely scrolled down, took more effort than it should have done. I hope Flex 4 scrollbars are an improvement on the Flex 3 variety as it is such an often employed interface component.


Flex Data Visualisation Library

Again I decided on using Flare, an AS3 visualisation library used in many online infographic projects, although I did experiment with Axiis in between stages 1 and 2 to see if any benefits could be gained. Ultimately Flare, while still in Alpha amazingly enough, is feature rich and the library seems more mature than its short life-span belies. Axiis, based on Degrafa, may grow to eclipse it though as it is the brain child of Tom Gonzalez and Michael VanDaniker who are no strangers to the world of data visualisation. Watch that space!

Back to the project at hand though. Something to consider when using Flare is that it seems to be just as capable of producing visualisations based on “forced directed” or “radial” layouts, for example, as it does straight forward line and bar charts. As such some customisations were needed to achieve details such as scales that suit economic data that haven't been considered in this general purpose library.

This is certainly not the last time I will be using Flare with Flex and PureMVC, everyday more and more information with a story to tell becomes available to us after all.

Watch this space!]]> Work http://www.garethshapiro.com/index.php?itemid=24 Thu, 17 Sep 2009 18:03:28 +0000 Luxury Fashion Brand : Flash Website http://www.garethshapiro.com/index.php?itemid=23 Due to business details behind this website I am unable to say for exactly which luxury fashion brand this work was for. It's a shame really because they are well known in UK and Europe for their dresses, suits, sunglasses and especially men and woman's perfume ranges.

On the plus side I had an amazing time working on this website with some really cool people. The Project Manager, Amell Benzerfa, on the job agreed to say some words about my work that I can share with you here....

Gareth was hired as a freelance experienced Flash AS3 developer to work on a website for a very demanding luxury fashion brand. He was able to come into the project and tackle the job efficiently and deliver to the required high standards. He was also a great communicator who was able to clearly express complex technical issues and give timely and accurate feedback and he acted as a great mentor to the Flash team. I certainly enjoyed working with him as did the client and the rest of the team. I definitely recommend him highly and would welcome the opportunity to work with him again.


Kinds words and I can assure you that the feeling is mutual. Amell runs a great team of Actionscript and Python developers at Tangent One who do great work. They have a number of high profile multilingual websites in their portfolio including Borders, Purple Ronnie and rather shy fashion houses.

I am confident we shall combine forces again in the not too distant future.


]]> Work http://www.garethshapiro.com/index.php?itemid=23 Mon, 20 Jul 2009 14:43:01 +0000 The Economist : Interactive Flex Data http://www.garethshapiro.com/index.php?itemid=22 The Economist put forward the idea that an interactive chart to display some of their data over different time spans would be a great piece of content for their website. What better technology is there for web based interactive charting than Flex? Especially when there are brilliant third party libraries of code developed to achieve just that, such as Flare.

This project has been divided into two stages and the first “proof of concept” stage is what this post is about. One of the great things about working with this client is their data is in great shape. There were none of the endless days of working with Excel to get a decent, coherent data set together that seems to plague many data driven web projects. I was able to get the data normalised and imported into a MySQL database in no time.

As with many of my recent projects I chose PureMVC as the Flex framework. I am really refining my processing using PureMVC these days. Common production details such as different paths on the development and final servers and also bulk loading of assets are handled easily.

The real challenge with this project came in using the Flare library. As a tool for plotting graphical representation of information it is fantastic although with a limited amount of documentation available it takes a little bit of determination to get results. I must admit that perhaps AS3 developers have been spoilt by Adobe with their excellent language references and everything else is judged against it.

Once the piece was ready to deploy I wrote a small amount of PHP to export the database as an XML file. A small change was needed on the PureMVC model so that the new data source could deliver the same information to the application and the job was done.

]]> Work http://www.garethshapiro.com/index.php?itemid=22 Wed, 29 Apr 2009 11:46:43 +0000 Flash Actionscript 3 : ViewBuffer http://www.garethshapiro.com/index.php?itemid=21 At the end of 2008 I worked on a Flash project for The Economist called 'The World in 2009'. There was a graphic designer who was responsible for producing a world map vector and I wired it all up.

As you can imagine this artwork was intricate. Each country had a border and a background colour that were separate objects, some text fields for labels, and as you would expect also grouped into continents. The designer was using Adobe Illustrator to create the vector shapes and importing these into Flash and sending me the .fla

The process was not very smooth. There were changes to the artwork of course, Illustrator does not create MovieClips in the same way that you would manually and also when dealing with such an complex piece, old fashioned user error creeps in.The Solution, ViewBuffer

Download

This made life a little difficult for me while developing the Actionscript 3 code. The artwork was divided into regions so the files were easier to work with for the designer. I would load each one using a Loader() class and attach it to the Display List. I could reference the various objects, outlines / text fields / background colour clips, inside them like so :

Get a reference to a MovieClip inside a loaded SWF (The hard way)!!

It is easy to see why this is not a good situation to be in. One change to the structure and my paths would stop working. There were also further complications with instance names which caused the same problem. This is similar to how paths are constructed in Actionscript 2, with dot notation, so what is the best way of doing the same thing in Actionscript 3?

The bottom line is I do not want to be hamstrung by changes either by the Art Director or the Graphic Designer on the project. Changes are always going to happen and I looked to find a solution that simply accommodated them. One of the greatest things about AS3 is the Display List structure. The way that Display Objects are children of DisplayObjectContainers means that we can automatically examine this structure, or part of it, and record each of the items in an Array.

The ViewBuffer takes care of the path and presents the items to us in a straight forward list.

I will assume you know how to import packages into your AS3 projects so won't go into that in detail. Obviously you need this line at the top of the code :

Make sure you have access to the Class

Once you have access to the ViewBuffer you need to make an instance of one :

Create a new ViewBuffer

Let's say that once again you have a Loader called europe_clip_loader and you have added to the the display list, your next step would be to to inspect it :

<br /> Inspect the top element of the Display List that we are interested in

In the above line of code the parameter is compulsory and it has to be a DisplayObjectContainer. The reason I have called the DisplayObjectContainer you are inspecting a ViewComponent is that I am a massive fan of PureMVC and this is what they are called in that framework. It seems to make sense because in Flex you would divide Views up into separate MXML files and they may not be on the Display List when you inspect them for the ViewBuffer. Once you have inspected your ViewComponent you then use the instance name of the items in the ViewBuffer to get reference to them.

Get a reference to a MovieClip inside a loaded SWF (The easy way)!!

If this MovieClip gets moved around then no problem your code will still work. If the instance name gets removed or changed then some more work is needed. Perhaps the person creating the .fla file names the MovieClip incorrectly and calls it 'country_russia' (without the _mc) on the end.

Taking a Look

What you would do is first look at the buffer list to see the instance names of the items on there. This is done like so :

Output the ViewBuffer to the Output panel

The first parameter of the showBufferList method is the function you want to use to display. Here we are using the built in trace() method. Do not put the brackets on, just the name of the function, just like an event handler. The second parameter is optional and is a String. This is the property of the item that you would like displayed. The most useful is “name” but you may want to use “alpha” , “x” or “y” to tell you more details. If you use one of the other properties then the name is also outputted to give you better results.

I use a great debugging tool for Flash and Flex developing called Thunderbolt. This bit of code will output to Firebug, the web developer plug in for Firefox. If you are using this technique you would show the details of the buffer list like so :

<br /> Output the ViewBuffer to Firebug

Great but you may run into problems if after you have made up your ViewBuffer you remove or add an item and then try to reference it using getBufferListItemByName().

Adding and Removing Items

You can keep the ViewBuffer in synch by using addViewBufferItem() and removeViewBufferItem().

These both work in exactly the same way :

Add a new item

This will add item as a child of item_parent to both the Display List and the View Buffer. Similarly with removing items :

Remove an item

This will remove item from both the Display List and the View Buffer.

In both these examples item_parent needs to be a DisplayObjectContainer and item a DisplayObject.

Advanced Techniques

This is quite a straight forward piece of code so there is only one Advanced Technique. If you would like to exclude certain data types from the ViewBuffer you can specify these when you inspect the ViewComponent. The second parameter of the ViewBuffer is an Array of Data Types to be excluded.

Exclude StaticText and Shape Data Types from the ViewBuffer

The reason for this is perhaps you are not interested in administering static items and you are trying make sure your swf performs as quickly as possible. You may also be using a framework such as PureMVC where you have a different class for each View and you do not want global access to the items in other Views across all of the ViewBuffers in your application.

I am sure this code can be improved, I have deliberately kept it from being too complicated. If you do use it, or better yet, improve it please let me know and I'll incorporate the improvements for everyone.

Download]]> Code http://www.garethshapiro.com/index.php?itemid=21 Tue, 28 Apr 2009 11:56:42 +0000