A reader emailed with a problem he’s having with the ExternalInterface. It seems that his code works fine when the page is hosted on a server but doesn’t work sometimes when accessed directly on the PC. ( Meaning opening the file locally in the browser with a C://path/filename. )

I seem to recall some issues that I had in the past but I haven’t worked with the ExternalInterface in over a year.

The error he gets is: Object or property is not supported.

The reader who asked the question said that he found no mention online nor in the documentation about this. Anyone out there know what’s the what?

Flash and XML go together like peanut butter and jelly. If your working on a project where there is data inside of Flash that is likely to change then XML is the way to go. That way you, or anyone with a text editor, can update an XML file - essentially a text file - and change things inside your Flash app.

The downside to using XML is that the data you get back can be confusing as hell to navigate through. I had to deal with it enough that I finally created a class - PXP2 - that takes care of all the mundane aspects of using XML so that you can get right to work and skip a lot of code and confusion.

In this tutorial I’ll do a simple example of how I would create a site navigation using XML.

[ Download FLV ] [ Download sample files ]

A few notes: there is no AS3 version PXP2 of this because AS3 has the E4x class which is like PXP2 on steroids. I’ll do a tutorial on how to use E4x in a few weeks.

PXP2 stands for: Polygeek Xml Parsing Project = PXPP = PXP2

I’m working on an image browser to go along with a video player. I noticed that after browsing to the 12th image the loading slowed down considerably.

When an image is replaced it fades to 0 and the image that gets loaded fades to 100. Nothing I haven’t done countless times before.

To fix the slow loading after the 12th image I tested a few things. First I made sure that my reference to the imageLoader was cleaned up. It was. Yeah me. :-)

Then I tried removeMovieClip on the image that faded to 0. That fixed it. Problem is that now I have to load each image every time instead of just fading it back to 100 if it’s already been loaded.

Then I tried setting the visible = false  after the image had faded out. That worked. Everything runs smooth.

I would have thought that an alpha = 0 would take that object out of the rendering list but I suppose it doesn’t. If you don’t want the Flash player to be rendering an object set it’s visibility to  false.

I have to look this up all the time because I can never remember the syntax for using FlashVars in the various ways one embeds a SWF in an HTML file.

FlashVars is a way to pass data from the HTML containing page. You can read more about it here.

[ download example using AC_RunActiveContent and object/embed tags ]

For the <object><embed> tags

The <object> tag will run in IE. Add this param along with the others:

<param name=”FlashVars” value=”var1=One&var2=Two” />

The <embed> tag will run in Netscape/FireFox browsers. Simply place the following attribute anywhere inside the <embed> tag:

FlashVars="var1=One&var2=Two"

Using the Flash IDE’s Javascript ( AC_RunActiveContent.js )

I add the FlashVars parameter to the end of the AC_FL_RunContent function like so:
’salign’, ”, ‘flashvars’,'var1=One&var2=Two’); //end AC code

Don’t forget to add a comma after the - ’salign’, ”, - line. If you don’t you’ll get a Javascript error and nothing works. I’ve only made that mistake a few dozen times.

And don’t forget, you have to edit the <object><embed> tags contained in the <noscript> block manually.

Using swfobject

Check out the examples page at blog.deconcept.com here.

It’s pretty simple:

<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “400″, “200″, “8″, “#336699″);
so.addVariable(”var1″, “One”);
so.addVariable(”var2″, “Two”);
so.write(”flashcontent”);
</script>

Using Kimili Flash Embed Wordpress plugin

Use the fvars attribute:

[kml_flashembed movie="/flash/471_FlashVars.swf"height="100" width="200"

fvars="var1=One&var2=Two" /]

This video tutorial begins where the first one left off. Here you’ll learn to place your class files inside a unique name space within your global class path.

If you’ve ever downloaded someone else’s class files and couldn’t get them to work this might help.

[ download FLV ]

Adobe affiliate links help support video tutorials here at polyGeek.com

Start building web applications with Adobe Flex Builder 2

Notes:

• An import statement adds that class to your SWF when it’s compiled and adds on to the file size of your SWF. If you’re importing a class but not using it then you’ll bloat your SWF filesize unnecessarily. This happens from time to time when you edit your code and remove a call to a class and forget to remove the import statement.

Lee Brimelow at gotoAndLearn.com did a video tutorial covering the use of custom classes. I’d suggest watching that if you still have any questions.

If you’re using class files ( .as ) you need to know where to put them. It can be a little confusing because they can go in more than one place. In the video below I’ll cover the basics of where you can put these files and make them work.

[ download FLV ]

Related videos: Class files with name spaces and the import statement

Adobe affiliate links help support video tutorials here at polyGeek.com

Start building web applications with Adobe Flex Builder 2

Lee Brimelow at gotoAndLearn.com did a video tutorial covering the use of custom classes. I’d suggest watching that if you still have any questions.

Jensa suggested the idea and I couldn’t resist.

LiquidText requires 6 parameters to be passed to the constructor. I’ll create variables to pass to the constructor so that you can better see what each does in the comments.

// first you have to import the class

import com.polygeek.ani.LiquidText;

// liquidLayer is a MovieClip that you can create in the authoring tool

// or at runtime. It's simply an empty MovieClip where the text will be placed

var liquidLayer:MovieClip = this.createEmptyMovieClip( "liquidLayer", this.getNextHighestDepth() );

// wrapShapes is an Array of MovieClips that the text will wrap around.

// You can pass as many MovieClips as you wish but the more you use

// the slower the rendering will run. In this case I'm passing just two

// shapes for the text to wrap around.

var wrapShapes:Array = [ shapeRight, shapeLeft ];

// wrapText is just the text that you will have wrapping around the shapes

// that you passed in the wrapShapes array. The more text there is the

// slower the rendering will run.

var wrapText:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...";

// the next two parameters describe the _x and _y position of where the first

// word will attempt to place itself in the liquidLayer.

var textAreaX:Number = 0;

var textAreaY:Number = 0;

//  textAreaWidth is just that, how wide a line of text can be

// before it wraps to the next line

var textAreaWidth:Number = 400;

// Optionally you can pass two more parameters:

// textFormat is the TextFormat that you define to adjust

// the size, font, ect. of the wrapText

var textformat:TextFormat = new TextFormat();

textformat.size = 14;

textformat.color = 0x000066;

textformat.font = "_sans";

// lineHeight is a number that describes how far it is from the top of

// one line of text to the top of the line below it.

var lineHeight:Number = 18;

// now create an instance of LiquidText

var liquidtext:LiquidText = new LiquidText( 	liquidLayer,

						wrapShapes,

						wrapText,

						textAreaX,

						textAreaY,

						textAreaWidth,

						textformat,

						lineHeight );

Here is what the previous code produces [ download source FLA | download LiquidText.as ]

Note: to add a line break to the text use the pipe symbol “|”.

Now that you have created an instance of LiquidText you can use the API to change some of the settings. Here is what you have available.

reflowText()
Recalculate the position of all the words in the wrapText. You would use this if one of the shapes
that the wrapText is wrapping around has moved. All of the other setters automatically call this method.

setTextAreaY( Number )
Change the _y location of where the first word should attempt to be placed.

setTextAreaX( Number )
Change the _x location of where the first word should attempt to be placed.

setTextFormat( TextFormat )
Change the TextFormat of the wrapText.

setLineHeight( Number )
Change the lineHeight - space from top of one line to the top of the next - of the wrapText.

setTextWidth( Number )
Change the width of the area that the wrapText will attempt to fill.

I’m about to rewrite my LiquidText class in AS3 but first I thought I’d apply some of the code optimizations to the AS2 version and add some API calls to adjust settings just in case someone wants to use it.

Here’s an example of it in action below [ download FLV | download LiquidText.as ]

Essentially, what LiquidText does is it takes the text that you give it and breaks it down into an array of the individual words. It then finds a place where it can put the first word within the area that you specify without hitting any of the shapes that it wraps around. Then it places the following words until it runs out of space on that line. Then it wraps to the next line and starts the process over again.

A reader asked me if there is a reliable way to determine if the mouse cursor has left the Stage in Actionscript 2. I believe the best approach is to use Javascript to see which object in the DOM has the mouse over it. But it would be nice if there were a reliable way to do it in Actionscript.

Here’s what I came up with which amounts to zero:

• There are no Stage events to listen to so that doesn’t help.
• Checking the _xmouse, _ymouse on an interval doesn’t really help because the last position of the mouse cursor is reported when the cursor leaves the Stage.
• Creating a large MovieClip to cover the Stage and listening for onRollOut on it won’t help because any MovieClips above it will trigger the onRollOut when you rollOver another MovieClip.

It’s rather simple to do with Actionscript 3 but that isn’t an option for my friend.

[ download code ]

package {

  import flash.display.Sprite;
  import flash.events.Event;

  public class MouseOverStage extends Sprite {

    public function MouseOverStage() {
      stage.addEventListener( Event.MOUSE_LEAVE, mouseOutHandler );
    }

    private function mouseOutHandler( event:Event ):void {
      trace( "mouse has left the stage" );
    }
  }
}

Anyone have a suggestion?