undefined-type

We looked at some stop motion at work and decided to create our own test with an Iphone. Nothing fancy pancy, have a look =)

Life iphone, stop motion, stopmotion

Runtime Fonts for Flash is a wonderful way when building apps, even better if you are as me and creating international apps for a lot of countries, you have the language supports and the problem with characters in fonts when staring to look at Greek, Japanese, Korea, Chinese and so on. I have a old Runtime font for CS3 that works pretty well. But when starting to use CS4 I wanted to improve the loading and sharing.

So the idea was to use Flex to compile Font SWF files, a big problem when I use Flash CS4 (fp9) and Flex 3. Flex will not recognize my font SWF file, it will also not recognize my local fonts to embed bold/italic font sets. Using an exported CS3 (fp9) file it works just fine.
Note; fp9 = Flash Player 9.

So lets look of how to do this.
First we need to create our font file.
1.) Create an Flex ActionScript project (I use framework 3.2)
2.) The Class name will be something that we will get later so I renamed my as file to FontHolder.as
3.) Remove the constructor and add the embed tags, example below. Note the unicodeRange tag, these are used to select characters to be embedded, remove to embed the entire font.

package {
	import flash.display.Sprite;
 
	public class FontHolder extends Sprite
	{
		[Embed(systemFont='Verdana', fontFamily='Verdana', mimeType='application/x-font', unicodeRange='U+0061-U+0074')]
		public static const verdana_regular:Class;
 
		[Embed(systemFont='Verdana', fontFamily='Verdana', mimeType='application/x-font', fontWeight='bold', unicodeRange='U+0061-U+0074')]
		public static const verdana_bold:Class;
	}
}

4.) Now you have your font SWF file to use for the project.

So with your font file it’s time to use it in the project. In this example I use my Flex 3 as CS3 development tool., this is because I create Flash Player 9 project. You can of course use only Flash IDE or any other kind of code editor.
1.) Create a new ActionScript project, change the SDK to CS3.
2.) Click next, “Main source folder”, type “src”, this is just to put the files more pretty =), Click Finish.
3.) Create a CSS file that will control the fonts. “default.css”. Just add two classes that we can work with.

h1{
	font-family: Verdana;
	font-size: 24px;
	font-weight: bold;
}
body{
	font-family: Verdana;
	font-size: 12px;
}

5.) Download the FontManager.swc file and add it to your project.

Add SWC HowTo for Flex
6.1.) Create a folder called swc in project folder.
6.2.) Place the FontManager.swc file into the created folder.
6.3.) Right-Click on project folder and select properties
6.4.) In menu choose “ActionScript Build Path”, Choose the tab “Library path”
6.5.) Click on “Add SWC Folder”,  Select the created swc folder and close the windows, all done.

Add SWC HowTo for Flash
7.1.) Create a folder called swc in project folder.
7.2.) Place the FontManager.swc file into the created folder.
7.3.) Open Flash and Publish Settings.
7.4.) Choose the Flash tab and click on Settings next to the script combobox.
7.5.) Choose the “Library Path” tab and add the swc file to the list, all done. 

So, everything is there. How am I using it? Well, this is a dump on the project playground.

To be able to use the fonts they are needed first to be loaded. By default this is the structure for font swf and css file named default. They can be changed by FontManager.name = ‘default’ (the name) and the path with FontManager.path = ‘fonts/’.

The easiest way is to just get the singleton and load it.

var manager:FontManager=FontManager.instance();
manager.addEventListener(Event.COMPLETE, onManagerComplete);
manager.loadStandalone();

When it’s loading just send the textfield, style and text to the FontManager, you can add only textfield and text if you want to add e.g. multiple styles to one textfield.
Here’s some examples.

private function onManagerComplete(event:Event):void
{
	var tf:TextField = new TextField();
	tf.autoSize = TextFieldAutoSize.LEFT;
	tf.border = true;
	tf.rotation = 6;
	FontManager.instance().register(tf, "h1", "abc");
	this.addChild(tf);
 
	var tf1:TextField = new TextField();
	tf1.autoSize = TextFieldAutoSize.LEFT;
	tf1.x = 150;
	tf1.border = true;
	tf1.rotation = 6;
	FontManager.instance().register(tf1, "body", "abc");
	this.addChild(tf1);
 
	var tf2:TextField = new TextField();
	tf2.autoSize = TextFieldAutoSize.LEFT;
	tf2.x = 300;
	tf2.border = true;
	tf2.rotation = 6;
	FontManager.instance().text(tf2, "<h1>abc</h1>\nabc");
	this.addChild(tf2);
}

Flash, Flex cs4, dynamic, Flash, Flex, font, runtime, sharing

I took out some information from Facebook about members and sex in the Scandinavian and looked up some population statistics from wiki. Here are the results;

Percent of members based from country population.

Here’s a overview of the countries population, facebook memeber and sex. Think it’s kinda cool that the majority of members are girls. Rock on I say. Rock on!

Life

This is a quick help for how to Encode/Convert movies to the Flash FLV format. There are a couple of general encoding features that could be good to know. The key is to find a good balance of frame rate, data rate and keyframe.

When working with digitally compressed video in a format such as Flash Video, the higher the frame rate, the larger the file size. To reduce the file size, you must lower either the frame rate or the data rate If you lower the data rate and leave the frame rate unchanged, the image quality is reduced. If you lower the frame rate and leave the data rate unchanged, the video motion may look less smooth than desired. Something to remember here as well is that you can never gain quality when encoding, so if you have a bad video to start with it will not get any more pleasant to look at just because you boost the data rate.

For short;
Frame rate (fps); The less, the more jumpy.
Data rate (bitrate); The less, the more pixels/blur.
Keyframe; The less, smaller file size.

Since Flash Player 9,0,115,0 there is now the possibility to convert HD quality, so i brief version list of the codecs;
Flash 6-7; Sorenson Video
Flash 8-9; On2
Flash 9-10; On2 (new F4V open format since 9,0,115,0)

There is a really good convert guide to get some help on the export settings;
http://www.adobe.com/devnet/flash/apps/flv_bitrate_calculator/

How to work out the best video compression for me?
This is the hard bit, for short I would recommend these steps.
1.) Figure out a compression that you guess would be the perfect one (get help from calculator).
2.) Setup 4 more compressions, 2 that has higher quality than your (1.) setting and 2 that are below.
3.) Line up all the videos and find the video with the lowest quality settings but that you find is still good. Now from this go back to step 2.
4.) After a couple of rounds this way you should have found a compression for your video.

Remember that all videos are different, so there is no magic setting that will work on all your videos. Also when choosing the “best” video you need to keep track on the file size and what the target is going to be.
Read more…

Flash encode, export, f4v, Flash, flv, settings, video