ScottKing.com.au

Recently launched, a web site to showcase 158 Collins Road for Barnes Realty.

http://www.158collinsroad.com.au

A few friends of have asked my thoughts on HTML 5 and posing questions such as “Will HTML 5 replace Flash”. Firstly, HTML 5 is simply a new markup, it will replace HTML 4. Canvas is the SVG graphics technology that will enable HTML 5 and JavaScript to create rich and dynamic graphic, much like Flash, native in the browser.

Old dog, new tricks?
Canvas is an SGML based graphic language – however it is by no means the first SGML SVG, some of you will remember VRML that was around in the mid to late ’90s. If you remember VRML you’ll know how well that turned out.

Browser Penetration
3-5 years for browser support to reach a level that allows real world usage of HTML 5 + Canvas. Sure us tech heads love jumping onto the latest and greatest browser and it’s support for the latest cutting edge technologies. Most users, don’t. Most big companies don’t. And remember most Government systems, banking systems, etc are still using Internet Explorer 6 and some are even still running IE 5.

Browser Compatibility
If there is one thing that Browsers can agree on, it is to disagree. Each browser implements their technologies differently. Always have and always will. Even W3C strict standards based technologies get implemented differently. Even the exact same verison of a browser on Windows may have inconsistencies when compared to the same browser on a Macintosh. It’s about time us web developers got used to the fact that “browser standardisation” is .

Flash major flaw is also it’s major strength – it is a plug-in, a browser component so it must be installed seperatley in each browser implementation (or packaged with the brwosers by default) which can be a pain. However because Flash is run through, propietry player it is all but standardised across all browsers and operating systems.

Hardware Acceleration
SVG is a Vector graphic format, it is therefore quite processor intensive. Flash has overcome many of the hurdles of Vector based animation through years of development and by recently introducing hardware acceleration to it’s Flash Player. Canvas faces the same potential performance problems however it is up to each indepent browser vendor to implement it’s own opimistion and hardware acceleration meaning Canvas applications will run faster on some browsers, then others.

HTML 5 based image editors – visual image editors such as Photoshop that output to Canvas

Writing Canvas based code is very difficult. Lets take a look at a sample rectangle in Canvas:

HTML Mark-up:


This text is displayed if your browser does not support HTML5 Canvas.


JavaScirpt:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

To do the same thing in Flash you can either write the ActionScript to create the rectangle, which in actual fact looks quite similar to the JavaScirpt component of Canvas example. However, you can also just open up your Flash editor, grab the rectangle tool, pick a color and draw it onto the Stage.

What the Flash editor is doing is essentially creating the ActionScript (or more correctly the MXML) for you.

Until a few “WYSIWIG” style image editors come out with Canvas support (a future Photoshop Save to web option perhaps?) we will not see complex interfaces created with Canvas. 7 lines of code to create a simple colors rectangle with no animation or interactivity is a lot to write. Creating an entire interface in this way would be impossible.

Community
For Canvas to be successfull it must be adopted by a strong community of developers. I have no doubt that we will see JavaScript libraries to manipulate Canvas – animation packages, Tween packages, colorisation and the likes developed and released to the development community. But these things take time. There have been plenty of promising web technologies come and go. However, given it’s adoption by most major browser vendors and the hype surrounding Canvas it appears it will be with us for some time.

Conclusion
Canvas is a nice new technology to have in the toolkit, although a lot of the hype surrounding it at present is unfounded as real world corss-browser implementation of the Standard is sitll a long way off. Flash is a powerful technology with over 15 years of development behind it, 99% browser and market penetration and the worldwide multimedia leader Adobe behind it. Will Canvas replace Flash? No.

http://en.wikipedia.org/wiki/Canvas_element

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

http://en.wikipedia.org/wiki/VRML

http://en.wikipedia.org/wiki/MXML

package au.com.scottking
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.*; 

	import com.viocorp.StolenGen3D;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.view.BasicView;   

	/**
	 * ...
	 * @author Scott King
	 */
    public class Main extends Sprite
	{   

        private var view:BasicView;

        public function Main()
		{
            init();
        }   

        private function init():void
		{  

        	stage.scaleMode = StageScaleMode.NO_SCALE;
        	stage.align = StageAlign.TOP_LEFT;
        	view = new BasicView(stage.stageWidth, stage.stageHeight, true, false);
        	view.camera.zoom = 10;
        	view.camera.focus = 100;
			view.camera.z = - 1000;

			buildWorld3D();

            addEventListener( Event.ENTER_FRAME, enterFrameHandler );
        }   

		protected function buildWorld3D()
		{
        	addChild(view);

			var _stolenGen3D = new StolenGen3D();
			view.scene.addChild( _stolenGen3D );
		}

        private function enterFrameHandler( event : Event ):void
		{   

           view.singleRender();

        }
    }
}  

Handy Copy & Paste window.onload and event hanelers setup snippet:

<script type=”text/javascript”>

var temp_f;
if( window.onload ) {
temp_f = window.onload;
}
window.onload = function () {
if( temp_f ) {
temp_f();
}
init();
}

function init(){
initPageEvents();
}

function initPageEvents(){
document.getElementById(‘linkClick’).onclick=function(){
linkClicked();
}
}

function linkClicked(){
alert(“ok”);
}
</script>

[..]

<a href=”#” id=”linkClick”>Link</a>

This is a Banner ad for iShares, it contains a small Isometric building block game. The aim is to create the 3D iShares logo out of the scattered building blocks. This game was built on top of an AS2 Isometric engine I developed to be lite weight for the purposes of serving through banner hosting and media companies.

It has an autoplay feature which kicks in after 30seconds and it has an “Auto Build” feature, click the button in the bottom left to activate.

Click here to replay.

I was having a beer with one of my very talented colleagues Robert Shearing (robshearing.com) and we got to talking about the make-up of the various easing equations for usage in Tween engines such as TweenLite. Most of these equations are still based on Robert Penner’s original 11 easing equations: Circ, Cubic, Elastic, Expo, Linear, Quad, Quart, Quint and Sine.

After a few beers we decided that we needed to create a new Easing equation. We figured that is if Quint was to the power of 5, then logically we create an equation to the power of 6.. but what to call it.. after a few more beers we figured if Quart is the power of 4 and Quint is the power of 5 then the power of 6 should be simply called “Sex”. Coincidentally, this is also the Latin word for six.

This gives us a new, slightly sharper Ease and the bonus ability to have some really cool easing combinations such as Sex.EaseIn, Sex.EaseOut and everyones favorite, Sex.EaseInOut.

Get the [Source].

Enjoy your new equation, if you use it on a project please drop us a link in the comments below and please remember, always practice safe Sex.

I wanted a nice, simple, small FPS counter that displayed an Average FPS over a set number of frames, eg: 22fps average over 10 frames.

I managed to find a basic class that I modified to include an average FPS parameter and a threshold parameter that turns the FPS Background to RED if the FPS drops below the threshhold.

Source: [fps_example]

Today Sony launched their new Playstation 3 web site which I was responisble for creating. I built this for some of the talented people over at Tequila, design by Craig Brooks, downloadable widget by Danny McGillick.

This site presented a few unique challenges. First of all it was to feature a pseudo-3D transition for the load screen but was asked not to use an propitiatory 3D software such as Papervision. The next challenge was to create a flowing navigational menu that is fed from a dynamic XML feed with random positioning of the nav items. The site also needed to feature a “Favorites” system that allowed user to add their favorites sites to a “bookmark” style menu on the site, however due to technical restraints I was not to use a database, this meant storing the “Favorites” in browser cookies and writing a quick interface to access the cookies. Finally the site was built on top of the Kohana PHP framework and an alternate HTML only version developed by the brilliant Luke Schreur. The site features 9 different “Skins”, refresh on the landing page to get a new random skin.

Head on over to http://www.playstation3.com.au to check it out.

I dont understand why Apple can make the best hardware in the world, and then proceed to create the worst software to put on it. Safari (like iTunes) is full of bugs, one of the most obivously yet most poorly documented is the problem that causes Safari to block pop-up windows from Flash even after a user has clicked to intiate the popup.

Here’s the fix:

ActionScript:

import flash.net.*;

...

mybutton.addEventListener(MouseEvent.CLICK, openPopup);

function openPopup(event:Event) {
	var jsPopFunc:String = "popupWin";
	var _winURL:String = "http://www.rivastakeout.com/staging/stake-your-claim/form.php";
	var _winTarget:String = "_self";
	var _winWidth:Integer = 600;
	var _winHeight:Integer = 400;
	var _winName:String = "popup";
	var _winParams:String = "location=0,status=0,scrollbars=1";;

	var result:Boolean;
	if (ExternalInterface.available) {
		result=Boolean(ExternalInterface.call(jsPopFunc , _winURL, _winTarget, _winWidth, _winHeight, _winName, _winParams));
	}
	if (!result) {
		var request:URLRequest=new URLRequest(_winURL);
		try {
			navigateToURL(request, _popupWin);
		} catch (e:Error) {
			trace("Error occurred!");
		}
	}
}

JavaScript:

  function popupWin(winURL, width, height, name, params){
	var left = Math.floor((screen.width - width)/2);
	var top = Math.floor((screen.height - height)/2);
	var winParms = "top=" + top + ",left=" + left + ",height=" + height + ",width=" + width;

	if(!name){
		name = "newWin";
	}
	if(!params){
		params = "location=0,status=0,scrollbars=0";
	}
	if (params){
		winParms += "," + params;
	}

	var newWin = window.open(winURL, name, winParms);
	if (newWin) {
		return true;
	}
	else{
		return false;
	}
  }

Further reading:
http://www.ultrashock.com/forums/actionscript/popups-from-flash-solution-92036.html

Some Flash banners for a full a page take over of Cnet Australia that I created for Panasonic’s new High Definition Blu Ray recorder, quite a cool campaign running on TV and various media at the moment. Agency: Rhodes Wingrove.

Take a look at:

http://www.cnet.com.au