wezside

Processing: Export Application using Eclipse (Ubuntu)

Fri, 02 Mar 2012 08:06 +0100

I’ve switched to using Eclipse as I’ve always been doing Flash dev in Eclipse for years. So after giving the Processing IDE a great deal of respect I decided that for building apps I would have to use an IDE which suits my needs. Moving to Eclipse might be tricky for new comers but there is a great tutorial on Processing.org on how to do to this. There have been a few attempts to build an Eclipse plug-in and it would seem the new version 2 will sport this as well built by the guys from Processing. I’ve installed this and it can be considered the current IDE baked into Eclipse which I think is a good thing for newcomers to Eclipse. It should be noted that there are some features missing and this is still under development. Most notably the Export Application feature. If you are like me however and just want to build Processing in Eclipse using the normal Java perspective then surely you shouldn’t have struggled in getting this up and running as it simply involves adding the right libraries and setting up the main class to extend PApplet. The tutorial mentioned above names some of the pitfalls about passing the PApplet instance and the color type which should be replaced with int. There are a few more but I will leave you to discover this for yourself. In my switch over I still had the need to export my application to all 3 platforms. This became somewhat tricky as once you’ve set up a Pocessing app in Eclipse this way, you can’t run this in the normal Processing IDE and simply export it from there. It is to do with how the Processing IDE obscures code. A way I thought this might be possible in the future is if the Processing IDE has the option of choosing the parent class but this will be useful only to programmers that are comfortable with OOP. So I had to find another way. In my research for an Eclipse plugin I found one called Proclipsing. This wasn’t working all that well and the version libraries are well out of date. However, they brilliantly packaged the export feature as a little separate Eclipse wizard. Here is how you install it: Help > Install New Software Work with: http://proclipsing.googlecode.com/svn/tags/current_releases/proclipsingSite/ Click Add… Give it a name Click OK You’ll notice a core and export checkbox. Select only the export. Once this is done there will be a new icon which you can click on any time to export your Processing application. Now one thing to notice is that your Processing app won’t run on Linux directly after export. Reason is there is a slight type-o in the shell script generated. To fix this open up the Processing App file and find where your class name is. Make sure there is a space between where your classname starts and where the last library include ends. ... $APPDIR/lib/somelibrary.jar"com.wezside.app.MyProcessinApp Should be ... $APPDIR/lib/somelibrary.jar" com.wezside.app.MyProcessinApp That’s it. Now you can export straight from Eclipse. Hopefully someone will fix this type-o and we wouldn’t have to do the last step in exporting Processing Apps for Linux.

Shell Script: Close Previous Processing App

Fri, 02 Mar 2012 07:49 +0100

Recently it was needed for me to be able to check if the Processing app I built was actually closed properly or not before running a new one. You might ask why because all apps should close properly right? But when you are using Processing + Serial + Linux, the result can be somewhat inconsistent. During testing this is particularly a problem and you might find yourself in a situation where stopping and starting a Processing app that makes use of the Serial port doesn’t always close properly. After some digging I realised the Processing App on Linux is nothing more than a Unix Shell Script. If you open up the generated App file in a text editor you should see a few lines of text and most importantly the Java commandline with arguments which will run your Processing app. #!/bin/sh status=$( pgrep -f className ) echo $status if [ $status > 0 ] ; then echo "Process is running." kill $status else echo "No running processes found" fi APPDIR=$(dirname "$0") java -Duniquename=UniqueAppName -Djava.library.path= ... com.wezside.app.MyProcessinApp The solution was to give the Java app a unique name so we can track down its PID (Process Identifier). Then using pgrep it is possible to track own this unique Java process’ PID and kill it if it exists. Simples.

JOGL TextRenderer in Processing 2.0 Alpha X

Mon, 06 Feb 2012 21:10 +0100

In my short time using Processing it became evident quite quickly that the text display is fine when using the normal 2D mode but it didn’t work so well when using OpenGL. Since my aim for 2012 is to learn more OpenGL and often I need text to render nicely on screen - it was clear that I was not alone. This class seem to work well in Procesing 1.5 but the libs in 2 alpha x is out of date. So hopefully these steps will help to get it set up in a jiffy. The JOGL TextRenderer is a class that allows text to be rendered in OpenGL in a way that you’d expect. There are some drawbacks like rendering a lot of text seems to be slow but this can be improved by not using Vertex Arrays when rendering the text. Getting JOGL to work with Processing 2.0 Alpha x To get it to work with Processing 2.0 Alpha x we need to add the latest JOGL lib (2.x as of writing this tutorial) to Processing. Go to JOGAMP On the right under “Useful Links” click on the Builds / Downloads link Click on the zip link under Builds / Downloads Open your Sketch root folder or “Playground” folder In libraries create a new folder and call it jogl In jogl create a new folder library Extract the zip file to this location Making sure the JAR file is in the right place If you browse to the extracted JOGL library folder there is subfolder called jar. Open it and copy the file named jogl.all.jar. Now go back up to the root of the JOGL library folder and paste the JAR file. Important here is that Processing doesn’t allow the naming convention used but renaming this will fix it. Rename the file jog.all.jar to jogl.jar. So the library JAR file and the folder name needs to match for it to come up in the Processing IDE. That’s it. Now you are ready to use the JOGL TextRenderer in your sketches. It should be noted that you could replace the jog.all.jar which can be found in the processing opengl lib folder but I prefer to keep anything I add separate to what is shipped with Processing. This way I know what I’ve changed. Also, important to note that when you keep the JOGL lib separate and export your application, you must replace the jogl.all.jar file that is in your application.x export folder. Using the TextRenderer in Processing One of the things I like about the TextRenderer is the automatic switch between Orthographic and Perspective camera views. To use this feature simply either render using 3D or just normal. As mentioned earlier I have come across some performance issues when rendering lots of aliased text. To improve performance you can set the renderer not to use vertex arrays or just not use aliased text. renderer.setUseVertexArrays( false ); In setup() we create our instance ... renderer = new TextRenderer( new Font( "Bitstream Charter Bold", Font.BOLD, 150 ), true, true ); renderer.setColor( 1.0f, 1.0f, 1.0f, 1.0f ); renderer.setSmoothing( true ); ... In draw() we simply render the text we want ... if ( twoD ) { renderer.beginRendering( width, height ); renderer.draw( "Text to draw", 0, 0 ); renderer.endRendering(); } if ( threeD ) { renderer.begin3DRendering(); renderer.draw3D( "Hello World", (float)-renderer.getBounds( "Hello World" ).getWidth() * 0.5, 0.0, 0.0, 1.0 ); renderer.end3DRendering(); } ... Processing Libraries It looks like the guys are planning some nice updates for Processing 2.0 when it comes to library submissions and adding them to your project. I think the above will most likely be out of date once this is done as it will mean simply clicking on the menu and adding the library you want. Also it won’t be long until the Alphas and Beta include the latest JOGL lib. Understanding libraries and how to use them in your project is key part in my opinion to working in any language and this is a good start. For more info on building libraries for Processing see the Wiki page. Resources TextRenderer Java Doc

NodeJS on Win localhost

Tue, 10 Jan 2012 20:19 +0100

While working on a proof of concept I thought this would be an ideal opportunity to try out NodeJS. It is a weird thing to fathom, writing server side Javascript but once you’ve spent some time with it, it will start to make more sense. Now I’m not a heavy server side programmer, on the contrary I normally shy away from this sort of thing but it is always good to know how to set up your own site at least. Anyways this is more of a reminder to myself to quickly get up and running should I ever use NodeJS with an M$ platform again. Step 1 Download NodeJS from the site. Extract the MSI installer and execute it. Let it do it’s thing and all is good. Step 2 Open up the command line. Windows Key > Run > type in *cmd* Or Start > Run > type in *cmd* Step 3 We need to install some helper modules which will take care of the scaffolding when we create a new web application. Execute each of these commands one at a time or if you feel confident chain them by appending two && signs. C:> npm install express C:> cd c: C:> mkdir www-nodejs C:> cd www-nodejs The first line simply installs the Express module for NodeJS. The second changes the directory to the root of the filesystem identified by C. Create a new directory and call it www-nodejs. Move the cursor into this newly created directory by executing the last command. Of course the directory can be wherever you want it to be, I simply create it in the root for brevity and ease of use. Step 4 Create the project and files needed. Express will create all the bare necessities. It is important to run the third command as you need to make sure you project has all the NodeJS dependencies it may require. C:www-nodejs> express example-project C:www-nodejs> cd example-project C:www-nodejs> npm install -d C:www-nodejs> node app.js The last command will run the application. Browse to http://localhost:3000 to see your index page. If it isn’t located at localhost:3000 then open up app.js and look for the location. It simply means NodeJS runs on a different port than 3000. Et Voila! HES6PYSQWCHK Resources NodeJS Express

Shift Register 74HC595 with Arduino.

Mon, 19 Dec 2011 17:25 +0100

I stumbled upon shift registers when I was looking at LED matrix cubes on instructables.com. A Shift Register is a type of integrated circuit (IC). In general a Shift Register is a good starting point if you are like me and want to learn more about interfacing hardware. The Arduino itself has its own IC, the ATmega which I won’t get into as ICs are fairly new to me. It occurred to me that I’ve met a similar chip, a multiplexer before and this was during my time at Middlesex University Summer School. After some quick searching the following descriptions were high up on the rankings. Multiplexer The Arduino Playground: “A multiplexer or demultiplexer enables you to expand the in-and outputs on your Arduino board. ” The 4051 Multiplexer has 8 different inputs and allows you to select just one you want to read at a time. Similarly the 4051 as a Demultiplexer allows you to have 8 different outputs and you select just one you want to write to. Shift Register The Shift Register will convert data from serial to parallel or vice versa. A single byte (8 bits) is stored in a Shift Register and each bit is shifted either to the left or to the right one bit at a time. A shift register is a sequential logic circuit that is used for data storage or transfer. Data is shifted every clock cycle. So what’s the difference? From what I understood the biggest difference is a multiplexer is analogue or digital and a shift register is digital. A multiplexer also doesn’t have a limit of the amount of inputs whereas a shift register is restricted to 1 byte, i.e. 8 inputs. The Circuit Shift Registers are relatively inexpensive. I ordered mine from oomlout.co.uk. Follow the tutorial at Arduino Playground to build the circuit as seen in the pictures. Instructables also has a nice tutorial on how to use these integrated circuits (ICs). Resources Integrated Circuit Serial to Parallel Shifting-Out with a 74HC595 Analog Multiplexer/Demultiplexer - 4051

Tesselation: Hexagonal Circle Packing

Thu, 01 Dec 2011 16:59 +0100

A while ago I watched a show on the BBC which was all about geometry in nature. I so happened to read Generative Art by Matt Pearson explaining natural variance in generative code. In the nature program it was shown how outside forces will alter these perfect geometric patterns into more natural occurrences. I recall reading about circle packing from some of the artist/coders in my news feed and went back to my bookmarks. This lead me to exploring this concept further by reading the more obvious sources over at Wikipedia and Wolfram. The problem I have is my Math is very rusty. And so the journey began. Approach To keep it simple I decided to focus on equal sized circles. My first approach was to simply draw a hexagon from triangles and then iterating over each vertex at which point I will draw a circle with a fixed diameter. I got as far as drawing one hexagon but soon thereafter got stuck on producing the next set of hexagons neatly tucked around my initial drawing. Cause I thought that if I could populate the screen with a honeycomb - drawing equal sized circles would be a breeze. I should mention that I didn’t want to draw the hexagons using a grid system but rather have it populate from the centre of the screen outwards. Doesn’t make sense right? I simplify my goal just to make it more complex. Feeling a bit overwhelmed I put pencils down and left it for a few months. It was only when I started getting into Processing more that I thought I needed a challenge and also some techniques for data visualization. Enter bloom.io with Fizz built with ProcessingJS. Right I gotta get this I thought and went back to the drawing board refreshing all the math there is to refresh. I guess the major difference between then and now is, then I was focussed on producing the hexagonal vertices using an equilateral triangle and then drawing a circle at each centre vertex. Whereas instead I should have been focussing on the circumference circle these vertices produce themselves. It’s waayy easier to plot points on a circle, well at least for me as it was. At this point I digressed. I was focussing on this “density” factor which was mentioned in all the resources I read. So the first real attempt focusses on drawing all the circles of hexagon vertices and then drawing a circle around these circles. Circle within a circle. First attempt. Circle Packing within a circle has two approaches. One is applying the optimal density to the inner circles with the outer circle having a fix radius. The second approach which is implemented here is the outer circle’s radius is fixed and the optimal inner circles radius is searched for by reducing a guide circle’s radius gradually. We then test for a collision between the inner circles and stop when this occurs. The result is the optimal packing for circles within a circle if the number of inner circles are 2, 3, 4, 5, 6. 7 and above requires the center to be explored which is not covered in this code. The below code doesn’t show the set up but basically an array of Circles were created in the setup() method. void draw() { background( 22, 22, 22 ); noStroke(); if ( paused ) return; if ( newRadius > 0 ) newRadius -= 1; // Guide circle noFill(); stroke( 255 ); //ellipse( centerX, centerY, newRadius, newRadius ); angle = 45; int len = circles.length; for ( int i = 0; i < len; i++ ) { circles[i].update( newRadius, angle ); circles[i].render(); angle += int( 360 / numCircles ); angle %= 360; } } This was quite cool however if the algorithm had to search for the optimal density that would take ages. So the next attempt used the earlier mentioned approach and simply draw the hexagon vertices on a circle, i.e. draw 6 points on a circle evenly spaced. Honeycomb. The second attempt. Ultimately to achieve my inner to outer approach I was going to need to draw a honeycomb from the centre of the screen outwards. This spawned the idea of repeating the code I’ve done to draw the hexagon and simply to iterate over all the vertices created already, rinse and repeat. The code below shows a recursive approach to try and draw the honeycomb pieces. void initCircles() { circles = new Circle[0]; int numCircles = 1000; float centerX = width * 0.5; float centerY = height * 0.5; recurseCircle( centerX, centerY, 0, 0, 0, 50 ); } void recurseCircle( float centerX, float centerY, int rIndex, int rLevel, float angle, float hexRadius ) { float xpos = centerX - sin( radians( angle )) * hexRadius; float ypos = centerY - cos( radians( angle )) * hexRadius; circles = ( Circle[] ) append( circles, new Circle( xpos, ypos, hexRadius )); angle += 360 / 6; angle %= 360; if ( centerX < 0 && centerX > width ) return; if ( centerY < 0 && centerY > height ) return; if ( rLevel > 400 ) return; int len = circles.length; if ( len % 6 == 0 ) { rLevel++; rIndex++; println( "Hexagonal Packing Created. " + rIndex + " | " + rLevel ); recurseCircle( circles[ rIndex ].xpos, circles[ rIndex ].ypos, rIndex, rLevel, angle, hexRadius ); } else recurseCircle( centerX, centerY, rIndex, rLevel, angle, hexRadius ); } void draw() { background( 22, 22, 22 ); noStroke(); fill( 255, 255, 255, 6 ); int len = circles.length; for ( int i = 0; i < len; i++ ) { circles[i].run(); } } This worked however only for a short period of time. Processing has a 256 level of recursion which meant I was only able to call the honeycomb create method 256 times. A solution would be to break out the method into an Object which is instatiated only if the previous instance has found a duplicate entry. This way the recursion itself is broken up and hopefully Processing will consider the scope of a method call when counting the recursive method invokations. I still think this may not work as I might hit that limit again even if I create multiple instances which calls their own recursive method. Another option which I tried was to optimise the recursive method calls by checking if the circle already exists in the array. This didn’t work because I wasn’t actually removing any recursive calls. In fact I was creating more by telling the program to not add a new circle where there is already one. The image illustrates the recursive problem but also the inefficiencies of the algorithm as circles are drawn on top of each other. The Solution I disembark from the approach of pre-initialising the circle array and instead do it on-the-fly in the draw method. This way I can simply skip a draw if it is in the array already. There is no recursion using this approach which is fine as the draw() method acts as a type of recursive call itself. I simply need to populate the array with circle instances for every draw() call and ignore any duplicates that may popup. If this works then it shows that Processing works as a language which simplifies an approach to concepts that are sometimes difficult to grasp. As a developer I often over complicate things by not breaking it down and the kernel effect of the draw method certainly helped here. But early days - lets see if this solution works? Well actually it does work. It only works with equal sized circles but that was always the intention. I am surprised at how long this takes to fill up a screen and it is quite interesting to see how the simple rule of not creating a honeycomb if it already exist can hinder performance. I’m sure I can improve on this but all in good time. The code below shows an excerpt of the sketch and the solution. void draw() { background( 22, 22, 22 ); noStroke(); fill( 177, 240, 0 ); ellipse( centerX, centerY, hexRadius, hexRadius ); float xpos = centerX - sin( radians( angle )) * hexRadius; float ypos = centerY - cos( radians( angle )) * hexRadius; if (( ypos > 0 && ypos < height ) && ( xpos > 0 && xpos < width )) { if ( hasCircle( xpos, ypos ) == false ) circles = ( Circle[] ) append( circles, new Circle( xpos, ypos, hexRadius )); } count++; angle -= 360 / 6; angle %= 360; // This conditional creates the new center point from which to draw the hexagon if ( count % 6 == 0 ) { angle += 360 / 6; angle %= 360; if ( centerIndex < circles.length - 1 ) centerIndex++; centerX = circles[ centerIndex ].xpos - sin( radians( angle )) * hexRadius; centerY = circles[ centerIndex ].ypos + cos( radians( angle )) * hexRadius; if ( centerY < 0 || centerY > height || centerX < 0 || centerX > width ) { centerX = circles[ centerIndex ].xpos; centerY = circles[ centerIndex ].ypos; } if ( hasCircle( centerX, centerY ) == false ) if (( centerY > 0 || centerY < height ) && ( centerX > 0 || centerX < width )) circles = ( Circle[] ) append( circles, new Circle( centerX, centerY, hexRadius )); } int len = circles.length; for ( int i = 0; i < len; i++ ) { circles[i].run(); } // Make video if ( makeVideo ) saveFrame( filename ); } boolean hasCircle( float xpos, float ypos ) { boolean has = false; for ( int i = 0; i < circles.length; i++ ) { float dx = xpos - circles[i].xpos; float dy = ypos - circles[i].ypos; float d = sqrt( dx*dx + dy*dy ); if ( d < 3 ) { has = true; break; } } return has; } Generative Circle Packing. At this point my head hurt. Time for some play. The video at the end of this post shows what I call “Geometric Smoke”. It is the same circle packing algorithm with some natural variance added to the mix. The size of the circle and opacity changes on a natural variant sine wave.

Subversion Punch Card

Wed, 16 Nov 2011 19:18 +0100

After reading a post (tutorial) by Jer Thorpe on the introduction to Data Visualization I came up with this representation of a project code repository. It looked like a punch card to me even though I have never used nor seen one in the real world. An analogue punch card as I used opacity to indicate the amount a file or directory has been committed to the repo. The library It was my first time creating a Processing library in order to retrieve the SVN commit data from the SVN repo. Luckily there is a nice write-up on how to do this on The Processing Wiki. The library exposes a friendly API to interact with the data as well as exposing the data as a list of typed objects. logger = new RepoLogger( this ); logger.start( "http://svn.server.com/myproject" ); println( "Total days: " + logger.totalDays() ); println( "Total files: " + logger.total( "file" )); println( "Total dir: " + logger.total( "dir" )); println( "Total authors: " + logger.authorsArray().length + "n" ); for ( int i = 0; i < logger.authorsArray().length; i++ ) { float averagePerDay = logger.commitsPerAuthor( i ) / logger.totalDays(); float activeAverage = logger.commitsPerAuthor( i ) / logger.activeAuthorDays( i ); println( logger.authorsArray()[i].getAuthor() + " commits : " + logger.commitsPerAuthor( i )); println( logger.authorsArray()[i].getAuthor() + " active days : " + logger.activeAuthorDays( i )); println( logger.authorsArray()[i].getAuthor() + " average commits per day for project duration: " + averagePerDay ); println( logger.authorsArray()[i].getAuthor() + " average commits per day for active duration: " + activeAverage ); println( logger.authorsArray()[i].getAuthor() + " rating: " + ( 10 - ( activeAverage - averagePerDay ))); println( "===========================" ); } Visually the aim was a Tron like city to be built with the data and whilst this was cool it didn’t tell me much about the Subversion Project. It wasn’t informative and I realised this quite quickly after building a quick prototype. This lead me to some further reading which emphasized that I was on the right path. It’s worth pointing out that whilst the data types you get from an SVN repo is not that much - a lot can still be deducted. I decided to build this visualization on Path Commits, which is essentially the total number of commits per file or directory. At this point the date when these commits occured was ignored. PDE: SVN_Punch_Card_02 This sketch is the 2D front facing (ortho) view of all files and directories that were committed during the project’s lifetime. I simply kept the Tron city and only draw one face of the cube facing the camera. The reason for this was merely for me to keep practicing OpenGL and getting comfortable using 3D coordinates. The matrix is represented in row-major order, i.e. the data fills are done from left to right starting at the first row top left. My reading material, Beautiful Visualizations (Julie Steele, Noah Iliinsky), introduced me to a few guidelines as to what makes for a beautiful visualization. Novel, informative, efficient and aesthetic is what constitutes a beautiful visualization. As I don’t know much I am looking at this punch card thinking is this novel? It is to some extent informative if the viewer knows what they are looking at. Aesthetically it is pleasing (well at least for me) and it is efficient as there aren’t any additional data that could obscure the end goal. Speaking of which, the goal of the visualization was to do a few things: Want to know more about how we as a team use SVN Showcase / Present the effort involved in our projects Find new trends or indicators to help improve workflow “A punched card, punch card, IBM card, or Hollerith card is a piece of stiff paper that contains digital information represented by the presence or absence of holes in predefined positions. Now an obsolete recording medium, punched cards were widely used throughout the 19th century for controlling textile looms and in the late 19th and early 20th century for operating fairground organs and related instruments.” -Wikipedia The thing about punch cards is they clearly indicate clusters. The punched out holes are usually close together as it would generate a set of instructions. Clusters in everyday use are context specific and could maybe help in identifying new trends in the way projects are worked on in team environments. All in all this was a good exercise and I don’t think it succeeds in answering the “KPI” I outlined above. A good try nonetheless. PDE: SVN_Punch_Card_03 Expanded the Processing Repo Library to implement some sorting only for the Path Commits as I was thinking of sorting each path commit based on the number of times they were committed. This however didn’t work as I made a mistake in my calculations of drawing each path commit. The algorithm for drawing each square in version 02 would simply not waiste space. By this I mean that for each path commit (visible square) if the total commits requires more than 1 space, then the algorithm will not allocate more spaces but instead increase the colour intensity. I think this is a good solution and bodes well for efficiency of this visualization (thansk Jer). This is however what I missed in my first attempt. I proceeded to change the matrix order to a column-major and this immediately made a difference. It now had a matrix, like the movie title sequence type of effect. A pattern started to emerge. There are more gaps or low colour intensity squares in the centre of the project lifetime. By generating a few different projects I can see this more clearly. This could be for various reasons and I’m not going to attempt to interpret the data just yet. It’s worth noting that the path commits are still in sequential order, i.e. the order in which the log was generated. I simply incremented the individual Path Commit instances with 1 everytime the file or directory was committed to the repo. Showing the difference over time is what makes this data (path commits) informative. In the way the column order does exactly that however the duration is not logically broken down or visible. It is merely sequential. For example the decision to create a new column is simply down to a constant value. The question is if the project’s duration will aid in achieving my informative goal I set out earlier? In conclusion I have a new found respect for any data visualizers out there. Especially those who deal with a lot of data. It is definitely an art to produce a beautiful visualization. No doubt some of the things I’ve learnt has imprinted how I approach work of this nature.

Bacardi Get Together

Wed, 09 Nov 2011 21:00 +0100

I built this web app so Bacardi can easily check-in their guests at the Get Together parties. Powered by a Symphony CMS back-end this little web app has been exceptionally useful for Bacardi and CowAfrica who help create their events. Some challenges I faced was hooking into Symphony CMS, i.e. posting values to the CMS but luckily there are many tutorials that helped me smooth out any AJAX-type issues. I had to learn to CSS portrait and landscape with media queries which meant making sure my css containers were properly set up. The only external libraries that were used was iScroll.js Spin.js All in all this was a good learning curve as JS + CSS is not my day job but I can totally see the benefit of producing web apps in the future.

Cellular Automata: Vichniac Vote

Tue, 08 Nov 2011 21:30 +0100

Built with Processing. This result is from following Matt Pearson’s book called Generative Art. Lovely book explaining all sorts of stuff from basic programming to philosophical ideas. Cellular Automata is a gem for generative code. The simple rules for each cell or agent may seem trivial at first but viewed from a different perspective may produce patterns previously undiscovered. The discrete model rules outlined by various famous scientist, philosophers and other complexity theorist make for interesting visual consumption. The Vichniac Vote established by Gérard Vichniac is very much majority rules. Some may see this as peer pressure where a cell’s neighbours dictate the current trends.

Playbook Analyzer

Mon, 07 Nov 2011 22:20 +0100

The Playbook Report Analyzer is used to visualize the CSV report file which is given by Blackberry for app developers. The stats shown are pretty much what is available. The actual code that drives this was originally used in the IBM Wimbledon 2011 Foyer Screens project. Another great example of how the Wezside Toolkit supports re-usability.

Punch Card: wezside

Thu, 27 Oct 2011 18:45 +0100

Working through some data visualization ideas unbeknown to me I produced a punch card. Once I realised this I set out to produce a version for the word “wezside”. The below image (now also my new logo) is a binary representation of my handle as a 2011 punch card. “Punch cards (UNIVAC® programmers would never refer to them as “IBM cards”!) were not only the primary medium used to create programs in the mainframe era, they were also the bookmark, notepad, and Post-it® notes of the programmers who used them on a daily basis. It is largely due to these secondary applications that the following punch cards have survived into the present.” Fourmilab Beautiful.

AS3 XML not well-formed (Error #1088)

Fri, 18 Feb 2011 18:30 +0100

I’ve only had this a few times and in most cases the error was indeed a malformed node, i.e. not closed properly or closed in the wrong place. The error I’m referring to is: Error #1088: The markup in the document following the root element must be well-formed. So after checking my nodes thoroughly (and this was a small XML file), I decided to do a quick test and create a new XML file from scratch since I inherited the project. To give you the full picture, the XML file wasn’t loaded, instead it was embedded into the SWF as this was a rich media banner like below: [Embed(source="/../assets/xml/test.xml", mimeType="application/octet-stream")] public static var TestXML:Class; ... var byteArray : ByteArray = new TestXML() as ByteArray; var xmlString : String = byteArray.readUTFBytes( byteArray.length ); var configData:XML = XML( xmlString ); configData.ignoreWhitespace = true; Initially I thought it might be due to the embedding that is not supported by 3.5 and 4 of the Flex SDK. But after testing both versions with both Flash Player 9 + 10, this had me baffled. I then created a new XML file and tested it and it worked. After comparison the only difference was the encoding of the actual file. Low and behold this was it. The Solution Make sure the encoding of the XML file is set to UTF8 without BOM and not UTF-8. By encoding I am not referring to the XML declaration, i.e. You have to use a text editor like Notepad++ or if your chosen IDE allows you to change the file encoding that should be good too.

JSFL: Export all library images

Wed, 15 Dec 2010 01:20 +0100

I recently needed to revamp a site and all the images were in a single Flash IDE file (.fla). So I gave this one look and thought this is where JSFL might come in handy and how it did. It couldn't be easier to just loop through all the images and export to a file. Here is the single tier solution: var items = fl.getDocumentDOM().library.items; for (i = 0; i < items.length; i++) { if (items[i].itemType == "bitmap") { fl.outputPanel.trace( items[i].name ); items[i].allowSmoothing = true; items[i].compressionType = "lossless"; items[i].exportToFile( "file:///C|/temp/" + items[i].name ); } }

ReadPST

Sat, 11 Dec 2010 20:35 +0100

Since moving to Ubuntu I have had to move my email from Outlook 2007 to Thunderbird. This is by no means an easy feat until I came across readpst. What an awesome little utility. Outlook stores your email in a single file called a .pst file and this little utility extracts and outputs it into a format that Thunderbird understands, a format known as mbox. readpst can be installed straight from the Software Center. Usage: readpst [OPTIONS] {PST FILENAME} OPTIONS: -V - Version. Display program version -D - Include deleted items in output -M - MH. Write emails in the MH format -S - Separate. Write emails in the separate forma -b - Don't save RTF-Body attachments -c[v|l] - Set the Contact output mode. -cv = VCard, -cl = EMail list -d - Debug to file. This is a binary log. Use readpstlog to print it -h - Help. This screen -j - Number of parallel jobs to run -k - KMail. Output in kmail format -o - Output directory to write files to. CWD is changed *after* opening pst file -q - Quiet. Only print error messages -r - Recursive. Output in a recursive format -w - Overwrite any output mbox files So to use it open a terminal and enter: readpst -o output myemail.pst

Kodak Santa's Grotto

Sun, 05 Dec 2010 06:33 +0100

I worked with Sean Lailvaux in creating this nice little campaign site for Kodak for Christmas. Upload a face photo of yourself or a loved one. This was then super imposed through a cut-out on Santa’s lap. Next create your Kodak Christmas wishlist and send this to friends or family. Get into the Christmas spirit with Kodak!

BP Cleaner Engine

Fri, 01 Oct 2010 14:11 +0100

For the BP Cleaner Engine campaign we were tasked to build a Guitar Hero style game but all the song melodies are played through engines. Why I hear you ask well it’s simple. Give your engine some BP Ultimate Unleaded and it will keep it clean and sounding great! This was an interesting project with lots of file size difficulties. Built mostly by my wingsuit wingman Sean Lailvaux. I started the build with an architecture loosely based on Modulo (yet another framework I’ve built). On top of this we used the Wezside Toolkit to produce components that is easily skinnable through CSS. This was early days for the toolkit and it has since evolved into a fullfledged light weight component architecture. You can read more about the toolkit here. Built for 12 countries the Toolkit made it really easy to produce these different versions, separating the style using CSS and library SWFs. At the heart of this is the StyleManager that provides an API for the component to easily change and access different visual states.

BT ICT Review Tool

Thu, 02 Sep 2010 12:15 +0100

The Review tool is an internal survey used by BT to establish the level of IT support business' require. This was built with a Traction back-end and produced within a relatively short time frame. I've been working on a Survey engine for Flash component for a while now as part of the improvements on the Flora Heart Age Tool. This project was built using this engine and also highlighted some improvements to be made. This is an example of a simple survey and was good exercise in establishing if the survey engine was on the right track. I haven't had a chance to explain the survey engine anywhere in my write-ups but if you feel brave enough then check out the code on Github.

Omo Tang Plus

Thu, 03 Jun 2010 20:14 +0100

Tang Plus is a GoogleMaps mash-up asking people to share the moments around the world. Currently only Portugal is live and established. The site hosts features for a user to drop moments where they have happened on a map, and then to attached an image or Youtube video. The first time I worked with GoogleMaps using the Flash API. This site was built using my Modulo framework with Flex. This would be the last time I would use Flex as I’ve established my own Toolkit to build component driven sites. Tang Plus also came with a widget that one can embed to share moments with visitors to your site or blog. The widget re-used about 80% of the main site’s code, therefore was produced in record time shortly after the release of the main website.

I have a dream: CS on Linux

Sun, 11 Apr 2010 14:18 +0100

The recent buzz I find amusing. I don't like Apple and never have for various reasons. However, I think it is time Adobe wake up. And no it's not to fix the countless of un-specific bugs and browser crashings that so many commenters like to mention without really mentioning. You know, those statements like, Flash is a "resource hog", "Flash crashed my browser" etc. It's not those because I build Flash projects everyday, and they run peachy keen when put through our everyday QA paces. It's time to put the proverbial weight behind an un-tapped resource. A resource that is yearning for input, collaboration and improvements (imho). Lets get CS on linux! I know I know, ludicrous even thinking that. But and there is a but, Adobe has already made leaps in supporting Open Source communities so why not push a little further. The evil Adobe Google collobration as so many bloggers put it, is in fact a great thing. Not because Flash will run better and ship with Chrome, no it's because the end goal is a plugin architecture standard. Something which is overdue and will have a tremendous impact on user experiences. Case in point, Tinic's post "Press any key to continue" about the inconsistencies across browsers when it comes to idling the Flash Player when not visible. I'm an Ubuntu Flash Developer and I have to say I struggle to pull myself in front of my XP machine to use CS. But I think Zarko has a point. All Adobe's envangelists are using macs and the trend is very popular amongst Flash/Flex developers. The reason is collectively, a Mac works better. Go to any Adobe conference and you'll feel a little like the kid with a packed lunch with jam covered bread (made with love). What if a collective shift happens and Adobe hands out Ubuntu laptops to it's staff and evangelists. What if. Why not? I think there is a huge untapped market, the Linux community is in need of some serious graphic editing software. GIMP is great but it isn't Photoshop. Imagine Linux, the new elitest, offering superb user experience, the best development platform in the world and the option to have the best creative suite in the world. Mastercard ad. As far as the war goes, I think it has only just started. Adobe might look like the dog with its tail between its legs but it has a little friend called Google. I like Google, I like the fact that their engineers get 20% free time to spend on their own projects. It's non-traditional. It's outside of the box. Propriety and Open Source Software can work together and work well. Google proved it. Now Adobe just need to wake-up and smell the coffee.

Openness

Wed, 23 Dec 2009 16:31 +0100

Pretty amazing blog post by Jonathan Rosenberg, Senior Vice President, Product Management of Google. Some might argue Google isn't open about search algorythms etc. But I think they have proved that the opposite business model of the traditional hook, line and sinker is worth a consider. My favourite paragraph: "Open will win. It will win on the Internet and will then cascade across many walks of life: The future of government is transparency. The future of commerce is information symmetry. The future of culture is freedom. The future of science and medicine is collaboration. The future of entertainment is participation. Each of these futures depends on an open Internet." Read the full article here.

How Accessible is your Flash?

Fri, 11 Dec 2009 23:43 +0100

Recently I was looking into Continuous Integration and as you do I started thinking of all the automation I’d like to integrate in an ideal world. One of them was running accessibility tests. As this is a bit of an unknown subject to me, I thought the ideal time arose to learn more on this topic and not to just accept the vanilla response that Flash is accessible. So just how much do you need to worry about your Flash content. Well it would seem not that much. Adobe has worked hard to improve Accessibility throughout the years. And the result is quite impressive. However I think awareness among developers are thin and needs to improve as there are still things that each developer need to do to ensure the project is accessible. Adobe has released Accessible Best Practices which too be honest I haven’t heard of before I started on this venture. More resources at the end of this post. Open Government Open Government is something that was introduced by President Obama in a memo calling for his government to be open. Open how you say? Well his idea is to “establish a system of transparency, public participation, and collaboration”. Sounds familiar? No? Long live Ubuntu! So what does open government have to do with Flash and more so with accessibility? Adobe recently launched a website dedicated to the Open Government initiative. Adobe PDF and Flash technologies are at the forefront and in use within the US Government. Many feel that this is a problem but it would seem more to do with the transparency of the data than the tools used to display the data. Granted PDF’s aren’t the most open format to use for distributing data but it works a charm for forms etc. The biggest problem with the Open Government website was it wasn’t accessible and many flaws were pointed out by the public. Define irony. Like iron. Commercial websites have no obligation to be accessible, but government websites are required by law to be accessible, US Government sites and a few other countries that is. Don’t floor me on this technicality. The point is, openness is important to all of us whether you are the US government, Adobe or just a single contract Actionscripter doing yet another microsite. Openness and Accessibility more often than not hold hands as they walk off in the sunset. Remember that. Accessibility Tools Framework (ACTF) What a wonderful thing being open is. Eclipse may have a bad rep for new comers but the power and extensibility underneath this open IDE is unmatched. ACTF is an Eclipse plugin perspective to test HTML and Flash Accessibility. It started as a headless piece of work and was quickly supported by IBM and integrated into the Eclipse environment. Below is an excerpt from the site: “ACTF is a framework that serves as an extensible infrastructure upon which developers can build a variety of utilities that help to evaluate and enhance the accessibility of applications and content for people with disabilities. A collection of example utilities will also be provided which were created on top of the framework such as compliance validation tools, assistive technology simulation applications, usability visualization tools, unit-testing utilities, and alternative accessible interfaces for applications. The ACTF componentry and the utilities will be integrated into a single tooling environment on top of the Eclipse framework. The framework components will function cooperatively with each other and with other Eclipse projects to provide a comprehensive development environment for creating accessible applications and content. “ Let’s put it to the test. I ran my own website which is nothing big but have the standard microsite components. Buttons, dynamic content and some animation through scripting. Below is a screen of what you get when running ACTF. Notice the Flash Outline giving me Nameless instance values for my DisplayObjects. The power in ACTF is the GUI Report. This report will show any accessible problems. If this is clear you can sigh a relief. Clicking on any of the items within the GUI Outline will highlight it in the output window. As you can I need to do some work on specifying names for my buttons and alternative text to the graphic. This is an amazing tool. It works well with HTML too so play around with it and it will become quite evident why this is important. I’ve yet to integrate this in my automation process but I fear not. It will be mine. Resources ACTF South African Government moves to Open Source Adobe pushes Flash and PDF for open government, misses irony Adobe is Bad for Open Government Adobe Accessibility blog Adobe Accessibility resources Adobe Accessibility Best Practices (Select Flash from the dropdown)

I like black.

Thu, 10 Sep 2009 12:57 +0100

Maybe you’ve guessed it but keeping with my black theme I’ve utilised my spare time to design a new set of Eclipse icons and splash screen. What I haven’t had time for was writing some script to install these on different OS’ but my guess is you will figure it out. I’ll attempt to give some best-in-show running commentary to make this a little more interesting. Splash Screen I’ve gone for the black theme here with a total eclipse graphical representation, representing well… an eclipse. Pretty heavy stuff in my humble opinion or should I say imho. You’ll notice the loading text straying a little towards the border and this is purely because I can’t change this. Period. Icon set Again keeping with the black theme I couldn’t resist using a visual representation of what a programmer might feel when using this superb IDE… Yes I know it’s another Eclipse but that is part of the theme. Install Pretty easy. Just do a wildcard search for “eclipse*” on your eclipse installtion folder and replace the images with the same name. If you are worried this might break anything just rename your existing images to something other than what they are currently called. You could use the plugin Random Splash Screen if you just want to change the splash screen and require a GUI to do so. Selah. Download the zip file here » [Update: Someone asked about Flex/Flash Builder: Just change your wildcard search to flexbuilder* and all the icons should appear. There does seem to be .ico files being used - so for those you will have to convert one of the PNG’s using some program to .ico]

Sony FevaCast

Fri, 21 Aug 2009 15:07 +0100

The build up to FIFA World Cup 2010 includes a Confederations Cup tournament. Sony being one of the 2010 sponsors wanted to create a site that would revolve around the Confederations Cup but outlast the World Cup. The idea was to get some troops on the ground within SA. These pundits were shoot documentary style videos about the World Cup and the Confed Cup and post it back to the site. The result was a slick video gallery with some 3D transitions. We used Brightcove for streaming the documentaries. As I’m from South Africa I was obviously biased and thought the content was actually quite cool. Showcasing the interest in football in South Africa, and the excitement surrounding the World Cup. As this was localised and only running from XML due to budget limitations, I built a little AIR app updater to help with managing the content updates of the videos. This proved quite successful and was used internally to speed things up. As part of the build-up Sony wanted to test live streaming of some of the Confederations Cup in preparation to the World Cup. This proved difficult as the bandwidth surrounding SA is limited however I was able to watch a few matches at work with no problems. I’m not sure if any of the World Cup matches was streamed as I left Dare after this project was completed. This was one of those projects with variety in features like loading, streaming, managing of content and user experience. Video playback and management was handled by Brightcove and we also did some streaming tests with live matches using StreamUK. I got to watch the Federations Cup on a website I built. It just made me miss South Africa so much more but felt very proud when the World Cup a year later went down very smoothly indeed.

Linux and Flash: A workflow perspective

Tue, 14 Jul 2009 20:36 +0100

Initially I wanted to do a complete write-up on what it would take to move your entire Flash operation away from Windows. How much fun that would've been. Instead I opted for a more mashed-up approach on ethical philosophies and how they relate to the workflow of building RIA's and Flash websites mmkay. Like loads of people, I have my own reasons for working on the Windows platform for the last 8 years (professionally that is). The lure of working on a Mac has always been there, although only until recently, with the release of the iPhone have I realised Apple and Microsoft are very much the same. Both companies need to make money. Nothing wrong with that, but as a consumer I started to think that I don't want be limited to one platform. Remember the old "plug-n-play" concept from Creative Labs? Well I want to plug in any computer and be able to play. What is the point of showing one conglomerate (not sure if they are?) the finger when the other is sticking it where the sun don't shine. I am of course referring to the required Mac should you want to develop apps for the iPhone to name but one example. It's like Apple are saying only cool kids allowed here. Oooh, look at me! Look at me! A bit jealous are we? You bet your ass I am. As an aspiring technologist, some of the coolest technology is not available to me. It's expensive, and from what I've seen the extra money does not value "the experience". All hail apples through windows. Ubuntu But alas, something appeared on the horizon which tickled my fancy. I couldn't believe it. The same OS I ripped off at varsity, is now the sole driving force behind a movement that is known as Ubuntu. Ubuntu is an old humanistic philosophy which basically translates to "I am because you are". I like that. I like the idea of being a unique and pretty (grain of salt) snowflake because other snowflakes exist around me. That is cool. Can I play too? Best of all it's free. A release happens every 6 months. What more do you want? So head first I dive into Ubuntu. Installation was a breeze. A boot menu was created for me as I already had Vista installed. From there on it took some getting used to. Customisation is in abundance with Ubuntu. For a lot of people this isn't new. It was however only until I had to start doing my work at home that things got a bit hairy. My dreams shattered fairly quickly. It became more of an i-am-not-doing-anything-cause-you-run-something-different philosophy. The Case study The decision was made to give this move a real go. That would mean designing a Flash website and building it on Ubuntu. It was established very quickly that I wasn't able to design on Linux. Searching high and low all results kept on pointing to the same application - Gimp. I'm not going to say the interface is not intuitive enough because that is cop-out comment in my opinion. I think it's because in most cases people feel it's not Photoshop. Being different doesn't mean you suck, it means you need to get use to it and spend a little time. I can hear Different in the background shouting "Please give me another chance!" I'm sure Gimp runs some wicked code under the hood to produce algorithms that Photoshop could learn from or have already "learned" from. No? This was a real life project and time was of the essence and I decided not to pursue this avenue nor the other version of Gimp that mimics Photoshop's interface. The expiration date (last updated) on this website made me nervous. I am after all a newbie and should anything go wrong, it will take me hours to fix. Such is my trust in the open source community. Shame on me. It's Linux and if something goes wrong you probably just don't have The Right Stuff. But the truth is, I've successfully added and removed a few applications, used the terminal to get and install Eclipse. Nothing was going wrong and I'm starting to feel a little elite. Now if I can just find a program to design a website with. This quest resulted in using Inkscape which is a fantastic little vector based drawing program. It was a little slow at times partially due to me sticking bitmaps in there but still seriously cool in my opinion. In fact, I will be happy to use Inkscape for all my projects. I did have some problems in converting my final design to Adobe's Creative Suite for client preview but that is partly due to the inconsistencies in the SVG format. Working with Inkscape, it felt a lot like the Flash IDE without the timeline. Obviously a different interface but still intuitive enough to get to grips with quite quickly. Because the SWF file format is open source (thanks Adobe), someone in the community must be able to write an exporter/plug-in to be able to export the design as a SWF with linkage ID's. This would mean that my dependency on the Flash IDE will disappear, and I will be able to develop only on my preferred platform Ubuntu. What became evident very quickly was Ubuntu is super cool for programming. I know I know. Eclipse actually runs a lot quicker. Start-up times are unbeatable, there is simply no comparison. I can't compare this to Eclipse on a Mac as you may recall I'm not part of the iPooped-club. I know I know. Also, for all the die hard Linux users out there, you've been right all along. I admit it but with a caveat. It's not for everyone, and I'm hoping there will emerge more programs like Inkscape for Linux to sway some designer/developer folk. I think what Ubuntu has done is show that the once secluded world (some call it a secret society) of developers who use Linux, is now opening up to novices buying cheap netbooks with a variation of this operating system. Ubuntu is gaining ground and at a reasonable pace too. Ubuntu has embraced all people wanting to use the operating system, and you'll notice this when reading or posting a question in the forums. The Ubuntu forums even shed some light on some of the secret society handshakes and practices. The community seem to be different to what I've known before when I was introduced to Linux at varsity. It's more welcoming and for a novice like myself this is an indication that Ubuntu is on the right track. Adobe Flash Builder Adobe is pushing for more market visibility with Flash Builder in the current economic climate in other development communities, specifically in the Java world. Even though the Flash community is tight knit, it has some way to go to meet the needs of other developers from other backgrounds. And here is where I agree with Mike Slinn, if you want to tap into this secret society, you have to make a substantial effort to meet their needs. One way this effort was somewhat offered and then removed again in the form of Flex Builder 3 for Linux. By branding Flash as a "platform", Adobe should learn from other giant's mistakes. Having said all this, I'm somewhat torn as my livelihood is depending on Adobe moving the technology forward albeit only on two platforms. This means my preferred choice is still not an option unless of course Inkscape manages that feature. But until then I'll be on the edge of the fence - waiting to jump. Adobe Catalyst hype As far as the Flash Builder and Catalyst workflow go, I think what Adobe has done is very impressive and I can see the problem they are trying to address. However, I'm not sure I would want to work with that much automation. How will catalyst integrate into existing and well supported frameworks? There is no doubt that for wire frames, rapid prototyping Catalyst is ideal. I cringe every time I get an FLA and I'm dealing with thousands of nested MovieClips and Symbols with automagically generated names. In the same way Catalyst will name instances if you don't name them but I have yet to meet a designer that gives their library items descriptive sensical names. Different strokes for different blokes I guess. The amount of ways of doing things in Flash is partially responsible for this. Trying to have a one-size-fits-all solution is nearly impossible. So, to summarise, I still have to boot up in Windows to use any of Adobe's software, which happens all the time. This means I end up having to use Eclipse on Windows as I'm too lazy to reboot into Ubuntu for most maintenance projects. But for projects where I get to choose the process, I get some valuable time on Ubuntu. And that makes it all worth while. Understandably so, Adobe has opted to freeze development for Flash Builder on Linux until further notice and there is no intention for any of the other programs other than Flash Builder to potentially move to Linux. All valid reasons are listed by Adobe, but I think as market share changes, eventually they will have to succumb to the secret society. And that my friend will be a glorious day. Resources: Flash Builder, Linux and Winning the RIA War http://ria.dzone.com/news/whats-new-flash-builder-4-beta http://asserttrue.blogspot.com/2009/04/how-ria-wars-will-affect-future-of.html

FlexUnit 4 alpha 1.0

Fri, 15 May 2009 11:41 +0100

Just read through the overview and the new FlexUnit4 alpha is looking pretty good. Using meta tags to create Tests and Suites and the addition of user defined tags, makes me think that I have to start including this in my own project workflow. I wonder how many Actionscripters actually use Unit tests. I'm sure there are a lot of Enterprise Flex developers but any pure Actionscripter takers? [Update: Updated link for FlexUnit over at opensource.adobe.com] I also wonder how they plan/cost/build that into their project workflow. I think the idea of writing tests before you start is really cool, however how would that work in a 3D project for example. I can't help but wonder that sometimes the build of a test will be post production to show any weakensses in your own code. And isn't it too late at this point?

Processing Particle Storm

Mon, 16 Feb 2009 11:00 +0100

A Particle Storm created with Processing. The particles are created based on an FFT spectrum by the ESS library. My first result using this cool language. Music by Sibot (African Dope Recordings)

Sony Bravia Motionflow

Fri, 30 Jan 2009 15:27 +0100

A Flash module that was hosted within the Bravia site. It showcases Motionflow technology which uses a higher hertz and more frames to allow for crisp and very high quality images. We built this with the guys from Disturb Media which would turn out to be the beginning of a great working relationship and also my own framework called Modulo. I needed some way of ensuring the work that Disturb Media were doing can be integrated with as little effort. A simple interface to contract a module was agreed upon and the integration was flawless. Awesome job by the boys from Disturb.

MXML + ANT + ASDOC = And then some

Wed, 28 Jan 2009 15:00 +0100

I'm currently working on a project of which the source will be distributed across the globe. So I want my code to be nice and tidy and send over some HTML docs to show off. Only problem is it's a Flex project and I've been out of touch with Flex for a while. As I don't use Flex Builder, getting ASDoc to work ended up on the things-I-will-sort-out-later-pile. For this project however, it was a requirement. So no easy way out. ASDoc aint easy... I think that is an understatement. The majority of the flash community (my opinion) doesn't work directly with command-line compilers. In fact I think it is safe to say that most of us work indirectly with command-line compilers. That is why we use an Integrated Development Environment (IDE) like the Adobe Flash IDE, Flex Builder, Eclipse or FlashDevelop. Having said that I do feel we need to be grateful here as ASDoc in particular is one of Adobe's internal tools that have surfaced as being quite popular in the flash community. All the others available were either too expensive or didn't quite work. Only problem is, everyone wants to use it but there seem to be little documentation on it which makes loads of people lose their hair way too early. Unless you use Flex Builder, this is not a straight forward process (or so I've heard). The tool Very cool stuff from Adobe. It's no secret we can use their nifty tool ASDoc to generate our own project class documentation, but up till now the support for MXML has been a little on the thin side. That is until now. There isn't much info on this yet but in my quest for perfect class documentation, and that means including MXML files, I have found a functional and design specification for ASDoc in MXML. You gotta love open source. A little searching showed the new ASDoc compiler is available in the new release of Flex 4. So I download a nightly build for free. Nice. Write an Ant script. Run it. Errors. Not so nice. Getting it to work If you are using the Flash IDE or FlashDevelop this section is probably not for you. Only because I don't know how to run Ant scripts using these IDEs. Not even sure if you can. I use Ant to run command-line compilers as it makes things a lot easier. You can download Ant for free but I use it through my IDE which is Eclipse, so won't be able to assist in running a script standalone. At first I managed to get it to generate without too much difficulties. The log file with errors is quite descriptive of what the problem is. The compiler errors on the other hand is like a politician, artfully vague. So after making sure I don't have any & signs lurking in my comments and my html tags are closed, I was able to generate some cool docs. Only problem was it didn't include any MXML files. Which kinda defeats the purpose. MXML problem I had a problem with my MXML files not being found. The error was something like Error: Definition could not be found. I should probably add that I instantiated my MXML inside an Actionscript class. Another error I got was Error: Type was not found or was not a compile-time constant: . The Ant script I used looked like this extract (will provide the working version at the end): After doing some searching I found that I need to add the argument -source-path to tell the ASDoc compiler to include my source folder to the path that will be searched. So I did and then I got the obscure error that looked a little something like this: [echo] Generating new docs... [exec] Loading configuration file C:flex_sdk_4.0.0.3988frameworksflex-config.xml [exec] java.lang.StringIndexOutOfBoundsException: String index out of range: -28 After doing some more digging I found the manifest file. The manifest file is an XML file that lists the full package of your cusotm MXML components. This will be used by the compiler should it come across a custom component it can't find. Here is what the manifest file looks like: All we need to do now is tell the ASDoc compiler to use this manifest file and we do it like so: Complete ant script You will have to update the example Ant script properties to suit your environment: All that is required now is to run it. To run the Ant script in Eclipse do the following: 1. Window » Show view » Ant 2. In the Ant view click on the little icon with the ant and plus sign 3. Select the Ant script and click on the green play button Resources ASDoc help

Generate PDF's on the fly

Mon, 03 Nov 2008 17:50 +0100

I read this post from DevGirl about AlivePDF, an AS3 API to save Flash content to PDF. The examples showed how to use a server-side script or using AIR. Hmmm... this could be a nice little introduction into the world of FP10 me thinks. I haven't spend any time looking into the FP10 features but thought this could be fairly quick and easy to do... and it was! The example shows two textfields. Enter some text in the title and also some in the body. If you're lazy no worries I added some already for you. I used the AlivePDF (0.1.4.6) API which is dead easy to use. Here is the example and the full source. (Flash Player 10 required) Selah.

Fullscreen flash with browser scrollbar

Wed, 29 Oct 2008 11:07 +0100

A lot of people have blogged about this and there have been a few attempts at libraries which solves the problem. Some have gained status and some have gracefully failed silently. It’s only recently that I encountered the need to use this method and frankly I prefer browser scrollbars as most users do in my opinion. I feel they are more responsive and have better performance. But damn it ain’t easy getting this to work properly and at one point I wondered if it is actually worth the trouble. Quick overview of the problem It may be worth pointing out that in most cases there are two distinct reasons a flash website might have, for wanting to enable the browser scrollbar. If the window is resized to a smaller size that was designed for - a scrollbar would be nice. If the content is larger than the original design - a scrollbar would be nice SWFResize, SWFForcesize and SWFObject SWFResize is a nice little add-on to the SWFObject solution. Inducted into the OSFlash hall of fame, it is with regret that this add-on doesn’t work anymore. Reasons not being for lack of development but rather the release of SWFObject version 2. Enter SWFForcesize, another attempt to solve the fullscreen flash with browser scrollbar. Very similar to SWFResize this add-on too worked quite well but also only with SWFObject version prior to 2. We all love SWFObject. It’s the next best thing since sliced bread. It kicked dust in all the proverbial cowboy faces and irritates the crap out of Jakob Nielson purists. Before the release of the mighty version 2, SWFObject seemed to work quite well with the afore mentioned add-ons. Lucky for us Bobby van der Sluis and Geoff Stearns did some sterling work and included an example for solving the first requirement when showing full flash with a browser scrollbar in the latest version of SWFObject. This doesn’t however solve the problem of content being larger than the original design. For this we need to make some changes to Bobby’s example code. SWFObject original code The solution The basic changes are the removal of the window.resize listener as this is now handled through Actionscript and the addition of a setHeight() Javascript method. This method will be called from each Flash page with a new height. It checks to see if the value supplied is less than the minimum height, if it is then use 100% as the height. If not, set the container div’s height to the new value. Easy peasy. I only set the hight as that was all I required from the resize, although in some cases you might need to add the width too. Selah. Tested IE6, IE7 FF 3.0.3 Safari 3.1 Resources Example of first requirement, i.e. minimum size restriction

Frazer Brothers

Sun, 05 Oct 2008 13:00 +0100

A friend asked me to help out a friend and put together a small site with a gallery that is maintained with a simple XML file. Frazer Brothers are a furniture company, and the idea was to build this in a matter of days. It resulted in a nice little 3 page site that can be used online or offline.

SonyEricsson W980

Tue, 29 Jul 2008 15:12 +0100

Project code name Music Reborn was duplicitous in nature as it consisted of a product showcase and a more experiential side. I was heavily involved in the experiential side but also helped on the product showcase. This was a huge project for me as it involved some 3D using the Papervision library. 3D is not my strong suit but with some effort I got this concept to a stage where everyone seemed happy with it. The problem with the execution however was that it was following a trend set by quite a few other 3D sites. Using 3D planes to project some kind of animation. The idea behind Music Reborn was that one is immersed into a 3D space surrounded by arbitrary sounds which make up this experience. Music Reborn was all about the music and how the W980 immersed a user into a world of sound. Credit to Dare as this was highly experimental which is why I guess the duplicitous nature was offered. There was a lot of hard graft by a lot of good people to make this project happen and I’m honered I was part of it.

SonyEricsson W980

Mon, 09 Jun 2008 08:33 +0100

For the SonyEricsson Music Reborn site we did some prototypes on how to represent the objects in 3D space. This was one of them. Moving closer to an object will start the music and pan from left to right based on where you are. The prototype showed some problems with the objects themselves as creatively primitives weren’t deemed good enough. See the implementation of this prototype in the final site. A far cry creatively but the essence is still the same. Navigate through music and explore the empty space.

SonyEricsson C905

Wed, 04 Jun 2008 13:34 +0100

Alona was the project codename for the SonyEricsson C905 phone. At this time I was the Flash Technical Lead at Dare but due to lack of resources decided to build this myself. I found it emphasized the importance of keeping your hands dirty to stay on top of this fast moving industry. The project itself was localised for 32 countries, and was designed to incorporate some of the phones features. As this was a camera centric phone the slide effect to reveal the camera on the phone itself was the main attraction for the navigation and transitions used.

Flash Tracking: Omniture in-depth

Thu, 01 May 2008 10:36 +0100

Omniture is one of the leading analytic vendors out there. Chances are that if you're an Actionscripter you will come across implementing Omniture tracking on one of your projects. I briefly overviewed various tracking in a previous post but thought it might be useful to cover this vendor in-depth. Usually this level of tracking implementation are done on medium to larger flash projects or where the project is part of an online campaign. Smaller sites often don't require this level of tracking and a straight forward implementation of Google Analytics should suffice. Omniture like many others use Javascript to make requests to a server, passing key-value pairs, to record user activity. Omniture also has a Flash component called ActionSource for more advanced tracking. This post will focus on the ActionSource component and the Omniture setup in general. If you require more information on the Javascript implementation, please read my previous post. Understanding reporting With any analytic measurement it is necessary to fully understand the vendor's reporting capabilities. By doing so you as developer understand better why certain interactions are tracked and others not. More importantly, it is necessary to know what values to send when. This is key as it can become overwhelming to know what an eVar3 and a prop4 variable is and when to use them. As soon as a developer declare a project "done and dusted" the element of surprise is priceless. Tracking always seem to be the last addition/change and for various reasons. In some scenarios there is no other way, but the immense deadline pressure can be managed by better upfront technical design and information architecture. You may wonder how you can add tracking to your site before testing and bug fixing. Logically it makes sense to do this after, but for time efficiency and cost, it can be much better to implement a foundation during the build phase, provided there is some acrhitecture done upfront of course. Adding tracking this way is also less of a pain for the developer because it means less searching for when specific events might occur after the project is done and dusted. The next section will give some tips and guidance as to how we can make it easier to add tracking to a project with minimum additional effort. Process and design As mentioned in the previous section, technical design upfront is key for minimising efforts when implementing tracking. So knowing what metrics is required before a project build start is equally important. There is no point in adding what you think might be useful when in actual fact there might be way more or way less. The guesing game is going to cost you. Basically, implementation during build will only work if planning is done upfront. So how do we plan tracking? The first step will be to know what metrics are required. Once you know this, you can start to plan integration into the site's architecture. There are a few ways we can do this. Automation by inclusion in a framework Identifying where your architecture allows for easy tracking and where it doesn't, is really useful. Automating your tracking code by including it into your existing framework or architecture will greatly speed up the process. Lets take Cairngorm for example. You might want to setup a specific CairngormEvent specifically for tracking. This event is registered with a TrackingCommand which executes the tracking call on the ActionSource component. Later we will see how this combined with a utility class can automate this process even further. Automation by adding Eclipse templates If you haven't discovered this little gem by now, allow me to dialate your pupils. Eclipse allows you to setup code templates. Assign a word to a piece of code and access it by Ctrl+SPACE during coding, select it and hit enter. The biggest feature left out in my opinion of Flex Builder. Here is how you do it: Open Eclipse Window » Preferences » FDT FDT » Editor » Templates New Name » "trackEvent" Description » "Creates tracking event code" Pattern » "var event:TrackEvent = new TrackEvent(TrackEvent.TRACK_ITEM); event.data = ${var}; CairngormEventDispatcher.getInstance().dispatchEvent( event );" Click OK To use this template type in trackEvent and Ctrl+SPACE. Tracking design document The tracking design document allows for quick referencing when adding new tracking. This could be anything from an Excel spreadsheet to a software programme generating what tags should be used for what metrics. Everything regarding tracking should be contained in this document. The responsibility of this differ from the parties involved but usually is the result of speaking to the client to find out what metrics they require. Thumb sucking this document will lead to red eyes, way too many Red Bulls and an upset tummy. You've been warned! A Data analyst would be an example specialist who could draw up this document as they understand more about how data can be mapped to achieve specific results tailored towards the client needs. Omniture themselves also offer a consultancy service to get the most out of tracking your projects and analyzing the reports. Documenting what tags should be used for which variables is a great way to make sure everyone involved understands what is required. Omniture breakdown Omniture can be divided into two categories, basic and commerce tracking. Commerce includes basic tracking. Commerce is also known as transactional tracking. Basic tracking consist of the following variables: channel campaign products pageName prop1 - 50 hier1 - 50 Commerce tracking includes the above and the additional variables: eVar1 - 50 vevents1 - 50 Key-value pairs are used to associated values with variables. By setting these variables on the ActionSource component instance, they will be sent when the track() method is called. It is therefor important to ensure that the values are reset appropriately everytime a request is made. In some scenarios you wouldn't reset all the values but I will explain this later in the post. Variables prop, eVar,hier and events are all custom and bespoke to a project. When commerce tracking is done you will probably have some variables that submit the same value, like eVar3 will be the same as prop3. This is for reporting purposes and used when cross-referencing reporting is done. For example maybe you want to know how many people from a specific country accessed a product within a specific timeframe, i.e. how many users from UK accessed TV model E432 between 6AM and 10AM on Tuesdays. For this you would utilise both an eVar and prop variable. channel Lets look at a basic example using a sitemap diagram to explain this variable. Sitemap diagram(a) A simple sitemap for a small website The variable channel refers to the main site section of a page. So if you have a country selector/portal page your channel will be something like "portal". Usually some props and eVars are used to indicate sub sections depending on the size of the site. channel = "portal" channel = "home" campaign This variable is somewhat ambigious. The obvious assumption is that this variable indicates the campaign to be tracked. Yes and no. It does refer to a campaign but not the actual website campaign. Instead it refers to the marketing campaign ID that is used to drive traffic to your site. So any advertising that is done for your site, will pass their campaign ID with the click through URL to be tracked when your site is reached. If you want to add a campaign name for your website you can do so by prefixing your pageName value with your custom campaign name or abbreviation. Thus your website campaign becomes part of the pageName variable. This is a great example of information I could've used yesterday. Adding support for the advertising campaign requires the ID to be sent to Flash using FlashVars and then tracked at the appropriate time through Actionscript. Knowing this upfront, could solve many headaches and keyboard tantrums. I use globalCampaign to identify the website campaign by adding this to the pageName variable. As mentioned before this is not a defined Omniture variable but a custom key-value pair defined in my tracking XML file. Campaign names for the websites are quite important as clients sometime have one account for all their sites. So this will help distinguish reporting results and could also help with reporting on the bigger picture, i.e. how all the campaign sites are doing globally individually and against each other. products The product ID that should be tracked. This variable can become quite complex. By complex I refer to the syntax. Specifically for something like a shopping basket. There is a specific syntax for building the product, quantity and price selected. You are required to add a semi-colon before each product ID. Also note the variable name is plural and lowercase. The option exists to add an array of items which also has a specific syntax. Omniture should be consulted for this specific syntax as the level required can differ per project. The basic value requires a semi-colon before each product ID. products = ";productA;productB" pageName The most common tracking tag of them all. A unique identifier for each "page". The reason I quote page is because Flash sites blur the lines of pages and more specifically virtual pages. But actually each event or user interaction is tracked as a "page". So you may ask how can we do that? A user dragging something on the stage is not the same as clicking on a navigation item. This is where props, eVars and events come in. Remember those bespoke values mentioned earlier. By setting these values they define the granularity to which you will be able to do reporting, i.e. identifying site and subsection tracking as oppose to specific user interaction. prop 1 - 50 Props are custom values used for requirements dictated by the project and client. This could be anything from site sections to flash player version to country and language codes. These values should be defined, yup you guessed it, up-front. Making them up as you go along is probably not a very good idea. And keeping them the same across campaigns can be very useful for reporting. eVar 1 - 50 Similar to props, eVars is part of commercial metrics. It allows us to cross reference specific events to basic tracking metrics. In Lehman's terms, eVars are usually the same as props as they are used to generate reports from specific defined events. For example, you may want to report on how many users from Spain logged in yesterday, by cross-referencing eVars with events you can get this report. events Specific user events that require knowledge of, are indicative of user experience or meet a requirement for reporting, can be defined as custom events. Login for example could be defined as a custom event. Naming conventions In general it is a good idea to use naming conventions when coding, but it also is a good idea to use naming conventions for the tracking tags that will be used. The standard I use quite often depend on the client as they might have one already in place but they all adhere to the same rules. Once you have decided on one, stick with it, that is afterall the idea of a convention. No exceptions. Overall using lowercase for everything is well accepted within Omniture and makes reporting easier to use. Also, the character used as delimiter in most cases is a colon (:). Some companies use the pipe (|) character. It doesn't really matter what it is, as long as you decide on one and stick with it. ActionSource component The component can be downloaded from the Omniture online platform SiteCatalyst Administration Console Manager. After installation you need to drag a copy from the library to your SWF (AS2) and give it an instance name. Before you can make any tracking requests you need to load the external SWF (OmnitureActionSource.swf) that is supplied when you download the code from the console. In AS3 there is a SWC for inclusion into your projects. The SWC can be added as a linked library in your project. TrackingManager I mentioned before that automation is very useful while building your site. If we add the tracking event in a Cairngorm based project, we can reduce the workload required for tracking by a significant amount. To abstract the solution a bit futher, all calls should be made to a centralised location, this location should then execute the request to Omniture. I use Cairngorm as an example as it illustrates this solution best. An event is fired whenever you need to track an item and the TrackingCommand executes the request via some utility class. But this rule will count towards any framework. I have been using an XML based solution in conjunction with a utility class called TrackingManager for a while now. There are a few pre-conditions for using this class: Tracking XML file should be fully loaded For AS2: The external file OmnitureActionSource.swf mut be loaded For AS3: ActionSource.swc must be added to your classpath The way it works The xml file contain key-value pairs and rulesets (settings). The rulesets are used to specify rules to use when populating specific key-value pairs. When creating the track item in the XML we specify a collection of the key-value pairs we want to be included when this item is tracked. Each of these variables specified can, but doesn't have to have a rule associated with it. If no rule is specified the value specified in track item will be used. If a rule is specified the value will be populated using the ruleset. Throughout the XML the keys are identified by the id attribute and the value is the CDATA text. The TrackingManager breakdown of execution is as follows: init() is called passing loaded tracking XML TrackingManager instantiates internal object and adds all key-value pairs with type static (This static type should not be confused with the class modifier private static, this refers to the key-value pairs) trackOmniture() is called key-value pair collection is stored to internal object seperately if doTrack is omitted or set to true the ActionSource track method is called passing the generated strings as per the rulesets defined in the XML Before we look at the code lets look at the make-up of the XML file. For simplicity sake we will look at the setup with tracking one item. AS2 TrackingManager.getInstance().init( trackingXML, _level0 ); TrackingManager.trackOmniture("home"); Result trace: -------------- TRACK ITEM: ts:home -------------- channel = ts:home prop2 = ts:home:home prop3 = ts:home:home eVar2 = home pageName = ts:home:home events = event1,event3 trackOmniture() - type: page, pageName: home, delay: undefined AS3 TrackingManager.getInstance().init( trackingXML, this ); TrackingManager.trackOmniture("home"); Result trace: -------------- TRACK ITEM: ts:home:home -------------- channel = ts:home prop2 = ts:home:home prop3 = ts:home:home eVar2 = home pageName = ts:home:home events = event1,event3 sendOmnitureTrack() - type: page, pageName: home, delay: 0 Settings The account settings are defined when the code is generated. This detail will be included in the code download by the SiteCatalyst Administration Console Manager. The individual settings node is what the TrackingManager class use to generate the string value set to each variable. The value for channel will be made up of globalCampaign + channel as per the settings for the channel variable. Static vs dynamic settings The TrackingManager distinguishes between static and dynamic values. What this means is that static values specified in the XML will never be deleted or reset. This is useful if you have a variable that will always be the same value throughout your site like globalCampaign. Internal state The TrackingManager retains internal state, i.e. it stores all the values set from XML in a static object. The object groups the values to "static" or "dynamic". As mentioned before static values will never be reset even if you call the resetData() method is invoked. Resetting internal data Object The data object will retain its values unless you explicitely call resetData() or pass in true when calling the trackOmniture() method. For more info see the API doc info below. Overriding specific variables manually You can override specific variables manually by submitting the initObject parameter when calling the trackOmniture() method. This object will be in the format obj = {key:value};. You can download the tracking manager with example XML here: Get the TrackingManager class Download AS2: TrackingManager Download AS3: TrackingManager

Everything [Embed]

Thu, 10 Apr 2008 16:03 +0100

This article should provide you with all the ammo you need when using the Embed meta tag. It is a vital part of AS3 and should greatly enhance the structure of your projects. Hopefully this article will show the benefits of structuring your projects in this way. The designer developer workflow is a constant sorrow for may folks but it doesn’t have to be. Like any relationship communication is key but so is planning. More often than not these days, design continues even though development may have started. The mish-mash of the creative and tech workflow is an interesting one, one we can’t seem to get right nor move away from. Flash in particular seem to be challenging as its roots are firmly anchored in creative and design. But we can try. We can however try to minimise any problems in this workflow by using best practices and structured code. By using the Embed tag we can do exactly this. It is equivalent to the FLA library, but an invisible library if you will. Even though it is practically the same as the Flash IDE library, it has way more advantages and possibilities. I will assume you are using either Eclipse and FDT or Flex Builder as your chosen development environment. Flash CS3 The Flash authoring will throw “TypeError: Error #1007: Instantiation attempted on a non-constructor.” because it doesn’t support the Embed meta tag, it ignores it actually. You can only use the Embed tag in Flex or compiling with the Flex SDK. If you think about it there is no reason why you would need to do this. But there are rumuors that this will be included in future versions of the Flash IDE. Understanding embed source paths Using the Embed meta tag within a class assumes the root to be the class location, i.e. the class that is embedding the file’s location. Embed requires you to point to the external file using a relative path. Logical but a bit strange as you might end up with something like “../../../../../../assets/library.swf” to embed a symbol in a specific class that is nested deep in a specific package. As this is relative, you can always just start with a “/” to set the start of your find-where-the-location-of-asset-is-mission. This way we end up with “/../assets/library.swf”. Starting with the “/” first refers to the root of your class packages. In the example below this would be “com”. So to get to the “assets” folder we have to move one level up. This rule is ever present and works for all types of Embed. The Embed directive in Flex works in exactly the same way. Images Below is a very straight forward example of embedding an image and adding it to the stage. package com.wezside.core { import flash.display.Sprite; /** * @author Wesley.Swanepoel */ public class Main extends Sprite { [ Embed(source="/../assets/Mona_Lisa.jpg") ] private var Square:Class; public function Main() { addChild( new Square() ); } } } Fonts There are a few things to take note of when embedding fonts: source - The location of the file, types *.ttf, *.ttc and *.otf are supported fontWeight - Should the font be a specific weight, i.e. bold then that should be declared or the compiler will throw an error fontFamily - The name given to the font to be used in the TextFormat fontName - Same as fontFamily unicodeRange - Set the range of characters to include in your SWF Below is an example: ... [ Embed( source="/../assets/fonts/American Typewriter.ttf", fontFamily="AmericanT", mimeType="application/x-font-truetype" ) ] private var AmericanT:String; ... var format:TextFormat = new TextFormat(); format.font = "Helvetica"; ... It is not necessary to embed the entire font. You can specify which glyphs to add for each font. Just add the unicodeRange=’U+0020-U+002F,U+0030-U+0039,U+003A-U+0040’ of the glyphs you need. If you don’t know what to include see the ranges on the official Unicode site. MimeType declarations With any embed you can explicitly specify the mimeType of the file being added. With fonts we will specify mimeType=”application/x-font” to give the compiler a heads up on what format will be included. You do not have to include the mimeType as the compiler will attempt to do so. By far the most exciting mimeType supported is “application/octet-stream”. This type specifically is a binary file. Therefore we have access to the bytes using ByteArray. What is this useful for you may ask? you will now be able to define your own file and format and include that into your SWF. If we know enough about what is under hood of a specific file, we could write our own parser or for some files encoder/decoder. For example, if you knew the byte structure of a Word Doc, you can embed the file using this mimeType and then access the Bytes through ByteArray, parse this file with your custom parser, encode it using the JPEGEncoding class to convert it to an image and get sued by Microsoft for millions. But seriously, some file types (*.wav for example) use a standard and the details are available online. All you need is a bit of brain muscle and spare time and there you go. AssetManager So you might think that this is really cool stuff and it is. But it can become a bit of a nightmare to maintain. Allow me to explain. Imagine you have quite a few classes that all embed some assets you want to use throughout your project. You might find yourself in a situation very similar to finding MovieClips in the old days on nested timelines. A better solution would be to have all your embedded assets in one location as you would with a library in the Flash IDE. So why make this any different? The AssetManager has popped up a few times over the net and it makes absolute sense. One class, one location that has all the embed options. I have this as a singleton but it doesn’t have to be. The only requirement for use of the AssetManager is to instantiate it. We want the compiler to know that it must include this class when compiling the SWF. AssetManager.as package com.wezside.lib { import flash.utils.describeType; import flash.utils.getDefinitionByName; /** * @author Wesley.Swanepoel * @version .001 */ public class AssetManager { [ Embed( source="/../assets/fonts/American Typewriter.ttf", fontName="AmericanT", mimeType="application/x-font-truetype" ) ] public static const FONT_AMERICA_T:String; [ Embed( source="/../assets/library.swf", symbol="Square") ]; private var Square:Class; [ Embed (source="/../assets/Mona_Lisa.jpg") ] private var MonaLisa:Class; private static var instance:AssetManager; public static function getInstance():AssetManager { if (instance == null) instance = new AssetManager(); return instance; } public function getAssetByName( name:String ):* { var className:String = describeType( this ).@name.toXMLString(); var fullname:String = className + "_" + name; var ref:Object = getDefinitionByName( fullname ); return new ref(); } } } Main.as package com.wezside.core { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFormat; import com.wezside.lib.AssetManager; /** * @author Wesley.Swanepoel */ public class Main extends Sprite { public function Main() { // Initialise the AssetManager to let compiler include our assets in the compiled SWF var am:AssetManager = AssetManager.getInstance(); // Create the TextFormat to specify our font var format:TextFormat = new TextFormat(); format.font = "AmericanT"; format.size = 26; // Create TextField var field:TextField = new TextField(); field.text = "AssetManager"; field.embedFonts = true; field.width = 200; field.setTextFormat(format); // Add assets to stage addChild( am.getAssetByName("MonaLisa") ); addChild( field ); } } } Compiler Errors These errors are common when using the Embed meta tag. Even though my guess is there are multiple problems that use the same error message, these are some common messages you may find along the way. Error: Embed is only supported on classes and member variables Remove the ";" after the [Embed] tag. Error: unable to resolve '/../../assets/fonts/American Typewriter.ttf' for transcoding Your path to the asset is wrong. Error: exception during transcoding: Font for alias 'Helvetica' with plain weight and style was not found The font you are trying to embed has a weight other than what you have defined. If you have omitted the "font-weight" value then default "normal" will be used. Resources http://www.mimetype.org/ http://en.wikipedia.org/wiki/MIME http://www.ericfeminella.com/blog/2008/02/18/embedding-assets-with-applicationoctet-stream/ http://www.actionscript.org/forums/showthread.php3?t=134499 http://www.bit-101.com/blog/?p=883 http://www.betriebsraum.de/blog/2007/06/22/runtime-font-loading-with-as3-flash-cs3-not-flex/

Zanussi Self Cleaning

Thu, 31 Jan 2008 18:11 +0100

A self cleaning oven. Some animations and illustrations combined to narrate the use of having a oven that cleans itself. The illustration was done in-house at Dare and also the animation. My role was to put it all together and make sure it is localised for a few European markets.

Complete starter guide for FDT Flash Dev

Mon, 14 Jan 2008 22:59 +0100

[Update: This is an update on my post Complete starter guide for developing Flash projects using Eclipse/FDT. I've also decided to merge the follow up post Complete intermediate guide for developing Flash projects using Eclipse + FDT into this one updated post] This post is aimed at beginner Actionscripters. It covers all the basics of setting up Eclipse and FDT environment to develop some kick-ass websites in a more structured Object Orientated approach. From managing workspaces to connecting with repositories, this document should be all-inclusive for any new Actionscripter who wants to start doing some serious Flash projects. If I missed something please feel free to comment or send it to me so I can update this post. Eclipse IDE explained in a nutshell The Eclipse IDE consist of several graphical user interfaces. Each of these interfaces has a specific purpose. You can decide which interfaces to switch on and off depending on your development needs. The major break down is as follows: Workspace The location where all your files will be created. Eclipse has a project explorer which is essentially your project folders & files. You can have multiple workspaces on your machine and switch between them as and when required. Perspective This is basically all the interfaces you are looking at when launching Eclipse. As mentioned above you can personalise what you want to see. A perspective is a collection of graphical user interfaces, i.e. views. Similar to workspaces you can have multiple perspectives. The default is Java as Eclipse is primarily a Java development tool. Written in Java for Java. After installing FDT, Eclipse should open up the Flash perspective by default. This is extremely powerful as I can setup different workspaces for different programming/scripting languages. I can keep all my Java projects together and similarly all my HTML and Flash projects respectively. Each workspace has its default perspective associated to it. I could have different language projects in the same Workspace and just switch the perspective as required. Later in this post I explain how I like to setup my workspace. Views Views are the graphical user interfaces that make up each perspective. Views as with perspectives can be customised to the developer's needs. Each workspace remembers what views are in use and therefore you can have specific views for say your Java Perspective and also specific views for Flash. In Java I might not need the SWFViewer View so I can disable it. Similarly in the Flash Perspective I might not require the Junit View. Getting started We use the following tools for our Actionscript projects: Download the latest Eclipse from http://www.eclipse.org/downloads/ » Install the latest FDT using the update site is: http://fdt.powerflasher.com/update Webtools for Eclipse http://download.eclipse.org/webtools/updates/ (Optional) Webtools is only required if you want to be able to edit HTML, JavaScript, XML and CSS with code hinting and colour syntaxing. I do not cover this plug-in however after this post you should be well capable of installing this plug-in without any problems. Installing plug-ins for Eclipse There are two ways to install a plug-in for Eclipse. The first would be to copy the features and plug-ins folder manually from your plug-in download archive to the root of the installed eclipse location. The second would be to use the update site should one exist for the plug-in you want to install. An update site doesn't always exist as it depends on the author of the plug-in to create one. Basically as oppose to downloading the archive file for the plug-in you download it through the Eclipse interface wizard and Eclipse installs it in the correct location. It is obviously much better to manage your plug-ins this way. I would advise you use this method always if available. It is entirely possible for you to remove the wrong files and that could have a severe impact on Eclipse itself. Although that is quite a serious warning it is not the end of the world. The good news is that as long as your workspace is in tact, i.e. no files are corrupt etc.; you should be able to install a new version of Eclipse without any problems and set the workspace to point to your old one. Creating a new Update site Follow these easy steps to add a new update site: Launch Eclipse Help » Software Updates » Find and Install Select Search for new features to install and click Next Click on New Remote Site Give the site a descriptive name for easy future reference Enter the URL to the site and hit OK Check the newly added site and click on the Finish button. Usually Update Site Mirrors dialogs will popup if a mirror site is available. Here you can select a mirror location closer to home or check the Automatically select mirrors checkbox and let Eclipse do it for you. Hit OK Due to this you might want to install a plug-in that actually requires (dependant on) another plug-in and an error will appear in the dialog's white space as soon as you select the feature that you want to install. As far as I know this is common with older style plug-ins because creating plug-ins for Eclipse 3x has changed quite a bit since Eclipse 2x. However this does come down to the way the plug-in was created and there isn't much you can do without tracking down this dependency in order for your plug-in to be installed. Click on Select Required if you are installing a plug-in while searching for Eclipse project updates. By default you should have 2 remote sites after installing Eclipse called Europa Projects updates or Europa Discovery Site. These sites contain updates for the Eclipse IDE and can also help solve some of these dependency issues. If you get an error while trying to install a feature click on Cancel and do the update process again except this time include the above mentioned update sites. If this doesn't work try unchecking the Show the latest version of a feature only checkbox. Unchecking this will show all the versions available within this feature to show and there might be a previous version you can use. Important note: For the purpose of this post you shouldn't get this dependency error. By installing the Classic Eclipse Europa IDE release and FDT3 you will have everything you need. The above solution is for future additions you might want to make to your development environment. Managing Eclipse plug-ins After Eclipse 3.3 there were some changes in the management of plug-ins. The steps below describes the latest version when this post was updated. Launch Eclipse Help » Install New Software Click on "Available Software Sites" Select a feature and click on "Edit" to see more details Eclipse workspace It is a good idea to have different workspaces for different clients. By doing this you reduce the amount of projects you have in one workspace as it can fill up quite quickly. Darren Schall has a post specifically about understanding the power of Eclipse workspaces. Having loads of projects in one single workspace can slow Eclipse down as FDT builds each project on start-up to give you any errors in your class files. Alternatively if this is not how you like to work, then simply make use of "Working Sets". Working Sets are a quick and easy way to filter what is shown in your Project Explorer. There are a few ways of creating Working Sets but the easiest is to click on the little arrow with tool tip "View Menu" and choose "Select Working Set". With this window one can select, add or edit a new Working Set. Use the arrow button to select or deselect a working set. It is important to know however that a working set will not filter quick search of resources using the Ctrl + Shift + R shortcut. Working Sets doesn't "close" a project it simply hides it. If you want to avoid resources appearing when using this shortcut from other projects in the workspace then you have to either close the other project or using different workspaces. Eclipse/FDT memory issue It's not really an issue but rather an adjustment that has to be made for FDT to fully function. When you download Eclipse the default memory allocation for Eclipse is 256Mb. For use with FDT we will have to change this to 512Mb or higher. Don't worry it's very straight forward: Browse to your Eclipse installation directory Open the file "eclipse.ini" with a text editor and change the line -Xmx512m Save it and close. That's it. Now Eclipse will use 512Mb memory and FDT will be able to fully function. Restart Eclipse and Voila! Creating a new FDT project Creating a flash project is a three part process. Choose a name for you project. Select the linked library you want to use. After successful creation assign a source folder where your classes will reside. Make sure you are in the Flash perspective. To do this go to Window » Open perspectives » Other Select Flash and hit OK Go to File » New Flash Project Enter the Project name Leave the location as default unless you want to change it Select which version of Actionscript you want to use Select the version of the Flex SDK you want to use. FDT comes pre-installed with the latest stable SDK version so it's merely a choice of whether you want Flex, AIR or pure AS support. Click Next Add or Edit the src folder. The src folder is where all you classes will be kept. It is treated differently by FDT than other folders as it will be recursed and indexed to give you that magical code hinting you can't live without. You can set the default output folder if you wish. This is the destination folder of where the Flash SWF file will be compiled to Click Finish What are the differences between a Linked Library and an SWC? There is no fundamental difference. An SWC is a collection of classes, i.e. a compiled set of classes. A linked library is reference to a collection of classes that is not compiled but can also be an SWC. An SWC can be setup to be a linked library. This was used in MX days to create components and to distribute a set of classes. Now it is an acceptable format for distributing components and a collection of classes. Managing SDK's or Core Libraries This is quite a hard one for lots of people as the UI doesn't seem to be very user friendly. But I will try and explain how the set up works. It is worth mentioning that FDT 4 has some great improvements on this front. So this is more for people like me who are still using FDT3. When FDT is installed, the core SDK is included. This will be unzipped the first time you run Eclipse with FDT installed. The core libraries are managed in a two part process. The set up of a "Path Variable" and the set up of the Core Library itself. The Path Variable is a variable that points to the destination of the Flex SDK. A Core Library will reference this Path Variable. To see what I'm talking about do the following: Windows » Preferences Expand FDT Click on Core Libraries Install Flex 4 SDK If we were to install a new Core Library like Flex 4, we would need to do the following (FDT 3): Do the above steps Then click on Add Select "Flex 3 SDK for FP10" from the dropdown Enter a Name for your Core Library Click "Browse" for a Path Variable. Now we haven't created a Flex 4 Path Variable yet, so we will do it in this step. Click "New" in the new pop-up Enter a Name for the new Path Variable Browse to the location of the extracted Flex 4 SDK Click OK Click OK again Click OK again Now we have successfully added a new Core Library however we haven't associated it with any projects. Change existing Project Core Library To change the library an existing project uses do the following: Right Click on the Project Name in the Project Explorer Click on Flash Parser Choose a new SDK to use Click OK Automatic building and cleaning projects Upon launching Eclipse after successfully installing and creating FDT projects, FDT should automatically build the workspace. This means it checking the codes for errors and warnings and displaying them. This also happens when you save a file. You can clean a project and then re-build it, i.e. refresh FDT if you need to force FDT to re-evaluate your classes. Sometimes the last state of errors are displayed if you open a file and only updates when you alter and save the file. This doesn't happen too often but sometimes can. Building projects automatically can be by simply deselecting the Build Automatically option in the menu under Projects. Similarly cleaning a project can be done here as well. Code Templates Tired of typing all those getters and setters? Maybe you use Singeltons often or have a custom Log class. There is no reason to do al that typing. FDT has some built-in templates but here is how you add your own custom ones. Adding a getter & setter template for AS3 Window » Preferences FDT » Editor » Templates New Name: gettter (This will be what you type in to activate this template with Ctrl+SPACE so keep it short and easy to remember) Type: AS3 Description: getter & setter: Create getter & setter methods Pattern: public function get ${var}():${type} { return _${var}; } public function set ${var}( value:${type} ):void { _${var} = value; } Problems I got 99 problems... Well, there's no need for 99 as you can switch them off. Apart from the strict compiler setting, you can actually set what type of errors you want FDT to make visible. Now you may wonder why you would want to do this but in some cases you might have an AS2 and AS3 project running in the same Workspace, and for AS2 you want to allow untyped member access as that is what you are used to. Seeing all these errors while you project still compiles is a bit annoying. Go ahead. Turn them off. Windows » Preferences » Problems Local history The local history has definitely saved a few asses in its day. Eclipse keeps an internal history of all modifications made to your files. Obviously this is not as persistent as a version control repository. Nonetheless having this always available is an incredibly strong feature for any development environment. To set the preferences for the local history: Windows » Preferences General » Workspace » Local history Compare files Probably the coolest feature of Eclipse. Comparing two files with the differences highlighted. The Compare With view allows you to compare files from the local history, with a specific revision in the version control repository or with another file in your project. Nothing compares. Right Click on file Select Compare With local history or from the latest revision from version control Search A great advantage of coding with FDT is that all your classes are external, which means all files are text files. Search functionality is ever present in all Actionscript IDE's, although I have yet to see any IDE match Eclipse. A search feature is vital with maintenance, especially if you don't know the project. Apart from the normal Find and replace within a single file, Eclipse has an advanced search that will make maintenance and updating a breeze. Searching for a single file: With the text editor focussed, i.e. the cursor is active Hit Ctrl + SHIFT + R Type in the filename you want To search within a file: Select the folder you want to search within, no selection the search will happen through the entire workspace Ctrl + H With the first tab selected, "File Search" Enter the search string in Containing Text In the scope group select if you want the entire Workspace search or set the current folder as the starting point for recursion by selecting Selected resources. Enclosing projects will do a recursive search within the current project. TODO or not TODO This feature is not only useful for solo Actionscripters but also for teams to manage what still needs to be done on a project. By using comments and typing the words "TODO:", the comment is added to a pool of comments which can be seen by the TODO view. This is especially useful for all those mental notes a developer has. Imagine writing thoughts down but for everyone to see. Anyone who opens the project can see what is on the TODO list. This very often helps with maintenance on tight deadline projects where shortcuts or amends take precedence of a solid foundation solution. By making a note of these hacks or quick fixes using TODO it will add to the transparency of your code which is imperative when working in a greater than one environment. Example: //TODO: Optimise the method to load data from XML To see all the TODO's in a project: Window » Show View » Other General Tasks Bookmarks Very similar to TODO's, bookmarks are exactly what the name suggests. A great way to make notes of where important functionality resides within classes. Larger projects can be very daunting but breaking things down and making notes without touching the class itself is priceless. That would be the advantage over TODO's. It doesn't mean you need to alter anything in the code. As an observer you can make notes about code snippets that are of importance to you. To see all bookmarks: Window » Show View » Other General Bookmarks Version control In Eclipse all version control software work in the same way. Everything happens from the Team view and is mostly accessed through the context menu. Basics: How to use SVN and Eclipse Below are a few basic steps for setting up Subversion with Eclipse Retrieving files Install the Subclipse plug-in using the update site http://subclipse.tigris.org/update_1.2.x Restart Eclipse If the SVN Repository view is not open then open it like so Window » Show view » Other SVN SVN Repository Basics: Checkout Project from SVN into Workspace Checking out a project is very simple. The SVN Repository View introduces a nice way for managing your SVN repos: Right click on the view and select New » Repository location Type in the url to the repository location e.g. http://papervision3d.googlecode.com/svn/ Right click on the new repository and select Checkout Select Check out as a project in the workspace Click Next if you want to checkout to another workspace otherwise you can hit Finish Adding a project to a repository A few simple steps and you have added an existing project to Subversion: Right click on the project in Flash Explorer Team » Share Project... » SVN » Next » Use project name as folder name » Finish » OK Basics: How to use the VSS Eclipse plug-in [Update: Not sure if anyone still uses this Eclipse plug-in but I left this legacy set up in just in case] Download the latest plug-in files from sourceforge http://sourceforge.net/projects/vssplugin/ » Extract this into your root eclipse installation folder Restart Eclipse if open Create a new Flash Project (requires that FDT is installed) Right click on the project and select Team » Share project Select VSS Configuration Wizard Enter username Enter password VSS Directory: Browse to folder location of srcsafe.ini Relative mountpoint: Browse to the project you want to link to and click ok Click on Finish Right click on the project and "get latest version". This will copy all the latest files from the repository to your machine. Right click on project Team » Update State. This will update the checkout status so you can see if someone else is working on specific files Ctrl + Enter run setup [Update: I'm leaving this legacy set up as part of this updated post as I'm sure there might be some people who still use AS2] So a complaint I hear from a lot of developers are that FDT and Eclipse is great however you need to constantly jump between the Eclipse IDE and the Flash IDE. For an AS2 project this is absolutely true but there are some tweaks you can add to your Eclipse environment to improve this workflow. For AS3 projects you could use FDT to run your code without an FLA at all. You can create FLA libraries or use external assets and embed/load them at runtime and compile your project without requiring any FLA at all. After this little tutorial you should be able to run your current application using the shortcut Ctrl+Enter as you would run "Test Movie" in the Flash IDE. This obviously only works once you have it setup. Window » Preferences » Run/Debug Launching » in the Launch Operation group select Always launch the previously launched application Window » Preferences » Keys Scroll down to Run Last Launched Focus the Binding textfield, i.e. click into it Hit backspace then Ctrl + Enter Click OK Run » Open Run Dialog Right click FDT Flash IDE Project browse to project that you want to run Browse to the FLA Operation » Select TestMovie » Delete ASO Files before Flash execution (Optional) Apply » Run After you have done this Ctrl+Enter will be a shortcut for the last run FDT Flash IDE configuration. So you can set up all you projects and run the one you are currently working on for the first time. There after you can use Ctrl + Enter. Very useful indeed. Hopefully this post will help some people to get started with Eclipse and FDT. I know it took me along time to understand everything and I think a starter document like this would have been very handy. Well, sharing is caring. How cheesy is that?

ITV: Star in soap

Wed, 02 Jan 2008 09:28 +0100

Before elf me became such a huge success I guess there were a few of these upload your face kinda projects floating about. This was one of them for new ITV shows EchoBeach and Moving Wallpaper. One show was about making a soap (Moving Wallpaper), a behind the scenes if you will and the other show (Echo Beach) was the actual soap. Both shows were aired on different times. It was all about the character Jonothan Pope, a charismatic producer for the soap Echo Beach. Dare came up with an idea to upload your photo and get Jonothan Pope to give you feedback on if you have what it takes to become a soap star. All in all not as difficult as I initially thought. The major pain is file upload in Flash which they seem to have finally rectified in Flash Player 10. Unfortunately as this show isn't on air any more this photo upload functionality doesn't exist any more either.

Zanussi Frost Fighter

Thu, 06 Dec 2007 13:51 +0100

For Zanussi we produced a few campaign sites and one of them was Frost Fighter. A game to showcase Zanussi’s innovative fridge which you never have to defrost. This was a very cool site to work on as it involved my first Flash game. Simple yet fun. Localised for a few European countries, the Zanussi infamous 3 is where I started to get to grips with managing fonts within Flash. I think the illustrations helped this project as the fighter character has some spectacular moves. The kinda moves you need against your fridge spitting snowballs your way. What a way to showcase a fridge eh? Have a go at it by clicking on the view demo link below.

Flash tracking: What you should know

Tue, 04 Dec 2007 08:54 +0100

It is important to know what kind of tracking exists as you might just be in a tight spot one day being asked to implement tracking of some sorts. While this isn’t rocket science - going back and forth between your company, the tracking vendor and the client can quickly snowball hours into days. It is important to know what kind of tracking exists as you might just be in a tight spot one day being asked to implement tracking of some sorts. While this isn’t rocket science - going back and forth between your company, the tracking vendor and the client can quickly snowball hours into days. There exist quite a few tracking vendors if you will, that all offer services to track websites in general. Due to the increase in Flash websites they had to adjust their services to include Flash. More and more complete flash sites are appearing to the dismay of a lot of people, especially usability experts. While some of their arguments has some merit I think it is probably best to leave this one alone for this post. A recent post in NY Times suggests that maybe tracking and web user statistics has gone too far. Maybe we have breached that inevitable privacy can of worms that everyone is dancing around. But for the time being as a Flash developer I do think it is important to know what tracking exist and how to implement them. Obviously there exist a lot of different tracking vendors out there. I will cover the most obvious ones that I personally have worked with. So lets get crackin’. How does Flash tracking work? The way it works is relatively simple. In most of the type of tracking some Javascript code sits in the HTML container page. Flash then invokes this method and passes some parameters to the method. The Javascript method then organise these values into key-value pairs (for e.g. country=GB&language=EN). The method then makes a server request for what is usually a very small blank image and attaches these values to it using a GET. Some vendors may request some other file but the idea stays the same. Key-value pairs are added to the request and sent to the server. The server doesn’t make any response back to the calling command cause these responses wouldn’t be handled by the client (Flash). With any flash tracking you will require some code from the vendor to incorporate into the HTML container and then called from events within your flash website. Usually this is Javascript method but some do have their own components. GoogleAnalytics I only recently listed some of my own sites on GoogleAnalytics and am very impressed with the ease of use when comes to reporting. It’s an amazing free service and you should use it. Sign-up for a google account if you haven’t already done so You can use your Google account to sign in at http://www.google.com/analytics/ Once sign in follow the steps to add a new website to your account You will be given some code to copy into your page. Place this code in your flash container page before the tag The “/folder/file” values you enter are the page and sections that will show in the reporting. The default with HTML sites are the folder and filenames. But this can be anything you want it to be. Especially in Flash as you might want to track an event or interaction from the user, e.g. AS2 home.onRelease = function():Void { var trackingStr:String = "javascript:urchinTracker('WEZSIDE | HOME');"; if (ExternalInterface.available) { ExternalInterface.call( trackingStr ); } else { getURL( trackingStr ); } } AS3 ... btn.addEventListener( MouseEvent.CLICK, onClick ); ... private function onClick( e:Event ):void { var trackingStr:String = "javascript:urchinTracker('WEZSIDE | HOME');"; navigateToURL( trackingStr ); } Omniture Omniture is used by some of the larger corporates as it delivers some in-depth reporting. The implementation of Omniture doesn’t differ that much. Flash tracking with Omniture can be done in two ways. The first would be a javascript function call as with GoogleAnalytics and Webtrends, and the second is a Flash component called ActionSource. At the time of writing this article the v3 ActionSource component has not been completed and so AS3 sites will have to use the javascript implementation. First implementation: include the .js file received from Omniture in your container HTML page call the javascript method as per the example below with the correct parameters passed AS2 home.onRelease = function():Void { var trackingStr:String = "javascript: var s=s_gi('your_report_suite_here'); " + s.prop1='some Traffic value'; " + eVar4='some Commerce value'; " + s.events='event3'; " + s.linkTrackVars='prop1,eVar4,events'; " + s.linkTrackEvents='event3'; " + void(s.tl(true,'o', 'my custom link'));"; ExternalInterface.available ? ExternalInterface.call( trackingStr ) : getURL( trackingStr ); } AS3 ... btn.addEventListener( MouseEvent.CLICK, onClick ); ... private function onClick( e:Event ):void { var trackingStr:String = "javascript: var s=s_gi('your_report_suite_here'); " + "s.prop1='some Traffic value';" + "s.eVar4='some Commerce value'; s.events='event3';" + "s.linkTrackVars='prop1,eVar4,events'; s.linkTrackEvents='event3'; " + "void(s.tl(true,'o', 'my custom link'));" navigateToURL( trackingStr ); } Second implementation Install the Omniture ActionSource component. This will be supplied by Omniture or downloaded from the Omniture reporting suite once logged in. Copy the OmnitureActionSource.swf generated from the reporting suite to your deploy location Load the OmnitureActionSource.swf through Actionscript Drag the component onto the Stage and give it an instance name Below is an example of a method I use to call the component’s track methods with the correct account details associated. Note that the values are example values. AS2 ... /** * Omniture tracking method. This method requires an instance of the ActionSource * component to be on the Stage and the OmnitureActionSource.swf to be fully loaded. * @param asSource The Omniture component that is on the _root stage level * @param pageId Page ID as defined by you * @param pageURL Page URL as defined by you * @param type Type which refer to tracking a virtual page or a link * @return Nothing */ public static function omnitureTrack(aSource:MovieClip, pageId:String, pageUrl:String, type:String):Void { aSource.account = "wezsideblogspot"; aSource.pageName = pageId; aSource.pageURL = pageUrl; aSource.charSet = "ISO-8859-1"; aSource.currencyCode = "GBP"; aSource.trackClickMap = true; aSource.movieID = ""; aSource.visitorNamespace = "wezside"; aSource.dc = 031; aSource.trackingServer = "wezside.img.com"; aSource.trackingServerSecure = "wezside.com"; type == "page" ? aSource.track() : aSource.trackLink(); } Webtrends Webtrends works exactly like GoogleAnalytics and Omniture’s first implementation. The only difference would be the javascript call. AS2 home.onRelease = function():Void { var trackingStr:String = "javascript:dcsMultiTrack('WEZSIDE', 'HOME');"; ExternalInterface.available ? ExternalInterface.call( trackingStr ) : getURL( trackingStr ); } AS3 ... btn.addEventListener( MouseEvent.CLICK, onClick ); ... private function onClick( e:Event ):void { var trackingStr:String = "javascript:dcsMultiTrack('WEZSIDE', 'HOME');"; navigateToURL( trackingStr ); } Testing In order for tracking to work the function you are calling must exist within the page holding the Flash file. Download Charles Web Debugging Proxy Get Charles Install and look for the img request calls Some people prefer Fiddler although you need to install Download Fiddler Open IE and go to Tools » Fiddler Open your page in IE Trigger the event that will call the tracking code If you are on a PC or a Mac using Firefox do the following: Install Live HTTP Headers add-on: https://addons.mozilla.org/en-US/firefox/addon/3829 Open your page in Firefox and go to Tools » Live HTTP headers Trigger the event that will call the tracking code You will now be looking for the image request your tracking code should make. This will tell us that the code is working. If the code is working it will make a succsesful request HTTP 200. The HTTP header will show some request to a server with the domain name to the tracking vendor you are using, for e.g. http://stats.webstrends.live. When you click on this request you should see one long string of letters, i.e. querystring. Among these wil be the info you added to the function call in Flash. Make sure these are the values you added and voila! For an easy view of the querystring values in Fiddler, click on the SessionInspector tab -> Webforms and you should see the key-value pairs in a more readable format.

LynxBlow

Fri, 30 Nov 2007 21:25 +0100

My first project working full time for Dare in London as an Actionscripter. And what a first project this was. Scooping a few awards, this was by far the most challenging site I’ve worked on. Combining the complexity of loading around 30 videos and the use of a microphone, it meant a lot of head scratching and um and ah. From how it should work, an IA perspective to the actual result. As I recall time was on our side as this was more of an innovation piece trying to build on the success of Axe Feather built prior to my arrival at Dare. LynxBlow was in my opinion not as successful as I think it was a little ahead of its time. However it was a great idea and well placed for the product it was promoting. From an Actionscript perspective this was where I started teaching myself Object Orientated Programming. Having dabbled with previous projects at the BBC and there after, I knew the foundation was there from my University days. The best way to learn is on a project, just make sure you pick your battles wisely.

UPS Direct

Sun, 08 Jul 2007 20:35 +0100

A small HTML site for a UPS company in South Africa. This was a quick design and build with not much to it.

Crew-Barrow Consulting

Wed, 06 Jun 2007 11:47 +0100

Crew-Barrow doesn’t exist any more but I used the project to sharpen my CSS skills. It sports a rollover navigation all done in CSS. Sure it’s nothing fancy but I was spending most of my time coding Actionscript so it was a good learning curve.

Loading external images in AS3

Fri, 13 Apr 2007 16:31 +0100

I thought I would post this as all the tutorials I found about loading external images in AS3 were either not working or very confusing. So here is a quick way of loading external images. For the sake of this example I will show only the methods needed in a class. First, we need to create a new Loader object. We then need to add an event listener to check when the image has loaded completely and add it to the display list. So lets start with creating the new object and adding the event. public function loadImage():void { var loader:Loader = new Loader; loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); loader.load(new URLRequest("assets/sample.jpg")); } Next we need to create a method to deal with the event that will be dispatched when the image has completely loaded. This method takes one parameter which is an object of the Event class. It contains the data that we want, in order to display this image on the stage. Remember drawing items on the stage is a 2 part process in AS3, create and add to stage. private function imageLoaded(event:Event):void { var image:Bitmap = new Bitmap(event.target.content.bitmapData); addChild(image); } I hope this helps some of you out there who have been in the process of migrating from AS2 to AS3, or just been playing around. Remember to import the necessary classes to deal with the event, loader and bitmap objects we used. Selah.

Zanussi Large Capacity

Wed, 14 Mar 2007 13:25 +0100

The Large Capacity Fridge campaign site was just some interactive fun in showcasing the enormity of this fridge. Built with AS2 this was pretty straight forward. Localised for a few European markets this project contributed to my understanding of localisation in Flash.

Iomega

Wed, 21 Jun 2006 15:39 +0100

Working for HMX Media in Soho we produced this little microsite for IOmega’s external drives in the UK. HMX are renowned for their amazing 3D renditions of products with clients like SonyEricsson, Sony, Addidas and IOmega to name but a few. The main challenge was to find a load strategy as there were quite a lot of video to load. Digital Video was something I was accustomed to and the adoption of Flash video was in full swing. This was a good experience working with Flash video that still comes in handy today. Built with Flash MX 2004.

Sony AR Series

Fri, 26 May 2006 16:16 +0100

This product showcase was for the Sony AR Series laptop specifically for the US market. Built for HMX Media, the 3D was produced in-house by HMX. We built an architecture to allow for other products to use the same showcase. Driven with XML the main challenges were the navigation of video pieces.

Sony UX Micro Computer

Mon, 22 May 2006 11:52 +0100

Way before the days of tablets, Sony was already moving down that route with the innovative Micro Computer. Looks very bulky compared to 5 years later doesn’t it? Well this was one of the first “Micro Computers”. The showcase was built using the same architecture for the Sony AR Series laptop. This allowed for much quicker delivery than building two bespoke showcases.

Udell Group

Fri, 10 Mar 2006 17:18 +0100

Two weeks after arriving in the UK, not knowing what to expect I take my first contract job with Deep llp. The result, a nice little microsite for a company called The Udell Group. A big learning curve as the PHP guy working there wasn’t overly impressed with my approach. But he pointed me in the direction of some great OOP references to get me into building more maintainable, scalable projects. Not to shabby for a PHP dev.

Tanzanite Foundation

Tue, 19 Jul 2005 21:40 +0100

A hybrid Flash and HTML site for the Tanzanite Foundation. This clean design emphasizes the stone quite well and was quite a hit in its day. Remarkable this website is still live although the Flash content has been replaced with HTML. A good call as the main content in Flash just doesn’t make sense to me. I inherited the HTML and had to expand the site to accommodate the HTML changes and Flash content area. I am surprised to see the site is still active with the same design. Either a “timeless” design I guess or the foundation just hasn’t felt the need to update it. Having said that the content has changed. All in all I really like this one.

Charles Miller Portfolio

Thu, 09 Sep 2004 15:20 +0100

Charles and I used to work together at VWV and he asked me to do a little Flash invite for his own work. Charles loves Manson and I’m sure Manson will love Charles when he sees this slick (for the time at least) Flash animation. Yes okay fine it ain’t much but seriously at the time it was mighty impressive. This was a basic timeline animation using Flash MX and Charles was a very relaxed client which made for a quick turnaround.