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/ Interactive Data Visualisation / Map of London http://www.garethshapiro.com/index.php?itemid=34 London's City HallA 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.

Not too long ago I attended a meeting at London's amazing city hall which focused on the Greater London Authority's contribution to this movement, The London Datastore. 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 Flash / Flex.
This Flash content requires you to have the Flash Player and to visit my blog.



More Than Meets The Eye

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.

Web Technology and Data Sets

This piece has been created using Flex and I have experimented with a Framework called RobotLegs 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 XML files for this version.

A little rough around the edges

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. ]]> Work http://www.garethshapiro.com/index.php?itemid=34 Thu, 29 Apr 2010 06:44:45 +0100 Booz & Company : Flash Mini Site http://www.garethshapiro.com/index.php?itemid=33 Booz & Co Company LogoBooz and Company are an international business management firm with clients and consultants stationed around the globe. A large part of what they do is develop, collate and distribute business expertise. Digital media has obvious benefits over traditional distribution models for content such as this and the rich interactive experience made possible using Flash enhances the impact and enjoyment of the ideas and messages for everyone who experience them.

I was asked to complete what would usually be called a Flash Mini Site, although it looks and feels more like a Flash Feature in a digital magazine to me. The subject is Women's education in Saudi Arabia and the content consisted of charts, audio , and text of course all supported by some fantastic photography and bound in an animating accordion.




]]> Work http://www.garethshapiro.com/index.php?itemid=33 Thu, 15 Apr 2010 00:08:09 +0100 National Hack The Government Day 2010 http://www.garethshapiro.com/index.php?itemid=32
People often misuse the word hack. It originally meant "to solve problem" and a group of developers, designers and statisticians got together in London over the weekend to solve the "What cool things can you build with publicly accessible government data?" question.

Being a Flash and Flex programmer naturally I thought it might be good idea to do an interactive data visualisation of some sort.
This Flash content requires you to have the Flash Player and to visit my blog.

Interactive Public/UK Government Data

I was joined on the day by Daniel Goldsworthy a flash programmer who I have been working with recently and along the way we met a kindred spirit, Ian Shortman and an impromtu team was formed.

We absolutely worked our socks off and at the end of the day were proud of what 3 people can achieve in 8 hours. An interactive map which gives the user the ability to compare public spending across the regions of England, Scotland, Wales and Northern Ireland within categories such as services, defence, public order, science and technology, agriculture and transport, amongst others.

Two sets are of data are compared at a time, one represented by the colour of the circles on a user defined range and the other represented by the size of the circles. In this way it is very easy to compare the spending on Housing vs Eduction, for example.

The data was provided in 6 time frames and so we have maintained these sets in our visualisation.

We believe that this type of visualisation allows the ever growing sets of data we are encountering to be understood and contextualised much easier than columns of numbers ever would.

We thoroughly enjoyed building it and thank the organisers, Rewired State, for their hard work and Vodafone for the prize (which we decided Ian could keep).

This is an open source project.]]> Work http://www.garethshapiro.com/index.php?itemid=32 Mon, 22 Mar 2010 15:37:26 +0000 Nissan : Flex Application http://www.garethshapiro.com/index.php?itemid=31 Nissan LogoIf you live in the UK and you buy a new or used Nissan you get access to the Nissan After Sales website. This site allows Nissan car owners to register their vehicles with their local dealer, book a service and stay in touch with Nissan after purchase. The bulk of the functionality is delivered via a Flex Application which is powered by a Sales Force back end.Actionscript Framework

It was a pleasure to be asked back to Duke Interactive (soon to be part of the UK arm of Digitas) and to work once again with Karl Freeman, a developer who is definitely on the same page as I am.

As always these days PureMVC was the framework of choice and it really made working in a team very easy as different parts of the application can be designated to team members and they can happily work away without crossing each others paths quite easily. Additional resources joined us in our quest along the way and the framework made things really straight forward.

Nissan Flex Application Screenshot


Team Work

Charlie Richardson the Project Manager on this project had these kind words to say.


Gareth is a very focused and fantastically talented Flex developer. His knowledge of Flex is unrivalled among developers and he has an incredible eye for detail. He can analyse any situation but he is also able to understand the wider implications of his software and how it fits in to larger web projects. He has developed a fully working and successful application for an automotive client for me, and done so professionally, promptly and with care and precision. I would recommend him for any development task large or small.


Salesforce

For the first time in many many years the back end driving the data on a web project was not MySQL. As this enterprise project is many times broader than our application, an enterprise data solution was needed and Salesforce was chosen to deliver the goods. Using Salesforce means an abstraction to data transactions can be put into place. For example if someone uses the Flex application to engage with Nissan this data is stored and also channelled as an Opportunity (for example) to a specific part of the organisation. Over time these could begin in any corner of the information system and be channelled towards an endpoint. Saleforce is perfect for adding this layer of business logic into a web application back end and this frees the Rich Interface Application developers (that's me and the team) to concentrate on exactly that, providing rich interactions and rewarding user interactions.

Nissan Flex Application Dealer Screenshot

Skinning Engine

For the second project in a row, the other being an undocumented Air application, providing a skinning mechanism was necessary. This time the skin was to be based on bitmaps, the Air app was vector based, and I will write up some blog posts at some stage detailing them. I am especially happy about the approach we designed for this application as it used my ViewBuffer class and it made creating pages later in the project really easy. All projects have late arrivals into the plan, default views, error message views, and the like are often overlooked in the scope documents and there is a big push in the closing stages to get them in place. PureMVC made it really easy to accommodate these pages and our Skinning Engine made it super easy to style them.


]]> Work http://www.garethshapiro.com/index.php?itemid=31 Thu, 11 Mar 2010 15:49:07 +0000 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 +0100 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 +0100