Do you live in Switzerland?
Are you up for a great hands on session with Ryan Stewart and Mihai Corlan? Then you shouldn’t miss the Adobe Flex Mobile Tour 2011

You can register here, right now for a limited seat, so don’t miss the chance:

Hang on you don’t live in Switzerland but in another European Country? Don’t worry Ryan Stewart and Mihai Corlan will be travelling around Europe to show the latest greatest features of Flex for Mobile Devices. Mihai posted a tour list on his blog: http://corlan.org/2011/10/27/flex-mobile-european-tour-2011/

Don’t miss the great opportunity!

Two weeks ago me and my fellow co-workers have started our company blog which can be reached at
http://blog.publicis-modem.ch every open source initiative, project or library that we create will be published there.
I might do a cross link to a blog post or even write a little more about it, but I think you should keep an eye over there aswell, we already released two opensource projects (wallaGo and AS3Square) and there is more to come soon, so stay tuned for some fresh content and don’t forget to bookmark a new fresh blog.

You can download Vinayaka directly from the projects page. Just follow this link:
http://wiki.six4rty.ch/doku.php?id=vinayaka

If you get hold of any bugs or issues, please follow the issues link and fill out a bug, I will try to fix it as soon as I can.
Feel free to post a comment, if you think this application is helpful or could be improved.

Ok, I’ve done enough projects to be more then fed up with how the font embedding in pure AS3 and Flex projects work.
Not that long ago, I came up with the idea of creating a small utility that could speed up development time especially during the process of importing fonts for use in our projects. As you may know if you are a FDT4 user, they as well released a similar solution to the one I’m giving you now, I’m pretty sure their solution is great and since it’s integrated it’s a big plus, but as I’m not an FDT user (maybe one day) I had to search for another solution.

The first step towards that solution was actually creating the small app posted on my blog called the UnicodeFinder. Parts of the code have also been implemented in this new application. It’s simple but yet powerful, I present you Vinayaka(), an application that hopefully will solve all your font embedding problems in the future, it’s currently in an early stage, there is lot of room for improvement. If you have ideas or find any bugs, don’t forget to visit the Vinayaka’s GetSatisfaction page and leave your note.

First of all, the application can be downloaded as it is, I’m currently not providing any source code, why? Currently it’s a mess, I first need to clean up, refactor and document the code, until that is done, I would like to keep the code to myself, if you want to help me out extending or improving, then simply let me know by throwing me an email or by filling an issue on the Google Project page.

Currently Vinayaka only runs on Windows Systems, I’m publishing the OSX version in the course of the next days, so if you are a mac user please bare with me.

Very important:
I’ll be releasing Vinayaka to the public after my talk tomorrow at the SFUG until then no download version is available.
A specific Product page will also be setup during the next 2 days.

Download:
Please follow the Projects page for downloads and issue trackings.

Below some screenshots, so you at least know what is expecting you .

You bought an Android phone because you want to start developing a cool flash or AIR App for that device?
Or you just wondering how easy it is to develop an application for those target devices?

In the following series, I’m going to show you how to access those special properties that are available when developing for an Android or any other Flash / AIR powered device.

Today, we start with the Accelerometer API.

In this article I’m going to show you how to control a simple ball with the help of the accelerometer API. Clearly you could create a game like the well known Labyrinth available for the iOS or Teeter available on the HTC android devices very easy as soon as you know how to master the Accelerometer API.

Before we start just a heads up that you can follow this article even if you work with Flash CS5 although working with Flash Builder “Burrito” makes your life much easier.

To start let’s create a new Flash Builder “actionscript mobile project” called: “AccelerometerBall“.  Setup the project how you like it, just be sure that you enable full screen.

Now that you are ready to go we first check if an accelerometer is available, if none is available then it’s not worth of continuing the game, but if it’s available we add the sphere to the stage which we want to control. You can add whatever you want, i’m just using a simple sphere I created in Photoshop to be my indicator.

if ( Accelerometer.isSupported )
{
    _accelerometer = new Accelerometer();
    _accelerometer.addEventListener( AccelerometerEvent.UPDATE, onAccelUpdate );
 
    _sphere = new sphereClass();
    _sphere.scaleX = _sphere.scaleY = .2;
    addChild( _sphere );
 
    addEventListener(Event.ENTER_FRAME, moveSphere );
}
else
{
    //display message to user that accelerometer is not available
}

When you test the application at this point, you will not see your sphere unless your developer machine has an accelerometer in place, which I doubt

So to properly test it, you should debug your application on your mobile phone, now if you are on Flash CS5 you can use Device Central to simulate the normal behavior of  a mobile phone, Flash Builder “Burrito” users can deploy and debug directly from the Flash Builder Interface, to do that, just simply create a new Run configuration and setup as following.

When debugging the application on your phone you should now be able to see the sphere you placed in stage.

Next on let’s move on to the usage of the Accelerometer API.

To move our sphere, we simply need to take the accelerometers x & y event, have a look at the code below:

protected function onAccelUpdate( event:AccelerometerEvent ):void
{
     _targetX = event.accelerationX * _factor;
     _targetY = event.accelerationY * _factor;
}
 
protected function moveSphere(event:Event):void
{
      _sphere.x -= _targetX;
      _sphere.y += _targetY;
}

If you now test your applcation on your device or in Device Central you should see your sphere moving around on your screen.
As you see every time an update of accelerometer is being dispatched the new position is being saved in the _targetX & _targetY variable, thanks to the EnterFrame we move our sphere around the stage.

Here the complete code for you to review:

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.AccelerometerEvent;
	import flash.events.Event;
	import flash.sensors.Accelerometer;
 
	public class AcceleroBall extends Sprite
	{
		[Embed(source="sphere.png")]
		private var sphereClass:Class;
 
		private var _sphere			:Bitmap;
		private var _factor			:uint			= 50;
 
		private var _accelerometer		:Accelerometer;
		private var _targetX			:Number;
		private var _targetY			:Number;
 
		public function AcceleroBall()
		{
			setup();
		}
 
		protected function setup():void
		{
			if ( Accelerometer.isSupported )
			{
				_accelerometer = new Accelerometer();
				_accelerometer.addEventListener( AccelerometerEvent.UPDATE, onAccelUpdate );
 
				_sphere = new sphereClass();
				_sphere.scaleX = _sphere.scaleY = .2;
				addChild( _sphere );
 
				addEventListener(Event.ENTER_FRAME, moveSphere );
			}
			else
			{
				//display message to user that accelerometer is not available
			}
		}
 
		protected function onAccelUpdate( event:AccelerometerEvent ):void
		{
			_targetX = event.accelerationX * _factor;
			_targetY = event.accelerationY * _factor;
		}
 
		protected function moveSphere(event:Event):void
		{
			_sphere.x -= _targetX;
			_sphere.y += _targetY;
		}
	}
}

Now it’s up on you to create the boundaries, some holes on the floor, and there you go you have your first Flash Game.

If you have questions, don’t hesitate to comment on this post.

I’ve been lately working on a Multitouch Kiosk Project, in the upcoming days, I’ll be posting some of the quick hints I think they are worth sharing, some of them are simply good to know, others are braintwisting challenges I faced during the development.

Today, I would like to show you how to suppress certain Keyboard Events, let’s say you setup a kiosk application where the keyboard has to stay attached to the computer and available to the users, there are two ways you can prevent the application to be closed by a kiosk visitor:

A) You take hammer and hit the ESC key out of the keyboard
B) You write a simple small function that will take care of it.

I know I know option A is more fun, but we prefer going with option B.

So let’s have a look what we need to do:
1. As soon as our application starts we need to tell our application to go full screen interactive and add an eventlistener for Event.CLOSE and KeyboardEvent.KEYDOWN.
2. When the user tries to exit the application by either trying a key combination or CMD+Q (Win: ALT+F4) these events will popup and do whatever you wrote in the callback, this is how it should look like:

addEventListener( KeyboardEvent.KEYDOWN, onKeyDown );
addEventListener( Event.CLOSING, onClose );
 
private function onKeyDown( e:KeyboardEvent ):void
{
      e.preventDefault();
}
 
private function onClose( e:Event ):void
{
      e.preventDefault();
}

Yep the magic happens with the preventDefault() method, as it says it prevents the default action to happen. Additionally you could assign an if statement to the onKeyDown event where you listen for a specific combination of keys so you can really close the application.

I’ve been lately working on a Multitouch Kiosk Project, in the upcoming days, I’ll be posting some of the quick hints I think they are worth sharing, some of them are simply good to know, others are braintwisting challenges I faced during the development.

To start off I would like to show you people how to go FullScreen on Startup of your application, before I show you how that works, let me tell you one very important thing:
Going fullscreen rightaway without any user interaction is ONLY available within Adobe AIR, don’t try this with a pure AS3 or a Flex Project as this will not work!

Why? Security! People visiting a website shouldn’t be capped by a website taking over the whole screen without them wanting to do so, in AIR you create an application that a user will need to install to be able to run it, therefore other security aspects.

Enough of gray theory, let’s have a look how to do this very complicated task

//default fullscreenmode
stage.displayState = StageDisplayState.FULL_SCREEN;
 
//fullscreen mode with interactivity
stage.displayState = StageDisplayState.FULLSCREEN_INTERACTIVE;
 
//going back to normal screen
stage.displayState = StageDisplayState.NORMAL;

Yep that is all you need, in a typical AIR Application you would add an EventListener to your application where when creation has been completed it should call up the method above.

Example of AS3 application:

public function myApp()
{
        stage.displayState = StageDisplayState.FULL_SCREEN;
	subs = gridSize-1;
 
	particles = new Vector.>();
	_attractions = new Vector.;
	s = new ParticleSystem(new Vector3D(0,0.2, 0), .01);
 
	_attractor = s.makeParticle( .8, new Vector3D(0,4,-0.2 ) );
 
	var tmp_bm:Bitmap = new Img() as Bitmap;
	texture = tmp_bm.bitmapData;
}

You are in need of a simple video player, iightweight and easy to use?
You think OSMF is too complicated, let me correct you and present you the LightVideoElement Class.

Simple to use, quickly up and running and all needed “basic” features available.
It’s even a default in OSMF, I actually wonder why no one has written about it yet, it’s really easy to use and you can do all the basic things with it that a videoplayer needs to support nowadays and on top of it, it’s only 10k when compiled.

I’ve been using it for the last 2 projects I’ve made, and I couldn’t be happier, let’s have a quick look on how to use it:

_mediaPlayerSprite		= new MediaPlayerSprite();
_mediaPlayerSprite.graphics.beginFill(0x000000, 1 );
_mediaPlayerSprite.graphics.drawRect(0,0,640,360);
_mediaPlayerSprite.graphics.endFill();
 
_videoElement			= new LightweightVideoElement();
_videoElement.resource		= new URLResource( "pathtoyourvideo.flv" );
_videoElement.smoothing		= true;
 
addChild( _mediaPlayerSprite );
_mediaPlayerSprite.media		= _videoElement;

That’s it, no I’m not joking this is really it, you don’t need anything else to simply play a video,  now you might be asking yourself, well that’s cool but how can I control the playback? It’ easy and very intuitive, basically you only need to access the mediaplayer instance which is integrated into the _mediaPlayerSprite, there all public methods like play, pause, stop, events and so on are available for you to use. take a look at some of the functions i implemented to be able to control videoplayback.

public function play():void
{
	_mediaPlayerSprite.mediaPlayer.play();
}
 
public function pause():void
{
	_mediaPlayerSprite.mediaPlayer.pause();
}
 
public function stop():void
{
	_mediaPlayerSprite.mediaPlayer.stop();
}
 
public function get currentTime():int
{
	return _mediaPlayerSprite.mediaPlayer.currentTime;
}
 
public function get videoDuration():int
{
	return _mediaPlayerSprite.mediaPlayer.duration;
}

See, simple, easy and lighting fast.
But keep in mind that the LightWeightVideoElement has limited support, you can play every kind of flash supported videos, you can do everything a basic player needs to do, but as soon you start using SerialElements, Parallel elements and so on, then you should switch back to the default setup.
As usual you can get all the information and documentation from the official OSMF site.

Just as a quick update, I’ve updated the previously created unicode finder app, to be a bit more helpful for the everyday usage.
Here a list of things that have been changed:

• No double unicodes.
• Automatic generation of embed code, easy for you to copy & paste directly into your application.

One thing that I can’t handle for you is to define the source of the font with it’s according fontname as defined in your system, but hey if I find a way around this, I will update it.

And again if you would like to play around with it, here the app. Have fun!

You might have read on one of my previous tweets, where I was screaming about using “special” characters in Flash, with “special” I mean arabic, cyrillic, hebrew, chinese simplified and traditional, as well japanese.

I know,  I know, there is TLF (Text Layout Framework) that handles the whole text, but I’m talking about embedding the font, did you knew that the complete chinese Unicode range helds something around 20’000 characters? You might think so what? Let me tell you that the complete chinese character range is over 7MB big!!! Do you really want to let your viewers download a 7MB file just for the font? No.

So I’ve created a quick app that will enable you to read out the UTF code from the text you need to use, with it you can specifically embed only the characters you need and take the file size down to a minimum. Now there is only a downside of this method, if the textual content changes a day, you need to again import the new characters.
Apart from that, I haven’t seen any bad things about this implementation.

At the end of this post you will find an useful small tool to get all the needed characters.

As an example below with this line you are embedding a font only containing numerals typing 1234567890 will give you a range from U+0030 to U+0039

Embed(source="font_file_name", fontName="font_name", mimeType="application/x-font-truetype", unicodeRange="U+0030-U+0039,U+002E")]

So let’s assume you would like to write this: “Nemusíte oči vidět, musíte vidění” which means “You don’t need eyes to see, you need vision” and only embed the needed characters, you would embed your font like this

Embed(source="font_file_name", fontName="font_name",  mimeType="application/x-font-truetype",  unicodeRange="U+004e, U+0065, U+006d, U+0075, U+0073, U+00ed, U+0074, U+0065, U+0020,  U+006f, U+010d, U+0069, U+0020, U+0076, U+0069, U+0064, U+011b, U+0074,  U+002c, U+0020, U+006d, U+0075, U+0073, U+00ed, U+0074, U+0065, U+0020,  U+0076, U+0069, U+0064, U+011b, U+006e, U+00ed")]

If you don’t know how to use this kind of font embedding, have a read here:

http://soledadpenades.com/2008/10/21/embedding-fonts-in-actionscript-3-using-flex-sdk/

Test ride it your self and have fun

After 4 years Tom Green and I just published our latest book, this time we are not talking about Flash & After Effects, rather the newest and coolest version since the history of Flash, Adobe’s Flash CS5. If you are just learning the ins and outs of flash, then this is a book you shouldn’t miss, lots of examples, code snippets, cool projects and even an Android game is being built.

Flash is one of the most engaging, innovative, and versatile technologies available—allowing the creation of anything from animated banners and simple cartoons, to Rich Internet Applications, interactive videos, and dynamic user interfaces for web sites, kiosks, devices, or DVDs. The possibilities are endless, and now it just got better.

Flash CS5 boasts a host of new features, including the much-anticipated iPhone application creation feature, a whole new animation engine enabling full manipulation of tweens and paths, custom easing, improved inverse kinematics, a revamped timeline, built-in 3D, and much more.

This book is all you’ll need to learn Flash CS5 from the ground up. If you already have Flash experience, this book will allow you to quickly catch up on all the cool new features. Flash experts Tom Green and Tiago Dias guide you step-by-step through all facets of Flash CS5, keeping the emphasis firmly on good design techniques that you use in your own projects.

• Learn Flash design from the ground up, or just get to grips with the new features, with a series of step-by-step tutorials.
• Provides an easy introduction to ActionScript 3.0 coding, but the focus is mainly kept on design.
• Learn from the experts—written by renowned Flash designers Tom Green and Tiago Dias.

What You’ll Learn

• How to create an iPhone application.
• The ins and outs of the Flash CS5 interface
• How to use all of Flash CS5′s essential features, such as text, graphics, and animation
• How to use video and sound effectively in Flash
• The fundamentals of Flash CS5’s new animation and timeline features
• The basics of ActionScript 3.0
• How to populate a Flash movie with dynamic data such as XML.

Who this book is for

This book is for both beginners who want a solid grounding in Flash CS5, and designers with previous Flash experience, who want to get up to speed with the new features.

Last week I had to do something that I never thought of, let me present you the case:

First of all we have a multiline, word-wrapped textfield in AS3, the text is picked up from an external XML file and gets styled with a CSS stylesheet, the textfield CAN have one line or multiple lines (depending on the translation and the language used), if the text is only an one-liner, the graphic (a simple small gray arrow) needs to be placed after the text in the middle of the first line, so you are able to visualize this, think about a standard <li> tag where you get the black dot, in my case just at the other side eg. at the end fo the line. have a look at the Example for a visual clarification what I want to achieve.

Basically a simple task, you grab the textlength add the gutter and margin to it and place the small arrow at that position.. but what do you do when the text goes multine and word wraps automatically?
After doing some experiments, I’ve came up with a simple yet appropriate solution for this.
Let’s start with a simple text field, containing some text and setup for multiline and wordwrapping.

var tf:TextField = new TextField();
tf.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
tf.width = 100;
tf.multiline = true;
tf.wordWrap = true;
addChild( tf );

This will display a simple textfield without any formatting with 5 lines of content. Why did I set a width value on my textfield? Well without it, the textfield would just be as wide as the text, resulting in a single line text, and that’s not what we want.

Now we create a simple square / dot / arrow whatever you like acting as a marker for the end of line, so you can visualize what’s happening, I’ve created a small rectangle like this:

var rect:Sprite = new Sprite();
rect.graphics.beginFill(0xff0000);
rect.graphics.drawRect(0,0,10, 2);
rect.graphics.endFill();
addChild( rect );

Simple rectangle, doesn’t need much of an explanation, maybe you asking yourself why I’ve set it at x & y 0? Although I could position the rectangle right at the proper position I always preferred to use the setters of it so I rather create all my shapes/graphs at 0,0 and move them with myShape.x = 100, it makes things more obvious to read and you find it much quicker then doing directly on the drawRect() method.

Next up let’s have a look at our class that returns the requested values.

public class StringUtil
{
	private static var _lastChar		:TextLineMetrics;
	private static var _x			:int;
	private static var _y			:int;
 
	private static var _gutter		:int = 2;
 
	public static function getEndOfLine( tf:TextField, line:int ):Point
	{
		_lastChar 	= tf.getLineMetrics(line);
		_x		= tf.x + _lastChar.width + _gutter;
		_y		= _lastChar.height * line  + _lastChar.ascent;
 
		return new Point( _x, _y );
	}
}

What we are doing here is rather simple then you think. First we pass the textfield and the desired line to our static function, then using the getLineMetrics() method we return the desired line’s metrics, this can now be used to set an x and y position of the to be returned Point(). as you see at the _x value, I’m just telling it to add the textfields x position to the width of the requested line, at the end we add the gutter value for the textfield.
The vertical position is another story, here we need to get the height of the desired line and multiply with it. this has the reason that there is no method available to get the proper y position of the line, so by multiplying the textheight with the desired line you get the proper y position of it. After that calculation we add the _lastCahr.ascent property of the line, asking what ascent? Take a look at the image below for more information about it but basically it’s just the length of the baseline to the top of the line height in pixels, so exactly the middle of our text.

Have a look at the image below for a nice and clean overview about the gutter of a flash textfield as well about the other properties a textfield has.

Something you should also be aware of is that the width of the text line is relative to the textfield width, but you need to subtract the gutter width of 4 pixels (2 pixels on each side ).

Now that our class is available let’s take a look at how I used it for this example.

var point:Point = StringUtil.getEndOfLine( tf, tf.numLines - 1 );
rect.x = point.x;
rect.y = point.y;

What we are doing here is nothing else then creating a new Point based on the position returned by our class, passing the textfield and specially since I want to have the rectangle on the LAST line I just ask for the textfields number of lines – 1.

When running this example above you should see the small red rectangle on the last line of our textfield. yay!!!

You can download the StringUtil class here: StringUtil.as
Hope this serves you as well as it served me last week, and don’t forget to leave a comment if you have any questions about it.