HTML5 – Don’t talk trash about my Flash

3 Comments 11 May 2010

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! Every 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.


Posted in HTML5

drawRoundRect in AS2

Leave a comment 17 March 2010

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! ;)


Posted in ActionScript

Simple JavaScript Physics

11 Comments 5 March 2010

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.


Posted in HTML5, JavaScript, Physics

HTML5 Monkey

1 Comment 27 February 2010

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.


Posted in HTML5, JavaScript

Using Value Objects in Flash

5 Comments 18 February 2010

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:

<videos>
  <video id="video-1">
    <title>Video 1 header</title>
    <src>resources/media/video1.flv</src>
    <autoPlay>true</autoPlay>
    <width>300</width>
    <height>200</height>
  </video>
  <video id="video-2">
    <title>Video 2 header</title>
    <src>resources/media/video2.flv</src>
    <autoPlay>false</autoPlay>
    <width>300</width>
    <height>200</height>
  </video>
  <video id="video-3">
    <title>Video 3 header</title>
    <src>resources/media/video3.flv</src>
    <autoPlay>true</autoPlay>
    <width>400</width>
    <height>300</height>
  </video>
</videos>

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.


Posted in ActionScript, Tip
← Older posts Newer posts →