Utilising the TweetMeme API

We’ve been integrating some social media into one of the sites we work on ModernSelling and specifically working with the TweetMeme API which allows users to view the number of Tweets an article / page has received and retweet said article. From the horse’s mouth:

The TweetMeme retweet button is for website and blog publishers who want to encourage their audience to tweet their content on Twitter. The button shows a live count of the number of times your webpage or blog post has been tweeted.

There are a few points worth mentioning about this integration because it is not always as straightforward as you might think and perhaps some of this information will be of use.

Firstly, TweetMeme is quite strict so for anti-spam purposes uses a combination of the Tweet which we send to the API and a custom meta tag containing a match of the tweet:

<meta name="tweetmeme-title" content="The Message of the tweet " />

Additionally, the content / message of the tweet has to be a direct subset of the HTML title tag. For instance, for the example above, “The Message of the tweet” needs to be included in <title>. It doesn’t have to be the only thing in the title tag but it does have to be present.

So if like us you are generating these things on the fly (the site in question is driven by a content management system we built) you may have to make adjustments to your system to accommodate the TweetMeme functionality and also discuss compromises with your client; for instance, in our case, the title tag now includes the original title (which was specifically written for SEO purposes) with the article headline (which we want to be the body of the tweet) appended to the end. There is no way around this; the tweet message cannot contain something that is not contained in the HTML title tag so you need to live with it or not use the TweetMeme API.

Secondly, TweetMeme uses a cache which means that if someone already tweeted your page/s before you implemented the TweetMeme functionality the tweet will already be cached against the url. In these instances, if you wish a retweet to use the a new message as opposed to the old, incorrect message (your old title tag if it was incorrect) you need to clear the TweetMeme cache on a page-by-page basis or, rather than doing a manual update for a large number of URL’s you can automate the process and use the TweetMeme ping api (http://api.tweetmeme.com/ping?url=). Just append the URL that you want to update at the end of it and loop through the list of pages on your site.

Finally, part of the site we implemented this feature on is subscription only so bare in mind that any password protected url is not going to allow the TweetMeme API to make a call back to the page to verify it – TweetMeme will not work in these circumstances.

Happy TweetMeme’ing!

This post was written by Kirsten on June 22, 2010 at 4:42 pm

Flixel 2.0 – Flash game development

We have finished an enjoyable project for SPAR International, which involved creating an athletics game based around the button bashing classic, Daley Thomson’s Decathlon. When creating the graphics and style for this game we wanted to utilise the nostalgic bitmap effect which you see quite often in Flash games and in the graphic style of Pixel Art. From a development perspective this was very convenient because I have been looking for an excuse to try the Actionscript 3 game framework, Flixel, which I have seen lorded around the Internet as perfect for this purpose.

It has it’s own global render cycle which simplifies the process of adding bitmap graphics to the stage and creates a predictable fps independent game loop. Forum posts on the Flixel site state that this rendering process is more efficient than Flash player alone due to the fact that is purely geared toward low resolution bitmapped graphics. There where many elements which increased the speed of development such as the inclusion of the FlxObjects which are already set-up with simple motion facilities such as acceleration and velocity on both x and y axis which allow for the simulation of horizontal character movement and also vertical forces (i.e. gravity).

There are many other noteworthy features of the Flixel framework such as Sprites for Animation and the global/static FlxG control class which have been very well designed to make game development in Flash easier. I will, however, not go into detail about these because a concise post about Flixel from the Inside RIA blog has covered these. For those (developers mainly, I suspect) interested in understanding the affordances of using this framework over creating a game from scratch, reading this and also exploring the host of games and tutorials on the Flixel site will be worthwhile. Canabalt is a particular favourite game due to the intense screen shaking and accompanying music.

The game we created is called Beat Barni and is online now. Due to time constraints we created a pentathlon (5 events) rather than a decathlon, so feel free to challenge Barni to any of the following events; 100m, 400m Hurdles, Javelin, Pole-vault and Long Jump.

This post was written by Gareth on June 2, 2010 at 10:00 am

Action Message Format (AMF)

We have recently built a Flash Game – Traitors – for the Top Gear website:

The game, sponsored by Nissan, requires the user to speed through 3 levels controlling their speed by repeatedly pressing X-Y buttons as fast as they can and using their booster. For the purpose of data submission and receiving data while interacting with the webserver we decided to use AMFPHP which is open-source implementation of the Action Message Format (AMF) and allows binary serialisation of Action Script (AS2 and AS3) native types and objects to be sent directly to server side services. Phew…

The crux of this is the ease of implementing data transfers to and from the webserver (less code on both client application and on the webserver) and the efficiency of the resultant transfer (the data being transferred is binary format which is also compressed further in AMF3 so the amount of data being transferred is smaller). This is brilliant for rapid development (which we do a lot of) and performance of the finished article.

For instance, on the webserver you don’t have to loop through a database recordset, compose some XML and return that XML to Flash which would then load and parse the XML: you can essentially return the recordset directly from php to Flash and the query is automatically converted to the corresponding ActionScript type. There are several processes being skipped and the data being transferred is far smaller (being compressed binary as opposed to XML).

This post was written by Kirsten on April 13, 2010 at 1:55 pm

Flex Builder 3 – Internal Build Error bug

I’ve been struggling with a Flex Builder 3 bug for the last two days where an Error is dispalyed which rotates between:

An internal build error has occurred. Right-click for more information.

&

Classes must not be nested

..neither of which specify a file or line at which the error occurs. Very helpful.

This is not a new bug by any account and from my research seemed to be particularly prominent in Flex Builder 2. This article which lists a few of the reasons which this may happen is very useful and I’ve just noticed that in the comments there is the solution I was looking for. I however didn’t get that far through the comments and have had to painstakingly comment out my code, line by line until the error dissapeared. To add to the fun, it was a possibility that leaving comments within conditionals could have been the cause of the problem as well. Eventually I discovered that the cause of my bug was an empty switch statement:

switch(pageId){

}

…..why I dont’ know.

Anyway I thought I’d add to the documentation about this as it is a very annoying time consuming bug. I hope this will be resolved in Flash Builder!

This post was written by Gareth on June 24, 2009 at 9:35 am

AIR app review: Doc? and Polaris

I have recently been researching small scale desktop application design for a video project we are producing in Flash. The obvious place to start in this instance was with showcases of Adobe AIR applications. Due to the ease with which applications can now be deployed using the AIR runtime, it already seems to have encouraged the development of applications with greater focus spent on the usability and aesthetics of the user interface and experience. Critics of this low threshold may say that this will lead to a lower standard of overall application functionality and perhaps to dirty code powering inefficient and buggy applications. I’m sure there will be many examples of this but considering the small scale and usually simple nature of AIR apps, I think this will not be the case in the long term.

In any case the main reason I wrote this post was in order to make note of two applications that I found during my research, which are notable more for their utility than their design.

Doc? Air Local LiveDocs
As an Actionscript developer without a photographic memory I am forced to regularly visit LiveDocs for Actionscript3 and Flex component references. If I’m unfortunate enough to be coding in the Flash IDE then I use the built in help docs which are slow and clunky and in Flex Builder 3 they are not much better. Doc? enables you to access LiveDocs for Flash CS3/CS4 and Flex all in the one application providing you have those applications installed (you have to point Doc? to the location on your hard disk where the reference files are installed – instructions for this are on the site FAQ). You can also create bookmarks for the pages which you use regularly.

Polaris
Polaris is quite simply a desktop application for viewing you Google Analytics accounts on your desktop. It’s incredibly compact and easy to use plus you still get all the lovely graphs and visuals which you’ll be used to from the Google Analytics web interface.

These are currently my two favourite AIR apps but I’m sure there’s a plethora of others which I’m yet to find. Feel free to present us with any further contenders.

This post was written by Gareth on June 15, 2009 at 1:09 pm

PHP Security

There are many PHP users out there who probably don’t come from a computer science background; after all, it is probably the most accessible server-side technology out there so why shouldn’t more people have access to building dynamic, data-driven web sites/applications? However combine this with the very nature of the PHP rapid application development model and various PHP frameworks/content management systems and there are possible (and well documented) security issues. My guess is that some people are just not aware of these issues due to inexperience, others overlook them in their rush to get the job done quickly and some might even think because they are using a pre-built framework/CMS that the issues have already been taken care of. Classic asp had similar issues which were dealt with in the rollout of asp.net (particularly v2.0 onwards).

I’m not going to list all the issues (well known ones include cross-site scripting vulnerabilities, SQL injection and session hijacking) but suffice to say there is much online discussion (some productive and some not so) and additionally a rather decent book: ‘Essential PHP Security’ by Chris Shiflett available from Amazon and other good bookstores.

This post was written by Kirsten on March 19, 2009 at 12:52 pm

Importing a swc into Flex Builder for pure actionscript projects

I have previously written a post about the potential bug which seems to occur when importing multiple swcs into Flex Builder 3 for pure actionscript projects. Despite this I cannot express how handy it is to be able to import swcs into Flex Builder; for one reason because it renders the Flash IDE even more redundant (which is a good thing).

Whilst talking to a friend who has recently started using Flex Builder for AS projects I discovered that he hadn’t as yet used the method of importing swcs to gain access to graphics, sounds, animations, etc which have been created in Flash IDE.

So far he has been using the Loader class to import the swf at runtime and then to gain access to the individual items in the fla/swf library. There are obvious advantages to this method, for example loading the swf at runtime avoids the increased file size of your project which you will incur from importing the swc which will add the graphics/sounds at compile time.

However for smaller projects where file size isn’t an issue or for importing the fundamental graphical elements which will be re-used throughout the project a swc is a quick and easy solution.

Firstly when creating you or a designer is creating the graphical elements in the flash library you can also add a class path to each movieclip or asset in the library.

1) Right click on the assets in the library and click Linkage…..

2) Tick the checkbox marked Export for Actionscript

3) Enter a class path which relates to the path structure of your application into the Class text field e.g. uk.co.ultravioletdesign.graphics.ThisAsset - nb If you just put a simply identifier/class name without a full class/package path (e.g. ThisAsset) the item will be available throughout your application which sounds useful but is the same as making classes public which if avoidable is good practice and good for application performance.

This also enables you to organise your assets in the Flash library into convenient packages. For example putting all sound assets in uk.co.ultravioletdesign.assets.sounds and all graphics into uk.co.ultravioletdesign.assets.graphics. You don’t need to worry about creating the equivalent folders and packages within Flex Builder because they will be discreetly generated when the swc is imported.

4) Go to Publish Settings (File > Publish Settings) and then click the Flash tab. Providing the Fla is AS3 the checkbox Export SWC will be available. Check it!

5) Now once the movie is published a .swc file will be snuggling up next to your .swf which you can promptly delete (if you feel the need).

In Flex Builder:

6) Right click on your Actionscript project in the Flex Navigator window and click properties. Click on Actionscript Build Path and then on the Library path tab.

7) Click on the Add SWC button and browse to your newly generated .swc file.

Flex now adds your library assets to your project and these are made available within classes using the import directive:

import uk.co.ultravioletdesign.graphics.ThisAsset;

var thisAsset : ThisAsset = new ThisAsset();

Using this method in my experience has been invaluable and a massive timesaver. Despite this it is very useful to have the knowledge to be able to import assets from swfs at runtime. There is very handy for other strategies and techniques such as the importing fonts at runtime. This article by Chris Rebstock has been very valuable.

This post was written by Gareth on September 26, 2008 at 12:20 pm

Issues using multiple swcs in Flex Builder 3.0

As most of the Flash development here is now pure object-oriented in AS3 my IDE of choice is now Flex Builder 3.0 for all ActionScript projects. We left behind Flash IDE for the same reasons as most: it’s text editor is inadequate and the code visualisation for pure object-oriented projects is not sufficient; it also enables us to bring in line our development tools with other languages such as Java. Let’s face it, the Flash timeline IDE was never going to cut it as a serious development model!

An aspect of not developing in Flash that I had to adjust to was coping without a convenient library of graphical assets to drag into my application. There are various ways of importing or loading graphical assets into a 100% code application which nearly all involve and temporary return to Flash IDE. My preferred method is to create my graphical assets in Flash IDE, giving each of them linkage names relevant to the class/package structure of my application. I then publish a swc and import this into my ActionScript project within Flex Builder (project Properties > ActionScript Build Path > Library path > AddSWC).

So far everything works like a dream. All of my graphical assets are appearing within code hinting in Flex and are totally accessible. During a large scale project I decided to try to segregate my graphical assets into different swcs to help me organise my assets. This alone did not present any problems however I occasionally needed to go back into Flash to change or add a graphic to a swc. On exporting the amended swc, I returned to Flex Builder and found that all of the graphics contained in this swc where missing from the project. I tried renaming the swc and re-exporting it in Flash and also removing it in Flex Builder and adding it again. The only solution to this problem was to create and entirely new Flash file and copy all the graphical assets from the old (broken) fla file into the new one and re-export it again.

In a later project the same issue occurred again and this time it only began when I added more than one swc. That is essentially the solution I came to however it does not by any means explain the problem in the first place. Anyone who can fill in the gaps please feel free.

This post was written by Gareth on September 1, 2008 at 4:56 pm

Tracking with Google Analytics from Flash

Just a quick update on the Google Analytics work I have been doing in-amongst writing a desktop application to detect proxy settings (maybe more on that later).

I have completed the move from development to live server and have implemented some code for Flash banners to call the Google Analytics JavaScript _trackPage function. Its really simple stuff but as I have done 2 examples (one in Actionscript 2 and one in Actionscript 3) for the client to be able to supply the creative departments of advertisers (as they usually create the banners and supply .gif or in this case .swf files) I thought I might as well post the examples. For those people trying to find there way with Actionscript 3, a button click action is now triggered by an Event (MouseEvent.CLICK) and interestingly a call to some JavaScript in the page that embeds the Flash file is now called using the ExternalInterface class (it won’t work with the old method of calling the function from the getURL method). For example:

ExternalInterface.call("pageTracker._trackPageview('/clks/adv/insert-name-here')");

Replaces:

getURL("javascript:pageTracker._trackPageview('/clks/adv/insert-name-here');");

Anyways, here are the examples for download.

It’s basic but it might help someone

This post was written by Kirsten on August 22, 2008 at 12:52 pm

Switching from Webtrends to Google Analytics

We have been working with a client on a website (www.modernselling.com) for sales focused users for several years and have built a system to turn dynamically driven urls (such as news.apx?pageid=xx) into SEO friendly urls (such as news/sales-news-headlines/insider-trading-arrests.aspx).

The client has spent hundreds of hours (and therefore thousands of pounds) struggling with the behemoth otherwise known as Webtrends 8a in order to filter out the chaff traffic (robots and the like) from the valued traffic (actual users, referrals and actual advertising click rates). I won’t bore you with too much information but Webtrends is ultimately an enterprise piece of software and for smaller sites/start-ups and those with less time/budget (most of us) it’s analogous with using a sledge hammer to crack a nut! One example being that the installation documentation and support staff (US based) stress the application must run on its own server and has a recommended RAM size of 4GB. This might be OK for some large businesses but usually one dedicated server (hosting the website) is stretching the budget far enough for the aforementioned clientele without the associated costs of managing, maintaining and purchasing/renting a further server simple to do a bit of traffic analysis!*

So for the past 6 months we have been assessing and testing what the FREE Google Analytics (www.google.com/analytics/) has to offer. I have to say that I am impressed! Instead of tediously running pre-set up profiles and reports (hours of setting up and hours of laborious database churning) AKA the Webtrends Model we can report on everything we need by utilising the JavaScript functions available within the latest Google Analytics script (ga.js). By using pre-defined rules for advert impressions, advert click-throughs and editorial outbound links and applying them through pageTracker._trackPageview() we can record all the statistics we need.

The good news is that the client can now simply search for a string in Google Analytics (such as ‘advert-name-click’) and it will return all the statistics related to click-throughs for that advert. He can then calculate his conversion rates, see which section of his website is most effective for a particular advert and use the system to bill his clients who are all happy with the statistics and reports because they come through Google.

Remember if you are using pageTracker._trackPageview() multiple times on the same page that you must apply a filter to Google Analytics to ensure that your overall page impression statistics are not skewed – you must filter out anything other than the page impression.

More to follow on the detail…

*Note: in order for the client to return the required statistics though Webtrends we first had to write an asp.net desktop application to parse the raw log files to remove anything that looked like suspicious/robot traffic, he then set up some filters and rules in Webtrends (one for each advertising campaign) and ran the parsed logs through

This post was written by Kirsten on July 31, 2008 at 2:18 pm