AS3, Flash,

So friday fun time arrived for me last week and I decided to make a full 1-day application and also tute the results, so lets get going. The tutorial will be split into 4 sections just to give you a chance to have a break and wash and eat and stuff. Section 1 looks at defining the project and getting the basics set up.

Stage 1: I have a dream – actually, I don’t, I have about 7 hours and an idea for an application, I don’t even know if the idea is reasonable, so lets do that first, we will map out the idea a bit more and see what we shall see.

The basic idea then is a little system that lets me upload a photo, resize it, maybe play with some filters and even add a caption, the system will then save the new photo and notify the user or send the new photo to the user. Sounds simple enough. What else? We could register users, allow them a gallery of their own before and after images, let them zoom, move, crop, add a background colour. Notifications could be with email, sms, or directly on screen … whoa, there, boy. Lets stop this before we get silly.

First things first, ROI (thats return on investment – a crucial concept. If it’s not there for the client you shouldn’t be working the project), in this case it’s easy, my client (the better half) needs to manipulate lots of photos from her SLR 10mb files into something she can distribute on the web, sometimes she needs minor manipulations too. My other client (me) gets tasked with this many times during a month and this ‘time’ is what we will be saving, the return quality has been identified. Is the return sufficient – easy to find out, lets say 100 photos pa, which need to be collaborated on with input from client A, the time of the manipulation from client B (5 minutes) and then the return of the new info to client A. All in all about 8 mins per photo, which means about 800 minutes per year of client B, me, so anything I knock up in 7 hours is well worth it. Cool

Next, technology, obviously we need flash, the wrapper HTML and JS, PHP GD for the jpeg creation, email functionality, possibly a database if we want users to have an account. OK, all the technology is there and we have as our major constraint the time.

Now lets estimate what we can achieve in the time allowed. We have a delivery to client due at 5pm, that means 6 hours to go through the process. In that time we need to sort out the technology, the design, the UI controls, the back end PHP work, the wrapper, the copy, training copy, test it, deliver it! That’s a lot for 6 hours. Break it down again using our experience of how long these tasks usually take, minus the development.

  • Project Management – this! – 30 mins
  • Architecture of solution – 10 mins
  • Development (Flash) – this is the unknown
  • Design UI – 1 hr
  • Development of wrapper – 15 minutes
  • Back end development (PHP GD) – 1.5 hrs
  • Integration of technologies – 15 mins
  • Make some copy for the app – 30 mins
  • Testing of application with fixes – 30 mins
  • Deployment and training – 5 mins
  • The fuckup factor – 10% – 45 mins

Re-read this list a few times, just to make sure you haven’t forgotten anything. This should now really frighten us because we have 7 hours total and suddenly all the little stuff is 5 hours giving us only 2 hours to develop the solution with flash. Fortunately, there is some wiggle room in our plan, so let’s say 2.5 hours. Never leave out the fuckup factor! Internal developers tend to be very optimistic estimators, they almost never go the other way. On the other hand external developers tend to go the other way – either through experience or because they want to charge more for the work than it’s going to take, this second option I have seen a lot and is usually the case where the project manager has no technical background. Be warned.

In the time alotted we have to code the following main tasks:

  • Upload a graphic from the users hard drive (20)
  • Load the graphic into a holder to be manipulated (10)
  • Provide a UI for the image manipulation (45 + **)
  • Create the correct data as argument to the PHP (15)
  • Access the back-end PHP to convert the new graphic (10)
  • Load the new image in (with option to revert) (10)
  • Either notify with the new graphic, or regress some steps (10)
  • Allow an option to repeat the process (5)

Notice the image manipulation gets a **, this is where we want to add as much extra stuff as possible, so this will be the 2nd evolution (if there is time) of the application after everything else is in place and functional. In reality, we have been doing this in our head and on the doodle pad in front of the client and at this point we need to go back and discuss this, with an emphasis on increasing the time limit to provide extra options on the image manipulation. Let’s assume for the exercise that we cannot change the timescales.

Next, let’s make a quick check on risks – here’s the main list for this project – time / resources / quality / cost – time here is the main objective and so we need to really make sure we are keeping to schedule. If at any point we start to eat into our fuckup factor it’s probably worthwhile communicating this with the client, maybe try to apply some more resource. The resource could get sick, in which case again we need to then think about replacing me and as always talk to the client. Quality is a possible escape hatch as its an internal project so it doesnt have to be sooper pretty. In other words we will leave pretty to last and see how it all goes which means a possible saving on the design allocated time.

So, here we are. We have a defined project with tasks and a timeline, a possible two sprints, the client has ROI, the resources and technology is in place. Let’s sign this baby up and get to work.

TO start with, because we are going to be uploading to the server, lets get that baby sorted out first, I am going to do a fixed screen 900×600 just for ease, so we can get started by creating a directory, the wrapper and the flash file imagemanip1.fla (always always always use numbered incarnations, as many as you want but in reality as soon as you reach a point where you are about to start a new phase, or something works, save and increment, usually once every 30 minutes for me. I also create a new incarnation at the start of every day as well) Also, as a quick tip I always develop using microsoft IE, as it’s the weakest browser, but also becuase theres a really handy option to never cache anything in the settings which means we know we will always be working on the latest version online. Part of the testing phase will be browser compatability as well as flash player compatability – but later on this.

Create a local directory, create a target directory on the server. Create (or copy) an index.html file to work with, create the start flash file imagemanip1.fla and let’s set the publish settings correctly (no HTML req’d) to the flash 9 player and set it to a different swf filename – say swf1.swf – that way we can increment the fla as much as we want for backups but never need to reset the swf name in publish settings as we are developing. Stick a copy of SWFObject in there too, I use version 2.1 as its very stable and also has good compatability with swfaddress. Finally, we need to look at the html file to make sure it’s set up correctly.

In this case as we are working on a fixed size of swf file we will most probably want to centre it on the browser screen. There are tools out there and many sites offering loads of different methods for doing this. I even have a javascript function somewhere which I wrote that dynamically resizes as well as centres (check out the pupu game on the portfolio and look at the index.html source to see this) and re-scales the flash if the screen is smaller than the swf. In this case the client’s screen size is known, so a centre operation will do. My method to centre is very simple, I have the SWFObject which if successful will replace a simple text or image DIV with the swf. This content is surrounded by an HTML table of 3x3x3 cells all of which have a non-blank space in apart from the middle which is our content. The centre cell has an align on it to centre the content and that’s it, that simple.

The development environment I am using is going to be on the CS4 IDE (because I am working in front of the TV on the laptop and not in the batcave) on the timeline and its going to be dirty. At the concept stage of any project we are not worried about clean code, optimisation, extendability, design patterns or OOP principles. The only thing that concerns us is the technology of the solution and getting it to work. For much larger projects we will of course need to think about these things, but not at the start, all of your focus should be on the problems and not the packaging. Another reason for this is that whilst you are hacking away at the prototype solution, patterns will begin to emerge, clearly defined objects and abstract layers and singletons. Another tip is to create all of the prototype functionality on the same SWF, but keep the code seperate to begin with on seperate layers with titles so you know where everything is.

This is a good stopping point for stage 1, allow you the chance to grab some food, set up your environment and when you are ready we can start hacking into part 2.