Posts Tagged ‘MewText’

Ken’s Disco

Where’s the noise Ken?

Ken’s Disco
Ken’s Spectacular Magic Disco It’s a sprawling syncopating soundscape on a supersonic scale. Don’t miss this chance to enter Ken’s magic disco dome. Works like a dream on a 2GHz P4 with 512MB. Slower machines might pause or act sluggish, in which case you’re missing out on the purity of the drum diorama.

Tracking the mouse outside Flash

Over the next few days let’s take a look at mousetracking in actionscript. My task was to make a movieclip ‘point’ to the location of the mouse. The primary problem, as scripters will be aware is that as soon as the mouse tracks away from the bounds of the flash movie, the position of the mouse can no longer be tracked. One way to get around this is javascript, which can communicate the position of the mouse to Flash. Another is to use an invisible movieclip which overlays as much of the browser or screen as possible. In anycase, as soon as this issue is addressed there is a bit of maths involved to work out where the movieclip would point. I shall look at this tomorrow.

Tracking the mouse outside Flash part II

Today, let’s look at how to get a movieclip to point towards the mouse from a fixed location. This is a lot easier when tracking in one direction. For example, on my site, the TV is able to track the horizontal (x) coordinates of the mouse separate to the vertical (y) coordinates. All that happens is that one movieclip is nested in the other, both have a timeline, and the actionscript calculates a frame proportional to the position of the mouse for both movieclips respectively.

In a more recent project, it was an flv video that needed to track the mouse. Therefore, both x and y had to be tracked simultaneously. To achieve this it became necessary to establish the orientation, or angle of the mouse pointer in relation to the target. If we were to draw an imaginary triangle we can calculate the angle.

The three points to use are the mouse position, the target’s position and the point where the x value of the mouse hits the y value of the target, forming a right angle triangle. We can then establish the length of the adjacent and opposite sides of this triangle and use trigonometry to calculate the angle. In actionscript, inverse tan can be achieved with Math.atan(opposite/adjacent); After this, a little tinkering around is necessary. The result is in radians and needs to be converted to degrees.

Then the position on the timeline has to be worked out using a formula like this: Math.round((360/number of frames) * result). A final sprig of easing is the final touch for a very cool effect.

Where does Flash go now?

The design / development gap is widening and it’s industry wide. Traditional modes of working in Flash are fast disappearing in favour of a much more technical approach. There are massive benefits to this, not least the ability to build ever more exciting projects. Everything from data manipulation, user interaction, complex visuals and code management benefit from this way of working. However, let’s not forget the original appeal of Flash. When I first played around with Flash, my concept of it was Photoshop with interactions. It was a design tool. The freedom to start designing, and then code and design as I went was fun. What a great combination. It bridged a divide between the realms of creativity and technology, and anyone who wants to learn how to make really exciting user experiences without getting bogged down in theory can learn a lot from it. These days, however, there is less and less room for this type of working. Flash projects these days tend to require a great deal of traditional programming methodology to avoid becoming cumbersome and unprofitable. This makes a lot of sense, but something still niggles.

Why aren’t AS3, Flex and the other advances in Flash not intuitive to designers? Flash used to make this complex stuff easier for visual people, so why are increasingly technical minds required to understand it? What we need is some bright ideas for new ways of working. We want all the advances the technology offers, but we need to be fast enough to think of great concepts for working that maintains that spirit of creativity which Flash offers.


Continuing on from my last post, it seems Adobe are already on the case after my colleague pointed me towards Thermo. Previously I pointed out that Adobe’s latest offerings were leaving designers out in the dark. Perhaps this new project will buck the trend.

Cyriak animations

Cyriak – very funny animator from Brighton. Moo! in particular is a fine piece of work indeed. The fly-by of cow DNA is an image that will not leave me anytime soon.

└ Tags: ,

Spooky 3D

I’m getting used to Papervision3D now, and here’s my first effort,a dystopian Terry Gilliam style machine, The use of transparency helps build the interesting gyroscope effect although next time around I’d use more planes for the screens as mapping them over the sphere makes them look a bit rough. The relative ease with which the 3D object could be controlled with the mouse position was also really encouraging.

Asking a computer to make a value judgment

The value judgment in question is what is the best way to layout a series of similarly sized elements on the screen to get it, in that hazy sense, to look ‘right’?

ie. distributing items on the screen dynamically.

Scenario: I have a random number of items, maybe being pulled in from xml, and I want to place movieclips on the screen in a grid which are placed evenly in columns. Thing is, how many rows and how many columns do I need? Especially as the height and width of my movieclip may not be square.

To distribute mcs of lampposts you’re likely to have more mcs running horizontally than vertically – as opposed to distributing mcs of snakes, which you are more likely to want to stack vertically.

Well the most effective way of doing this I could muster was to get the square root of the total number of items and then multiply that by a suitable aspect ratio.

For example. Let’s say I want to distribute to a square stage 500 x 500.

I have 36 items. So, I get the square root which is 6.

var array = [0,1,2 … , 35];
var sqrt = Math.sqrt(array.length);

Next I’ll add these together to get a total 12.
var total = (sqrt + sqrt);

Now I want to multiply this by an aspect ratio to work out the distribution. If the mcs are twice as wide as they are high, the aspect ratio is 2 and an ideal distribution would be 4 columns and 8 rows. 4×2 = 8 and 8×1 = 8… width and height match.

So my total, 12 needs to be somehow split into 4 and 8.

My approach is to divide 12 by height and length ratios, i.e. 1(h) + 2(w) = 3.
var ratiodiff = (total/(ratio+1));

Then multiply the result (4) by the ratio 2, so 4 * 2 = 8.
var ratiodiff = (total/(ratio+1)) * ratio;

Now I can use this for my number of rows, and the remainder for the number of columns.
var cols = total – ratiodiff;
var rows = total – cols;

Now, instead of 32, if i was using scraggly odd numbers like 73 or 113, I can apply the same maths to get an approximation. For 73, the result for the number of columns is 5.7 which is no use… we need a whole number.

Therefore I’ll use the ceiling of the number, 6. Then I’m assured of having enough space for all the movieclips .. although there’ll be some gaps at the bottom. I’ll be treating my columns like buckets.

var cols = Math.ceil(total – ratiodiff);

Since cols is now an approximation I need to calculate the rows differently to make sure I’ve got all the items from the original array.

var rows = Math.ceil(array/cols);

Wow. That was intense. I’m sure there are other approaches to this problem, and many of them maybe better than this, but this works and it’ll suit me for now.

100 best films

100 best films is an exciting new project I’m working on. This is a concept site and does not really serve any purpose other than to demonstrate some of the possibilities that 3D presents for navigation…  see it here. Its a fully dynamic swarm containing Time magazine’s top 100 films. Check out the ripple effect.

└ Tags: , ,

My interview

I was thoroughly flattered to be asked for an interview at Design! So if you go here you can check out my interview about this site and a whole load of Flash related stuff. design interviews.

└ Tags: , ,