Accessing the document class from inside a movie clip

Sunday, May 24th, 2009

If you want to access a function in the document class from the frame of a movie clip, the you do so like this

Lets say there is a document class called Main.as which is associated with your fla and it has a function called foo(). On the timeline of the fla you have a movie clip and you want to call the foo() function from one of the frames in this movie clip then you can write on that frame

Object(this).parent.foo();

Make sure that foo() was a public function :)

Flash audio sync

Thursday, May 14th, 2009

If your audio is losing sync with your timeline animation then you must set it to Stream so that Flash will compensate frames to maintain the sync.

PHP Rich text editor for Flash

Monday, January 19th, 2009

If you have created a rich text editor using Javascript’s execCommand and an IFRAME and you intend to use the output inside a Flash textfield, then you may have to change the output from your RTE for the bold, italic and underline commands.

execCommand() for making the selection inside the IFRAME bold will give out something like this:

  • <span style=”font-weight: bold;”>Bold text</span>

And flash expects it to be

  • <b>Bold text</b>

In this situation you can use a bit of regex to convert the style based <span> element to a <b> element like this

//get the content first
var rte_content = document.getElementById(‘rte_content’);
//put it in a string
var str = oRTE.document.body.innerHTML;

//replace the content
str = str.replace(/<span style=”font-weight: bold;”>(.+?)<\/span>/g,’<b>$1</b>’)

Now you can pass the ’str’ to a hidden form element or whichever way you are using to post the content. The same applies to italic and underline…

Tween managers on textfields

Friday, December 19th, 2008

If you use Tween Mangers like lmc tween or TweenLite and have noticed that some times they work on dynamic textfields and sometimes they don’t, then here is something that I figured out.

Firstly, you will not face this problem if you are using some system fonts. This happens only when you want to use some font that does not exist on the user’s machine. To make sure that they work on all textfields, make sure that the textfields have the font ‘embeded’ in them.

Making multiple language Flash sites

Friday, December 19th, 2008

For importing languages other than English, especially languages like Arabic or Russian, you will need to use a system font (like Arial) AND embed it. Generally we don’t embed system fonts, but for multiple language sites you have to make an exception, which means you cannot use some nice font that your user wont have. Embedding such fonts may not give out the required result as the font you select may not have outlines for all languages.

Then you will have to embed the correct character set to target your multiple languages. Depending on the language you have to display, you will have to select the character set. Latin 1 works for many non-English languages. For Arabic use Arabic(:P), for Russian use Cyrillic coz the Russian language uses the Cyrillic alphabet.

Finally on the first frame of your application, add the following line:

System.useCodepage = true;

Importing any kind of text inside Flash textfields

Friday, December 19th, 2008

There is an elite group of characters who need some amount of pampering before they can be cajoled inside a flash textfield dynamically. These are the single and double inverted commas, accented letters, foriegn characters etc. To bring them in using a regular xml file just make sure that they are correctly displaying in the xml file itself(in a browser) and then use the htmlText property to see them behave themselves.

Avoid using xml node attributes for items that may have these characters. So instead of

<book title=”Victoria’s Secret”>

it can be

<book>
<title>Victoria’s Secret</title>
</book>

Slanting textfields in Flash

Tuesday, November 25th, 2008

Many years ago I had seen a very cool looking micro site for some promo on Adobe’s website. It was like a huge notice board that could be slid around. It had many textfields (both input and dynamic) which were placed at an angle and they could slide in and out, scroll etc. A few months ago I needed to do that on one of Grandmother’s micro-site projects for Tata Xenon. At first the textfield refuses to show anything at all(including itself) when it was placed at an angle either by using the Transform tool or the Transform panel. The trick was to ‘embed’ the font so that the textfield can render itself at an angle. Even if you are using a system font like Arial, you must embed it. You can keep the anti-alias to whatever you want.

Stretching the background image of a Flash site to 100%

Monday, November 17th, 2008

There are many sites around now (including the new Grandmother site) which have a 100% background image on a site completely in Flash. Here is a small tutorial to do exactly that.

If you are using the SWF Object then you must set the width and height to 100% in the embedSWF() method and add a paramater to allow NOSCALE so that only the background stretches and the rest of the site does not. Here is a tutorial to do this on this site itself.

If you are using the inbuilt mechanism of Flash to publish the site, then you must specify 100% as the dimensions of the swf in the HTML tab of the Settings page and select No Scale in the Scale dropdown and then publish the swf.

The background image should stretch

  1. When the image loads for the first time
  2. Whenever the stage is resized (by clicking the Restore button or manually dragging the corners of the browser window)

So to start with, decide the dimensions of the image you want to use. There is a misconception that the jpeg must be at least the size of the stage, but that is not necessary. It can be smaller as well(maybe 50 to 75% of the stage). You can enable smoothing on it to make sure that it is aliases or pixeleted. Of course you can use the stage size and maybe even bigger if you please to make sure that the clarity is not compromised on smoothing.

Once you have decided the dimensions. bring the image inside(either as a library item inside a movie clip or by using the Loader object). Create 2 functions that will resize the image. One to decide the percentage and one to do the actual resizing. Both these functions can be clubbed together as well.

I am calling the background image movie clip : _bg_image_mc.

var _init_w:Number = 720;      //the width of the image

function resize_image():void
{

var _percent = get_percent_width();
_bg_image_mc.scaleX = _percent;
_bg_image_mc.scaleY = _percent;

}

function get_percent_width():Number
{

var _percent:Number;
if (stage.stageWidth > _init_w) {

//get the percent
_diff = stage.stageWidth – _init_w;
_percent = _diff / _init_w * 100;
_percent /= 100;                     //scale in AS 3 is 0 to 1
_percent += 1;                        //we have to add the percent change to 1

}else {
_percent = 1;
}

return _percent;
}

The second function simply checks the difference between the initial width of the image and the width of the stage and converts into a percent. This percent value is then applied to the scaleX and scaleY value of the bg image mc.

Now apply the function resize_image() once when the image was loaded and then in an event listener on the stage object

stage.addEventListener(Event.RESIZE, on_resize);

If you customize this and use it in a class and are facing issues due to the stage.stageWidth, then please note that you cannot use stage.stageWidth before adding the object to the stage.

The stage.stageWidth property

Monday, November 17th, 2008

This is a very very small thing but it does have its share of relative importance.

If you have a class that references the stage.stageWidth property then it cannot do that before it is added to a Display Object or Container. So if your class uses this property in its constructor function then it wont get the desired result because when it is declared, it still not on ’stage’.

Ideally you can have a init() function on the class which can reference it successfully after the addChild() method has added the instance of this class to the stage.

Displaying '&' and '+' in a Flash textfield

Thursday, February 22nd, 2007

For a recent project(CLR), I was stuck because of some unassuming characters! They were very adamant and just wouldnt show up. Meet the ‘&’ character and the ‘+’ character. These guys wouldnt budge an inch from their invisible stand despite me saving the text file as ANSI or UTF-8 or Unicode. I was pulling text from a text file into a Flash textfield and these characters just couldnt tolerate it!

As usual I began the ‘googling it out’ routine and after many unsuccessfull attempts I stumbled upon this page: http://i-technica.com/whitestuff/urlencodechart.html where I found the dreaded solution! Use the htmlencode characters as follows:
& – %26
+ – %2b

Here’s a page where you can enter you content and get the required converted data in the appropriate format: http://www.dommermuth-1.com/protosite/experiments/encode/index.html