The flash team recently went along to the Adobe Creative Suite 5 launch party to learn about some of the new features we can look forward to in Flash Player 10.1.

One of the common moans users have about Flash Player is the affect it has upon their computer’s processors which results in their laptop battery being drained. Flash Player is based upon a frame rate, and the frame rate determines how many times code is executed per second. Imagine if you have your web browser open with 10 tabs of the same Flash movie running. Even though you can only see one tab, all 10 Flash movies would be running at say 31fps, subsequently draining your laptop battery. Now with Flash Player 10.1 the player automatically detects whether a Flash movie is hidden in a tab and automatically reduces its frame rate to 2fps.

When working with just English it is easy to overlook how different languages display text information. For instance Japanese text is read vertically, while Arabic text is read from right to left. Previously this would require a clever code, however the text engine in Flash Player 10.1 has been vastly improved, adding the ability to change the direction and orientation of text.

Recent releases of Firefox, Google Chrome and Internet Explorer added ‘private browsing mode’, which when activated, enables the user to browse the Internet knowing that any data about sites and pages they have visited will not be saved by their web browser. Flash Player 10.1 now automatically checks and adjusts to the web browser’s ‘private browsing mode’, so any Local Shared Objects which can store information about a user’s visits in Flash sites will not be remembered when private browsing is turned off.

Finally, have you ever been watching a piece of full screen video when after a couple of minutes your screensaver appears? Flash Player 10.1 now has the ability to disable your screensaver whilst your video is playing or buffering. Great stuff.


private function displayListSnapper(container:DisplayObjectContainer, round:Boolean, debug:Boolean, indent:String = ""):void
{
var child:DisplayObject;
for (var i:uint=0; i < container.numChildren; i++)
{
child = container.getChildAt(i);

if (container.getChildAt(i) is DisplayObjectContainer)
{
roundDisplayList(DisplayObjectContainer(child), round, debug, indent + "^^^")
}
}
}

Although we’ve not going to start texturing large areas, what we can produce in Flash with Perlin Noise is controlled and sequential randomness. Don’t laugh. The first thing to do is generate a Perlin Noise image with the following line of AS3 code.


var pNoise:BitmapData = new BitmapData( 550, 75);
pNoise.perlinNoise( 100, 80, 9, Math.random()*100, true, true )
addChild(new Bitmap(pNoise));


The above code generates a Perlin Nose image like this.

The next step is to get the pixel colour at 0, 0 on the Perlin Noise image, and convert it into a number. We can slowly move across the Perlin Noise image generating numbers which will form a pattern similar to this 0.62, 0.64, 0.66, 0.7, 0.66, 0.60, 0.58. The numerical pattern changes as the coloured clouds merge into each other, and due to this the pattern is sequential and coloured clouds controls the randomness. Therefore no anomalies are produced.

Below I’ve created a little Flash movie which draws a pixel line based upon the Perlin Noise. I’ve then multiplied this 4 times changing the colour and the result resembles a mountain stage in the Tour De France.

Flash is displayed here

Perlin Noise for controlled and sequential randomness!

The following picture is close to what I intended to achieve, however due to the very high number of particles with the sphere Papervision struggles render it. In this case switching to Flint, and using their 3D particle system would probably be a better idea.

Time to get gritty! The block of code below creates a sphere of Particles. The for loops below increase in specified steps for latitude and longitude, unlike your normal for loop which counts from 0 to whatever in single increments this stepped process enables us to distribute the Particles at an even distance. The sine wave calculation Math.sin(lat*Math.PI/180) is important for placing the particles in a spherical shape. A positive sine wave multiplied by PI divided by 180 creates us a semi-circle, combined with a negative sine wave we get a full circle. With in the two for loops I’ve also added a random if statement so that Papervision doesn’t struggle to render a high number of Particles, but still keeps the shape of a high density particle sphere. It’s also worth noting that I’ve created a class which extends the Particle class in Paperivision called Dot, to which I’m passing the calculated x y z values, these are then stored so that the Particles can be tweened from a random x y z to form a sphere. I’ve done this only for visual reasons!


for (var lat:Number = -90; lat<90; lat+=(360/dens))
{
var radius:Number = Math.cos(lat * Math.PI / 180) * size;
var circumference:Number = (2*Math.PI*radius);
var numberOfDots:Number = Math.floor(dens*circumference)/size;

for (var long:Number = 0; long<360; long+=(360/numberOfDots))
{
if (Math.floor(Math.random()*8) == 1)
{
part = new Dot(Math.cos(long*Math.PI/180)*radius,
Math.sin(lat*Math.PI/180)*size,
Math.sin(long*Math.PI/180)*radius );
this.particleArray.push(part);
this.particleHolder.addParticle(part);
}
}
}

Click below in order to activate the Flash movie.

The following is a no flash image

In end the outcome above is close to what I intended to achieve, however the density of the dots around the latitude axis is exactly the same at the poles as the equator. I've tried to resolve the density problem but without success, mainly due to Papervision struggling to render such a high density of Particles. I'm realistically on the edge of Math skills and perhaps purchasing a 3D Math primer would be a good idea. Anyway this was an interesting experiment which I got very close to getting it right.

A couple of months ago I created a couple of classes to handle xml from Twitter for a potential flash feed thingy. The classes consisted of a model class which creates business objects like tweets and user, making the data easily mangaged/accessible within a project. Using these classes I’ve just added a bit of Papervision, the text is displayed via the Text3D class which is really nice class if your project uses Helvetica and some what devoid if it doesn’t.

Flash is displayed here

Flash is displayed here

Step 1
After setting up a basic Papervision environment with a sphere, the next thing to do is add a particle to the edge of the sphere. Within Papervision its not possible to just create a new Particle, and it add it the scene, instead the Particle must be added to an instantiation of the Particles class, which acts as holding container for a Particle. It is worth noting that thousands of individual Particles can be added to the Particles container and then added to the scene to be rendered.

var material = new ParticleMaterial(0xFF3333, 1);
var particle = new Particle(material, 15);
this.particles = new Particles();
this.particles.x =-294.8020952990483;
this.particles.z = -44.981004334405526;
this.particles.y = 47.67005198611658;
this.particles.addParticle(particle);
this.sphere.addChild(this.particles);


Step 2
In order to map a 2D Sprite to a 3D object we need to calculate the 3D objects relative position in x and y to the screen. Luckily by adding the following line to the previous code block this functionally can be switched on. The method autoCalcScreenCoords is available to any class which extends DisplayObject3D, however user must be careful as extra calculations are made with the potential for a performance drop if used with out.

this.particles.autoCalcScreenCoords = true;


Step 3
The screen x and y are always calculated relative to the size of the viewport being used. I’ve added the following couple of lines of code, within the render EnterFrame only so that the 2D Sprite is always mapped to the 3D object but of course could exist elsewhere.

this.triangle.x = ( this.particles.screen.x ) + (this.viewport.width / 2);
this.triangle.y = ( this.particles.screen.y ) + (this.viewport.height / 2);

And that’s it, pretty basic stuff yet can still be very useful.

Source code

One issue that has risen is the high number of requests made to the Last FM api in order to get the country specific data. The choice was between using the 27 European Unions member states, or the 49 countries which exist geographically within Europe. For the moment I’ve gone with the later, and ignored the 1.4mb of requests needed to complete this, but due to the Last FM api there is no other way of fetching the relevant data. A consequence of this is that Europe looks far more busy and the chart below is more populated.

The above image shows the chart generated after each of the European Countries data has been collated. I was slightly frustrated that the feed from the Last FM api isn’t live or updated on daily basis, instead I believe its updated weekly. I have uploaded the above build of Mapping Music and can be viewed here.

Next
- Individual country charts
- Comparison charts
- Improve the interface
- Look into a chart timeline.

Structure
At the moment I have an xml file which contains a list of countries within the Europe, then for each country I have attributed a latitude and longitude value. This is represented in the image below with a blue dot. It is easy to notice some of the dots are not in the centre of the countries, a by product of Batch Geocoder which is rather good.

In order to collate the information from Last FM various API requests are made relating to each Country. On the edge of the image below, I have quickly displayed each Country and its most popular artist.

Next
- Add an interface of some sort
- Figure out the most popular artist in Europe.