A crossed reference occurs in situations such as this.

[as]
var myFirstObject:Object = new Object();
var mySecondObject:Object = new Object();

myFirstObject.reference = mySecondObject;
mySecondObject.reference = myFirstObject;

myFirstObject = null;
mySecondObject = null;

delete myFirstObject;
delete mySecondObject;
[/as]

In each case the objects above have a property that references an object, and the reference is cyclical in nature. As far as the Garbage Collection routine in the player is concerned each object will always have a usage count of 1 regardless of the delete statements as a result of the reference in the other object. The result is that neither object will be cleared from memory, hence the leak. If such a situation were to arise in a looping operation the loss of memory is compounded.

[as]
var i:Number = 0;
var iTotal:Number = 5;

whie(i < iTotal)
{
var myFirstObject:Object = new Object();
var mySecondObject:Object = new Object();

myFirstObject.reference = mySecondObject;
mySecondObject.reference = myFirstObject;

myFirstObject = null;
mySecondObject = null;

delete myFirstObject;
delete mySecondObject;
++i;
}
[/as]

Now the above example is a very simplistic example, and is very plain to avoid. With more complex applications however, these situations can arise over many classes and may not be any where near as blatant. This little flash extension offers a great interface for highlighting those crossed references in small applications vital for Flash Lite developers to find and remove.

object-explorer

The release, which is dated 7th November 2006 can be found here and provides more information. From the release it sound like the code is to be included into future releases of the fire fox browser.

Does this mean an end to the Flash Plug-in for future Mozilla based Browsers? How will this impact XUL runner and its capabilities in comparison to Adobes much talked about Apollo?

Adobe and Mozilla Foundation to Open Source Flash Player Scripting Engine

Long post short its here.

I began reworking the LoadQueueManager before leaving, its an early rebuild, but what i tested was far more stable than the last revisions. Also I have included some of the features that people had asked of me (total queue progress, and also separate listeners for each item in the queue are two items that stick out).

It is a more complex set of files, and only part complete, but rather than leave people waiting, have at it. I wont be doing any other work on it for some time due to excessive holiday commitments (hey a man has to surf ) but feel free to leave comments, and send updates if you do any.

LoadQueueManager.zip

The issue I have with the patent is its broad and sweeping coverage of very common interface and application GUI design systems. As an example reading one portion of the "Summary of The Invention".

When editing a component, the user may modify a number of features associated with a component including, but not limited to, the volume of an acoustic component, the link between a menu entry and an associated component, the font, font size, color, or effect of a text field, or the layout, size, transparency, rotation, color, position, or level of any graphical rich-media component. The user may modify these components by means of a slider bar or a textual input field. In addition, the user may modify the volume of a sound component by means of up and down volume buttons. The user may undo modifications made to a component's parameters. The user may also modify the position of a graphical rich-media component by a graphical input field, by clicking and dragging said component, or by text fields. When the user modifies the position of a graphical rich-media component by means of clicking and dragging said component, said component may align itself to a grid point or a guide line. The user may also modify the style and the Uniform Resource Locator (URL) of a component linked to a menu entry.

Unless I am mistaken the recently posted link to Netvibes would actually infringe on this part of the patent. In that the user can select 'panes' or 'graphical rich-media components' of the netvibes application and alter there position within the application by clicking and dragging them to a new position.

In this example, because there is no specific technology linked to the patent claim, any RIA in any technology, Flash, Ajax, Appolo, XUL Runner, HaXe, Sparkle, add any other future technology here..... These systems would all be in break of the patent claim.

And this is just ONE of the EIGHTY THREE different claims in this patent.

Very worrying I think any developer would agree. Everyone involved in Internet application development, in my opinion, should take a serious look at this patent. Think about ANY work they have done or seen in past. The work they are doing today. Then consider the possible implications of future networked development. If you know of anything that has been posted, exhibited or shown publicly that can bring this patent down, it is in every ones interest to make it known to strengthen the Magix reexamination.

And remember we are not just talking about flash applications or work here. If you remember or are aware of ANY online application, in any technology, be it DHTML, Director, Java or anything else. If it used any, all or even one of these systems to allow user interation then it may well be enough to show that Mr Neil Balthaser did not invent these systems, and certainly has not right to lay claim to doing so as he has in his patent application.

I had a good idea the area(s) that people might like more in depth information, but I also wanted to take into account some broader work flow and process issues that I feel really need to be discussed. In this post I would like to present some more detailed information regarding one of the slides I used at the LFPUG presentation that, as expected, has generated a lot of feed back.

Managing Text & Fonts

During the presentation I had split this key area of localizing flash content into two sub-headings, each sub-heading had a number of points I wanted to cover.

Part 1 - Fonts

• Understanding character sets, character maps & glyphs tables.
• Using embedded fonts and or non-embedded fonts.
• Flash 8 and advanced anti-aliasing.
• File size implications of fonts in flash.

Part 2 - Construction & Style

• Using font symbols.
• Using dynamic text fields.
• Shared fonts, font libraries and font symbols.
• The TextFormatObject & CSS.

Understanding Character sets, character mapping and glyph tables

Before getting into the nitty gritty of the practical side of how you go about managing the text based content in a localized flash project, I want to cover off the underlying concepts and processes that support it. Hopefully my terminology will be correct enough for the purpose of this article, feel free to leave comments correcting me where appropriate.

When trying to localize text based content in flash you will need to understand a little regarding Unicode, and how the fonts and applications you are using support it. So what is Unicode.

Unicode provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language

In addition to this Unicode characters are grouped into character sets. Within flash these can be found in the embed fonts options of the text field properties inspector.

As flash developers we should be able publish content to pretty much any language on the planet. "we should be able". What often upsets this localization utopia is that many, many times we will find that the fonts provided, or requested within a project don't completely support Unicode. If this is the case it will result in a number of display issues within your flash production, including missing characters, or often a "?" or a square symbol, being displayed instead. Another, slightly less common problem can be a poorly constructed font that has characters incorrectly mapped. This would result, for example, in the glyph for "A" being returned and displayed as "B".

In actual fact there are few font faces that do fully support the whole Unicode table, and generally they are the standard system font faces for "sans", "serif", and "monospace" display, (Arial, Times, Courier on Windows). In part this is because to implement a complete Unicode font would be a time consuming and costly, production. There are around 65,000 (I think?) individual Unicode character codes to support, meaning over 65,000 characters to produce and test for some poor font maker.

With this in mind it is always worth checking the level of Unicode support that the fonts you are being asked to use support, you will save yourself a lot of tears as your project progresses.

Having assessed the support that your fonts offer for Unicode you need to find an acceptable level of Font Embedding. I have found this to be very similar in approach to deciding the compression that is applied to an image for the web. There is always going to be a trade off between the number of fonts you embed, and the final file size of a project. For example as a test, and to refresh my memory, I did an export of a flash movie that simply had a Dynamic text Field supporting Arial MS Unicode and embedding all character sets. The resultant SWF was 9.7MB uncompressed (7.8MB compressed).

The reason for large file size is that when flash embeds fonts for use in the player they are essentially converted to vector shapes that are embedded in your movie. When you get to some of the more exotic languages (Asian and Right to Left Languages for example) the individual glyphs are very elaborate, these results in some complex vectors, and thus larger file sizes. In addition the shear number of characters is HUGE, a number of languages have many more individual characters than us Europeans, the basic Korean character set has 3454 glyphs!

As of flash 8 the use of embedded fonts becomes less of an issue, with respect to visually acceptable text rendering. Making use of the advanced anti-aliasing options we are able to yield far better readability than is possible even with embedded font glyphs. However there are still some issues related to these options when trying to animate and scale text that is displayed using them. So depending on the design and visual treatment you are dealing with you will need to keep this in mind.

In my next post I will look at how to manage fonts within your files, it will roughly follow the structure of the 'part 2' heading above apply some of the code examples from my brief previous post.

References from this Article
Unicode.org, an invaluable source of information regarding UTF and Unicode
Online Unicode look up table
Information on Flash 8 text rendering issue in Saffron
Further information on Flash 8 text rendering issue in Saffron
LFPUG Presentation Running Notes

Links in this Article
London Flash Platform User Group
The presentation slides I used. More details are in the running notes above.
Code Snippets for localizing flash

Thanks to AKQA for the venue, support, beer and pizza, very nice it was to. Thanks also to Tink for the opportunity to break my cherry, so to speak. And finally thanks to every one that came along to listen to me gibbering on. It must be said this is a subject I have come to build a love-hate relationship with over the many years I have spent in the field. I love the challenge of working to localise the content. I hate the fact that Flash makes even some of the most mundane solutions or Ideas a HUGE Challenge. It would seem I am not alone in this.

In addition to nattering on myself, I also received some useful information as well, which was great. So thanks for correcting my terminology of Polish as a Cyrillic based Language. Apparently it's an Extended European language, which would account for me having issues with that one.

Something I didn't do last night was to show any code. This was due to operating on a Mac (thanks again Tink) and not being confident enough in my app switching on the alien technology. Below are some snippets I made reference to.

Using System.capabilities.playerType to allow altered path references dependent on whether you are testing through a browser.
[AS]
/*
str_xml variable is a string appended to the SWF file name in the HTML
this is used to dictate which XML language version the flash movie
will load and display. If no XML variable is detected then the movie will
default to the UK English version (en-GD) this allows for easy testing in the
flash IDE
*/
var str_defaultLang:String = "en-GB";
// use the playerType to asertain whether the movie is playing in the browser or not and alter the Pathing acordingly
var str_siteRoot: = (System.capabilities.playerType == "External") ? "../" : "";
var str_xml:String = (str_xml == undefined) ? str_defaultLang : str_xml;
var str_xmlSource:String = str_siteRoot + "xml/structure" + str_xml + ".xml";
[/AS]
A simple (nasty) prototype to string that offers find and replace functionality. This is then shown searching for pesky windows carriage return and line feed symbols and replacing them with single newline statement. I hope the URL encoded values are correct; I have actually done this from memory. Please let me know it this not the case.

[AS]
/*String object prototype adds find and replace functionality*/
/*
usage : str_myString.replace(str_stringToFind, str_stringToReplace);
str_stringToFind: string you wish to find in 'str_myString'
str_stringToReplace: string you wish to replace str_stringToFind with in 'str_myString'
returns: str_myString with all occurances of str_stringToFind replaced with str_stringToReplace
*/
String.prototype.replace = function(str_f:String, str_r:String):String
{
return (this.split(str_f).join(str_r));
}
var myString:String
myString = escape(myString)
myString = myString.replace("%0A%0D", newline);
myString = unescape(myString);
[/AS]

Finally a snippet showing how to store Country/Language code combinations in order to switch fonts to Arial MS Unicode in those more troublesome language character sets.

[AS]
/* Array to list non supported county/language codes */
var arr_nonSuportedCC:Array = new Array("gr-GR", "ru-RU", "tr-TR", "cr-CR", "kr-KR", "pl-PL", "si-SI", "cs-CZ", "da-DK", "el-GR", "sv-FI", "hu-HU");
/*
setFontFace loops trough an array of Values that represent Country/language codes for the
current content, if the current document country code is in this list then return true to
say use a default font face that supports the countries glyphs more fully.
e.g Arial Unicode MS for russian/greek/cyrilic languages
*/
var setFontFace = function(str_CC:String, arr_CountryList:Array):Boolean
{
var bln_retval:Boolean = false;
var i:Number = 0;
var iTotal:Number = arr_CountryList.length;
var str_curCC:String;
str_CC = str_CC.toLowerCase()
while(i < iTotal)
{
str_curCC = arr_CountryList[i].toLowerCase();
if (str_CC == str_curCC)
{
bln_retval = true;
i = iTotal;
}
++i;
}
return bln_retval;
}
/* switch to determin if the font glyphs are supported*/
var bln_useArial:Boolean = setFontFace(str_xml, arr_nonSuportedCC);
var str_defaultDisplayFont:String
str_defaultDisplayFont = bln_useArial ? "Arial Unicode MS" : "HelveticaNeueLT Pro 43 LtEx";
// Text Formating object that will use the 'default' or 'switched' font
__tf_navigationDefault = new TextFormat()
__tf_navigationDefault.font = str_defaultDisplayFont
__tf_navigationDefault.size = 14;
__tf_navigationDefault.color = 0x102C4A;
[/AS]

This last Snippet could also be extended to switch Font Size based on Asian Language or country codes as well. In addition I have used a similar script to check for 'preferred' fonts based on TextField.getFontList().

If you can help us, or you know some one who might be able too PLEASE leave a comment. Let me know if you want it made public or not and I will abide your wishes. What is important is that myself or Mike (flashgen.com) can contact you some how to follow it up.

If you lead to the project going like I will personally buy you a BIG beers or six, and give you a great big hug (kisses optional).

The companies and or departments required are.

BBC Education Department -- need to be able to sign release for Medicine Through Time Website. (circa 1998, Flash 3).
British Telecoms Education Department -- need to be able to sign release for BT Time Trek Game. (circa 1998, Flash 3).

Remember this may be the only opportunity to see these historical examples of what us oldskoolers 'bled our eyes on'.

Please spread the word if you are able.

As you will have seen Mike Jones (FlashGen.com) and I are meeting to take notes, share war stories and generally reminisce the 'Good OldSkool Days'. To find out what files we still have, and even which URLs are still live (Flash 3 (alpha) circa 1997/8 btw JD produced by Spooky & the Bandit - you may remember them :p)

Keep your eyes peal for more news as events unfold....

Spam Recycling

In addition Stephen Downs (tink) will be giving an early look at the new ActionScript 3 preview that some of you 'may' have spotted is available on labs.

So if either of those sounds like they might float your boat, then why not pop along. I would just ask you check heavy throwing objects at the door :p.

Dave 'I'm not shitting it much I always walk like this' At BitTube Dot Com

• A single SWF file cannot combine ActionScript 1.0 or 2.0 code with ActionScript 3.0 code.
• ActionScript 3.0 code can load a SWF file written in ActionScript 1.0 or 2.0, but it cannot access the SWF file's variables and functions.
• SWF files written in ActionScript 1.0 or 2.0 cannot load SWF files written in ActionScript 3.0. This means that SWF files authored in Flash 8 or Flex Builder 1.5 or earlier versions cannot load ActionScript 3.0 SWF files.

  The only exception to this rule is that an ActionScript 2.0 SWF file can replace itself with an ActionScript 3.0 SWF file, as long as the ActionScript 2.0 SWF file hasn't previously loaded anything into any of its levels. An ActionScript 2.0 SWF file can do this through a call to loadMovieNum(), passing a value of 0 to the level parameter.

• In general, SWF files written in ActionScript 1.0 or 2.0 must be migrated if they are to work together with SWF files written in ActionScript 3.0. For example, say you created a media player using ActionScript 2.0. The media player loads various content that was also created using ActionScript 2.0. You cannot create new content in ActionScript 3.0 and load it in the media player. You must migrate the video player to ActionScript 3.0.

  If, however, you create a media player in ActionScript 3.0, that media player can perform simple loads of your ActionScript 2.0 content.

The full information can be found here:

Programming ActionScript 3.0 > Overview of ActionScript Programming > Introduction to ActionScript 3.0 > Compatibility with previous versions

I am sure everyone is aware of the XML Object in flash and the ability to load and manage structured XML data in a flash movie. One of the challenges is how to access all that lovely data in a quick and easy method.

On numerous occasions on site I have seen an almost infinite number of XML parsers that will take in an XML document or Object and through recursive functions or the like rip the various XML nodeValues and attributes into native flash Objects, Arrays and Variables.

These would then be used through out the movie as any other data set. There is of course nothing wrong with this system, and at times in the past I too have gone about development in this manner, apart from the fact that it is ultimately a waste of time.

In flash we are provided with the ability to access the data held in an XML Document and or Object natively, Everyone will likely be aware of the Node.firstChild.nodeValue access notation. This allows us to preserve the structure of an XML Document while still having access to the data it holds. The downside of course is that the Syntax can become long and unwieldy if you are processing a complex XML structure.

A second option for dealing with XML in Flash has been provided as of Flash MX 2004 Professional edition. With the DataBinding components in Flash MX 2004 Pro was provided the mx.xpath package of classes. Adobe have also included this package in Flash 8. In addition the classes within the xpath package are compatible with Flash 6 MX so they operate well on the PSP Flash player as well.

The XPath implementation provided is not a complete XPath Implementation. But it does provide a susinct method for accessing XML Nodes by name, and or attribute values in a simple syntax.

Below is a simple snippet to highlight use of the XPathApi in Flash.

[as]
/* example XML Structure used in this snippet.
< ?xml version="1.0" encoding="UTF-8"?>



< ![CDATA[work]]>


< ![CDATA[cv]]>


< ![CDATA[contact]]>



*/
//import the xpath api class
import mx.xpath.XPathAPI;
// create a new XML Object that will load the XML Data
var myXMLDocument:XML = new XML();
myXMLDocument.ignoreWhite = true;
// create an onLoad Event Handler for the XML Object
myXMLDocument.onLoad = function(bln_success:Boolean)
{
if(bln_success)
{
//the string xpath value
var xPath_str:String = "bittubesite/navbar/navitem"
// the selectNodeList method of XPathAPI returns an array of XML Node Objects
var navLabels_arr:Array = XPathAPI.selectNodeList(_projectInfo.firstChild, xPath_str);

// trace the values stored in the array generated by selectNodeList
trace("navLabels_arr" + navLabels_arr);
/* outputs
===================
work
cv
contact
*/
}
else
{
trace("XML Load Error!!");
}
}
// load the xml document
myXMLDocument.load("myXMLURL");
[/as]

Unfortunately there is a lack of official documentation to the mx.xpath package in the flash documentation, which is a little frustrating.

There is a more complete implementation of the W3C XPath specification that has been produced by xfactorstudio. This is available in both ActionScript 1 and ActionScript 2 versions.

There are a number of other articles that have been written that offer more detail of the capabilities of provided by the built in mx.xpath package I have linked to them at the end of this post along with some other xpath resources for those that want to find out more.

xpathStudio -- Alternative and more complete XPath implementation
mx.xpath.XPathAPI vs xpathStudio
using XPathAPI by by peach pit
using XPathAPI by last actionscript hero
using XPathAPI by Jen deHaan
W3C XPath Specification

A full explanation of the different quality settings in flash can be found here

Some time ago as Flash 8 was released Tinic Uro posted an explanation of the lack of support for bitmap anti aliasing in flash 8 and also a workaround for it.

The post is on his archives here

I have included this workaround in the Flash 8 gallery I posted, and have incorporated it into an Image loader class I am using in a project currently the only note of caution I would have is that this work around really boosts the CPU usage of a movie if you are moving around lots of images.

As a side note the 'best' quality setting was almost lost during the flash 3 alphas as it was thought to be identical in effect as the 'high' quality.

Land Rover Go Beyond

This is the first phase of a flash 8 project that will be pushing some serious technology about. At the moment I cant say much about what will be happening in the future but it should be fun, both for us developers and also the users as the project expands.

It was during my time on this acorn of a site that I encountered the Text Wrapping 'issue' described here.

Another fun things to deal with was the lack of bitmap smoothing in flash 8. Thankfully I had stumbled on Tinic Uro's solution to that little gem which can be found here.

On top of those things I finally had an opportunity to make proper use of CSS in flash for something other than my own mundane CV. Even though this is a small taste of the main application the foundations are certainly strong.

Congratulation to everyone else involved.

After the comments from Richard Leggett I have produced this working alteration to the code posted previously.

The results while fixing the font adjustments as text is scaled, it causes re-wrapping in my example once the scale operation is complete. Given more time i will try to find a more robust solution to this issue.

more code after the split.

Please not this code is simply a stub that has been taken from the code in this post and updated. Please read the previous post for more information

[as]

but_field_0.onPress = function()
{
if(_root.bln_f0Scaled)
{
/*
Now prior to scaling the upper clip we simply turn the render method of the
text fields to "normal" like that of the old FP7 display.
*/
_root.mc_flashText_0.txt_field_0.antiAliasType = "normal";
_root.mc_flashText_0.txt_field_1.antiAliasType = "normal";
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_xscale", Regular.easeOut, _root.mc_flashText_0._xscale, 200, 3, true);
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_yscale", Regular.easeOut, _root.mc_flashText_0._yscale, 200, 3, true);
/*
Once the tween operation has been completed we then reset the text render
back to the advanced FP8 method

** NOTE **
This alteration while fixing the wrapping while scaling issue results in the text re-wrapping at the end of the scaling operation. I think a possible answer
would be to provide text field measurements and resize the field to ensure
this re-wrapping does not occur.

*/
_root.twn_field0.onMotionStopped = function(obj_item:Object)
{
var mc_t:MovieClip = obj_item.obj;
mc_t.txt_field_0.antiAliasType = "advanced";
mc_t.txt_field_1.antiAliasType = "advanced";
}
}
else
{
_root.mc_flashText_0.txt_field_0.antiAliasType = "normal";
_root.mc_flashText_0.txt_field_1.antiAliasType = "normal";
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_xscale", Regular.easeOut, _root.mc_flashText_0._xscale, 100, 3, true);
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_yscale", Regular.easeOut, _root.mc_flashText_0._yscale, 100, 3, true);
_root.twn_field0.onMotionStopped = function(obj_item:Object)
{
var mc_t:MovieClip = obj_item.obj;
mc_t.txt_field_0.antiAliasType = "advanced";
mc_t.txt_field_1.antiAliasType = "advanced";
}
}

_root.bln_f0Scaled = !_root.bln_f0Scaled;
}

[/as]

The top section of the movie uses text fields with the anti-aliasing setting set to "anti-alias for readability" which is placed inside a movie clip symbol. This clip is then placed on the main stage of the movie. The button at the top simple scales the movie clip that contains these fields from 100% to 200%.

The bottom section of the movie uses script to create a movie clip, and then create 2 text fields into the new movie clip. This time we use embedded fonts and text formatting to get the text to appear the same way as the top fields. The button then does the same scale operation on this newly created clip.

if the movie is missing below view it here for now

link

As you can see the flash 8 text does some very strange wrapping of the text as the parent clip is scaled. This effect was displayed in the project I was working on, and as you can imagine the client was not so pleased with this funky text effect.

The only fix I could come up with was to create and display the text as per the bottom section of the movie. I hope that all makes sense and is of use to someone.

Code from the movie is after the split, I apologise for the state of it, its is for example only.

[as]
import mx.transitions.Tween;
import mx.transitions.easing.*;

var str_fieldvalue = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut"
var str_fontName:String = "Arial Unicode MS";
var int_fontSize:Number = 10;
var bln_f0Scaled:Boolean = true;
var bln_f1Scaled:Boolean = true;
var bln_embed0:Boolean = false;
var bln_embed1:Boolean = true;

mc_flashText_0.txt_field_1.autoSize = mc_flashText_0.txt_field_0.autoSize = "left";
mc_flashText_0.txt_field_0.text = str_fieldvalue;
mc_flashText_0.txt_field_1.text = str_fieldvalue;

but_field_e0.onPress = function()
{
_root.mc_flashText_0.txt_field_1.embedFonts = _root.mc_flashText_0.txt_field_0.embedFonts = _root.bln_embed0;
_root.bln_embed0 = !_root.bln_embed0;
}
but_field_0.onPress = function()
{
if(_root.bln_f0Scaled)
{
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_xscale", Regular.easeOut, _root.mc_flashText_0._xscale, 200, 3, true);
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_yscale", Regular.easeOut, _root.mc_flashText_0._yscale, 200, 3, true);
}
else
{
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_xscale", Regular.easeOut, _root.mc_flashText_0._xscale, 100, 3, true);
_root.twn_field0 = new Tween(_root.mc_flashText_0, "_yscale", Regular.easeOut, _root.mc_flashText_0._yscale, 100, 3, true);
}

_root.bln_f0Scaled = !_root.bln_f0Scaled;
}
/*
code below here is specific to to generating a text feild that can be scaled
*/
var tf_textFormat_0:TextFormat = new TextFormat();
tf_textFormat_0.font = str_fontName;
tf_textFormat_0.size = int_fontSize;
tf_textFormat_0.color = 0x000000;
var tf_textFormat_1:TextFormat = new TextFormat();
tf_textFormat_1.font = str_fontName;
tf_textFormat_1.size = int_fontSize;
tf_textFormat_1.color = 0xffffff;

// create a movie clip to hold the fields and position it
var mc_flashText_1:MovieClip = this.createEmptyMovieClip("mc_dF", 0);
mc_flashText_1._x = 10;
mc_flashText_1._y = 190;
// create 2 text fields in teh new clip
mc_flashText_1.createTextField("txt_field_0", 0, 1, 1, 100, 1);
mc_flashText_1.createTextField("txt_field_1", 1, 0, 0, 100, 1);

// set the properties of the 2 text fields
mc_flashText_1.txt_field_1.embedFonts = mc_flashText_1.txt_field_0.embedFonts = bln_embed1;
mc_flashText_1.txt_field_1.autoSize = mc_flashText_1.txt_field_0.autoSize = "left";
mc_flashText_1.txt_field_1.multiline = mc_flashText_1.txt_field_0.multiline = true;
mc_flashText_1.txt_field_1.wordWrap = mc_flashText_1.txt_field_0.wordWrap = true;
mc_flashText_1.txt_field_0.text = str_fieldvalue;
mc_flashText_1.txt_field_1.text = str_fieldvalue;
mc_flashText_1.txt_field_0.setTextFormat(tf_textFormat_0);
mc_flashText_1.txt_field_1.setTextFormat(tf_textFormat_1);

// set the on press function to control the scaling of the movieclip that holds the fields
but_field_1.onPress = function()
{
if(_root.bln_f1Scaled)
{
_root.twn_field1 = new Tween(_root.mc_flashText_1, "_xscale", Regular.easeOut, _root.mc_flashText_1._xscale, 200, 3, true);
_root.twn_field1 = new Tween(_root.mc_flashText_1, "_yscale", Regular.easeOut, _root.mc_flashText_1._yscale, 200, 3, true);
}
else
{
_root.twn_field1 = new Tween(_root.mc_flashText_1, "_xscale", Regular.easeOut, _root.mc_flashText_1._xscale, 100, 3, true);
_root.twn_field1 = new Tween(_root.mc_flashText_1, "_yscale", Regular.easeOut, _root.mc_flashText_1._yscale, 100, 3, true);
}

_root.bln_f1Scaled = !_root.bln_f1Scaled;
}
but_field_e1.onPress = function()
{
_root.mc_flashText_1.txt_field_1.embedFonts = _root.mc_flashText_1.txt_field_0.embedFonts = _root.bln_embed1;
_root.bln_embed1 = !_root.bln_embed1;
}
stop();
[/as]

In addition I have done a small amount of tidying up on the server in the build up to categorising some of my photographs, and adding 'album' style functionality to the photo gallery application.

And finally in the sorting out, I also uploaded a few new images I found. Its slow progress but I gots to work you know.

Remember the Photo Gallery is a flash 8 file.

Basic Default Gallery

Costa Rica Photos Gallery

For those that missed my previous post, the source code for the photo gallery is here

How this setTimeout() operates in comparison to setInterval() remains to be seen, information regarding return types if there are any. Also the function by all accounts seems to be a global, which may be a little problematic for those creating components or classes.

See the full example here.

To view the full post it can be found Here

I had been considering the uses of the BitmapData class in a related manner. Basically I wanted a method of watermarking external image assets and then removing the watermark when displayed in flash.

The concept i imagined would be to 'brand' my images in the Photo Gallery application that i have produced with a specific colour and transparency water mark.

Using the BitmapData class in a similar manner, store an embedded 'negative' of the watermark inside the flash movie that would be used to display the images.

Once the external images are loaded the water mark could effectively be removed from the image using the embedded water mark, I assume using a similar ColorMatrixFilter that is being used in the example above.

Alas I haven’t had any time to explore the possibilities of this further......

The XML parsing is handled using the AS 2 XPath API Classes.

[as]import mx.xpath.XPathAPI;[/as]

This implementation uses only the flash 8 filters really but the plan is to actually hop, skip, and jump the future development straight into the AS3 frame work and class structure.

The code below is the AS classes that control the presentation as it currently stands, please excuse the lack of commenting these files are provided 'As Is'.

the example presentation can be seen here

BmpImageLoad.as this is used as a basic Bitmap loader and button within the gallery. It is also the class that is used to display the 'main' larger image.

[as]import mx.controls.SimpleButton
import flash.filters.*;
import flash.geom.Matrix;
import flash.display.BitmapData;

class BmpImageLoad extends SimpleButton
{
private static var symbolName:String = "BmpImageLoad";
private static var className:String = "BmpImageLoad";
private static var bmpImageLoad:MovieClip;
private static var __int_intervalTime:Number=31;

private var boundingBox_mc:MovieClip;
private var __mc_contentHolder:MovieClip;
private var __mc_imageShell:MovieClip;
private var __mc_imageHolder:MovieClip;
private var __mc_imageDisplay:MovieClip;
private var __mc_imageLoadVal:MovieClip;

private var __int_bTotal:Number;
private var __int_lPercent:Number;
private var __loadInterval:Number;

private var __bln_isLoaded:Boolean = false;

private var __str_loadTarget:String

function dispatchEvent() {};
function addEventListener() {};
function removeEventListener() {};

public function BmpImageLoad()
{
mx.events.EventDispatcher.initialize(this);
}

private function init():Void
{
super.init();
boundingBox_mc._visible = false;
boundingBox_mc._width = width
boundingBox_mc._height = height;
}

private function size():Void
{
super.size();
boundingBox_mc._width = width
boundingBox_mc._height = height;
}

private function draw():Void
{
size();
createChildren();
}

private function removeChildren():Void
{
__mc_imageLoadVal.removeMovieClip();
__mc_imageDisplay.removeMovieClip();
__mc_imageHolder.removeMovieClip();
__mc_imageShell.removeMovieClip();
__mc_contentHolder.removeMovieClip();
this.filters = [];
}
private function createChildren():Void
{
removeChildren()
__mc_contentHolder = this.createEmptyMovieClip("mc_contentHolder", 0);
__mc_imageShell = __mc_contentHolder.createEmptyMovieClip("mc_imageShell", 0);
__mc_imageHolder = __mc_imageShell.createEmptyMovieClip("mc_imageHolder", 0);
__mc_imageDisplay = __mc_contentHolder.createEmptyMovieClip("mc_imageDisplay", 1);
__mc_imageLoadVal = drawSolidRect(__mc_contentHolder, width, height, 0xcccccc, null, null, "mc_mc_imageLoadVal", 2);
__mc_imageLoadVal._yscale = 1;
__mc_imageLoadVal.cacheAsBitmap = true;
__mc_imageDisplay._visible = __mc_imageShell._visible = __mc_imageHolder._visible = false;

__mc_imageHolder._quality = "BEST";

if(loadTarget != undefined && loadTarget.length)
{
removeInterval(this.__loadInterval, "__loadInterval");
__mc_imageHolder.loadMovie(loadTarget);
setLoadInterval();
}
}

private function setLoadInterval():Void
{
this.__loadInterval = setInterval(this, "doContentLoad", __int_intervalTime);
}
public function load()
{
isLoaded = false;
invalidate();
}

public function setSize(w:Number, h:Number)
{
super.setSize(w, h)
invalidate();
}

public function get isLoaded():Boolean
{
return __bln_isLoaded;
}
public function set isLoaded(val:Boolean)
{
__bln_isLoaded = val;
}

[Inspectable]
public function get loadTarget():String
{
return getTarget();
}
public function set loadTarget(val:String)
{
setTarget(val);
}

private function doContentLoad()
{
var comp = __mc_imageHolder;
var bLoaded = comp.getBytesLoaded();
var bTotal = comp.getBytesTotal();
var bln_hasSize:Boolean;
isLoaded = Boolean((bTotal == bLoaded) && (bTotal > 0));

bln_hasSize = isLoaded && comp._width >0 && comp._height > 0;

__int_lPercent = Math.floor((bLoaded/bTotal)*100);
__mc_imageLoadVal._yscale = __int_lPercent;

if(bln_hasSize)
{
removeInterval(this.__loadInterval, "__loadInterval");
dispatchEvent({type:"bitmapImageLoaded",target:this});
displayLoadedImage();
}
else
{
updateAfterEvent();
}
}

private function displayLoadedImage()
{
var int_glowColor:Number = 0x000000;
var flt_stageGlow:GlowFilter = new GlowFilter(int_glowColor, 0.45, 7, 7, 2, 3, false, false);
var flt_stageBevel:BevelFilter = new BevelFilter(1, 45, 0x999999, 1, 0x333333, 1, 0, 0, 255, 3, "inner", false);
var __bmp_galleryThumb = new BitmapData(width, height, true, 0x00ffffff);
var mtx_imageMatrix:Matrix = new Matrix();

var int_xRatio:Number = (width/__mc_imageShell._width);
var int_yRatio:Number = (height/__mc_imageShell._height);
int_xRatio = int_yRatio = Math.min(int_yRatio, int_xRatio);

var int_imgWidthRatio:Number = (__mc_imageShell._width*int_xRatio);
var int_imgHeightRatio:Number = (__mc_imageShell._height*int_yRatio);
var tXpos:Number = (width -int_imgWidthRatio) /2;
var tYpos:Number = (height - int_imgHeightRatio) /2;

mtx_imageMatrix.scale(int_xRatio, int_yRatio);
mtx_imageMatrix.translate(tXpos, tYpos);

__mc_imageDisplay.attachBitmap(__bmp_galleryThumb, 0, "always", true);
__bmp_galleryThumb.draw(__mc_imageHolder, mtx_imageMatrix, undefined, undefined, undefined, true);

__mc_imageDisplay._visible = true;
__mc_imageHolder.removeMovieClip();
__mc_imageLoadVal.removeMovieClip();

__mc_imageDisplay.filters =[flt_stageBevel];
this.filters = [flt_stageGlow];
}

private function removeInterval(int_Interval:Number, str_intervalName:String):Void
{
clearInterval(int_Interval);
this[str_intervalName] = undefined;
}

private function getTarget():String
{
return __str_loadTarget;
}
private function setTarget(val:String)
{
var int_imgExtL:Number = val.lastIndexOf(".") +1;
var int_imgPLenght:Number = val.length;

if((int_imgPLenght-int_imgExtL)<3) return -1;

var str_imgExt:String = val.substr(-(int_imgPLenght-int_imgExtL)).toLowerCase();
switch(str_imgExt)
{
case "jpg" :
case "png" :
case "gif" :
case "jpeg" :
isLoaded = false;
__str_loadTarget = val;
break;
default :
break;
}
load();
}

/* private drawing functions */
private function drawSolidRect(mc_target:MovieClip, int_w:Number, int_h:Number, int_fillC:Number, int_lineC:Number, int_lineW:Number, str_clipName:String, int_depth:Number):MovieClip
{
var mc_retClip:MovieClip = mc_target.createEmptyMovieClip(str_clipName, int_depth);
if(int_lineW != null && int_lineC != null) mc_retClip.lineStyle(int_lineW, int_lineC);
mc_retClip.beginFill(int_fillC);
_drwRct(mc_retClip, 0, 0, int_w, int_h);

mc_retClip.endFill();

return mc_retClip;
}
private function _drwRct(mc_clip:MovieClip, int_x1:Number, int_y1:Number, int_x2:Number, int_y2:Number):Void
{
mc_clip.moveTo (int_x1, int_y1);
mc_clip.lineTo (int_x2, int_y1);
mc_clip.lineTo (int_x2, int_y2);
mc_clip.lineTo (int_x1, int_y2);
mc_clip.lineTo (int_x1, int_y1);
};
}[/as]

BmpImageList.as uses the previous bitmap loader/button class to populate lists of sequencial images, each image loader is pull in only after the previous one has loaded. The datasource for the list is taken in as an array.

It is possible to specify the number of images that should be visible within the list, or shown within the list, this is effectivly the maximum number of images that will be loaded.

The height of the component dictates the height ratio of each image shown.

[as]import mx.core.UIComponent;
import mx.utils.Delegate;
import BmpImageLoad;

class BmpImageList extends UIComponent
{
private static var symbolName:String = "BmpImageList";
private static var className:String = "BmpImageList";
private static var bmpImageList:MovieClip;

private var boundingBox_mc:MovieClip;

private var __arr_imageList:Array;
private var __arr_imageClips:Array;

private var __int_imagePad:Number;
private var __int_imageNumber:Number;
private var __int_loadImage:Number;
private var __bln_isVertical:Boolean;

function dispatchEvent() {};
function addEventListener() {};
function removeEventListener() {};

public function BmpImageList()
{
mx.events.EventDispatcher.initialize(this);
}

private function init():Void
{
super.init();
__arr_imageList = new Array();
__arr_imageClips = new Array();

boundingBox_mc._visible = false;
boundingBox_mc._width = width
boundingBox_mc._height = height;
}

private function size():Void
{
super.size();
boundingBox_mc._width = width
boundingBox_mc._height = height;
}

private function draw():Void
{
size();
createChildren();
}

private function createChildren():Void
{
var i:Number = 0;
var __mc_currentImageClip:MovieClip;
__int_loadImage = 0;

removeChildren();

while(i < imageList.length)
{
__mc_currentImageClip = createObject("BmpImageLoad", "mc_newImage"+i, getNextHighestDepth(), {_width:((width - (imagePadding*(imageNumber-1)))/imageNumber), _height:height});
__arr_imageClips[i] = __mc_currentImageClip;

__arr_imageClips[i]._visible = false;
__arr_imageClips[i].addEventListener("bitmapImageLoaded", Delegate.create(this, bmpLoaded));
++i;
}
arrange()
}

private function arrange()
{
var i:Number = 0;
while(i < imageList.length)
{
if(i)
{
__arr_imageClips[i]._x = ((((width - (imagePadding*(imageNumber-1)))/imageNumber) + imagePadding)*i);
}
else
{
__arr_imageClips[i]._visible = true;
__arr_imageClips[i].loadTarget = _root.str_folderRoot + imageList[i].firstChild.nodeValue
}
++i;
}

}
private function removeChildren():Void
{
var i:Number = 0;
while(i < __arr_imageClips.length)
{
destroyObject(__arr_imageClips[i]._name);
++i;
}
}

private function bmpLoaded(obj_evnt:Object)
{
dispatchEvent({type:"bitmapImageLoaded",target:__arr_imageClips[__int_loadImage]});
__arr_imageClips[++__int_loadImage]._visible = true;
if(!(__int_loadImage == imageList.length))
{
__arr_imageClips[__int_loadImage].loadTarget = _root.str_folderRoot + imageList[__int_loadImage].firstChild.nodeValue;
}
else
{
dispatchEvent({type:"bitmapListLoaded",target:this});
}
}

[Inspectable (type="Array")]
public function set imageList(arr_iL:Array)
{
__arr_imageList = arr_iL;
invalidate();
}
public function get imageList():Array
{
return __arr_imageList;
}

[Inspectable (type="Number", defaultValue=10)]
public function set imageNumber(int_n:Number)
{
__int_imageNumber = int_n;
invalidate();
}
public function get imageNumber():Number
{
return __int_imageNumber;
}

[Inspectable (type="Number", defaultValue=10)]
public function set imagePadding(int_p:Number)
{
__int_imagePad = int_p;
invalidate();
}
public function get imagePadding():Number
{
return __int_imagePad;
}

[Inspectable (type="Boolean", defaultValue=true)]
public function set isVertical(bln_v:Boolean)
{
__bln_isVertical = bln_v;
invalidate();
}
public function get isVertical():Boolean
{
return __bln_isVertical;
}
}[/as]

BmpImageGrid.as is effectively a control class for the number of bitmap image lists that are required to display all images in a given data source when the number of images in each list is set. Again the data source is provided as an array.

It is possible to affect the height and padding of the image lists that are created within the image grid.

[as]import mx.utils.Delegate;
import mx.core.UIComponent;
import BmpImageList;

class BmpImageGrid extends UIComponent
{
private static var symbolName:String = "BmpImageGrid";
private static var className:String = "BmpImageGrid";
private static var bmpImageGrid:MovieClip;

private var boundingBox_mc:MovieClip;
private var __mc_contentHolder:MovieClip;
private var __arr_imageLists:Array;

private var __int_imagePad:Number;
private var __int_imageNumber:Number;
private var __int_rowHeight:Number;
private var __int_loadImage:Number;
private var __int_iRowNumber:Number;

private var __bln_autoSize:Boolean;

function dispatchEvent() {};
function addEventListener() {};
function removeEventListener() {};

public function BmpImageGrid()
{
mx.events.EventDispatcher.initialize(this);
}

private function init():Void
{
super.init();
__arr_imageLists = new Array();

boundingBox_mc._visible = false;
boundingBox_mc._width = width
boundingBox_mc._height = height;
}

private function size():Void
{
super.size();
boundingBox_mc._width = width
boundingBox_mc._height = height;
}

private function draw():Void
{
size();
createChildren();
}

private function getImageCellDims():Void
{
var int_minRow:Number = Math.ceil(imageList.length/imageNumber);
__int_iRowNumber = Math.max((height / rowHeight), int_minRow);
if(autoSize)setSize(width, (rowHeight + imagePadding));
dispatchEvent({type:"gridDimensionsSet",target:this});
}

private function createChildren():Void
{
getImageCellDims()
removeChildren();
__mc_contentHolder = createEmptyMovieClip("mc_contentHolder", 0);
var __mc_currentImageRow:MovieClip;
var i:Number = 0;
var int_arrSplice:Number
var tmp_arrImages:Array;
__int_loadImage = 0;

while(i < __int_iRowNumber)
{
int_arrSplice = (imageNumber*i);
tmp_arrImages = imageList.slice(int_arrSplice, (int_arrSplice+imageNumber));

__mc_currentImageRow = createObject("BmpImageList", "mc_newBmpImgList"+i, i, {_width:width, _height:rowHeight, imageNumber:imageNumber, imagePadding:imagePadding});
__mc_currentImageRow._visible = false;
__mc_currentImageRow.addEventListener("bitmapListLoaded", Delegate.create(this, bmpRowLoaded));
__mc_currentImageRow.addEventListener("bitmapImageLoaded", Delegate.create(this, bmpLoaded));

if((int_arrSplice+imageNumber) > imageList.length) __int_iRowNumber = ++i;
++i;
}
arrange();
}

private function arrange()
{
var i:Number = 0;
var int_arrSplice:Number
var __mc_currentImageRow:MovieClip;

while(i < __int_iRowNumber)
{

int_arrSplice = (imageNumber*i);
__mc_currentImageRow = this["mc_newBmpImgList"+i];
if(i)
{
__mc_currentImageRow._y = (rowHeight + imagePadding) *i;
}
else
{
__mc_currentImageRow._visible = true;
__mc_currentImageRow.imageList = imageList.slice(int_arrSplice, (int_arrSplice+imageNumber));
}
++i;
}

}

private function bmpClicked(obj_evnt:Object)
{
dispatchEvent({type:"click",target:obj_evnt.target});
}
private function bmpLoaded(obj_evnt:Object)
{
obj_evnt.target.useHandCursor = true;
obj_evnt.target.addEventListener("click", Delegate.create(this, bmpClicked));
}

private function bmpRowLoaded(obj_evnt:Object)
{

if(autoSize)setSize(width, ((rowHeight + imagePadding) * (__int_loadImage+2)));
dispatchEvent({type:"bitmapListLoaded",target:this});

++__int_loadImage

if(!(__int_loadImage == __int_iRowNumber))
{
this["mc_newBmpImgList" + (__int_loadImage)]._visible = true;
var int_arrSplice:Number = (imageNumber*__int_loadImage);
this["mc_newBmpImgList"+__int_loadImage].imageList = imageList.slice(int_arrSplice, (int_arrSplice+imageNumber));
}
else
{
if(autoSize)setSize(width, ((rowHeight + imagePadding) * (__int_loadImage)));
dispatchEvent({type:"bitmapGridLoaded",target:this});
}
}

private function removeChildren():Void
{
var i:Number = 0;
while(i < __int_iRowNumber)
{
destroyObject(this["mc_newBmpImgList"+i])
++i;
}
__mc_contentHolder.removeMovieClip();
}

[Inspectable (type="Array")]
public function set imageList(arr_iL:Array)
{
__arr_imageLists = arr_iL;
invalidate();
}
public function get imageList():Array
{
return __arr_imageLists;
}

[Inspectable (type="Number", defaultValue=35)]
public function set rowHeight(int_n:Number)
{
__int_rowHeight = int_n;
invalidate();
}
public function get rowHeight():Number
{
return __int_rowHeight;
}

[Inspectable (type="Number", defaultValue=10)]
public function set imageNumber(int_n:Number)
{
__int_imageNumber = int_n;
invalidate();
}
public function get imageNumber():Number
{
return __int_imageNumber;
}

[Inspectable (type="Number", defaultValue=10)]
public function set imagePadding(int_p:Number)
{
__int_imagePad = int_p;
invalidate();
}
public function get imagePadding():Number
{
return __int_imagePad;
}
[Inspectable (type="Boolean", defaultValue=true)]
public function set autoSize(bln_aS:Boolean)
{
__bln_autoSize = bln_aS;
invalidate();
}
public function get autoSize():Boolean
{
return __bln_autoSize;
}
}[/as]

It’s amazing that some companies just don’t listen to the developers that are trying to build there products.

http://www.jessewarden.com/archives/2005/10/reinvent_yourse.html

bittube.com Flash 8 version

The next job was to provide a photo gallery that would show the loaded background images from the site in a more user friendly format, (thanks to Sean for the prompt). Again the whole lot is Code generated, so nice and small on the file size and driven by XML, so easy to update.

Flash 8 Photo Gallery

Once I have tidied up the source i will post the classes.