Is Good Stuff » Tutorials

HTML5 : FREE Cloud Carousel

Alex T. — Thu, 09 Feb 2012 12:57:37 +0000

Previously I’ve wrote before about an article about flash based carousel here. Today I’m gonna share and write about carousel again, but not the flash version this is html5 canvas combo with jquery version. Check out the beautiful carousel picture below, click to run the demo. It runs smoothly on all major browser and has a cool fallback support in case javascript is turned off. Such a beautiful expression of art written in latest cutting edge tech…all good!

The carousel above is called Cloud Carousel written by Prof Cloud. Below are some example on how to implement this carousel.


 Cloud Carousel
 
 
 
 

 

 
 
 
        
        
	
	
	
	
 
    <
    >

Well that’s it for today. If you want to take a look on my demo in source file.

Download Here

HTML5: Keyboard Controls & Update Loop (enterFramer)

Alex T. — Mon, 30 Jan 2012 01:28:18 +0000

Hiya folks, I’m back for more html5 goodies. Today i’m gonna focus more on how to script a simple keyboard control and how we make our update loop (for those coming from AS3 background, this is how we do our enterFrame). Let’s move on.

Before we start, I would like to emphasize again scripting in html5 has always been with data and render done separately. Meaning, you write objects to contain it’s x and y value and compute it’s movement every updateCycle before rendering it into canvas. Check out the demo here.

Below is my enterFrame Util js (this is a update loop js). You can use it for all your project. In fact, it also comes with a cool fps counter for benchmarking; all you need to do is to pass in the div id parameter for it’s output. We use update loop cycle to check in runtime, changes that happen to the objects in canvas, for example, update of movement and etc.

Enterframe.js

var enterFrame = function(){
	// To Use this enterFrame Utility just include into script src.
	// Then, use enterFrame.init( callBackFunction );
	// where callbackFunction is the function that will cycle update.
	// e.g.
 
	// enterFrame.init(60, handleEnterFrame);
	// function handleEnterFrame(){
	//      // This function runs at default 60 FrameRate
	//      // You can also use getFPS here since, it requires
	//      // an constant update cycle.
	// }
    return {};
}
 
enterFrame = function(){
	var myFrameRate = 60;
	var intervalTime = 1000/myFrameRate;
	var lastTime = new Date();
	var frameCount = 0;
	var intervalTimer;
	var myCallbackFunc;
 
	function ENTERFRAME(){
		return myCallbackFunc.call();
	}
 
	function calcFPS(){
		var nowTime = new Date();
		var diffTime = Math.ceil((nowTime.getTime() - lastTime.getTime()));
		var fps = myFrameRate;
 
		if (diffTime &gt;= 1000) {
			fps = frameCount;
			frameCount = 0.0;
			lastTime = nowTime;
		}
 
		return frameCount++;
	}
 
	return {
		init:function(arg1, arg2) {
			if(arguments.length === 2){
				//Arguements checker:if pass in two, use arg1 as framerate override 
				// and arg2 as callback function
				this.setFrameRate( arg1 );
				myCallbackFunc = arg2;
			} else {
				//Arguements checker:if pass in only one, use arg1 as callback function
				this.setFrameRate( 60 );
				myCallbackFunc = arg1;
			}
 
			intervalTimer = setInterval(ENTERFRAME, intervalTime );
 
		},
 
		clear:function(){
			clearInterval( intervalTimer );
		},
 
		setFrameRate:function(value){
			myFrameRate = value;
		},
 
		getFPS:function(divName){
			// Must be used within callback function of EnterFrame.
			return divName.innerHTML = "FPS Counter : " + calcFPS();
		}
 
	}
}();

And let’s look at the main html and how we intend to use it today alongside with key controls. Always try to located the middle registration point of the object you are about to draw in canvas. It is useful for positioning and animation wise. You also will need to clear the canvas content every update cycle loop (in other words every enterFrame). See codes below.

index.html




	
	Sample App HTML5 One - Using Canvas and Filters
	
	
	
	
	
	


	
		Canvas Update Cycle

Here are the default.css for the html.

default.css

/**************************** HTML 5 RESET **************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/**************************** HTML 5 RESET **************************/
.label15Arial {
	font-family:Arial;
	color:#fff;
	font-size:16pt;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	padding-top:10px;
	text-align:center;
}
 
.titleBar {
	background-image: linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -o-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	width:100%;
	height:45px;
}
 
.borderContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:320px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.controlsContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:50px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.label1 {
	font-family:Arial;
	color:#000;
	font-size:14px;
	margin-top:15px;
	margin-left:15px;
	width:255px;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	float:left;
}
 
.buttons {
	-moz-border-radius: 6px;
	border-radius: 6px;
	width:300px;
	background:#fff;
	height:30px;
	margin-top:15px;
	color:#000;
}
 
#canvas {
	-moz-border-radius: 6px;
	border-radius: 6px;
	background:#990000;
}

Hope you enjoy this code samples. Don’t forget to try out the demo here.
For today’s source code.

Download Here

HTML5 : Canvas Image Manipulation Tutorial

Alex T. — Thu, 05 Jan 2012 10:53:20 +0000

Today, I’m sharing with you a little on Image manipulation using Canvas. Since it’s already 2012, I figured it’s time to write more on my HTML5 stuff. As you already know by now, one of the most powerful and interactive element in html5 is none other than the Canvas. Rather, than blogging about theory of what html5 is and what’s the new tag blah blah…I’m just gonna make a simple project out of it – a straight forward implementation. So today’s tutorial, I will be covering the followings :-

Loading an image into the canvas
Image blurring effect – using an External Library (StackBlur.js)
Image rotation – pure html5 canvas programming
Little on CSS3 - a little on the border radius stuff, gradient stuff.
Slider element of HTML5. – pure html5 usage of input type=”range” (yes, No more JQueryUI and loading lots of js files – just for one slider)

First of you might wanna have a look at the demo I’ve prepared in advance here. You may also download the entire tutorial below.

Download Here

Ok, first let’s look html code itself. Like all standard html5 page, the standard doctype must be declared prior to anything. Click on the button to load an image into the canvas which is the white box with rounded borders in the center of the html page. Try playing around with the sliders. Apply blur effect and the rotation.




	
	Sample App HTML5 One - Using Canvas and Filters
	
	
	
	
	
	


	
		Sample App With Canvas

	
 
	
	
		Blur Range
		
 
		Rotation

Take a look how the canvas is implemented, just a simple and clean tag isn’t it sweet ? Notice, in canvas programming, you must always remember, to “represent” an object e.g. image in our case, everything must be done in data abstraction in the memory – then render to display. Like the case of rotation (see line 48).

The canvas content is cleared,
New angle is calculated,
The coordinates is translated
Image object is rotated in memory
Image object is redrawn into the canvas

Every time a rotation slider value is changed. Well, the rest you can read up and experiment more by tweaking my codes in the source to find out more. We now take a look at the CSS file. By the way, I generate my gradient here

/**************************** HTML 5 RESET **************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/**************************** HTML 5 RESET **************************/
.label15Arial {
	font-family:Arial;
	color:#fff;
	font-size:16pt;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	padding-top:10px;
	text-align:center;
}
 
.titleBar {
        // Here is the cool gradient stuff - use generator http://gradients.glrzad.com/
	background-image: linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -o-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	width:100%;
	height:45px;
}
 
.borderContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:320px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.controlsContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:120px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.range1 {
	margin-top:15px;
	width:280px;
	float:left;
}
 
.range1label {
	font-family:Arial;
	color:#000;
	font-size:14px;
	margin-top:15px;
	margin-left:15px;
	width:105px;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	float:left;
}
 
.range2 {
	margin-top:15px;
	width:280px;
	float:left;
}
 
.range2label {
	font-family:Arial;
	color:#000;
	font-size:14px;
	margin-top:15px;
	margin-left:15px;
	width:105px;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	float:left;
}
 
.buttons {
	-moz-border-radius: 6px;
	border-radius: 6px;
	width:300px;
	background:#fff;
	height:30px;
	margin-top:15px;
	color:#000;
}
 
#canvas {
        // Just two lines for cool border radius, no more IE hack or using Image, then abusing of divs 
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Note of warning :Things you should know about canvas. For some apparent reason, try not to style / css width and height of the canvas element. Instead using the attribute of width and height on to the tag itself. Reason being, some browsers will render the content scale weirdly. This information is accurate to date of the post. This issue might be fix in near future.

That’s it for today sharing. Oh yeah and Happy New Year 2012.

Titanium Appcelerator – Snippets Tutorial

Alex T. — Wed, 21 Dec 2011 00:02:55 +0000

Today, I’m gonna write a short tutorial on how to write your own snippet using Titanium Appcelerator. What are snippets you say? Well a code snippet is a programming term for a small region of re-usable source code, machinecode or text. Normally snippets when defined into an IDE or editor (thats supports em) will appear in autocompletion / auto assist when users are typing in a snippet like trigger word. For example, if you have a snippet that triggers from the word “info”, just by typing info, the auto assist popup will appear suggesting user to use the code snippet.

Snippets are very useful and should always be shared or placed in a common and centralized place like dropbox, somewhere in the net I find it easier to access as I travel from workplace to another. Not only this improves your coding speed but also improves your quality output by reducing error made in typos and such. I have a general rule of making a snippet, if the code is so useful and you find yourself repeatingly using it.. then, please code it into a snippet bundle.

Titanium Appcelerator is an IDE modified fork from the IDE called Aptana IDE. They both support ruby like bundle as their snippet programming language. For those using Aptana IDE, I think this tutorial works for that IDE as well. To write snippet bundle scripts, one needs to learn a little bit of ruby code. Don’t worry is not that hard only a few lines to get things done – in fact you can just copy paste code from here then modify the parameters if you like. Some important note to remember before starting…

First off, we need to know how Titanium Appcelerator accesses it Snippet Bundle Source File. It is always located at your Users /documents/Aptana Rubles/ folder. This folder will be created once, you installed Titanium Appcelerator.
You also need to enable the bundle Viewer. This allows you to check to see if your snippet bundle is successfully “recognized” by the IDE and that there’s no error in the lines of code which prevents the snippet from triggering. Follow steps below to enable the Viewer.

Go to Window > Show View > Other…
Expand the Studio category
Select the Bundles item
A view appears showing all currently loaded bundles
You should see the bundle with the name you gave above in the list
For detailed information on selected items in the Bundles View, go to Window > Show View > Other…
Expand the General category
Select the Properties item
A view appears showing detailed information on your Bundles View selection
If your bundle has an error, you should see output in the Console view.

Next just Create a folder, in /documents/Aptana Rubles/ , and a ruby file called bundle.rb inside this folder.

Start by adding this code to your bundle.rb file. Code below shows, the “definition of your snippet group”. Notice, that once you save your file, it will appear somewhere in the bundle viewer, (sorted in alphabetical order).

require 'ruble'
 
bundle do |bundle|
  bundle.display_name = 'My Snippets'
end

Next, let’s add the code Titanium.API.info(something) into our snippet, since we also use that for displaying stuff in console.

snippet "API Info" do |snip|
  snip.trigger = "API.info"
  snip.expansion = "Titanium.API.info(${1:variable});"
end

snip.trigger, is what the IDE is constantly looking for to trigger this snippet. In my case, I wanted the snippet to appear once, I type API.info.
snip.expansion is where all your actual snippet code will be.Notice I added ${} into the code, this means to place the cursor within after inserting, and 1:variable the word “variable” can be anything you defined it to be, is just for your reference and it will appear in code assist and the number 1 means is expecting 1st input, if there’s more than one, just add in another number, the IDE will jump from another variable input to another after user hits enter. However these are optional and most of the snippets doesn’t even need an input parameter assist.
To add new snippet simply, add copy paste the snippet “API Info” do… to end line to a new line and modify from there
Last thing you should know about snippet is that, sometimes, they failed to load and this may due to cache file corrupted. This cache is created automatically, by IDE. To clear the cache of the snippet file, just move the cache.yml to the trash and relaunch the IDE.

I hope this tutorial helps you titanium developers out there, to speed up your development to at least 3 fold haha as it did to mine. CODE STRONG! Happy holidays and have a great year ahead!

AS3 Implementing Keyboard Controls

Alex T. — Mon, 05 Dec 2011 07:35:13 +0000

Today we will cover the topic on having a keyboard controls in AS3. This is an important element in game and interactive programming involving keyboard as input.

Like usual, below is a sample demo of my flash embedded. Try using arrow keys and spacebar. Watch the blue box move according to your controls. If the screen is too small, try click on the flash below to start.

Below are the source code and sample on how keyboard listeners are used in AS3.

Main.as

package 
{
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
 
	/********************************************************************
	* Description : This is the main document Class file.
	* @author Alex T.
	 ********************************************************************/
	public class  Main extends MovieClip
	{
		public var mcCursor:MovieClip;
		public var MCCURSOR_X:int = 150;
		public var MCCURSOR_Y:int = 150;
 
		public function Main( ) {
			resetCursorPosition();
			// Attaching stage keyListeners to listen to keyboard input 
			stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown );
		}
 
		private function handleKeyDown( event:KeyboardEvent ):void {
			// This is where we handle what to do when there's an input
                        // event.keyCode returns a keyCode of the particular keyboard key.
			// trace( "KeyCode received : " + event.keyCode ) ;
			switch (event.keyCode) {
				case 32:
					      // Spacebar is pressed. Enables recentering.
					      resetCursorPosition();
				break;
 
				case 37:
					      // key left
                                              mcCursor.x = mcCursor.x - 2;
				break;
 
				case 38:
					      // key up   	
                                              mcCursor.y = mcCursor.y - 2;
				break;
 
				case 39:
                                              // key right						
                                              mcCursor.x = mcCursor.x + 2;
				break;
 
				case 40:
					      // key down						
                                              mcCursor.y = mcCursor.y + 2;
				break;
			}
		}
 
		private function resetCursorPosition():void {
			mcCursor.x = MCCURSOR_X;
			mcCursor.y = MCCURSOR_Y;
		}
	}
}

Today’s source code tutorial downloadable below.

Download Here

AS3 Using Custom Event – dispatchEvent

Alex T. — Tue, 22 Nov 2011 02:04:38 +0000

Sometimes, we want a particular class to do something however, that task requires time to complete (e.g. loading XML or list of images remotely) and some process still awaits a form of “signal” to proceed. Pretty much like the real life shown in picture below.

See sample demo below. It’s a simple rss Reader that reads feed from CNN. Today’s sample is to show how a class can dispatch a custom event so that, the main class (which is listening to the customEvent) can trigger a specific function.

See source code below on how Main.as which listens to a customEvent called RSSReady and triggers a function when mcRSSContainer is done with loaded the data.

Main.as

package  
{
	import flash.display.MovieClip;
	/********************************************************************
	 * Description : This is the main document root file.
	 * @author Alex T.
	 ********************************************************************/
	public class Main extends MovieClip
	{
		public var mcPreloader : MovieClip;
		public var mcRSSContainer:MovieClip;
 
		public function Main() 
		{
			trace("init!") ;
			mcPreloader.visible = true;
			// Since, mcRSSContainer is the stage object of the class, 
			// we attach the listener here.This behaviour is similar to a doctor 
			// placing a stethoscope on your body to listen for heartbeat.
			// listening for the RSSReady customEvent to be dispatch.
			mcRSSContainer.addEventListener("RSSReady", handleRSSReady);
		}
 
		private function handleRSSReady(event):void {
			mcPreloader.visible = false;
		}
	}
}

mcRSSContainer.as

package com.isgoodstuff 
{
	import fl.controls.List;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.FileReferenceList;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	/********************************************************************
	* Description : This is mcRSSContainer Class. 
	* Contains a ListBox component. This class will load RSS using 
	* a URLLoader and then once loaded, sends a customEvent  or 
	* (dispatchEvent) which the Main is listening to, in order to hide 
	* mcPreloader.
	* @author Alex T.
	********************************************************************/
	public class mcRSSContainer extends MovieClip
	{
		public var listBox:List;
		public var rssLoader:URLLoader = new URLLoader();
		public var rssXML:XML = new XML();
		public function mcRSSContainer() 
		{
			trace("mcRSSContainer successfully initiatialize");
			startLoadingRSS();
		}
 
		private function startLoadingRSS():void {
			var rssURL:URLRequest =  new URLRequest("http://rss.cnn.com/rss/edition.rss");
			rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
			rssLoader.load(rssURL);
		}
 
		private function rssLoaded(event):void {
			rssXML.ignoreWhitespace = true;
			rssXML = XML(rssLoader.data);
			for(var item:String in rssXML.channel.item) {
				listBox.addItem( {label: rssXML.channel.item[item].title } );
			}
			// This means the class has done all the RSS loading. Now we need to send a custom
			// Event (dispatchEvent) like a shout to other classes listening that data is ready.
			// The string RSSReady can be any other custom Event name you wanted. Just
			// Make sure when attaching listener has to "listen For" the particular string event.
			// Now see the mcRSSContainer.addEventListener("RSSReady", handleRSSReady); 
			// under Main.as
			dispatchEvent( new Event("RSSReady") );
		}
	}
 
}

For today’s tutorial click the link below.

Download Here