Pete Shand

Stage3d plus flash player 10 backwards compatibility

Pete Shand — Mon, 23 Jan 2012 02:48:46 +0000

So while there are hundreds of cutting edge tech demos, sites and games being produced with flash player 11′s stage3d, it’s not always practical to develop for a player version before it’s reached a mature penetration rate. Given that flash player 11 was only released a few months ago it’ll probably be another few months before we see the 90% mark being hit. http://riastats.com/ puts it at about 63% at the time of writing this post.

That aside, it’s still quite tempting to disregard the above and set the minimum player version to 11, but we all know the client just isn’t going to let this fly. The obvious option is to create an swf for each target player containing the 3d engine code, then have your main application swf load the appropriate 3d engine swf. It’s a bit of a drag, as it’ll increase your work load, but it’ll get the job done.

a basic example of this can be viewed at:
http://labs.peteshand.net/stage3d_fp10fallback/

source can be downloaded from:
http://labs.peteshand.net/stage3d_fp10fallback/stage3d_fp10fallback.zip

Flash 11 Platform Game Prototype

Pete Shand — Mon, 17 Oct 2011 21:25:39 +0000

you can view an early prototype for a platform game I’m building with flash 11, away3d and box2d below.

You can view the game in action here (Warming: there is no pre-loader).

I’ve been surprised at the speed in which I’ve been able to put this together and because everything is xml driven once the initial level, characters and game objects have been implemented content generation is going to be a breeze. You can view the xml here.

As stated above this is an early prototype, so there are plenty of things missing, for example the hero will probably stop walking when he isn’t moving and I’m sure most of what you see will change anyway, but just thought I’d share my progress.

integrate browser scrollbar with flash – part 2

Pete Shand — Sat, 27 Aug 2011 16:15:12 +0000

After my last post on integrating the browser scrollbar with flash a friend of mine (Tim Keir) instantly pointed out that there is a small library called swffit which he said achieves a similar result. Don’t you just hate it when that happens!

However while swffit is a great library (and I encourage you to check it out), it achieves a somewhat different result than what I was trying to demonstrate. swffit basically sets the height of the swf to 100% as long as the browser height is greater than x, if the browser height is reduced below x then the flash movie’s height is set to x and a browser scrollbar appears. This is great for full-page flash movies when viewed on a small screen because the user will always be able to scroll down if there screen isn’t big enough.

So obviously my explanation and example require a little reworking to clarify why you might want to implement something like this. So that’s what I’ve done. This time round I’ve abandoned the idea of creating an experience similar to an html page and focused on more of a ‘flashy’ example. Its still very basic, but it should give you a better impression of the possibilities. The second example can be viewed here.

This time there is also a scrollbar along the bottom of the window, as well as a 3d cube which replaces the checker panel. The side scrollbar controls the cube’s rotation around its x axis and the bottom scrollbar moves around the cube on its y axis. also in addition to this clicking and dragging anywhere on the flash content (or pressing the arrow keys) will also update the scrollbar locations and in turn feed back into the flash movie. The thing i love about this concept is that the user will see the scrollbar, drag it down and expect the page to scroll, however in this case the cube rotates… wow, amazing they think to themselves for half a second.

The source files can be downloaded here.

add me on g+ and twitter

Integrate browser scrollbar with flash – part 1

Pete Shand — Thu, 25 Aug 2011 17:10:50 +0000

Just a quick post to demonstrate how to integrate the browsers native scrollbar with a full-page flash movie. Why? Why not… People always go on about how flash and html/javascript work well together, so thought I’d try to create something new that’s flash/javacript related.

Click here to view the example in action. Right clicking anywhere on the page will bring up the flash player context menu, so obviously this is a full-page flash movie. However where this differs from your traditional full-page flash movie is that it will add a native browser scrollbar if the checker box exceeds the height of the browser window. Once the scrollbar appears the user is able to drag the scrollbar up and down and it will adjust the flash content just as you would expect html content to scroll.

So why is this a nice feature to have? Well the browser scrollbar is something everyone is familiar with. Everyone knows that when you see the scrollbar on the right hand side of the browser you can scroll the page. That’s not to say you can’t add additional interaction to the flash movie and update the scrollbar appropriately, I think its always nice to have a few different ways of navigating through a site, whether it be via the keyboard, or various mouse interactions.

Obviously this is just a basic example, but you could really go to town with this. If I had the time I would love to create a Stage3D scene and use the scrollbar to move through it.

You can grab the source here.

Continue reading part 2

as3 Text To Speech plus proxy

Pete Shand — Sat, 16 Apr 2011 08:23:54 +0000

A while back I wrote a post on a few as3 classes I wrote that would hook into googles text to speech engine (you can view the original post here). Unfortunately there was a few problems with the way it worked, first and foremost not all browsers handled the cross domain sound request the same, as in IE/Chrome bitched about cross domain policy files. secondly there were some issues around using special characters (non english character sets)

I wasn’t using these classes in any commercial projects, so sadly these issues were never investigated, well that is until a chap by the name of Daniel Kazmer needed this type of functionality in one of his projects, I suggested looking into a proxy for the cross domain issues and that’s just what he did.

Click here to download the as3 text to speech classes as well as the proxy file Dan created (Note you’ll need php and curl installed to take advantage of the proxy).

While this is a step in the right direction it turns out there are still some issues surrounding special characters, but regardless thanks for your input Dan!

Facebook Fanpage PSD Template 2011

Pete Shand — Thu, 14 Apr 2011 10:39:12 +0000

Lets face it, designers sometimes need to make a mock-up that doesn’t actually exist which sometimes can be time consuming and extremely irritating. Facebook fanpages have been a very hot topic for clients recently. They are wanting to break into the social media scene.

Today I’m releasing a mockup of the new 2011 Facebook Fanpage with editable text and image positioning, hopefully this will save you some time and help you create and effective facebook mock-up for a potential or current client.

Click here to download the PSD.

Foodie Fight Facebook Quiz

Pete Shand — Wed, 16 Mar 2011 16:11:48 +0000

To celebrate the brands London Restaurant Week campaign, we (Razorfish London) have created ‘Foodie Fight’ a mini-quiz designed to challenge peoples knowledge of all things culinary. Know your artichoke from your asparagus? Know how many Michelin Stars Marco Pierre White has? (Its 3 by the way!) If so then click on the app link below to test your knowledge and share your score with your friends. If you score highly enough then you will be entered into the competition draw each week for the opportunity to win fantastic VIP prizes including dinner for 10 @ Marco Pierre Whites, wine-tasting with Gary Rhodes and much more.
http://www.facebook.com/lastminute.com?sk=app_115362125207521

MovieClip Loop Control

Pete Shand — Fri, 04 Feb 2011 12:52:23 +0000

^?View Code ACTIONSCRIPT

import net.peteshand.utils.LoopCtrl;
LoopCtrl.setLoops(this,3,40); 
// Parameters:
   // Target MovieClip, 
   // Number of Loops, 
   // Frames of end of timeline to stop at (default = 0)

^?View Code ACTIONSCRIPT

package net.peteshand.utils
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.EventDispatcher;
 
	public class LoopCtrl extends EventDispatcher
	{
		/** @private **/
		private static var ref:MovieClip;
		private static var loops:int;
 
		public function LoopCtrl ()
		{
 
		}
 
		public static function setLoops(_ref:MovieClip, _loops:int=1, preEndFrame:int=0):void
		{
			ref = _ref;
			loops = _loops;
			var count:int = 0;
 
			ref.addFrameScript(ref.totalFrames-1-preEndFrame, LastFrame);
			function LastFrame():void
			{
				count++;
				if (count == loops){
					ref.stop();
					ref.dispatchEvent(new Event("LoopEnd"));
				}
			}
		}
	}
}

Click and Drag 360 View

Pete Shand — Tue, 25 Jan 2011 15:34:01 +0000

.MPO to Anaglphic or Stereo Pair JPG

Pete Shand — Tue, 25 Jan 2011 14:19:07 +0000

I recently bought the new Fujifilm FinePix W3, it a nutshell its a camera with stereoscopic lenses (see below) which means you can shoot 3d photography and hd footage. It doesn’t stop there though, on the back of the camera you have a 3.5-inch glasses free 3d display. Without a doubt the coolest gadget I’ve ever bought.

Fujifilm FinePix W3

One thing that surprised me was the format in which the W3 saves stereoscopic images, the file extension is called .mpo and I can’t say I’ve ever heard of it. I was expecting it would save as a stereo pair .jpg or .jps which would be easier to view and edit on a regular computer display.

It turns out there are a few programs out there that will convert .mpo to .jpg, but not that many. So i decided to look into the possibility of converting in actionscript. Because the .mpo format is basically multiple jpgs saved within the one file it turned out to be pretty straight forward. Building on Thibault Imbert’s work on jpg decoding I simply wrote a few classes to parse the .mpo into separate jpg byteArrays and then output the result as a stereo pair or a anaglyphic image.