The big talk lately is Javascript and HTML5, and if your a Flash guy, you’ve probably found yourself having to defend yourself. Let’s face it, HTML5 and Javascript are where they are today because of the huge strides Flash has made over a decade in pushing the limits of interactive design and development. It’s a great compliment to the community when you can do in other programming languages what’s been done over the years in Flash with actionscripting. What attracted me to Flash in the first place was the inovative and creative spirit. If you can do similar things with Javascript, so be it, it’s just another tool in the toolbox.
I’ve worked with Javascript in the past, but always felt the visual experience you can create in Flash surpassed it. Maybe it’s time to revisit that, and see what’s capable. To that end, I’ve started following the current blog posts at Bit101.com on Javascript. Keith Peters is one of the heavyweights in the Flash communities, I have his books, have seen him talk at conferences, so when he starts blogging about Javascript, you listen. For the month of March, Javascript is the topic of conversation. If you want to follow along, the posts begin here. I’m going to do my best to follow along, but I definitely don’t have the blogging stamina to post about it every day.
I decided to focused in on a simple example, creating a circle. On Day 2 and Day 3, Keith expands on the wireframes objects he initially sets up by adding strokes and line weights. Nothing drastic, a good start. For my example, I focussed my efforts on controlling this minor experience. 3 rings rotating with varying degress of line weights and segments. You can see the end result here.
The addCircle method basically takes an x, y, z positions, the circle’s radius, and the number of segments. The main thing I noticed was how it was rendering these three circles when I started adding weight to the circles. The first circle was a solid color, the default line width, and 10 segments. Once I added, a line width of 5 and 10, I started to see a streak or some artifact that shoots out at the top and bottom of the lines. Event when I crank up the line segments to 1000, that little notch appears. Of course, by ratcheting the numer of lines up, the performance takes a bit of a hit. Better quality versus browser performance rears its head. My variation of the javascript of the circles can be viewed here.
Keith isn’t the first in the Flash community to be exploring javascript, but I’m glad he is. If you want a really good example of Flash gurus experimenting with the potential of Javascript and HTML5, take a look at Grant Skinner’s tower defense game http://www.pirateslovedaisies.com/, it’s pretty impressive. Or even better, poke around the Javascript library he’s developing EaselJS, which is currently in alpha testing.
Keith Peters is speaking at a couple conferences coming up, geekybynature in NY, March 31st and April 1st, and then again June 9th-12th in NY at Flash and the City.