Flash Monkey

Flash Monkey is going Down Under

FlashMonkey — Tue, 18 May 2010 10:05:33 +0000

Throw a couple of shrimps on the barbie cos the Flash Monkey is moving Down Under! I came to London the day after I graduated and got straight into work as a Flash Developer at Research Now. Since then I have moved to TMW, where I’ve continued to learn and grow as a Developer. However, I’ve always had an urge to do a bit of travelling, see more of the world. A few of my uni mates did it straight after graduation, but I decided it was probably best (for me) to get established and learn my trade first, so instead of travelling straight the way I moved to the Big Smoke and have been working hard for the past 4 years.

However, the travelling bug never left me and I have decided the time is right to do it now, so a few weeks ago I handed in my notice, booked an around the world ticket and tomorrow (19th May) I will be flying to Mexico - arriba!!

The plan is to spend around 5 months in Central/South America, working my way from Mexico to Argentina where I have a flight booked from Buenos Aires to Sydney on 18th October. I have already arranged a 12 month working Visa for Australia, so when I get there I will be looking for some web development work. So if you are based in Sydney and your reading this get in touch as I would love to hear from people to get an idea of what good digital agencies there are in the city and who I should be sending my CV to. Any help/advice would be greatly appreciated!

HTML5 - Don’t talk trash about my Flash

FlashMonkey — Tue, 11 May 2010 16:04:14 +0000

It’s been ages since my last post, and I’m slightly irritated it was about AS2 so thought I’d have to stick something up, anything, just as long as it wasn’t AS2! Ever few months we have an Innovations Week at TMW which involves a week of lunch time presentations. On Monday I presented about HTML5, focusing mainly on the video and canvas tags. The presentation was a brief introduction into what HTML5 is, aimed mainly at Client Service and Project Managers (so not very techy).

Most of the info was taking from John Herrmann’s article on Gizmodo (some of it word for word!) and I also found Richard Leggett’s article very useful/interesting.

I won’t go into too much more detail as you can read the above articles if your interested in the subject, but I thought it was worth sticking my presentation up which can be viewed here. The second to last slide contains a few other useful links about HTML5.

drawRoundRect in AS2

FlashMonkey — Wed, 17 Mar 2010 17:13:26 +0000

Today I have been doing some retro AS2 coding (don’t ask why…) and needed to programmatically draw a rounded rectangle (or squirkle as my friend Si likes to call them). In AS3 this is a breeze as you have the drawRoundRect method of the Graphics Class. AS2 doesn’t have that, so I wrote* one:

class com.flashmonkey.display.RoundRect 

{

  static public function draw(mc:MovieClip, col:Number, alpha:Number, x:Number, y:Number, w:Number, h:Number, radius:Number)

  {

    col = (col == undefined) ? 0xFF00FF : col;

    alpha = (alpha == undefined) ? 100 : alpha;

    x = (x == undefined) ? 0 : x;

    y = (y == undefined) ? 0 : y;

    w = (w == undefined) ? 100 : w;

    h = (h == undefined) ? 100 : h;

    radius = (radius == undefined) ? 10 : radius;

    var circ:Number = 0.707107;

    var off:Number = 0.6;

    mc.beginFill(col, alpha);

    mc.moveTo(x+0, y+radius);

    mc.lineTo(x+0, y+h-radius);

    mc.curveTo(x+0, y+(h-radius)+radius*(1-off), x+0+(1-circ)*radius, y+h-(1-circ)*radius);

    mc.curveTo(x+(0+radius)-radius*(1-off), y+h, x+radius, y+h);

    mc.lineTo(x+w-radius, y+h);

    mc.curveTo(x+(w-radius)+radius*(1-off), y+h,x+w-(1-circ)*radius, y+h-(1-circ)*radius);

    mc.curveTo(x+w,y+(h-radius)+radius*(1-off), x+w, y+h-radius);

    mc.lineTo(x+w, y+0+radius);

    mc.curveTo(x+w, y+radius-radius*(1-off), x+w-(1-circ)*radius, y+0+(1-circ)*radius);

    mc.curveTo(x+(w-radius)+radius*(1-off), y+0, x+w-radius, y+0);

    mc.lineTo(x+radius, y+0);

    mc.curveTo(x+radius-radius*(1-off), y+0,x+(1-circ)*radius, y+(1-circ)*radius);

    mc.curveTo(x+0, y+radius-radius*(1-off), x+0, y+radius);

  }

}

So you can use it (if your extremely unfortunate and have to code in AS2) like this:

import com.flashmonkey.display.RoundRect;

RoundRect.draw(_root);

// or like this

RoundRect.draw(_root.createEmptyMovieClip("mc", _root.getNextHighestDepth()), 0x00FFFF, 50, 75, 75, 175, 100, 6);

* I actually didn’t write all the lineTo curveTo stuff, I stole it from somewhere a few years ago but can’t remember where from to credit the original developer - if it was you, email me and I will credit you!

Simple JavaScript Physics

FlashMonkey — Fri, 05 Mar 2010 17:21:34 +0000

Throw Physics

It’s been a fairly quiet Friday afternoon so I thought I’d play around with some more JavaScript. This time I’ve created some simple throw physics… you can click and throw the balls around the browser window. Each ball has a different bounce/weight depending on it’s size.

I thought it would be really nice that if you shook the browser window the balls went flying all over the screen, which I sort of implemented, although it seems to take a little while to register that the window has moved so it doesn’t really work as I imagined. Try it though, as they do move a bit. Also, it’s quite cool when you re-size the window.

Click here to view the throw physics example.

Wave Physics

This one is based on the brilliant Yugo Nakamura’s Flash wave effect. I also need to thank Paul Lewis for posting his AS2 wave example, from which I stole some of the physics code. Roll your cursor over the middle line to create a wave effect.

Click here to view the wave example.

HTML5 Monkey

FlashMonkey — Sat, 27 Feb 2010 00:27:58 +0000

HTML5 Monkey… doesn’t quite have the same ring to it, but I thought I’d have a little play with HTML5 anyway. So far 2010 seems to be the year where people Flash bash. “It’s not accessibly, it isn’t great at SEO, HTML5 will wipe it out” - it’s all being said. I personally think there are some exciting new developments happening in HTML5 and JavaScript, but I very much doubt it’s the end of Flash. Flash will either innovate or die, and when you look at how far it’s come in recent years (typed arrays, the sound spectrum amongst other stuff) I reckon Adobe will innovate Flash and it will live on for some years to come. Grant Skinner summed it up brilliantly: “you shouldn’t get so emotional about technology, I don’t care if it’s Mac vs. PC, XBox vs. PS3, or Flash vs. HTML 5, I say use whatever works for you.”

Anyway, with that in mind and a bit of general curiosity I thought I’d have a play around with some JavaScript today. The plan was to re-write a couple of the physics stuff I’ve been doing lately using HTML5 canvas and the JavaScript drawing API. I actually really enjoyed playing around with it, and found it very simple to pick up - although my code may not be written in the best way (I’m by no means a JavaScript Developer).

It felt a lot like AS2 (well, that’s because it is) and writing AS3 is so much more fun (I guess cos I’m so familiar with Flash). However, on a positive note the apps run a lot faster in JavaScript.

With Away3D writing a library, and Google working on OpenGL, I think we’ll see some really cool stuff in HTML5 this year, and I’m really looking forward to learning a bit more about it, although my main focus will definitely remain on Flash (for the time being anyway).

Check out the two apps I’ve ported, below is a link to both the JS version and the Flash version so you can compare the two. If you don’t see anything in your browser for the JavaScript examples you will need to either upgrade you browser or grab a copy of Google Chrome.

ColorWall

I’m pretty bored of ColorWall but it had to be the first thing I re-wrote as I knew it would give me the best indication of performance differences.

> HTML5 JavaScript Canvas version
> Original AS3 Flash version

WobbleWall

It was getting late and I couldn’t be bother to make these exactly the same so this is a slight adaptation of WobbleWall. For the JS version I purposefully changed the effect slightly (it isn’t a bug).

> HTML5 JavaScript Canvas version
> Original AS3 Flash version

View the page source for all the code. If your a Flash Developer thinking of Playing around with canvas below are some useful/inspiring links:

> HTML5 Canvas Cheat Sheet
> How to Draw with HTML 5 Canvas
> P01’s Mars Canvas - check out the source code for this
> Some cool HTML5 stuff from Dr Doob

Any links, help, advise is very much appreciated so please post a comment.

Using Value Objects in Flash

FlashMonkey — Thu, 18 Feb 2010 17:54:00 +0000

From time to time I get emails from people asking for help or advice and last week I was discussing with Gabe about how VOs might help him organize his code. I think a large amount of the visits to my blog come from Flash newbies and designers so this post is perhaps more for them as most developers will already know about VOs and will probably be using them all the time.

What is a VO?

A Value Object (VO) is as simple as it sounds, an object that stores values or data. An example of a VO is something as simple as this:

public class VideoVO

{

  public var id:String;

  public var src:String;

  public var autoPlay:Boolean;

  public var width:Number;

  public var height:Number;

}

Where would you use a VO?

The place I use them most is when loading external XML into Flash for populating content. This could be page content, or something simple like a video gallery. Sticking with the gallery idea, below is an example of using VOs.

Imagine I had a simple gallery that was populated with XML:

>

   id="video-1">

    >Video 1 header>

    >resources/media/video1.flv>

    >true>

    >300>

    >200>

  >

   id="video-2">

    >Video 2 header>

    >resources/media/video2.flv>

    >false>

    >300>

    >200>

  >

   id="video-3">

    >Video 3 header>

    >resources/media/video3.flv>

    >true>

    >400>

    >300>

  >

>

We could parse the data into a Vector of VideoVOs like the example below:

function parseVideoXML(xml:XML):void

{

  var i:int;

  var l:int = xml.video.length();

  var videos:Vector.<VideoVO> = new Vector.<VideoVO>(l, true);

  for(i; i < l; ++i)

  {

    videos[i] = new VideoVO();

    videos[i].id = xml.video[i].@id;

    videos[i].src = xml.video[i].src;

    videos[i].autoPlay = (xml.video[i].autoPlay == "true");

    videos[i].width = Number(xml.video[i].width);

    videos[i].height = Number(xml.video[i].height);

  }

}

Now in your gallery you can just pass a VideoVO and all your data is organized so you don’t need to pass the XML object around, and remember the structure for referencing elements.

So why bother using VOs?

There are a couple of reasons that VOs are useful. Firstly, they help you keep your code organised. It’s a clear way of separating the data from your XML files and other Developers will find it easier to pick up your code. For example, say you have a massive XML file that defines the structure of a microsite, and one small part of that site is a video gallery. Someone working on the gallery doesn’t need to have any knowledge of the XML structure, you can just tell them to write code that expects a VideoVO.

Secondly it is quicker to update things. Say I am using the video data from my XML in several places throughout my code, and the XML structure changes. I would have to go through and edit every place within my project that references the XML. However, if I parse my XML once when it’s loaded, and store the data in VOs, I only have to change path referencing in one place.

Thirdly, if you have a massive XML, it will be quicker to use VOs rather than doing lookups in the XML every time you need data. OK not much quicker, in fact you will never notice the difference, but I believe it’s always worth making your code as optimised as possible.

Another good way of using VOs in Flash

Another place where you could use VOs is with a tweening engine that requires an object to be passed to it, for example TweenMax. So for example, using the same video gallery idea, you might want to have a transition to display the video view. You could create a simple TweenVO like this:

public class TweenVO

{

  public var rotationY:Number;

  public var x:Number;

  public var scaleX:Number;

}

And then just pass the VO to your tweening engine like this:

var tweenVO:TweenVO = new TweenVO();

tweenVO.rotationY = 30;

tweenVO.x = 20;

tweenVO.scaleX = .6;

TweenMax.from(video, 1, tweenVO);

If you know any other benefits, or perhaps negatives, for using VOs please make a comment. In fact any comments are always really appreciated.

ColorSnake

FlashMonkey — Wed, 10 Feb 2010 13:47:56 +0000

Like ColorWall but sort of a snake, it probably makes more sense after you’ve seen it so click here to view it. Yesterday I had to create an effect for a site I’m currently working on and once again turned to ColorWall for inspiration. I actually ended up using something else but while messing around with the ColorWall code I created this snake like effect.

I only made ColorWall as an experiment to figure out a way of re-creating Yugo Nakamura’s wonderwall. However, I’ve since used the code for a couple of other projects/experiments, including a page flip (which I still need to post about). It’s great how something so simple can inspire/help with so many other projects.

Setting the Stage vanishing point in as3

FlashMonkey — Thu, 21 Jan 2010 13:35:24 +0000

I was playing around with Flash Player 10 3D capabilities yesterday and thought it was worth posting how to set the Stage vanishing point (as it’s not that well documented). The vanishing point is set to the top left corner of the stage by default. The below code set’s it to the center of the stage:

root.transform.perspectiveProjection.projectionCenter = new Point(stage.stageWidth * .5, stage.stageHeight * .5);

Season Speakings

FlashMonkey — Wed, 16 Dec 2009 00:18:19 +0000

I’ll keep this short and sweet cos I’m so tired from lack of sleep trying to get this thing live! This is the second xmas project I worked on this year. It was for my good friend Federico’s company Cocomino, and I built the site with Tavis. I did the front end Flash, Tavis did the backend / Facebook connect stuff and Fed did the designs.

I’m really proud of this one and I really hope it goes viral to get Cocomino some good marketing. The site was really fun to build and Tavis did a great job with the text-to-speech stuff. I’ll probably elaborate on the project more in the future (especially about the headaches we suffer from Facebook connect) but for now go and check it out at www.seasonspeakings.com. Create your own season speakings and send them to all your friends (and me)!

If you’ve read the blog recently you’ll know I’ve gone a bit particle crazy with the wobble and color walls. I kept it up with this project if you check out the snow in the window and don’t miss the cigar smoke with the main character shown above.

Big thanks to Tavis for never giving up and Fed for keeping us going (and fantastic designs). Also thanks to Sonya for being so patient with all the late nights. Merry Christmas everyone! I’m off to India for 3 weeks over xmas so the blog will be quiet for a month but in the new year I’ll post about how I made a page flip with particles for the Gordon’s xmas site.

Gordon’s Christmas

FlashMonkey — Wed, 09 Dec 2009 13:41:44 +0000

This is the first of two Christmas sites I’ve worked on this year. This site was created for TMW, the digital agency I currently work at, with the end client being Gordon’s Gin. The nice thing about the project is that it’s an integrated online and offline campaign, so there is a nice little book that accompanies the site. A lot of people were involved in the project and everyone did a great job to produce the site. My role was to create the main site container, and the page flip functionality. I was pretty please with the page flip as I wrote it from scratch using particles rather than a 3D engine - I’ll write a blog post about how I created it in the New Year.

Check out the site here.

Be sure to check out the ‘Drop that phrase’ page as I made the fish scared of the mouse and they swim away from it (it’s the little things!)

Special mention goes to Immo Blease who created the page SWFs, Mark Brunt who created the intro 3D animation and Ivan Cho, the Project Manager who kept everything going smoothly. (There’s a load of other people who did a great job, the Art Director, the Illustrator etc etc but the list could go on forever and I’ll still only miss someone out!)