cBlog

Interactive HTML5 using CreateJS

Grant Skinner’s open source code base CreateJS is a suite of Javascript libraries that use the HTML5 canvas element and Javascript to produce a developing environment similar to Flash, and thus, effectively let developers build interactive HTML5 content. Some really excellent games and interactive applications have already been produced using this method.

In this post, I will go through a basic example of using CreateJS to create a simple interactive experiment.

As you can see it is interactive and moving smoothly and there is no Flash, just HTML5 and Javascript. There are three files at work here: the index.html page, the easeljs.js file and the Circles.js file.

Get the files / view the code here:
http://www.christiankragh.com/HTML5/circles/index.html
http://www.christiankragh.com/HTML5/circles/Circles.js

The EaselJS file is the main CreateJS library that we reference and pull in from a hosted location using the script call line in the HTML file.

The Circles.js file was exported from Flash CS6 using the export for CreateJS toolkit – an add-on you can download for free at Adobe.com for Flash CS5.5 and above. This file creates, references and instantiates our graphics to be used on the canvas.

Then in the index.html file, a simple page is set up when we export from Flash – there’s the initial HTML page set up, the script references, and the instantiation of the canvas. From here we use Javascript as we would ActionScript and make a function that adds mouse over and mouse out listeners and functions. The tick() function is like the onEnterFrame function in ActionScript so that’s where we add the movement of the circles.

This is a very short and simple example, but it shows that you can have excellent interaction and produce it all with HTML5 and Javascript; no Flash player necessary.

For a more in depth tutorial and introduction to CreateJS, check out Lee Brimelow’s video tutorial on gotoandlearn.com

CK Showcase Reel – Flash Development and After Effects work

Here is a little sample reel I’ve put together with some of my Flash web development work, including some games, as well as some of my After Effects work.

Please view in 720p!

Motion Graphics!

I have been working on some motion graphic projects and getting into learning After Effects. A reel will be available for viewing in the following few months..

Please view in 720p!

Flash Video Tutorial #2: Dynamic MovieClips

This video tutorial shows you how to create dynamic movieclips in Flash with ActionScript3 (AS3). I take you through scenarios of quickly creating multiple movieclips from your library, for use in games or menus. I also show you how to look up anything AS3 in the online live docs (AS3 documentation). Sorry about the video quality; next time it will be in HD.

Flash Video Tutorial #2: Dynamic MovieClips from Christian Kragh on Vimeo.

Flash Video Tutorial #1: Collision Detection (hitTestObject)

Sorry about the audio quality (but video quality is great – press the fullscreen button to view large) and the fact there are 2 parts, I will try to find a better program to record screen captures but for now I hope you find this tutorial helpful. More video tutorials to come!

Part 1:

Part 2:

Now taking requests!

Hi everyone,
Please let me know if you would like me to post a tutorial on a specific subject, create a specific type of stock Flash file, case study one of my projects or files, or any suggestions you have for a new Flash game you would like to see made, or even to discuss and shed some light on a Flash subject that has been eluding your grasp.
Please email me at ckragh[at]gmail[dot]com or just leave a comment here.
Thanks,

Flash games have a home! Come play!

My Flash games now have a page devoted to them at ChristianKragh/games/ – please come and try out some of the games!

Currently, there are 3 games online:
> Cotton Clouds
> Ultimate Pong
> Collect The Falling Apples

And in early November there will be a new addition, Archer, as well as many more to come!

Flash games in production!

I’ve started developing Flash games to sell on ActiveDen and have 3 new ones up so far! You can play them all you want there and if you like, buy them for your own site, edit them or learn from them! I plan to have many more games uploaded in the next few weeks. Keep updated on my Twitter page for immediate updates on new files. I’m also thinking of creating a sub page with all my games for everyone to enjoy…

Music loops by ChristianKragh

Once in a while I create music loops, here is a player featuring my newest files on AudioJungle that you can purchase for use on your website or anything else!

Coke cans / product viewer experiment

I was just messing around with some transparent PNG images of coke cans trying to make a cool product viewer of some sort and this is what I came up with. You could add tooltips to make a proper product viewer but I’m thinking of some kind of click a product and more information is shown for that product scenario, maybe have the products moving somehow..