When working with Flash video I always end up using extra time finishing a project. This is mainly because I get these project not so often. So everytime I have to create video content I have to brush up my as3 video skills.

In this posts I will point out a few pitfalls when doing a Flash as3 movie project.

Decide where the videocontent is placed

This is handy to know beforehand. It saves a lot of time and effort to do it first time right. Are you going to progressively download the movie or is it streaming? Does it come from a flash mediaserver? Know what you are working with before you start.

Create a prototype

Start with creating a prototype so you know the pitfalls. And you know the steps to recreate the experience. Afterwards you can tweak layout, performance etc.

When using Cue Points

Make sure you export your movie as .flv. F4v doesn’t support cue points. Cue points are a feature of the FLV video container format. FLV is a proprietary format developed specifically to complement Adobe Flash.

Cue Point code

Handling cuepoints in ActionSctipt3 is easy once you know the drill. One of the simplest methods is to create a simple Object which processes the onCuePoint and onMetaData event handlers in ActionScript 3.0. You can see an example of this in the following code:

var customClient:Object = new Object();
customClient.onCuePoint = cuePointHandler;
customClient.onMetaData = metaDataHandler;

var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = customClient;
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

function cuePointHandler(infoObject:Object):void
{
    trace("cuePoint");
}
function metaDataHandler(infoObject:Object):void
{
    trace("metaData");
}

Or you can create a CustomClient class which handles the meta data and cuepoints.

package
{
	public class CustomClient
	{
		public function onMetaData(info:Object):void
		{
			trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
		}
		public function onCuePoint(info:Object):void
		{
			trace("cuepoint: time=" + info.time + " name=" + info.name + " type=" + info.type);
		}
	}
}

These are the basics to start embedding video content.

Other resources

• How to Use Flash Video (FLV) Cue Points – David Stiller
• Playing back flv with actions – Peter Haan
• Adobe Help

Edit a Photoshop scripting jsx file to export each layer as seperate file, with the layername as filename.

Today I needed to export every layer in a photoshop document as files. Photoshop has a default script for this. You can find it here: file -> scripts -> Export Layers to Files.

The only drawback is that the filename is composed from a prefix + number + layer name. And I want only the layername. What we have to do is edit the “Export Layers to Files.jsx” file. This is a javascript file that we can edit.

• mac: /Applications/Adobe/Adobe\ Photoshop\ CS4/Presets/Scripts/
• win: C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts

Then open the file and search for “fileNameBody +=” and edit:

var fileNameBody = fileNamePrefix;
fileNameBody += "_" + zeroSuppress(i, 4);
fileNameBody += "_" + layerName;

to:

var fileNameBody = fileNamePrefix;
fileNameBody += layerName;

You have to make sure there are no duplicate layernames otherwise the script will overwrite these files. If you don’t want to edit this file you can download my version.

Here are some exmples for conditional comments for Internet Explorer.

Conditional comments only work in Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0 and higher.

I put them up mainly for reference

<!--[if IE]>
This is Internet Explorer
<![endif]-->

<!--[if IE 5]>
This is Internet Explorer 5
<![endif]-->

<!--[if IE 5.0]>
This is Internet Explorer 5.0
<![endif]-->

<!--[if IE 5.5]>
This is Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
This is Internet Explorer 6
<![endif]-->

<!--[if IE 7]>
This is Internet Explorer 7
<![endif]-->

<!--[if gte IE 5]>
This is Internet Explorer 5 and higher
<![endif]-->

<!--[if lt IE 6]>
This is Internet Explorer lower than 6
<![endif]-->

<!--[if lte IE 5.5]>
This is Internet Explorer 5.5 or lower
<![endif]-->

<!--[if gt IE 6]>
This is Internet Explorer 6 or higher
<![endif]-->

Earlier this year I posted about google’s API playground. Since June last year there is also a HTML5ROCKS playground with numerous Javascript, CSS3 and HTML5 examples.

Here are the direct links:

HTML5

• Audio Tag
• Video Tag
• Canvas Tag
• Canvas Tag 3d WebGL (you’ll need a webgl capable browser, most nightly build FF, Chrome support this feature)

CSS3

• Web fonts
• 2d Transforms
• Text Stroke
• Transitions
• Animations

This blog also uses some css3 styles like gradients, rounded corners and box shadow.

Last week I had to download a lot of images.. I wasn’t in the mood for a clicking spree so I decided to script the download proces using php and xml. I chose XML because all images where already in an XML file, it could have been .csv (comma separated values) exported from excel as well.

If you are planning to download very many files you may want to check php set_time_limit value.

Start by creating a folder structure, this usually works for me:
project-name
|-input -> here the xml
|-output -> the downloaded images (make sure you (chmod 0777) this folder

My XML:

<?xml version="1.0" encoding="UTF-8"?>
    <items>
        <item>
            <image>http://www.path-to-some.com/image.gif</image>
        </item>
        <item>
            <image>http://www.path-to-some.com/image.gif</image>
        </item>
        <item>
            <image>http://www.path-to-some.com/image.gif</image>
        </item>
<items>

PHP:
For some strange reason I can’t use fopen, fclose and fwrite in my post, so be careful when copy-pasting the code to remove the whitespace. My hosting provider changed some settings and now I’m able to use fopen() etc. again.

<?php // get files from XML getImagesFromXML("input/images.xml"); function getImagesFromXML($xmlurl) {     $input = file_get_contents($xmlurl);     $xml = new SimpleXMLElement($input);     foreach($xml--->item as $v)
    {
        $url =  $v-&gt;image;
        $tmp = explode("/", $url);
        save($url, end($tmp), "output/");
    }

}

function save($image_location, $file_name, $save_folder)
{
	$contents = file_get_contents($image_location);
	list($version, $status_code, $msg) = explode(' ', $http_response_header[0], 3);

	// Check the HTTP Status code
	switch($status_code)
	{
		case 200:
		    // Everything alright download file
			$target_file = $save_folder . $file_name;

			// Check if file already exists
			if (file_exists($target_file))
			{
                            echo "The file $target_file exists
";
                        }
                        else
                        {
                            echo "The file $target_file does not exist
";
                            $fp = fopen ( $target_file, 'w' );
                			fwrite ( $fp, $contents );
                			fclose ( $fp );
                			return $target_file;
                        }

			break;
		case 503:
		case 403:
		case 400:
		default:
			return false;
	}
}
?>

getImagesFromXML:
Line 3: Calls the getImagesFromXML function with the created XML.
Line 5/6: Gets the content from the xml and creates a SimpleXMLElement
Line 8: Loops through the XML parsing the url out
Line 9/10: Creates an array from the url string. The image name can be extracted by taking the last slice in the array e.g. end($tmp);
line 11: Puts the location, name and folder in the save function

save:
Line 21: fetches the image
Line 22: Gets the statuscode from the http_response_header
Line 25: Switch on statuscodes (200 ok)
Line 32: Check if the file already exists
Line 38/42: Saves the image to the local filesystem

That’s it! Happy coding.

For a recent project I had to create a bunch of icons. Instead of slicing every icon by hand I am using CSS sprites. Which is essetially a big optimized image with a lot of smaller images in it. Sprites are frequently used for performance optimisation, together with caching and minifying css, javascript and html.

In this tutorial I’m creating the icons used for this top navigation bar.

I got the icons from http://www.freeiconsdownload.com/Free_Downloads.asp?id=265.

Step 1

Get the icons open photoshop, select the ones you like and put them behind each other. When finished save them as sprite.png without a background to keep ‘m transparent. Here is mine:

Step 2

Fire up your favourite editor and maybe use zen-coding to quickly generate the markup for the icons.

/*
 Zen coding style
*/
div#icon-holder>span.icon.home+span.icon.articles+span.icon.tools+span.icon.tutorials

<div id="icon-holder">
    <span class="icon home"></span>
    <span class="icon articles"></span>
    <span class="icon tools"></span>
    <span class="icon tutorials"></span>
</div>

Step 3

Then create the css for the icon class:

/*
	CSS for generic .icon
*/
.icon {
	background: url('images/sprite.png') no-repeat scroll 0 0 transparent;
	width:60px;
	height:65px;
}

/*
	Then for specific .home etc.
*/
.home {
	background-position: 0 0;
}
.articles {
	background-position:-250px 0px;
}
.tools {
	background-position: -220px 0;
}
.tutorials {
	background-position: -90px 0;
}

That’s it! You can also use it for list items etc.

Here are some links to handy resources on the web:

• CSS spriting tips from mozilla
• CSS Sprites Tutorial
• CSS Sprite Generator

A new version of jQuery is out, version 1.4.4. Check out the jQuery site to download this minor update. See the release notes for more info.

Some new functionality is available such as fadeToggle().

Unobtrusive JavaScript allows developers to write code much more easier to maintain and debug, with the appropriate use of design patterns and high-quality development techniques.

From Wikipedia:“Unobtrusive JavaScript” is a general approach to the use of JavaScript in web pages. Though the term is not formally defined, its basic principles are generally understood to include:

• Separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation
• Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
• Progressive enhancement to support user agents that may not support advanced JavaScript functionality

Benefits of unobtrusive javascript:

• Separation of the behavior from the markup (as happened for CSS with the separation of the presentation from the markup)
• Reusable code (both HTML and JavaScript code)
• Progressive enhancement
• Capability detection and gracefully degradation, as the opposite of browser detection. You can easily skip an entire JavaScript fragment if the current browser doesn’t support it or likewise use the JavaScript to replace features not natively supported (such as HTML 5 features).
• Better cache support

Below some links for “javascript best practices”:

• http://www.javascripttoolbox.com/bestpractices/
• http://dev.opera.com/articles/view/javascript-best-practices/
• http://stackoverflow.com/questions/39691/javascript-best-practices

One of the best practices I often use is the “module patern”, you can have a public alias for a function (init or change):

myNameSpace = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
  return{
    init:init,
    change:change
  }
}();

Today I installed the air for android runtime. This afternoon going to make my first Android Air App.

Think I’ll create a Hello world app first. Saw some realy nice tutorials on this by Lee Brimmelow. Check out his site for some video tutorials about Air on Android.

I’ll update this post with the source of my first app.

[update]
My collegue Davie Schoots just installed the flashbuilder 4 beta for mac. I’ll ask if he wants to share some knowledge about setting up the dev environment.
Keep you posted.

[update]
Been busy for sometime setting up the dev environment. I’m using intelij10 with ant scripting for building and deploying the app to the emulator/phone. For more info checkout the links. Make sure you install the Android SDK. Then download the Flex Hero SDK. Download/install Intelij 10 then create a new Flex project. For deploying to your phone I’m going with antpile or follow this tutorial.

Links:

• Flex 4.5 Hero SDK with flash develop
• Package an air file with ant
• Android Air Development with FDT
• Introduction to antpile
• AntPile on github

Last week I finally received my AppInventor access. Didn’t have time to check it tho. Tommorrow I’ll be hacking my first app using this site.

Ill let you know what I discovered and maybe post some code too.

[update]
Did follow some nice tutorials on the appinventor page. It was good to see it was working quite nice. However I’m missing some control in creating a userinterface. It’s nice to quickly prototype/check ideas.