InnerDriveStudios.com

There is an old trick which comes down to drawing a fluid line through controlpoints, by using the average of the controlpoints as anchors.

Here is my quick and dirty go at it:

You can download the example here: ControlPointDrawing (74)

A question on the flashcoders list about an hour ago triggered me to put together a very simple example that I have been wanting to put together for ages now.

How do you get the name of a function?

With function we could refer to:

• any function
• a calling function
• a function being called

My reflection package is at the core of my xflas2 logger. It provides much the same information MTASC can put into a trace statement WITHOUT MTASC (except for the linenumbers).

Anyway, the reflection package is perfectly capable of being used standalone without a logger of some kind. It provides two simple classes with an even simpler API: ClassFinder and FunctionFinder.

Imagine a function:

	private static function runExample3() {
		_print (
			"I am :"+
			FunctionFinder.getFunctionName(arguments.callee)+
			" and I am defined in "+
			ClassFinder.getClassName(
				FunctionFinder.getFunctionClass(arguments.callee)
			)+
			" and was called by "+
			FunctionFinder.getFunctionName(arguments.caller)
		);
	}

Note that it’s static, but it doesn’t have to be, I’m just being a lazy git.

This prints:


I am :runExample3 and I am defined in SampleClass and I was called by main


Now, for the small print : you HAVE to call ClassFinder.registerAll() once somewhere at the start of your program.

Download the sample here: GettingCalleeName (116)

Check the following example:


var mc:MovieClipLoader = new MovieClipLoader();
mc.addListener (this);
mc.loadClip(_viewUrl, _root);


Should work right?

Should but doesn’t. What’s the gotcha? It doesn’t work on _root.
Not that that is a bad thing since _root is evil anyway, but I was only writing a ‘quick’ test for something.
Flash turns it into a ‘quirck’ test instead.

Correct way is to load it into a subclip of some kind.

You might stop reading here, everything you need to know is in the provided example.

So you have decided to read on. Yes, it’s 2007 & I’m still doing AS2. I know, it’s sad, and I’m never gonna get my band started (weird purple tentacle sucking noises). But believe or not, I still love it .
One of the things on my todo list was understanding the AsSetPropsFlags demon. As with all things, once you do understand them, you can’t understand why it took you so long.

AsSetPropFlags is simple. Really. Assuming you know your binary numbers, and I assume you do. But if you don’t check the example below and the utility classes provided.

So now I’m going to try and explain it to you . Note that I only have used it in Flash 7 and above, so don’t ask me about all the flash 5 and flash 6 weirdness involved.

Properties and their attributes

Before diving into _global.ASSetPropFlags let us discuss properties first. Properties are part of an object.

For example:

var lObj:Object = new Object();
lObj ["testProp"] = "testValue";

gives us an object with a single property ‘testProp’.

In flash these properties have certain attributes, just as files in your filesystem can have a read only attribute, so can a property of your object. Which attributes do you ask? These:

• the hidden attribute: a property can be visible or hidden, meaning for … in loops will or will not enumerate over the property
• the protected attribute: a property can be deletable or not, meaning delete obj.prop can throw away the object stored in obj.prop or not
• the read only attribute: a property can be overwritable or read only, meaning you can assign store new values in the property or not

A property might have default values set. In the previous example where a new object was created, the default values are (visible, deletable, overwritable). Some other properties such as _global might have all their properties hidden.

I don’t want to go into the ‘why would you need this’ too much, since you probably already know or you wouldn’t be reading this, but sometimes it might be necessary to be able to enumerate over all hidden objects for example in order to implement something such as reflection.

Now we are almost getting to explaining _global.ASSetPropFlags.

Attribute representation and storage

A question to be answered first is HOW are these attributes stored. To be honest I don’t have a clue. Somewhere with the object. This is part of why it’s so confusing. These attributes are stored, they have a representation, and apparently can be altered through _global.ASSetPropFlags, but we cannot retrieve them directly to print them (except through a little trick, but we’ll get to that).

Let’s check the representation of these attributes first. Although we cannot directly retrieve them, some smart minds have figured them out by checking their findings with the documentation from Adobe (thanks John Grden ).

Basically: Each property has a bitflag, consisting of 3 bits, one bit for each attribute:
bit 1 – hidden (0 no, 1 yes)
bit 2 – protected (0 no, 1 yes)
bit 4 – read only (0 no, 1 yes)

As said, you cannot retrieve these directly, but you can test them. If I tell you anObject has a property aProperty, you can check if you encounter it while enumerating, check if you can delete it, and check if you can overwrite it. Based on your findings you know the bitflags. Luckily this code was already available on osflash.org, and I’ve included the snippet in the ObjectUtil.as contained in the download (check the getPropertyFlags method). (Note that the code is not completely the same, since the original modifies the flags while testing and mine doesn’t).

So… now we know about attributes, attribute representation in binary format, and retrieving the bitflags for a property. But that’s not the end of it, we might want to alter these attributes as well. That is where _global.ASSetPropFlags comes in.

You might *still* stop reading here, everything you need to know is in the provided example. All the _global.ASSetPropFlags calls and intricacies are neatly wrapped in that class.

_global.ASSetPropFlags in detail

The _global.ASSetPropFlags method has the following signature:

_global.ASSetPropFlags(pObj:Object , pProp:Object , pBitSet:Number , pBitClear:Number)


ASSetPropFlags takes four arguments (note the global to satisfy MTASC):

@param pObj
- the object whose properties you want to affect

@param pProp a specification of the properties whose flags you want to change
- null -> all properties,
- “propName” -> a single prop,
- “p1,p2″ -> multiple properties,
- ["p1", "p2"] -> multiple properties

@param pBitSet
- any bits that are 1 are set on the target property, zero bits are ignored (so whatever you specify here it will NEVER CLEAR any bits)

@param pBitClear
- any bits that are 1 are cleared on the target property, zero bits are ignored (so whatever you specify here it will NEVER SET any bits)

Confused about the pBitSet and pBitClear?
Remember that you would use the ASSetPropsFlags to alter specific attributes, eg you wish unhide all properties in _global. So you know which bit you want to change, but you don’t know the bits for all the other properties, so pBitSet let’s you specify only the bits you want to set. It does not let you specify which bits to ‘unset’ so:

Assume we have:

var lObj:Object = new Object();
lObj ["testProp"] = "testValue";
trace(ObjectUtil.getPropertyFlags(lObj, "testProp")); // traces 0
_global.ASSetPropFlags(lObj , "testProp", 1, 0); //sets bit 1
trace(ObjectUtil.getPropertyFlags(lObj, "testProp")); // traces 1
_global.ASSetPropFlags(lObj , "testProp", 2, 0); //sets bit 2, but does not unset bit 1
trace(ObjectUtil.getPropertyFlags(lObj, "testProp")); // traces 3

So you see the pBitSet only specifies the bits that are set, first we pass bit 1 and then bit 2, in binary 011, which is 3 in decimal. In other words:

001
010
---
011


So how do we clear bits then? Right through the bBitClear flag. It works exactly the same, however instead of setting bits, the specified bits are cleared. And they are cleared BEFORE the bits specified in pBitSet are applied.

Referring to the previous example again:

var lObj:Object = new Object();
lObj ["testProp"] = "testValue";
trace(ObjectUtil.getPropertyFlags(lObj, "testProp")); // traces 0
_global.ASSetPropFlags(lObj , "testProp", 1, 0); //sets bit 1
trace(ObjectUtil.getPropertyFlags(lObj, "testProp")); // traces 1
_global.ASSetPropFlags(lObj , "testProp", 2, 1); //clear bit 1, sets bit 2,
trace(ObjectUtil.getPropertyFlags(lObj, "testProp")); // traces 2

Ok, so you might say: what the.. ? How can I ever be sure what flags I end up with? Well thats very simple. If you want to be entirely sure and in control of the endresult you use:

_global.ASSetPropFlags(lObj , "testProp", newFlags, 7); //clear all bits, sets newFlags

You clear all bits and set whatever you want. However usually you want to flip certain bits so for enabling a certain bit you use:

_global.ASSetPropFlags(lObj , "testProp", bitToSet, 0); //clear nothing, set my bit

and to clear it:

_global.ASSetPropFlags(lObj , "testProp", 0, bitToClear); //clear my bit, set nothing.

If you’d rather see it in formula form:

The formula is:
oldBit ^(oldBit & clearBit) | setBit

where oldBit represents the property’s current flags. The oldBit and clearBit are AND-ed together first giving you only those bits from clearBit that are actually in oldBit. Then this value is XOR against oldBit, meaning the bits from clearBit that are in oldBit are flipped to 0. Last but not least we OR it against all bits in setBit.

You might have seen (oldBit ^ clearBit) ^ setBit, that formula is not correct:

var oldBit:Number = 1;
var clearBit:Number = 2;
var setBit:Number = 3;
trace (oldBit ^(oldBit & clearBit) | setBit); //--> RIGHT FORMULA traces 3
trace ((oldBit ^ clearBit) ^ setBit);  //--> WRONG FORMULA traces 0

Download example

If you’d rather see in in action, everything you need to know is in the provided example: AssetpropsflagsExample (88)

Credits

I would like to thank John Grden for his (code) groundwork and assistance in getting my head around the specifics. Other credits go to the people who created the osflash documentation on http://osflash.org/flashcoders/undocumented/assetpropflags especially Jerome Cordiez

If I forgot to give you due credit, or you would like to see it changed, drop me a line!

Very rudimentary image perspective demo. Since it’s performance intensive in AS2 you’ll have to click the more link if it’s not already visible. Note that this is not a demo of how it should be done, it’s more a test of how far we can push displacementmaps.

You just got to read the original story by the way, it’s hilarious: http://www.b3ta.com/board/496182

You can download this example here (Flash IDE & FlashDevelop / MTASC compatible):ImagePerspectiveEffect (109)

ps check out some posts on distorted perspective planes for a much better way

A post on the flashcoderlist (http://www.mail-archive.com/flashcoders@chattyfig.figleaf.com/msg34296.html) asking about an image turn around effect got me coding for 2 hours in a row until I finished it and realized my effect was not quite similar to what was required (http://www.ja-ik-doe-mee.be/).

Anyway I liked it nonetheless so posting it anyway.

You can download this example here (Flash IDE & FlashDevelop / MTASC compatible):ImageTurnEffect (68).

I already blogged about this, but I saw that some items could use some more explanation. Please read “Getting the displacement you need” first for the basic idea.

In short the principle is:

• you have a reference map, say A
• you apply a distortion effect to the reference map created a distorted version of A say A’
• you calculate the displacement map that could transform A into A’ by calculating the difference in pixel value between A and A’

Some important points before we start:

Use a lossless image format (eg bmp). If you use lossy compression anywhere in the pipeline, you are throwing information away. This missing information results in artifacts in the displacement map. So, save all images as BMP for example. Import them into flash and set the properties to lossless.

We will now describe some steps in my previous post in some more detail.

Creating the reference map

Option 1 – Creating the reference map in photoshop
—————————————————————————————————-

• create a new image 256 x 256
• add another layer
• linear gradient fill the bottom layer from left to right, black to red
  (while filling keep shift pressed to make sure the gradients are vertical/horizontal &
  zoom in a bit to make sure you fill the whole area)
• linear gradient fill the top layer from top to bottom, black to green
• set the top layer to difference, or screen, or lighten (doesn’t matter in this case)
• verify the top left pixel has RGB value (0,0,0) and the bottom right has (255,255,0), if this is not the case, start over

Option 2 – Creating the reference map through code in Flash
—————————————————————————————————-

Copy & paste in imaging programming and save.

Creating the transformed map/image

• Open up your base reference map
• Apply a distortion filter, eg Spherize
• Save the image

Calculating / deducting the displacement map

• import both the base reference map A and the transformed reference map A’ into Flash
• set the properties to lossless
• export them as base and transformed
• run the difference calculation code below

Scaling the displacement map / Preventing artifacts
To prevent confusing there are two ways of scaling, one is to scale the displacements, and two is to resize the displacement map itself. This technique applies to both types.
As you scale the displacement map, you might see artifacts appearing. How bad these artifacts are depends on how you are scaling the map and how much you are scaling it. Since the displacement map can only displace pixels from -128 to 128 without scaling, the feature has its limits.

What might help in preventing artifacts is maximizing the pixel difference, so that less scaling in the filter in needed. How far you can maximize it depends on the image itself. Below is an example of multiplying the difference until it breaks:

The second image is useable, but the 3rd is not (unless you want some glass like special effect, then it is very nice).

Another thing that can help preventing artifacts is blurring. Basicly if you resize the displacement map, any lines that you see in the map, will be visible in the result as well. Blurring those lines will improve the result.

The image on the left shows artifacts due to displacement map scaling, the image on the right uses the same map, but blurred.

The code for this post can be downloaded here: BitmapDifferenceExample (73).

Note that if you generate your displacement maps through code a lot of this information does not apply:). The next post will go deeper into the panoramic displacement mapping.

In this post we will be looking at the creation of a distorted panorama using a displacement map. The two examples below show the difference between a panorama without and with distortion (notice how in the distorted version the grid bends):

Some simple tricks to note up front:

• detecting the mouse outside of the panorama is done through an empty movieclip with a stage-sized hitarea and an onpress=null
• in order to displace the whole stage at once, you can set the displacement map on the root but you need to mask the stage through code (ie setMask)

We will be looking at a visual way to generate the required displacement maps using a 3D program and an imaging program. Ofcourse you can generate the required maps through code as well, but I like the visual way of doing stuff like this. It has its limitations of course. I have summed up the whole process in a slide show below. The different resources that are required can be downloaded below as well. Note that I’m still experimenting with this stuff:). Some of the slides refer back to previous posts.

The slides refer to some resources. The base map and difference calculation resources can be found elsewhere on this blog (search for displacement). The displacement maps can be retrieved from the downloaded source file, but now you know how to create them yourself as well. Let’s conclude with what happens if you tinker with the rendered image and force overflows etc:

That said, this is again an example of what you can do with displacementmaps, but not the way to go when you want to create a real cubic panorama.

In my previous post I explained the basics of displacement mapping, and I promised to tell something about getting the filter to do what you want it to do. Well, in order to do so, let’s look at the picture I showed you again, written a little differently:

+

*?

=