The book starts of with a fairly in-depth introduction into how to get started with Away3D by teaching you how to check out the library using SVN, get it set up in Flash Builder or Flash CS4 and even covers using FlashDevelop. The book then moves on to explain the basic components of the Away3D engine such as Camera3D, Scene3D & View3D. It even provides you with a basic template class to get you started ASAP.

Once you’ve mastered this step, the next thing covered is basic 3D concepts like 3D positioning, vertices, faces, coordinates and primitive shapes. A basic explanation of all the primitives available in Away3D is given and what properties can be applied to them.

With this mastered the next chapter covers moving 3D objects in 3D space. Coordinates systems are covered including explanations of world, parent and local space (each with code examples) and other functions such as the moveForward/Backward/etc() functions are covered. Then tweening with library’s such as TweenLite is covered. When you have finished this chapter you’ll be completely familiar with all the animation methods the Away3D library offers you to manipulate and animate objects in you scene.

The next topic covered is z-sorting and has an entire chapter dedicated to it. This covers the default method of z-sorting that Away3D uses, an in-depth explanation of how your 3D scene is sorted, how to edit and adjust the sorting of 3D objects and what additional renderers are offered by Away3D.

After this the extensive subject of Materials is covered. All the different types of materials such as WireframeMaterial, AnimatedBitmapMaterial and many others are covered, as well as the Pixel Bender based ones such as the Dot3BitmapMaterialF10. Different kinds of mapping such as texture and environment are covered and also a brief explanation and code sample of how to apply each different material.  A useful table of all the supported colours and what materials support what lighting techniques is provided.

Models & Animation is the next topic covered with an introduction to loading 3D models in to your scene, what different file types are supported and a brief explanation on how to export models in certain 3D packages. An explanation of what types of cameras are available, their differences and effects as well as mouse interactivity.

After this mouse interactivity, 3D text, special effects and performance issues are covered. Each chapter following the same as the ones already mentioned with a good selection of code samples provided and an in-depth explanation. Overall this book gives you everything you need to get started with the Away3D engine, and the good thing is it can be used by people who are already familiar with Away3D but what to learn more. A good understanding of Actionscript 3 is obviously required, but I highly recommend this book the anyone looking to get a good understanding of Away3D.

This book covers everything you need to get started with the 3D engine, including:

• Draw primitive shapes such as cubes, cones, spheres, and planes without having to manually construct them from their basic elements
• Add eye-catching special effects to your Away3D application
• Warp, curve, modify, and bend 3D text to your will
• Focus the Camera and view 3D objects from all angles
• Improve mouse interactivity in your 3D application
• Integrate third-party libraries such as TweenLite and Stardust with Away3D to animate 3D objects and create particle effects
• Use sprites and sprite classes
• Utilize the power of Pixel Bender for image processing
• Export 3D models from 3D modeling applications such as 3ds Max, Blender, MilkShape, and Sketch-Up
• Get practical tips on achieving maximum performance in your 3D applications

The book is mainly aimed at beginners with a good first chapter on 3D basics and terminology.

I will be posting a more in depth review later on, but if anyone else has this book let me know what you think!

Since playing around with Three.js and Javascript in general I was inspired to go ahead and understand how the 3D magic works, so I created my own basic 3D engine. It is by no means comparable to Three.js, it can just draw particles, lines and boxes, so all good fun

I recreated the demo below using my own engine and here is the result.

How it works.
The first thing I did was to create a Canvas based renderer that took a 3D point, converted it to 2D then drew it on to the canvas. This then later expanded to being able to draw lines in 3D and now 3D planes. All of this is demonstrated in the examples below.

Once I had got the basics working, I added camera and scene functionality, although the camera has no actual camera functionality yet, that is coming when I can get my head around this transformation matrix stuff. This is all I’m getting at the moment.

Then I added some basic primitives and 3D objects like Particles and a Cube, with a basic RGB material for starters.

Demos.

Granted, these demos are exciting at all and have been done 1000′s of times before, but I’m pleased that I’ve managed to get this far! There is so much more that I can add to make this a properly fully functional 3D Javascript engine.

At the moment the only available renderer is just using Canvas and I would like to add a WebGL renderer in the future.

If anyone knows of any good articles/resources on 3D math then I’d greatly appreciate a comment with a link!

I went ahead and built a little demo based on my first 2D experiment with canvas.

It’s fairly simple but it gave me a good idea of the Three.js 3D engine and I highly recommend anyone who wants something different to play around with, have a go with it. The code for the demo above is below.

3d.js:

// 3d vars.
var camera;
var scene;
var renderer;

// size
var WIDTH 				= 800;
var HEIGHT 				= 600;

var circleColours 		= [0x0099CC, 0xCCCCCC, 0x9900CC];
var colourIndexToUse 	= 0;
var fadeAmount 			= 0.0000000005;

// used to tell when to draw.
var shouldDraw 			= false;

// mouse coordinates.
var mouseX;
var mouseY;

setInterval( invalidate, 10 );

function init() {
	camera 					= new THREE.Camera( 75, WIDTH / HEIGHT, 1, 10000 );
	scene 					= new THREE.Scene();
	renderer 				= new THREE.CanvasRenderer();
	renderer.setSize( WIDTH, HEIGHT );

	camera.position.z 		= 700;
	document.body.appendChild( renderer.domElement );
}

function invalidate()
{
	if(shouldDraw) draw();
	// fade all the current circles.
	fade();
	// render it all.
	renderer.render( scene, camera );
}

function draw() {
	 for(var i = 0; i < 5; ++i)
	 {
		 var particle 			= new THREE.Particle( new THREE.ParticleCircleMaterial( circleColours[colourIndexToUse], Math.random() ) );
		 particle.position.x 	= i == 0 ? mouseX - 500 : mouseX - 500 * (Math.random() * 1.5);
		 particle.position.y 	= i == 0 ? mouseY - 500 : mouseY - 500 * (Math.random() * 1.5);
		 particle.position.z 	= mouseX * Math.random();
		 particle.scale.x 		= i == 0 ? particle.scale.y = Math.random() * 50 : particle.scale.y = Math.random() * 5;
	     scene.addObject( particle );
	 }
}

/*
 * This fades all the existing objects in the scene.
 */
function fade() {
	for(var i = 0; i < scene.objects.length; ++i)
	{
		var prevAlpha = scene.objects[i].material[0].color.a;
		if(prevAlpha != 0)
		{
			var newMat 						= new THREE.ParticleCircleMaterial( circleColours[colourIndexToUse], prevAlpha - fadeAmount );
			scene.objects[i].material[0] 	= newMat;
		}
		else scene.removeObject(scene.objects[i]);
	}
}

function setMousePosition(x, y)
{
	mouseX 				= x;
	mouseY 				= y;

	camera.position.x 	+= (mouseX - camera.position.x) * .045;
	camera.position.y 	+= (-mouseY - camera.position.y) * .045;
}

jQuery(document).ready(function() {
	$('canvas').mousemove(function(e) { setMousePosition(e.pageX, e.pageY); } );
	$('canvas').mousedown(function(e) { shouldDraw = true;  } );
	$('canvas').mouseup(function(e)   { shouldDraw = false; } );
});

init();

For those looking for more resources in regards to getting started with the whole HTML5/Canvas and also Three.js here’s some good ones:

• Mozilla Canvas Tutorial – https://developer.mozilla.org/en/canvas_tutorial
• Dive Into HTML5, A great guide giving you an insight into a lot of the new features of HTML5 – http://diveintohtml5.org/
• Opera Canvas Guide, Similar to the Mozilla article, very straight forward – http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Have Fun!

Starting on the 19th of July and lasting for five weeks, I got the opportunity to do some work experience at AKQA London. This was a simply brilliant experience, filled with opportunities to understand and experience how the new media industry operates, from attending client workshops to doing work for some pretty awesome clients.

On my first day, nerves were running considerably high. Seeing as I had never before been in an industry environment I had no idea what to expect, whether I would just be given a brief and told to get on with it or just be left cleaning desks and doing milk-shake runs, but either way it was going to be awesome to be back up at AKQA after two years. Making it there finally after a quick sprint up Farringdon Road I got shown to my desk, which by the way looked the most hardcore programmers desk ever (4 screens + private army of mini ninjas), in the Creative Research & Development department. Then I got to meet some of the people in the CRD team and have a chat to get to know the various roles/titles people occupied. This didn’t make much sense at first as everyone seemed to have ‘Creative Developer’, ‘Director’ or ‘Interactive’ in their title so it took me a while to really understand what people did, and only then did I start questioning why some people had ‘Senior’ in their titles .

Next up on the list was learning Android which was great because this was something I had absolutely no knowledge about. This is something that has rightly been given a lot of attention and I found it a great thing to get experience in, much nicer doing Java than faffing around with Objective-C .

From then onwards things only got better. Nerves went away after a few days and I got to know the team well. My technical knowledge increased immensely, understanding of how projects are managed and structured grew but most importantly, I knew more and more that this is what I wanted to do as a career.

My first piece of work was a Flash piece (thanks Rick!) and it was good to have a break from PHP which had been my focus for the last few months for my new site (site working on it by the way!). This, although only a small project, gave me a good understanding of using OOP in real life applications, working with Creative to deliver it just as it should be, using SVN and gaining a better programming knowledge. Luckily I had a bit of time and someone helping me so I could understand everything that went on and why.

Once that was done it was back to general research and working on my new site with lots of comments coming from my right. The next thing to come would be attending my first client workshop which was pretty damn cool. This showed me a different aspect of the company and how AKQA works it’s magic with its clients. After taking part in this I realised that not only did I enjoy developing software, but I also enjoyed speaking to clients and learning about the preparation that went into these workshops. This made me realise that this is something that I would like to do, instead of just been a developer, but also lead projects and speak/present to clients.

I then worked on a project with Emile. This was the first time I had worked
on a professional application using PureMVC. The good thing with this
project was that I  could see what benefit using PureMVC had and what role
each part of the MVC pattern played. I also got to understand how continuous
integration works, what tools like Hudson do, what goes into deploying a
site to live, and finally I at last got to find out what a Technical
Delivery Manager does

Other things that I was lucky enough to be able to go to where the LFPUG event at AKQA and internal presentations on various topics that related to the role of a CRD developer. All interesting stuff and I was lucky to work in a company that have such talented people who are willing to put together all these sessions.

In between all of this I got to know the people in the CRD team a lot better and thanks to Aaron, Abe and everyone else who I met, I learnt a whole load of new stuff in regards to programming, projects, and life at AKQA. This was the best bit of my five weeks, getting to know the team. There was none of this ‘your just and intern clean my desk’ bullshit (except on one occasion, and I’m not doing that again without getting my Hantavirus jabs first :p), I just felt like one of the team and got on with everyone, which was the most important thing for me.

The five weeks I spent at AKQA were simply, brilliant. I had very little in the way of expectations, but I couldn’t of possibly wished for it to have gone any better. Thank you to everyone up there who I met for being unbelievably friendly, helpful and for teaching me an awful lot. Thank you especially to Aaron Newton for being my ‘mentor’ who, despite moaning like an old women 99.01% of the time, taught me a new way of thinking about my projects and helped me out on my work. Cheers

My biggest thank you goes to Andy Hood who made this whole thing possible, for giving me the chance to see what the New Media industry is aboust, meet the people who create the brilliant work that comes out of AKQA, learn a whole load of new stuff, experience all different aspects of the agency, and overall thank you for making me 110% sure that this is what I want to do as a career and also 110% sure that I want to return to AKQA.

I believe I have a dragon that needs returning.

Thank you all so much.

Good reads:
Rick Williams – Blog | Twitter
Dennis Ippel (crazy 3d guy) – Blog | Twitter
Aaron Newton (never let this guy have a plastic dragon) – Site | Twitter
Abe Azam – Blog
Joakim Carlgren (watch out) – Site
Richard Szalay – Blog | Twitter
Tudor Bay – Blog | Twitter
Wanja Stier – Blog | Twitter

SHAKES & FIDGETS – http://s1.sfgame.us/

I’m hoping to launch it sometime next month. The CMS is pretty near completion, and then on to the rest of the frontend!

The idea is that code is split into different bubbles, each one representing a function. You can then drop and drag different methods around, adding notes to them, marking them as bugs or flagging that particular function as important. I think this is a great way of coding as coding by nature is a very logical task and so by displaying it in a very organized, logical way makes a lot of sense. Traditionally code is just displayed as a single file with methods listed one after the other which is fine for smaller files/projects with a moderate amount of functions and classes with little to no external dependencies, but when you are dealing with large projects, multiple files and lots of external library’s then this way of logically splitting it up into relevant bubbles really makes sense. So watch the video and see what you think!

Project page here: http://www.cs.brown.edu/people/acb/codebubbles_site.htm

The book starts of by explaining what Unity offers in the way of built-in terrain tools, along with an explanation of how to use them. It then puts your new skills to the test by creating a small mini-game based on an island that is created entirely in Unity, which involves creating a terrain using the Terrain (Script) tools, then apply materials provided with Unity which allow you to add an extra degree of realism to your project. Then the book goes on to show how to add models skyboxes and finally sound to your game for a really complete project. The author does this all very slowly and explained step by step which is what I find you need when your learning something completely new like Unity.

After the first mini project is completed players are introduced by first giving an explanation of what players are and how they work. Then things like parent-child relationships are explained and also the basics of scripting Unity projects in JavaScript and how to add in movement. Once players have been covered important aspects of modern game development, Ray Casting and Collision Detection, are brought in which are vital to any games success. The math behind these two topics is the first thing to be explained to the reader showing them how rays are calculated and what is needed to see if a player has been shot or not. Clear diagrams were included to allow those visual learners amongst us to get a good grip on the theory. Then these techniques are show how to be implemented in JavaScript once the prior configuration has been done in the Unity IDE.

One essential aspect of any game is a HUD (Head-up Display) and is show along with how to use colliders as Triggers. This enables developers to restrict certain actions like the opening of a door until the player has a certain object. Learning techniques like this allow beginners to take the interactivity of their games to the next level. Also adding in-game hints is show as this can be really helpful when you introduce challenges that have to be completed before progress can be made. If helps are available then this stops the player getting bored if they cannot figure the puzzle/challenge out on their own.

Next you learn how to create instances of objects in the 3D world and also rigid body physics which is when a physics engine, like Nvidia PhysX which is the one used by Unity, is applied to an object in the game which tells the game engine to apply physics to this object. All these concepts are then out into practice by creating various mini-games which allows readers to know how the link together in a complete game.

Particle systems are key to all special effects and are one of the more complicated aspects of game development and this is what is explained next. They are explained in general then how to add them to your projects by creating a fire with wood, rocks and matches. With a lot of the key parts of the modern game being covered all ready the book then shows how to introduce a menu to a game. Textures are added and adding interactivity to the menu is show and explained, the how to animate and make your menu more interesting.

Lastly seeing as Unity supports a multitude of publishing platforms (Windows, Mac, iPhone*, Web, Wii, Mac OSX Dashboard Widget) it is important to understand how to publish your projects for these platforms. Clear instructions are given for how to publish to these platforms and an overview of each platform is also given for those who are unsure what one is or what they are appropriate for. There is also advice on how to share your complete game and a few noticeable differences between Unity Free and Pro. The last chapter tops it all of by giving advice on how to thoroughly test your game and boost its performance.

Overall I think this book is great for people who have no idea about the Unity IDE but have a basic understanding of game development and also having a background in JavaScript would be useful. I am extremely excited about building more with Unity once I find the time and I can’t wait to see what comes out in the future.

You can find a sample chapter here: http://www.packtpub.com/files/8181-unity-game-development-essentials-sample-chapter-4-interactions.pdf

Get the book here: http://www.packtpub.com/unity-game-development-essentials?utm_source=harrynorthover.com&utm_medium=bookrev&utm_content=blog&utm_campaign=mdb_001397

*You must be an approved Apple Developer for the iPhone and install the iPhone SDK (requires Intel-based Mac running OSX 10.5.4 or later)

I myself and very very excited about next year, as for me it is a real turn point. Next year I finish school and am off to college, finally doing subjects that I’m actually interested in, which the exception of maths (Business Studies, Computing, Maths and Photography), at a college which is close to home, which is nice seeing as my current school is a quite a drive. Before that can happen, I have to take my GCSEs which is a pain, but in a few months they’ll be over and I can finally get back to updating this blog more regularly.

Talking about my blog reminds me that I’ve take the chance to draw up a few comps of what my new site is going to look like, and here’s a preview of the homepage.

I hope you like it. I was aiming for a very clean, but interesting look. I don’t know how long it will take me to get this live as my HTML is very rusty, but this is a good chance to get it back on top form. I plan to use ExpressionEngine as my CMS as it’s very customizable, and suits my needs better than the other CMSs I looked at.

I also have a book review in the works on Unity Game Development Essentials, which should be up within the next week or so. I have to say though, this book is really good and very easy to understand. After than I intend to hopefully write a few tutorials for sites like Activetuts and sell a few things on FlashDen.net to get a bit of extra cash.

Finally there’s the case of my portfolio. I’m shelving this for the time being as I there’s so much else I want to learn like C# + Silverlight, Cinema4D, Better AS3, Obj-C and the list goes on, so once I’ve got my new blog up, with a basic works section I will get to grips with some of these and then see how it goes from there. I feel I’ve lost focus over the past few months with school, fitness and a few other things, but this new year is a great time to get back on the ball and catch up.

So I hope you all have a great time over this celebratory period and are looking forward to the new decade as much as I am! I feel this decade is going to be the most important one of my life.

Speak next year :p

Harry.

I’ve just received my copy of Unity 3D Game Development Essentials which is written by Will Goldstone. In a nutshell its about giving novice programmers right the way through to experienced developers a good and thorough handle on building a game with Unity. It covers physics, scripting, particle effects,instantiation terrain generation and generally everything required for the modern game.

It’s based on the 2.5 version of Unity and uses Javascript for its scripting language.

Once I’ve finished reading it I’m gonna post a review which should be up in a couple of weeks, but going on first impressions it looks a great book! If you what to get a better impression on how the book is written and whether you’d benefit from it, there’s a sample chapter available here.

If you already have the book, let me know what you think!

Go on over and download it free of charge here. ]]> http://www.harrynorthover.com/blog/2009/11/04/unity3d-indy-untiy-free-for-all/feed/ 0 http://www.harrynorthover.com/blog/2009/11/03/hype-framework-bring-experimentation-to-the-masses/ http://www.harrynorthover.com/blog/2009/11/03/hype-framework-bring-experimentation-to-the-masses/#comments Tue, 03 Nov 2009 21:53:34 +0000 Harry http://www.harrynorthover.com/blog/?p=830 Continue reading →]]> Recently Joshua Davis and Brendan Hall released a new framework call HYPE. The aim of the framework is to allow everyone from newbie level to professionals experiment with ease using Flash.

I’m hoping to find some time in between GCSEs to have a go at making some stuff with this, so keep any eye out. You can download it here, and find the setup instructions here.

Have fun!!

Before you ask, no I wasn’t at MAX, but after making an attempt at going through some of the 250+ hours of footage I have found a few jems that I think are worth mentioning. It sounded quite an event and plenty of exciting announcements were made! Heres a few key sessions.

By now I am assuming you have all heard about native compiling to the iPhone in Flash CS5 and if you haven’t then be very ashamed :p . Well here’s a session that sheds some light on it if you haven’t got a clear understand:

Building Applications for iPhone using Adobe Flash CS5 professional

Now the next one is on the Flash Player its self, and what makes it tick. With each update the Flash Player gets more and more advanced, and with it complicated. Questions you never even had are answered in this session and it is a must see from my point of view.

Flash Player Internals

A lot of these things in this video I have never really thought about, but when they are explained you see what a difference they make and how important it is to know some of the stuff explained. One of the interesting concepts was at the start about rendering, describing the difference between Immediate and Retained rendering. Now I know this is simple stuff for the ‘pros’ amongst us, but for me I had never really understood this so it was nice to have it explained in simple terms.

For me one of the biggest announcements was that there is a new FLA format, which is going to be based on XML! This is a lot better than the current version which was essentially a ‘black box’ as XML is an extremely open and widely used language. The new format is essentially going to be a modified ZIP file contain separate files for the library assets, publication settings and document information which will make it easier to use in source control systems and other similar management tools.

XML based FLA: The New Flash File Format

Also, sorry it has been quite recently! I have been rather busy with school seeing as I am coming up to my GCSEs quite soon. I am also starting to think about work experience for the 2010 summer (July-August), and if anyone has any suggestions or offers then that would be brilliant!

Harry.

Just click on the picture to view the piece.

It is a bit different from last weeks as it has more vocals and is less of a progressive track and more of a general trance/techno feel to it.

Enjoy. ]]> http://www.harrynorthover.com/blog/2009/08/14/weekly-song-los-angeles-cex/feed/ 0 http://www.harrynorthover.com/blog/2009/08/03/weekly-song-salt-tank-sargasso/ http://www.harrynorthover.com/blog/2009/08/03/weekly-song-salt-tank-sargasso/#comments Mon, 03 Aug 2009 20:42:08 +0000 Harry http://www.harrynorthover.com/blog/?p=778 Continue reading →]]> Like many other creative folk in the interactive business, I have a burning passion for music. So I thought why not share some of my favorite tunes with my readers? From now on I will be posting one track/mix/set/whatever a week here and hopefully this will help you expand your music library.

This weeks track is Sargasso Sea by Salt Tank.

This track is one that follows a Progressive/Trance genre, and according to one of the users comments, it is a remix of the track Eugina which was part of the compilation Serve Chilled Vol. 3 (Track 2).

I love this type of music as it seems to take me away to a distant land, and make me thing about what and who’s important in my life, and also what lies in store for my future. Problems and doubts seem to fade away into the background when you immerse yourself into this tune, and gives you the power over yourself, and the ability to think things through properly.

That said, this tune, like any is best shared, so pass this on to everyone and anyone who has an interesting in Trance!

Enjoy this beat!

Harry.

On the 22nd of July I attended the UK launch of Silverlight and Expression Studio 3 over at Microsoft London. As you may have realized Silverlight isn’t really my main area of expertise, and I’m not planning to change that, just in case you were worried .

The start time was at 1:30pm and the afternoon was split into two sessions but were really just a mix up of case studies and demos for agencies currently using Silverlight in their projects. The first session was about SketchFlow and Blend, and the second was on Expression Web and also on Silverlight it’s self. There was a lot of interesting stuff in the presentations but also some things that I wasn’t quite happy about.

Better Composition and Planning.

Expression SketchFlow is a piece of software which enabled the designers to import sketches, or create wireframes using components provided to create a version of a site for the client that exactly mimics the functionality of how the final product will look. To help with this process, ‘Sketch’ components are provided that function exactly like you would expect components too, for example a scroll bar, but they appear as if they were sketched. This is useful because;

1. It saves time having to create any graphics.
2. It prevents clients from focusing on the graphical side of things and just understanding how the function will work, not the form.

Once you have created you ‘sketch’ layout and used the components you need to, you can then to mimic even more functionality, can use SketchFlow’s built in states which are used for things like tabs, where you have an over, up, down, etc state. With SketchFlow you can plan for all of these and create basic animation which is not dissimilar to timeline animation in Flash. Also new to Silverlight 3 is built in easing effects to achieve are more professional animation.

The next part of the composition stage of the workflow is presenting the comp to the client. There are many ways in which Blend can do this like exporting to a Word document, but there is an even better way. It can generate an online application which is on your web server and loads in the current composition, and then the client can browse through all the revisions and leave feedback. All animation can be viewed and components can be interacted with, which means that the client can gain the full idea of what the user interaction is going to be like. This method is far superior to most used before like building a HTML version. This was hard to maintain and used up a lot of valuable time.

A streaming experience like never before. Pfft.

With Silverlight’s new media capabilities like real HD and adjustive streaming it’s not hard to see why NBC broadcasted Wimbledon and the Olympics in it.

According to the presenter, loading times are a thing of the past. Silverlight’s streaming capabilities have been designed so that they adapt to the current bandwidth. So if they are being used on a 3mb broadband connection they it will provide if possible full HD video so long as it can load it all without any delays, but if the connection is slow, the plugin realizes this and the decreases the quality of the video being played so that it can still load it all without delays. This is great as the majority of views move off a site after a while if they are sat waiting for something to load. A good example of this is the popular video sharing site YouTube which has an average watching time of 5 seconds! This is because users leave the site if they have to sit there and wait for it to load. When generating revenue from video it is crucial that you don’t loose visitors and Silverlight seems to cure one of the biggest headaches that a video sharing site faces.

Now one of the other problems with YouTube and the main reason behind its 5 second visiting time is that the player loads all off the video right to the end instead of just the first bit which is the bit people are mostly likely only going to watch. Silverlight uses a different method by dividing the video file into separate chunks and then loads them in order. This helps saves a lot of bandwidth as if people only stay the watch the first few seconds then the bandwidth won’t be wasted trying to load the whole video, but just the first bit which the user actually watched.

10 second install.

Those of you who have installed Silverlight know that it is an extremely easy install process, which Microsoft claims only takes 10 seconds. I have found this to be roughly true and I another major bonus is that I don’t even exit my browser! Compared to Flash’s installation which requires you to actually visit the Adobe site, and then quit your browser this is an oasis. It makes accessing Silverlight content even easier.

Let’s not forget good old HTML.

A lot has changed in Expression Web since I last looked at it, which I have to say was quite some time ago. One of the major new features and quite a useful one at that is SuperPreview. This is similar to Adobe BrowserLab which has recently been launched (coincidence?). In a nutshell SuperPreview allows you to view your web page using different browser rendering engines and compare them side by side. It can also tell you the position of every element in the HTML page and then show you how much it differs in one browser to another. This helps you to correct it to pixel perfection.

Also Expression Web comes with the ability to easily create and insert Silverlight DeepZoom and also Flash and other general Silverlight content with ease. Another helpful tool that works in conjunction with the other parts of the studio is Expression Encoder which allows you to take the pain out of converting and resizing video. Web utilizes this well as you can insert, convert and resize video ready for a HTML page right from within the tool with only a few clicks. This is something that is long overdue for Dreamweaver.

A very good question, 3D?

Now when we were in the Q&A session there was a very good question about what Microsoft has planned for gaming in Silverlight and how it compared to Unity3D. The speaker said he wasn’t familiar with Unity3D but that the 3D features would be improved. The next thing that was of interest was that they said that it might eventually possible to develop a game using the XNA framework and the have it run using the Silverlight plugin. Obviously the main problem with improving the graphics on a cross platform browser plugin is that you have to deal with so many different libraries and runtimes, and trying to get all these to the same level of performance and ease of use must be quite a challenge.

If Microsoft pull this off right then they could quite possibly be Unity3D’s biggest competitor and I cant see that they can stand up against something that is already on 1 in 3 internet enabled devices in the world. It’s a shame though that the presenter didn’t seem to give the impression that Microsoft were giving gaming much of a thought for the future versions of Silverlight.

What’s the catch?

So far, I have portrayed Silverlight 3 in a very good light, and with good reason. It has come on along way since I last looked at it, and if it carry’s on it’s rapid production cycle then Adobe better watch out. As the saying goes though, nothing is perfect and Silverlight is no exception. I couldn’t help but feel that all the new features and the tools themselves were aimed at big agency’s and companies with employees in their hundreds. The reason I think this is that for the average freelancer who can sit down and explain to their client what is going on, the new SketchFlow features wouldn’t really help that much. For example, the online tool to show clients what different comps the designer had come up with and the option to leave feedback would be pretty redundant for someone who can be right next to the client and explain. Although spoken explanation can only go so far and there is nothing like having a working demo with full interactivity, with SketchFlow can achieve with ease.

The next major problem that you will have all worked out by now is that the tools are still only for Windows! This is the biggest disadvantage for me as I have a MacBook and a Dell XPS. Although I can run it on my XPS, it would be nice not have to get Bootcamp up and running every time I want to work in Expression Studio. I can imagine that for studios that are 100% Mac, Silverlight will be a straight no. I expect that in time *hopefully* the tools will be released for Mac.

This last one is obvious and one that is to be expected but never the less a very important factor and on that puts of a lot of studios adopting Silverlight for projects other and research and development. It’s the adoption rate. As I mentioned earlier Silverlight is on 1 in 3 internet enabled devices but Flash player 9 is installed on 99% of all computers in the US/Canada and this is pretty much the same over all the world.

Conclusion.

Overall Silverlight has some good prospects if Microsoft carry on the rapid releases they have been while including major features in each release at the same time. Although I still feel that the penetration figures are not good enough for use right now, the easy install makes it easy to access Silverlight content so hopefully this should change. I look forward to playing around with the new Expression studio and I can’t wait to see what appears in Silverlight 4, and hopefully I’ll get invited to that launch as well!

Feel free to leave thoughts in the comments section below, and happy Silverlighting!

Harry.

Over the past few months I have acumilated quite a few interesting links in my ‘Favorite’ section on Twitter. So I thought instead of being an anti-social nerd, I could share them out to my readers. So here we go!

1. Open-source ActionScript libraries for creating Flash games : http://bit.ly/3BqFjr (via @mesh)
2. A showcase of some of the best PV3D projects out there : http://www.papervisionshowcase.com/ (via @c4rlo5)
3. Very interesting blog about games & flash to add to your reader: http://www.stephencalenderblog.com/ (via @mesh and @bartekd)
4. Amazing stop-motion video! How do they do this? http://bit.ly/wwALI (via @michaeledge)
5. ARhrrrr – An augmented reality shooter prototype http://post.ly/seY (via @rickwilliams)
6. 43 iPhone Development Resources http://bit.ly/jn3ra (via @creattica)
7. Stefano Dembro’s Robots http://www.stefanodembro.com/index.php?l=item&q=Papalote (via @joshspear)
8. Version 1.0 of today’s most popular applications, a visual tour http://bit.ly/b4Mkx (via @PSDTUTS)
9. Nice video of Flash builder 4 Developer Productivity new Features shown by David Zuckerman http://bit.ly/2XIafH (via @swfgeek)
10. Plug-in Media’s Big & Small Papervision site blends 3D with 2D very smoothly. A cut above, very nice job indeed. http://bit.ly/EXWge (via @richardleggett)

So there you go, my top 10 links for a while! I hope they are useful to you.

Harry.

You may have noticed that I have just updated my homepage with a little sign up feature that lets you enter your e-mail address and I’ll let you know when my portfolio is ready. *Don’t worry, these address will be destroyed after the notification has been sent and will not be sold or abused in anyway!* .

You can view the new page here: http://www.harrynorthover.com/, so head over there and stick your e-mail address in and i’ll let you know when my sites *finally* ready!

Harry.

This is just a quick note to say that I have just found out that my first tutorial over at The Tech Labs has gone live! It is entitled ‘Create and Skin a Photo Gallery with Flickr, Flex and Actionscript 3.0′ It can be found here:

http://www.thetechlabs.com/tutorials/flex/create-and-skin-a-photo-gallery-with-flickr-flex-and-actionscript-30/

You can follow The Tech Labs over at twitter here: @thetechlabs. Make sure you spread the word around about the tutorial!

Here is a simple guide to getting setup using the Augmented Reality in Flash. This includes downloading the library’s and then getting a simple demo up and running.

The name of the library used for Augmented Reality in Flash is called FLARToolkit which is developed by Saqoosha. It is a port of the ARToolkit which is written in C. You can download it from here through SVN. If you haven’t got a SVN client setup then I highly recommend SmartSVN which is a free client and I must thank Richard Leggett for recommending this to me!

Now once you have got the code, add it to your global Actionscript folder, then print out this marker and run the example. You can either compile the source in the ‘src’ folder or just run the SWF in the ‘bin-debug’ folder. Hopefully this gives you a idea of what AR/FLARToolkit is all about.

If you can run the example yourself, here is a video of it in action.

FLARToolkit / Augmented Reality Basic Demo. from Harry Northover on Vimeo.

I have also written a base class for a FLARToolkit application. It is designed so that all you have to do is override the function ‘add3d()‘ to add your 3D objects to ‘FLAR_Container” object, and then override another function, ‘addAnimation_3d()‘ to add the animation. My description here is very brief so read the readme file in the package. You can download the class here. If you want to see how much code this can reduce then here is an example class using the base class:

package
{
	import com.harrynorthover.ar.flar.base.FLARSingleMBase;

	import flash.filters.BlurFilter;

	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;

	[SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")]

	public class Demo_BaseClass_Test extends FLARSingleMBase
	{
		private var cube:Cube;

		public function Demo_BaseClass_Test()
		{
			/*This is the function 'Init' you need to call to setup the FLARToolkit scene.
			     WIDTH, HEIGHT, FRAMERATE*/
			Init(640,   480,    30);
		}

		/*
		...
		This function is the one you need to override
		to add things to your 3D scene.
		*/

		override protected function add3D():void
		{
			// Add you 3D stuff here. The more the better 
			var pl:PointLight3D = new PointLight3D();
			pl.z = -1000;
			pl.y = 1000;
			pl.x = 1000;
			pl.flipped = true;	

			//var blurFilter:BlurFilter = new BlurFilter(24, 12, 1);
			var matList:MaterialsList = new MaterialsList();
			var fsm:FlatShadeMaterial = new FlatShadeMaterial(pl);

			matList.addMaterial(fsm, "all");

  			cube = new Cube(matList, 60, 60, 60, 5, 5, 5);
  			//cube.useOwnContainer = true;
  			//cube.filters = [blurFilter];

  			// FLAR_Container is the FLARBaseNode that you
  			// add your 3D objects to.
	        FLAR_Container.addChild(cube);
		}

		/*
		...
		This is the function to which you override to add
		your 3D animation.
		*/

		override protected function addAnimation_3d():void
		{
			//Add you animation here.
			cube.yaw(10);
		}
	}
}

See? Lots of code that has been got rid of!

Other demos I have been working on are here:

FLAR + Lines3D:

FLARToolkit and Lines3D / Augmented Reality from Harry Northover on Vimeo.

Incorporating AS3DMod:

FLAR + As3DMod from Harry Northover on Vimeo.

So there you go, my first few demos. Yes, I know, they are not very special but now I’m working on getting mutliple markers working and just more advanced demos in general. If you are looking for more advice on how to get set up with FLAR go over to this blog here. This has everything you need to get going. Also, check out squidder.com for some cool demos.

Happy ARing!

This video was made by Tim Smit, who is a dutch student. For the video above, he did most of the work by himself. This mean filming the footage in his local village, adding in the special effects using After Effects and 3Ds Max and all with a budget of $150! The video is a test movie of his film ‘What’s In The Box’ and the official site can be found here.

I’ve heard that several Hollywood studios have been in contact with him and some are even discussing making his movie!

Some of you may have read my twitter updates about technical trouble with my PC, and I thought I would post the solution here.

After many hours trying to figure out why my computer was coming up with the error:

"Windows could not start because the following file is missing or corrupt:

\WINDOWS\SYSTEM32\CONFIG\SYSTEM"

I still had no solution. The Windows XP CD install just hung on ‘Searching for previous Windows XP Installations…’ and the Windows Setup recovery tool just hung as well after selecting which Windows installation I wanted it to fix.

I then had to get on to Dell support, which is never very pleasant. After running the Dell diagnostics CD, it reported the error:

"Error Code: 0F00:0650.
Msg: IDE Failed: The self-test failed the read portion"

They then sent me 2 new hard drives, which for some reason we double the size of the original After installing these and trying to install XP again it still didn’t work. I ran the Dell diagnostics again, it reported the same error. I was stuck.

Then I went into the BIOS settings and turned RAID control off on the 2 hard drivers. You do this by selecting the drive, and changing it status from ‘Raid on’ to ‘On’. This seemed to solved the problem. I am now thinking that it was not really necessary to get 2 now hard drives as well! It so happened that my warranty had run out 10 days earlier so I had to pay for these! >(

I know this isn’t related to the web, but seeing as I couldn’t find a solution I thought I would post it here.

Here it is:

Oh and sorry there has been a huge lack in activity, but I can promise you there will be more to come soon

Harry.

Now, over the past 10 years there have been many new and exciting technologies appear which help us create and develop more advance apps. Over the past 3 – 4 years, companies and individuals have been taking a different approach on the research they have been doing. Instead of creating new technologies (languages, software, etc..) to solve a problem, they have been using existing products in different roles. The two best examples of this is Adobe Alchemy and the Microsoft Research project, Singularity. If you don’t know what either of these are them a) be ashamed and b) keep reading. 

Adobe Alchemy.

This is a project Adobe developed that lets you take any C/C++ library/code and use it in Actionscript. Now, if you know anything about C/C++, then you will be aware that the number of libraries and open source tools out there vastly exceeds that of Flash’s, so there is something for everyones need, and now the need to write you own is going to be almost completely redundant in the future. You may have seen some of the extreamly cool projects being developed out there, like Doom in Flash (don’t open this at work, you’ll never close it). Although this isn’t perfect, it is still quite an achievement. In time, the desktop will become the web. Going back to the original topic of this post, role reversal, who would of thought a few years ago, that the same type of code that powers the worlds most famous operating system would be able to run on the web? Now, I hope you see what I am getting at. Instead of Adobe creating a whole new language, they just took an existing language, original designed to be a low level language and made tools that let people use it in another way, which was completely unrelated to its original purpose. 

One way to look at this is that nothing new has been created here, nothing has moved forward. You could say that things have moved sideways or expanded in a different direction to what has been happening in the past few years. Using the same thing, just in a different way. 

Singularity.

Microsoft Windows is developed using a mix of Assembly, C and C++ (the well know ones all are), and anyone who has done some serious development with these languages know that it is very easy to go wrong and that you, as a developer, have to watch you back. C/C++ are unsafe languages which means there is a lot of room for error, but they are also extremely fast, so it’s the best choice for an OS. Now though, people at Microsoft Research have been developing their own OS, Singularity, which is developed using minimal Assembly and C (for the boot code, as you have no choice) and then using a modification of the C# language as their main programming language. Seeing where I’m going here? A high level language that is used as part of the .NET framework and for developing Windows Applications, is being used to write an operating system! Now, this isn’t going to replace the current version of Windows we are using now, or any time soon, as for now it is just a proof of concept. This is amazing though, as now you get all the safety of C# (well, Spec#) in an OS. This means auto garbage collection, array bounds checking, which means a lot less chance of a buffer overflow and the whole system would be so much more stable, but not as fast as the original Windows. The modification of C# they are using is called Sing# which is a superset of Spec#. The difference between Sing# and C# is that Sing# has support for channels and low-level programming language constructs that are needed for system programming.

You can read an overview of the Singularity Project here, and you can download it from CodePlex here. 

The Final Word.

Now, these two projects are the best I could think of to prove my point, which I hope you understand. The fact that no technology is limited to one purpose and that instead of creating new languages/software, there is always the option to bend an existing one to shape your needs. 5 years ago, who would of thought that this could be possible? It will be interesting to see what happens in the future….

-Harry. 

Over the past few years there have been some seriously successful and creative sites pop up. Ranging from the ones like YouTube who base themselves on a simple idea and stick to it. Others like WordPress who started off as a simple extension to another CMS, then grew to a fully featured system with a plugin and theme database and on top of all, use by millions all over the world! Along side these sites there have been millions of sites/creations who fail trying to achive the same effect as the two previously mentioned. Now I’m not going to mention any names here, mainly because I don’t know that many and of course, it’s just not nice to say someone’s creation is a failure.

Now, this brings me to my main point, how do you come up with a killer idea?

The answer?
There is no simple one. (Annoying, I know )

I have been thinking about this for quite a while now, and the need for even greater talent is felt more than ever.

With what seems like all the simple, brilliant ones taken, and people coming up with new ones all the time, how do you create something unique? Now the way you do this depends on what sort of service you want to create? Whether it is a way to integrate 3rd party APIs together in one easy place (e.g. linking Twitter, Facebook, WordPress together) or if you want to create something completly different (e.g. Digg – unique back in the day, but now there are a lot of reps).

I tend not to limit myself to any one type. The way I do it is list all my different services I use, what my work flow is between them, and then I think how I could make it easier and/or simpler to do this. Or if there is anything major I wish these services had to offer, then it would be work building my own, with this feature and others included. Think Blogger to Kontain. Kontain is the same as blogger, with a lot of features added in or changed.

This is the basics of it, but you can go into a lot of detail and complexity on this, so there is really no limit to what sorta stuff you can come up with. This is my prefered way of coming up with a new idea, but it depends how you think and the way you work (visual, pratical, etc….).

I look forward to seeing all the progess that is make in the next few years and hopefully I’ll be at the front of it

Harry.

This piece uses a render from Cinema 4D and the adds a little Photoshop magic.

Harry.

Desire / Cinema 4D + Photoshop CS4

Passion / Cinema 4D + Photoshop CS4

For After Effects I have been creating little scenes with things like moving water which arent really worth posting here, but here is a screenshot of one of them.

3D Ocean / After Effects.

So there you go, some of the stuff I have been doing to help me learn these tools. I feel that now my art work has really stepped up a pace now, and hopefully you will agree too

Harry.

When people find out that Harry Northover is just fifteen years old, they are astonished. At such a young age, Harry has proven time and again through his blog and tutorials that he knows what he’s talking about when it comes to web design, Flash media, Photoshop, and even making music with his MacBook. What makes people like this tick? Read on for some ways to capture the entrepreneurial spirit.

Inquiring Mind

When a new technology or application becomes available, you have to jump on it and learn all that you can about it. Learning about something when it first comes out gives you the opportunity to manipulate the hardware and software as you see fit. Once you have learned how it all works, the sky’s the limit as to what you can do.

Adventurous Spirit

Trekking through uncharted territory can be difficult, but if you maintain an adventurous spirit, chances are you will find far more than you initially set out looking for to begin with. Taking the time to explore different ways of using programs and truly taking ownership of the possibilities is another characteristic of successful entrepreneurs.

No Obstacle is Too Large

Figuring out solutions to problems is part and parcel to the young entrepreneur. Whether it is rewriting some code to customize a web page or making an entire flash-enabled page, taking the challenge head on is the only way to get the job done. The size of any undertaking should never be the main determining factor when taking on a task.

When There are No Resources, Make Some

The entrepreneurial spirit cannot be satiated by the status quo; entrepreneurs are always seeking to find access to the newest and latest equipment and technologies to continue moving forward. If this isn’t possible, they find ways to use their skills to raise money to continue working on their next project or to purchase new equipment.

The basic lesson here is to never let anything get in the way and not to give up. If you continue working toward your goals, anything truly is possible when you set your mind to it.

Here’s the first little tech demo of ’09 and I think it is a pretty cool one. The first difference is that it is made with Papervision3D instead of my usual engine choice of Away3D. It also uses a relativly new library, AS3DMod, and works with the 4 most popular engines.  Now this library is a modifier library which can do some really cool stuff, so go on over and check it out.

Now for the demo. It creates a standard plane, then applys a noise and perlin modifier to it. The last thing is to apply a FlatShadeMaterial to the plane and just animate these properties in the enter frame function.

You can download it here. To view the demo, click on the picture.

Harry.

This twitter message caught my eye as it sums up every that I want to try and do in the new year. It’s even more of an inspiration as it comes from my biggest role model  

So, in this post, I thought I would sum up what I hope to achieve in 2009. Sorry, I haven’t posted in a while, I am back at school now, so not much time .

• Complete the redesign of this blog in Flash
• Finally get round to doing my portfolio/labs
• Get as good at AE as I am at Flash. (No smart comments ) 
• Improve my Matte Painting techniques. 
• Get myself invited to more studios. He he  

So, there you go, there’s not that many aims, but I will probably get distracted by other things, I’m thinking iPhone dev here But being the future, we can only guess what happens this year. 

So, good luck this year, whether you are going to need it or not

Harry.

So there you go, not that exciting.

Harry.

When researching the internet I found that one of the best ways to get data from WordPress, is to use the XMLRPC method. The actual implementation of this will come in another post, but thats the way I’m doing. I will also be using this set of classes for all the WordPress/SWF communication.

The Planning Process.

I first started with a basic function diagram on the wall, in which I came up with 7 different files and listed all the functions within them. After that I fired up Microsoft Offive 2007 Visio and created a more complete diagram with function names and descriptions in them. Here’s the finished diagram in Visio.

The main trouble I had with the design/plan process was that I kept thinking I was making the backend as well so I kept adding in things like ‘Add Post’ but obviously, as it’s just a template, it’s not needed So there you can see what functionality will be in the template, but all implimented in Actionscript 3.0. This doesn’t include the transitions, layout and stuff like that, but that is all to come.

The whole process to me a few hours with gaps in between and a heavy dose of relaxing music. It’s not fully complete as it’s late (I’m writing this at 1am ) so I need to properly check it and proof read it tomorrow. Please let me know if you see anything wrong with it let me know!

Before I crash out I thought I say a little about the title. Plan, Prepare, Present basically translate into Design/Visualize, Code It, Go Live. Now you have probably worked that out but I thought it was quite cool so, well, there you go!

Good Morning Harry.

But, there’s no good staying in the past, there’s no future in it. So on we go into 2009 and with any luck it will be even better than 2008. I’ve got one major project coming up which will be revealed in a future post, and in the wider community there have been some terrific advancements in the Flash world. My favorite has to be seeing Quake run in Flash (and now Doom 1 as well) but seeing CS4 released and the progress Adobe has made is brilliant.

Throughout the year I have seen and experinced what I want to do for the rest of my life, and I feel like the luckiest person in the world.

Thanks to all my readers for supporting this blog, and I can’t wait till 2009 to see what experinces and events it holds!

Merry Christmas,
-Harry Northover

This post is all about my setup and what I’m designing on. I have been meaning to write this for a while and it gives a break to all those who need it from the usual tech demos that have plagued this blog for a while . Don’t worry, they will still be here.

Hardware.

So there you go, that is my setup complete with Christmas decorations, and now for the specs. *digs out manual* . What do you reckon, look like all the other professional design agencies?

Right now the hardware is out of the way here is a list of the software I’m currently running.

So there you go, the basics of my setup. If you want to know anything else please feel free to leave a comment or drop me an email.

In my effort to learn After Effects CS4 and create high quality visual effects/motion graphics stuff, I created this little recreation of the famous iPod Nano advert to help me learn how to use After Effects and the Trapcode Particular.

Now this makes heavy use of Particular and uses the wiggle() function to create the random motion for a minute.

It’s fairly basic but it helped me learn the basics of camera movement and how to get to grips with animation in After Effects. There will hopefully be a lot more AE/VFX coming soon. I have a little Flash demo on the way, but after that it’s a free road!

Harry.

After a few hours of getting to know GarageBand on my new MacBook, this is what I came up with. It is called Euphoria and took me a couple of hours to make. It is a sort of trance/techno song and its 5:10 long. I have always wanted to make my own music and this is my first step into that area. It’s not perfect, but it got me going, so I hope it does the same to you  

Euphore.mp3 (right click, save as)

Enjoy, and turn it up loud!

Harry.

Phew, a tech demo hasn’t found it’s way on here for quite a while! Here is one to let you know I’m back, but busy. 

I finally managed to get an idea down on to paper, (well.. into the Flash IDE) that had been buzzing around in my head for ages! 

There is a feature in Away3D call the BitmapRenderSession, and you assign this to the session variable of your View3D. What this tells the rendered to do is, instead of drawing directly to the screen, it draws everything inside a BitmapData object, but at a much smaller resolution. This Bitmap is then scaled up and show and the selected size. As you can imagine this saves a lot of work done, as you only have to draw at, say, a quarter of the resolution that you normally would. There is a catch. You will have figured this out already, but the lost of quality is tremendous the more you scale it up, but I have found out how to make this work for me. Just look at the demo. 

What I have done here is create a plane, added then some animation to it. Then I am assigning a new BitmapRenderSession object to the View3D, and then changing the value of it when the mouse moves. If you look closely at the code, you will see that I am creating a new BitmapRenderSession for every frame. Not efficient at all, but I haven’t had the time to look into this properly, so if anyone knows a solution, let me know! 

This at one end of the scale (with your mouse at the top), looks high quality, but when you move your mouse to the bottom, you can see the effect immediately. It becomes highly pixilated and, I think, fairly cool! I have seen this sort of effect on many sites, and always wondered how I could achieve it. Here is my solution, but one of many out there I’m sure. 

Your going to have to resize your browser, as pop-ups seem to be fairly hard in WordPress  

You can download the whole thing over at my Google Code site (look on the right). It should be up there in a few days. Here’s the link: BMRS.zip

Harry.

It’s been quite a while since I wrote a post. This is mainly because I have been busy at school. The teachers seem to feel the need to give us an immensely hard time before christmas  

Anyway, as it was my birthday I managed to persuade my parents to get me the new MacBook. After playing around with it for a couple of hours I’m converted! I love the Macs. They are so much more cleaner and more satisfying to use. I still have my main workhorse as a Windows, which is a Dell XPS 710. 

There’s no need to post pictures as there are plently flooding the web already, but this means I can start experimenting with the iPhone SDK which is something I have wanted to do for a long time, seeing as I have the iPhone 3G. 

Finally, I will be trying to post some tech demos as there haven’t been any for a while

Harry.

My Illustrations in Print:

Last weekend I took a trip into town and brought myself some photoframes. I then printed of some of my artwork and put it in these frames. Here are the results. Sorry for the low quality pictures, the iPhone isn’t cut out for HD.

With Christmas coming up, if you want to buy a copy of any of the above, then just let me know. I need the money.

Harry.

As you can probably see, I have modified the lighing and added a reflection on the water from the light. There was also a problem with the lighing on the moutains, it was coming from the wrong direction. This has now hopefully be corrected. The finaly major adjust was the sky. I have made it much more stormy and darker.

Hopefully you think its better,

Harry.

Anyway, I present to you:
Freaky Beats.

Enjoy,

Harry.

It is just a simple one that makes heavy use of custom brushes, and gradients to name a few. I see this one as one of my favorites so far. Enjoy.

Harry.

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip.

Step 1 – Setting up Flash.

This is the easy bit. Create a new flash file, and leave the size of it at the default, and then in the bottom of the Flash IDE, there should be a text box saying ‘Document Class’. Create an Actionscript 3.0 file called SkyStuff and save it. Then you need to type SkyStuff into the text box and press enter. There should be no errors.

Step 2 – Importing…

Obviously, you are going to need the Away3D classes and you can download them here. If you already have a folder for your classes then unzip the download and copy it to there, but if not then just copy all the content of the download to the same directory of your Flash file.

Here are the necessary imports:

 package {

	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Skybox;
	import away3d.core.utils.Cast;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

So, there you go, the necessary imports. I think these are fairly obvious, but if you need to look them up, go here.

So, on we go!

Step 3 – Variables.

Here we need to create the necessary variables to hold stuff like materials. So here it is:

public class SkyStuff extends Sprite {

		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:2 } );
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { camera:cam, scene:scene, x:0, y:0 } );

		// Skybox stuff.
		public var sky:Skybox;
		// Materials....
		public var sky_front_material:BitmapMaterial;
		public var sky_back_material:BitmapMaterial;
		public var sky_left_material:BitmapMaterial;
		public var sky_right_material:BitmapMaterial;
		public var sky_up_material:BitmapMaterial;
		public var sky_down_material:BitmapMaterial;

		// Movement vars.
		public var move:Boolean = false;
		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;

So first of we create the basics that are needed for any Away3D project. This is a scene, a viewpoint and a camera. I am assuming that you know what these are for, so I am going to skip to the parameters. For the camera, we set the zoom to 2, in the viewpoint we set the scene toscene, the camera to cam and align it to the top left corner of the stage.

Next we create the actual skybox that will have all the materials assigned to it.

After that we create the 6 different variables that will hold each material for the skybox faces. This includes the front, back, left, right, top, bottom. Fairly obvious? Hope so.

The next variables hold data that we need for movement of the camera. These include a variable to see if the camera needs to be moved, the last pan angle, the last tilt angle, the last mouse X position and the last mouse Y position.

You will see how we use these later on.

Step 4 – Calling the functions.

Next we create the constructor which adds an event listener to call the function Init that will initialize all the 3D and 2D assets.

		public function SkyStuff():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
		}

		private function Init(evt:Event):void {
			InitStage();
			InitEngine();
			InitMaterials();
			InitObjects();
			InitListeners();
		}

Here you can see that all the different parts of the movie are initiated here. This includes setting up the stage, Away3D, the materials for the skybox, the 3D objects (skybox), and the event listeners.

Step 5 – Setting up the stage & engine.

Now we set the align mode and necessary stuff for Away3D.

                private function InitStage():void {
			stage.align = StageAlign.TOP_LEFT
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}

		private function InitEngine():void {
			cam.mintiltangle = -80;
			cam.maxtiltangle = 20;
			cam.targetpanangle = cam.panangle = 0;
			cam.targettiltangle = cam.tiltangle = 0;

			addChild(view);
		}

Here we are setting the stage align to the top left, and the scale mode to no scale.

Next, in theInitEngine() function we set up the camera, and then add the viewpoint to the display list. The variables we set for the camera are the mintiltangle which means it cannot tilt past -80 degrees, the maxtilitangle which means it can’t tilt further that 20 degrees. We also set the targetpanangle, and the targettiltangle. If you need more clarification to these values, click here.

Once we have done this, we add the whole viewpoint to the stage.

Step 6 – The meaty part, creating the Skybox

Next, we create the actual skybox and all the materials that are needed for its faces.

		private function InitObjects():void {
			sky = new Skybox( sky_front_material, sky_left_material, sky_back_material, sky_right_material, sky_up_material, sky_down_material );
			sky.quarterFaces();
			view.scene.addChild(sky);
		}

		private function InitMaterials():void {
			sky_front_material = new BitmapMaterial(Cast.bitmap(SkyFront));
			sky_back_material = new BitmapMaterial(Cast.bitmap(SkyBack));
			sky_left_material = new BitmapMaterial(Cast.bitmap(SkyLeft));
			sky_up_material = new BitmapMaterial(Cast.bitmap(SkyTop));
			sky_right_material = new BitmapMaterial(Cast.bitmap(SkyRight));
		}

Now, in the functionInitObjects() we assign a new skybox to the variable sky that we created in step 3.

So, to create a skybox you need to assign a front, back, left, right, top, bottom material. As you can see from the variables assigned to Skybox(), you can see which order these materials need to be assigned to. The full documentation is here.

Next, we call a function called quaterFaces(). This divides all face objects into 4 equal sized face objects. So this creates a more precise image.

Lastly, we add it to the viewpoint.

In the InitMaterials() function we assign a new bitmap material to each of the 6 materials. To do this, find a skybox (here’s a good site) and import the 6 images into you flash file. When you import them, give them a linkage ID of Sky + (Front, Back, whatever part of the skybox it is). Make sure these linkage ID’s correspond to the ones we passed into Cast.bitmap(name).

So now we have assigned all the skybox parts to their respective variables, and then we have created the skybox, passed all the faces into it, quatered the faces and added it to the viewport. That is the key part, now on to adding event listeners and camera movement.

Final Note – Camera Movement

Now as this tutorial is about the skybox, and not the camera movement, I am going to just give you the code and let you work it out.

private function EnterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
			}
			cam.hover();
			view.render();
		}

		private function MouseDown(evt:MouseEvent):void {
			lastPanAngle = cam.panangle;
			lastTiltAngle = cam.tiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;
			move = true;
			stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}

		private function MouseUp(evt:MouseEvent):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}

		private function onStageMouseLeave(evt:Event):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}

		private function Resize(evt:Event):void {
			view.x = stage.stageWidth / 3;
			view.y = stage.stageHeight / 3;
		}
	}

}

So there you go. I hope you enjoy this and find it useful.

Harry.

For this I used lots of curves adjustments, layers adjustments, and custom brushes. The sky was also added from another picture. This was inspired by one of Alp Altiner‘s tutorials in ‘d’artiste Matte Painting’ book by Ballistic publishing. You can download the .PSD file here: http://code.google.com/p/harry-northover-code-store/ .

Here it is:

Now I know this is by far not one of the best, but I learnt a lot about the process etc while making this, and that is the most important thing for me.

Harry.

I have just updated to WordPress 2.7 Beta 3, and all is good! The new dashboard is by far one of the best improvements. Check it out!

Harry.

After having a discussion with my IT teacher about the GCSE course, my views on the course have changed severely and I wondered if anyone out there had come across this at all?

The main thing is that the whole course is about the documentation. You could write a text document as the final product, but write about it and how you created it loads and get full marks. This really annoys me as the writing (documentation) part of it is rubbish. It is so boring, telling the world via word how you managed to launch Dreamweaver and create a table for the layout, how impressiveJ. The whole thing about Flash, 3D and everything I am interested about is that fact that I can just go at like a bull in a china shop and just experiment, see what happens, expect the unexpected (most of that randomness comes from accidental errors). No be stuck behind writing about how to use Away3D.

The course, in my view, only covers one aspect of IT. So, all it is really testing you on is how to write up the documentation on a project. They don’t care what the final product looks like, acts like or things like usability levels etc. Now the boring ones (and probably the thinkers out there) will be saying, “Well, you write about it so they know you understand what you are doing”. This seems pretty stupid seeing that they don’t actually care about what you are doing in the first place.

Maybe it’s just me, but the whole thing seems a little pointless (only in some aspects). I don’t really know if professional studios document their process a lot, or not much. I am assuming they do so that maintenance is a lot easier. Imaging a complicated flex app, like the new eco:Drive app (great article in .net) . Passing this over to someone with no knowledge of how the app works or what is uses, or requires. This is where I can see documenting the process comes in handy, but the focus is on the output of the main product. With the IT GCSE, they don’t care about the finally product.

Now that’s out of my system. I feel so much better, now to top it off, anyone fancy buying me a MacBook? J He he.

Harry.

me@harrynorthover.com

So, there you go! All contact infomation should of been change on the site.

Harry.

You can download all the .PSDs here: http://harry-northover-code-store.googlecode.com/files/Xplorer%20PSD.zip

Enjoy!

Harry.