Wrote a small debug class that takes a screen dump of the stage and puts the file on a server (PHP).

So put this PHP on a server somewhere.

<?php
$png = $GLOBALS["HTTP_RAW_POST_DATA"];
$name = date('Y-m-d H.i.s');
$filename = $name.'.png';
file_put_contents($filename, $png);
?>


Then you can add this class to you project, required is the adobe core package (http://code.google.com/p/as3corelib/).
Download Screendump.as

To use it first set the URI and stage
Screendump.stage = this.stage;
Screendump.URI = “http://localhost:8888/screendump/dump.php”;

After that whenever you need to take a dump, run
Screendump.takeDump();

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);
}

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.

Frame rate (fps)

Video is a sequence of images that appear on the screen in rapid succession, giving the illusion of motion. The number of frames that appear every second is known as the frame rate, and it is measured in frames per second (fps). The higher the frame rate, the more frames per second are used to display the sequence of images, resulting in smoother motion. The trade-off forhigher quality, however, is that higher frame rates require a larger amount of data to display the video, which uses more bandwidth.

Video looks much better at native frame rates so it’s recommended to keep it if possible. For full-motion NTSC (National Television System Committee in the U.S.), use 29.97 fps.  For PAL (Phase Alternating Line in Europe), use 25 fps.

If you lower the frame rate to lower file size the Flash Video Encoder drops frames at a linear rate to achieve the new fps rate. However, if you need to reduce the frame rate, the best results come from dividing evenly. For example, if your source has a frame rate of 24 fps, then reduce the frame rate to 12 fps, 8 fps, 6 fps, 4 fps, 3 fps, or 2 fps. If the source frame rate is 30 fps, in most cases you can adjust the frame rate to 15 fps, 10 fps, 6 fps, and so on.

If a video clip is longer than 10 minutes, the audio will drift noticeably out of sync if you do not adhere to the 29.97 fps rate or an accurate even division for lower frame rates (such as 14.98 fps, which is half of 29.97).

For short;
NTSC (u.s); 29.97 fps
PAL (Europe); 25 fps
Dropping frames; Reduce by 2 (e.g. 24, 12, 8, 6, 4, 3, 2 fps)

Data rate (bitrate)

The data rate affects the quality of a video clip. When you deliver video using the Internet, you should produce files using lower data rates. Users with fast Internet connections can view the files with little or no delay, but dial-up users must wait for files to download. If you anticipate an audience of dial-up users, you should make short video clips to keep the download times within acceptable limits. There are a couple of presets when encoding but it’s as well possible to set your custom data rate.

When converting you can choose the bitrate encoding from CBR (Constant Bitrate) to VBR (Variable Bitrate). When using CBR it will hold the same bitrate constant over the whole video, the VBR will analyze the video and where there is not a lot of movement it will lower the data rate, on the other hand where it’s a lot of movement it will set a higher data rate. You can also change the Encoding passes from One to Two, when doing so it will first analyze the video before encode, use this as a default for professional videos.

For short;
Data rate; Keep as low as possible without losing your “maximum quality”.
CBR; Constant bitrate, same data rate over whole movie
VBR; Variable bitrate, changes data rate by analyzing movements

Keyframes

Keyframes are complete video frames (or images) that are inserted at consistent intervals in a video clip. The frames between the keyframes contain information on movement and scene changes that occurs between keyframes. For example, if a video depicts a person walking past a doorway, the keyframes contain the complete image of the person and the door in the background, and the interval frames contain information describing the person’s movement as they walk in front of the door.

The keyframe interval value tells the encoder how often to re-evaluate the video image and record a full frame/keyframe. The keyframe interval value can be any number up to 100. When you select Automatic as an interval setting, Flash Video Encoder places a keyframe every two seconds of playback time.

For example, if the video you’re encoding has a frame rate of 30 fps, a keyframe will be inserted every 60 frames. In general, the default keyframe interval value provides a reasonable level of control when seeking within a video clip. If you need to select a custom keyframe placement value, be aware that the smaller the keyframe interval, the larger the file size. If your footage has a lot of scene changes or rapidly moving motion or animation, then the overall image quality may benefit from a lower keyframe interval. In general, a higher keyframe interval produces better image quality because data is not wasted describing the areas of an image that remain unchanged from frame to frame.

An important dependency of the keyframe interval is that it affects the ability of Flash Player to seek (fast-forward or rewind) through an FLV file. Flash Player can only advance from keyframe to keyframe, so if you want to skip to different places and pause the frames, you must use a lower keyframe interval value. If you want to advance to every frame in an FLV file, use a keyframe interval value of 1. When you reduce the keyframe interval value, you must raise the data rate for the Flash video to maintain comparable image quality.

For short;
Keyframe low number; Good for “moving” in video timeline, file size is bigger and need higher data rate.
Keyframe high number; Lower file size, Good “standard” rule is (frame rate * 2), doesn’t work good for something that changes scene or moves fast.

Aspect ratio

The most commonly used aspect ratio is 4:3, 16:9 and 2:1. As a rule you should use the same aspect ratio as the original video, else the video will look distorted. An exception is when converting form DV formats that uses rectangular pixels (non-square pixels).

There are some easy formulas to use if you want to resize the video, first decide your locked side (height or width).

Height is master;

Height with 4:3 as example;

Width is master;

Width with 4:3 as example;

Example; if your video is 720×480 and want to change it to a 4:3 format. We use the height formula and lock 480. This will give us the new video size of 640×480.

For short;
Ratio; Try to keep original ratio, when changing video size, use formulas.

Interlaced / Non-Interlaced

Most broadcast video is interlaced, though emerging high-definition television standards have interlaced and noninterlaced variants. Interlaced video consists of two fields that make up each video frame. Each field contains half the number of horizontal lines in the frame; the upper field (or Field 1) contains all of the odd-numbered lines, and the lower field (or Field 2) contains all of the even-numbered lines. This actually means that a NTSC 30 fps TV is displaying 60 fps.

Noninterlaced video frames are not separated into fields. A progressive-scan monitor displays a noninterlaced video frame by drawing all of the horizontal lines, from top to bottom, in one pass. Because of this, both fields that make up a video frame are shown simultaneously. Thus, a computer monitor displays video at 30 fps, and most video displayed on computer monitors is noninterlaced.

For short;
Interlaced; TV (uses 2 fields)
Non-Interlaced; Computer (uses 1 field)

Audio

The audio settings are often the simplest ones. You can select Mono/Stereo channels, if you don’t need Stereo so select Mono to save some file size. You have as well the bitrate (kbps) for the sound, standard music cd-rom has 128kbps, try to go as low as possible without getting strange noises.

You can download the Cairngorm to Flash code here.

To think about is that;
- Delegates needs to handle the creation and sending of external services
- Bindable does not exist so instead dispatch when data is updated
There are probably a lot of more things here.

So I started to search and to play around with my Flex 3 Builder, why can’t I use this??? Well, as it looks like it’s actually possible.

I created a little video tutorial how to set it up. This is my first video tutorial so sorry if it’s a little strange. If anyone got some good tips of how to create video tutorials please let me know because this was harder than I thought. The files are very big so will try to record them all over.

1.) Compile CS3 core library
Watch the video (3.6mb)
1.1) Create Flex Library Project.
1.2) Copy the Flash CS3 fl.* package to project folder.
1.3) Go into Project Properties -> Flex Library Build Path
1.4) Mark the fl.* package to be build, then close window.
1.5) Done, now the Flex Builder compiles the SWC file.
– UPDATE –
You can download swc file from here

2.) Change Flex framework
Watch the video (19.2mb)
2.1) Find the Flex 3.0.0 SDK (inside Flex Application folder) and make a copy
2.2) In your copy change the name of the SDK inside flex-sdk-description.xml
2.3) Remove all files except the “player” folder in framework/lib
2.4) Inside the “player” folder, remove the swc file.
2.5) Copy the “playerglobal.swc” file from “Flash CS3/Configuration/ActionScript 3.0/Classes/” into the “player” folder.
– UPDATE –
Place the created/downloaded SWC file in same folder
————
2.6) Open Flex Builder 3 and open Preferences->Flex-Installed Flex SDKs.
2.7) Add new SDK and point to your SDK folder. Then click OK and close.
2.8) All done, you have a new SDK CS3 and Flash CS3 compiled fl.* package, start to work!

3.) Create a Project
Watch the video (11.0mb)
3.1) Create a ActionScript project.
3.2) Change the SDK to the one created in Step 2. Then hit next (NOT Finished)
3.3) Change tab to “Library Path” and add the SWC file created in step 1. Then hit Finished.
3.4) Create FLA file and save to project, add the Flex class as Document Class.
3.5) Open “Publish Settings” and Check “Permit debugging”.
3.6) Open Settings for ActionScript version. Unmark “Automatically declare stage instances”.
3.7) Now you all good to go. Example, add Textarea to stage and declare instance.
– UPDATED –
If you doing the updated tags, skip 3.3

4.) Debug a Project
Watch the video (9.4mb)
3.1) Flash CS3: Export your flash project with Debug -> Debug Movie
3.2) Flex: In the menu open debugger profile.
3.3) In URL;s remove default settings and point Debug to your exported SWF file.
3.4) Add a breakpoint in the code and run from flex debugger.

Before:
XMLSocket goes and checks the sandbox security (crossdomain.xml) as all other security related flash things.

Now:
XMLSocket wants to check port 843 (default) for a security crossdomain file. This is NOT same file as the crossdomain that is on the web server port 80.

Solution:
After long searching and reading it’s really 2 things you need to do.
1.) The server must feed client with a special XMLSocket crossdomain file. Download the zip from http://www.adobe.com/devnet/flashplayer/articles/socket_policy_files.html and read the article, could also be good to read http://www.adobe.com/devnet/flashplayer/articles/fplayer9_security.html so you know what is going on.
I don’t know so much about servers so on my ubuntu machine i just typed in the terminal.
./flashpolicyd.pl –file=../policyfile.xml –port=843

2.) Flash Client; make sure to run loadPolicyFile(“xmlsocket://mysite.com:843″) or change port number to what you have in #1. When it’s loaded it should all work.
It’s simple as that,,,

Why most people always write lite, I know this but not, This is how you doing it…. Flash Blogs, shape up. =)

Because I have 8 developers to handle I’ve made some rules on what software to use, code rules, architecture and so on. After a lot of hard work it finally pays of. We can now easily get into a projects SVN (using tortoise) and instantly know where to start looking for code when something needs to be done.

I have as well setup a big SVN library with our whole framework, so when starting a new project an ANT script is building up the architecture with files and everything we need to get started fast.

As a general working architecture for the code we are following Adobes Cairngorm (some good docs). Was created for Flex applications, but with some refactorying I got it to work very nice with AS3 projects and is now porting the major functionality to AS2. This makes us be able to work with the same architecture in all projects and does not have to care if it’s Flash 6 or 9 projects.

Then the Flash developers can use the Sync Engine to connect markers to changes for example lip sync, character moods and so much more.

When drinking some beer with the colleges we decided to make our own Guitar Hero game.

By connecting the XBOX 360 Guitar Hero control I could with JavaScript find the control, its movement in X,Y (up and sideways). The only thing that I couldn’t get hold of was the Z (pin to pitch audio).
After getting the JavaScript API to work it is easy to push the data to flash. By ExternalInterface its easier to handle JavaScript handling when not needed to put all handling in root.

HiQ core business is consulting with advanced developers (flash/flex/c++/java and so on).

We created the game “Monkey goes to Work”. A quick game based from the idea “Wario Ware – Smooth Moves”.

By using the WiFi-USB adapter on a laptop and a simple web server I could easily use the Wii Opera browser to get access to our own application.
Some problem with the connection because Wii console needs internet connection to be able to find the computer. It works so long you don’t try to test the connection again, could help to restart the Wii console a couple of times.

Wii Opera supports Flash Player 7. One big problem could we the performance, just having some moving animations and transparency making the application slow.

To control the Flash it’s possible to use remote 1 as a ordinary mouse. But to really get something out of it I used JavaScript to connect to the browser API, possible to get all 4 remotes.
I extracted control 2 and push changes into flash player. Some things for example that I could control is X,Y,Z (distance), Roll (rotating remote), Connection status.
Couldn’t get the gyro to work, probably because all the browser movement is based on the IR. So moving remote outside screen will loose updated. But the buttons is going through wiresless.
Possible to get hold of all buttons on the remote and on the nunchuck. But the nunchuck joystick doesn’t respond.

This doesn’t really works for me because I need specified characters for a lot of different countrys. Usually when developing a flash application I have to handle between 15-50 countrys.

So I made my own little solution, made one of these for flash 6 for a couple of years ago and the trick still works. It basiclly works by loading shared runtime librarys and then embedded fonts will be shared cross the application when using a lot of swf files.

Making it a static class it’s easy to use.

CSS.loadStyleName = "default";CSS.loadStylePath = "css/";CSS.addEventListener(IOErrorEvent.IO_ERROR, this.onError);CSS.addEventListener(Event.COMPLETE, this.onComplete);CSS.initialize( this );

And then to use it on textfields.

txtField.styleSheet = CSS.styleSheet;txtField.embedFonts = true;txtField.htmlText = "<span class='subTest'>Embed Arial</span>";txtField.rotation = 5;
 
txtField2.styleSheet = CSS.styleSheet;txtField2.embedFonts = true;txtField2.htmlText = "<span class='subTest'>Try embed Arial Black</span>";txtField2.rotation = -5;

To make this work.

1.1) Create your shared library file (example: default_lib.fla)

1.2) Create MovieClip on stage and export it for runtime.

1.3) In the MovieClip create a textfield for each font you need, embedd all the characters needed.

2.1) Create your shared library holder file (example: default.fla)

2.2) On the stage add the runtime MovieClip and give it instance name mcFont

3.1) Create your css file (example: default.css)

3.2) Add the styles that your need

4.1) In the Application file add the following load code (look at example in top)

You can download example files here: runtimefonts_as3