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/ 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 +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