New AS3 grid implementation
Posted on | January 13, 2010 | No Comments
As i’ve learned to be a better developer, i’ve become a lot more organised with my code. I can see now that proper comments, naming, indentation and proper packages can really help the development process – even for complete beginners. In that respect, i’ve cleaned up and streamlined most of my code into a form of framework. Not as abstract, elegant or fun as something like Joshua Davis’ Hype but useful in speeding up my prototyping.
For the sake of comparison, here’s a reworked version of my grid classes.
package com.f90.grid { public class Points { public static function getPoints(row:Number, col:Number, w:Number, h:Number, sw:Number = 0, sh:Number = 0):Array { var _points :Array = []; var d :Number = 0; for (var j:Number=0; j<row; j++) { for (var i:Number = 0; i<col; i++) { _points.push(new GridPoint(sw+(i*w), sh+(j*h), d)); d++; } } return _points } } }
From that you can see i’ve adopted a more traditional package structure for my files. All of my often used, generic class file are stored in the ‘com.f-90′ package. This makes it easy to move from project to project without having to reinvent the wheel each time with a handy, version controlled bunch of files.
The function of the classes is still much the same – create an Array of point objects that have some knowledge about their place in the Array. The main difference is the implementation. I changed the main function to ‘public static’ with the array being the funciton return type. This, in my view, is much more flexible than having an object simply storing the grid data, when you can get a more useful local variable from the returned Array. My GridPoint class remains similar, except it now extends the Flash.geom.Point class to inherit the useful methods for comparing distance between points.
package com.f90.grid { import flash.geom.Point; public class GridPoint extends Point { private var _ref:Number; public function GridPoint(xt:Number, yt:Number, d:Number) { super(xt, yt); _ref = d; } public function get ref():Number { return _ref; } } }
So, not much different overall than my previous implementations. Just better organisation, and better decision making.
Oh my gosh
Posted on | January 4, 2010 | No Comments
It’s been a long time. I’ll be honest, i’d completely forgotten about this blog.
Looking through the code, a lot of it is quite naive, messy and a bit unhelpful. And as much as I like K2, I really feel it’s time to update the style a touch. So, looking forward, i’ll be updating far more regularly than once every 2 years with some (hopefully) decent, helpful Flash AS3 tips, still aimed at designers.
I’ll start with a real, decent revamp of the SWFAddress implementation and cleaner code for some of the examples in the coming few days. I’ll also make it slightly less limited and more conversational, with more general industry comments.
Typewriter class AS3
Posted on | April 4, 2008 | No Comments
As promised, a much better, AS3 solution of my Typewriter class, along with an optimised and actually useful randomiser. I’ll chuck up an attractive example later on today. 
The FLA is set up currently for the randomimser (which counts down through character codes), but just comment in the typeout lines for the typewriter.
AS2 String manipulation typewriter/randomiser
Posted on | March 25, 2008 | 2 Comments
AS2, for a little change. This was something that came up recently for a banner campaign, still in the dark ages of Flash player 7 & 8. The implementation of the text Randomiser (crazyWriter)is slightly limited and ‘hack-ish’, as rather than being based on character codes for a proper solution, i’ve just chucked a limited alphabet into the classes. I’ll do a proper version for AS3 within the next few days.
The typewriter class has a couple of methods for writing on and off – to stop it hiding the copy automatically, simple remove the call to ‘hide’ that’s sitting within ’showCopy’.
Object Orientation and SWFAddress – AS3
Posted on | March 5, 2008 | 3 Comments
SWFAddress is fanatsic. A glorious, beautiful addition to flash that everyone who’s making any kind of site should use. Without fail. It should really be law.
Luckily, it’s also really easy to implement, and is as flexible as you’ll ever need it to be.
There are two keys things to remember. Firstly, build your naviagtion with SWFAdress in mind, from the ground up. It’s much harder to retrospectively implement than it is to start out the correct way. Secondly, all your navigation has to be string based. Now, that’s not strictly true, but for it to be truly useful, I prefer to think in those terms.
You have to remember that for it to work properly, all of your navigation commands must first go through the same function, which is only monitered by SWFAddress. So, no shortcuts, no hacks. Anytime you need to navigate somewhere, you MUST use SWFAddress.setValue(“string”) and then let your event listener handle the response. Otherwise, you’ll only cause yourself problems with integration. Other dangers include the unpredictability of the broswer navigation buttons. All of your nice transitions and ActionScript to open up your content *must* get cancelled when a user does anything to change the current ‘page’ they are viewing, and there’s no way you can control it. Because the back/forward buttons are ever present within the browser, you can’t simply ‘disable’ navigation until your nice, incredibly irritating 10 second long transition finishes, you have to be prepared for destructive users.
With all of that in mind, have a look through my attached files. I think the sample files that come with the SWFAdrress zip are good to a point, but they don’t really deal with a proper, Object Oriented approach to site navigation. Hopefully, the comments within my files will be explanation enough, but post here and i’ll answer any questions. It’s fairly heavy duty for someone not used to OOP, so be warned. I’ve also made no attempt whatsoever to provide a realistic ‘content’ situation, or make it in any way pretty.
Papervision 3D cube wall – AS3
Posted on | March 4, 2008 | 1 Comment
A practical application of my ‘useful’ grid classes.
The code itself is extremely basic, and nothing at all special, just a starting point into displaying stuff onscreen in the exceptionally cool Papervision API. You’ll need the latest Great White branch from the Papervision subversion archive.
DisplacementMap filter with Perlin Noise AS3
Posted on | February 28, 2008 | No Comments
This is a massivley simplified and basic use of the perlin noise combined with the DisplacementMap filter. Move your mouse over the image to see it move around. It’s not particulararly useful in the form it’s in, but it’s a nice starting block for someone who doesn’t know where to start.
You’ll see how simple it is in reality to get mind-bending effects (i’ve ramped up the numbers to make it more…dramatic) with very few lines of code. It’s sort of disappointing you don’t see more use of it as a technique, though I am myself struggling to find applications beyond the obvious ‘rain drop’ kind of effect.
Try messing about the the different values for ‘offset’ and ‘more’ within the morph function for varying effects…
Array based perpetual scrolling navigation AS3
Posted on | February 27, 2008 | 4 Comments
This is a pretty specific case study, but one that comes up more often than you’d think. What i’m talking about is a list of items, thumbnails for instance, that are all displayed staked either horizontally or vertically. The idea is to get a seamless loop going, so that when you get to one end, the last item becomes the first and vice-versa. People have all kinds of dirty hacks for doing this exact thing, but it’ll only get you into a mess if you ever need to update, or your list changes in length. Now, i’m the first to admit that these bulletproof, fluid, designed to grow sites very rarely do grow, but in this case it could easily happen. When you LEAST EXPECT IT.
The ideal solution, in my opinion, is to harness the super-powers of array manipulation to push things around for you. That way, you can shrink or grow your list of items without any worry of it breaking or falling down. I loosely based this example on something that the superb Dave Stewart wrote for Mazda back in 2004. What i’ve prepared is a simple case – a vertical-scrolling navigation bar that holds more options than can fit in the space. I’ve chosen to separate the code as if it were for a live project, into neat little classes and sub classes. Download the source and have a play, i’ll do a more in depth write up later.
Creating an OO Grid in AS3
Posted on | February 26, 2008 | 1 Comment
Creating a grid is one of the things that comes up most when people ask me questions. It’s a pretty useful tool, especaily for making portfolios etc. I’m going to dive in at the deep end here and show you some classes.First, I have two classes, Points, and GridPoint. Gridpoint is essentially exactly the same as the Point() class, except without some of the redundant features we don’t need. The Points class returns us an Array full of ‘GridPoint’ objects via the static function ‘createPoints’, that can hold any data we need them too. In the example, I have it set up to hold the x, y and number values within the array.I use a static function because it’s more useful for the work i’ve been doing – you could easily adapt the class so that the Points class kept the reference to your points array. As it is, I’ve been using it for ‘one hit’ array generation which i’ve stored elsewhere, so this approach seemed best.
The FLA then uses the drawing API to draw a simple grid using the values from that Array. Obviously, it’s a very simple example that’s almost entirely useless like it is, but don’t complain. Have you no imagination!
Random wave curves with the drawing API AS3
Posted on | February 26, 2008 | No Comments
Now, I think the drawing API is more useful than ever in AS3 development. It’s easier to use than ever, with the simple drawRect and drawRoundRect methods taking away some of the long winded class library I built up in AS2. This is a bit of a special case, though, and stolen straight from my portfolio site. It might be interesting to some people to see the logic behind it. It IS processor intensive though. I tried using lots of other methods (Displacement maps with perlin noise, etc.) but they’re all much of a muchness in terms of the performance hit.Essentially, the class loops through an Array of points that are constantly moving on their own little sine wave, and connects the dots with curves. Simple…
It’s just hit me that me curving between points is another question that gets fired my way constantly, so those of you need that can just rip it apart at leisure! And I only need one post.