explorers' club

Scrolling, iFrames & Facebook Apps

jwopitz — Tue, 30 Apr 2013 15:35:19 +0000

THE PROBLEM

I have a Flash SWF being loaded into a PHP page that then is being loaded into a Facebook canvas. The FB page has content in the right side ad area that creates a vertical scroll bar regardless of the height of my game content. My game’s canvas has a fluid height in order to fully fill the content area of the canvas

There is a zoom feature in my game that is triggered by the mouse wheel.

When using the mouse wheel (to zoom in my game), this is also getting picked up by the browser to scroll the content. So I’m getting a simultaneous zoom/scroll effect going on which is undesirable to say the least.

original Stackoverflow post - http://stackoverflow.com/questions/16302789/understanding-javascript-scrolling-iframes

THE SOLUTION (I THINK)

If the FB canvas content has no overflow, then it will not trigger scroll events via the mouse. It will however trigger mouse wheel events, which are necessary for triggering the scroll events via the mouse. By cancelling and stopping the propagation of the mousewheel event, you are stopping that event from reaching into the non-iFrame content owned by Facebook.



    



    

    
        content area

If you’d like to test this yourself, set up a FB app and use this as your app’s content HTML.

Note to Self: Phone Number to String formatting

jwopitz — Thu, 08 Nov 2012 17:05:09 +0000

Yep… still doing as3 and flex.

So the issue is this: The current database table that stores a phone number basically has a column for area code, a column for the phone number prefix and then a column for the suffix. Each has a 5 digit limit. This is an enterprise-wide table scheme for storing their phone numbers, so making a db change is unlikely to happen.

As for making the service modification to send the client a string…. well that’s a topic for another post. The short of it is that I am parsing the above 3 fields coming in and aggregating them into a string value. Here’s how (since the logic is kinda wonky).

           
[Deprecated]
public var phArea:int;

[Deprecated]
public var ph1:int;

[Deprecated]
public var ph2:int;

[Transient]
[Bindable]
public function get phoneNoString():String
{
	var s0:String = phArea > 0 ? phArea.toString() : "";
	var s1:String = ph1 > 0 ? ph1.toString() : "";
	var s2:String = ph2 > 0 ? ph2.toString() : "";

	return s0 + s1 + s2;
}

public function set phoneNoString( value:String ):void
{
        //remove any non-digit characters, e.g. (###) ###-####
        var s:String = value ? value.replace( /[\D]/g, "" ) : "";

	phArea = int( s.slice( 0, Math.min( 3, s.length )));
	ph1 = s.length > 3 ? int( s.slice( 3, Math.min( 6, s.length ))) : 0;
	ph2 = s.length > 6 ? int( s.slice( 6, s.length )) : 0;
}

There may be more efficient ways to achieve this (say via RegExp) but this was my first quick and dirty attempt to fix this irritating requirement.

Fun @ the DR’s Office

jwopitz — Sat, 14 Apr 2012 19:40:27 +0000

I thought i would show you my new right bionic arm:

Note to Self: Spark State Exclusions

jwopitz — Mon, 26 Mar 2012 16:25:17 +0000

[Note to Self]

In some cases you may develop a particular UX to have nested state exclusion such as:

Problem

You will encounter this Compile-Time Error:

Component cannot be realized within state ‘default’ because an ancestor is excluded from ‘default’.

The intent being that the outer group is excluded from only one state, however you also want to apply additional exclusions to that group’s children, in this case, the child group ALSO being excluded from “stateB”. To recap the child group is to be exclude from both “default” and “stateB”.

Solution

You must explicitly define all state exclusions to the nested objects like so:


    default, stateB"/>

using bitflags and bitwise math

jwopitz — Mon, 13 Feb 2012 18:30:30 +0000

[note to self]

given the following:

const FLAG_A:uint = 1 << 0; // dec = 1, bit = 0001
const FLAG_B:uint = 1 << 1; // dec = 2, bit = 0010 
const FLAG_C:uint = 1 << 2; // dec = 4, bit = 0100
const FLAG_D:uint = 1 << 3; // dec = 8, bit = 1000 

var flags:uint;

so if flags = 0, then we have no flags set, however if flags >= 1 then we have some flags assigned. This makes it quite easy to check by simply saying:

flags = 0;
trace( Boolean( flags )); // false

flags = FLAG_A | FLAG_C; //dec = 5, bit = 0101
trace( Boolean( flags )); // true

adding flags w/ bitwise OR

let’s do some adding of some values to our flags:

flags = 0;
flags = FLAG_A | FLAG_C | FLAG_D; //dec = 13, bit = 1101

this basically says in decimal type notation:

flags = FLAG_A + FLAG_C + FLAG_D;

And indeed you could use regular decimal operators and come to the same value, but where decimal operations fail is in being able to continually assign a flag of the same value multiple times as in this case:

//initialize the flags
var bitflag:uint = FLAG_A | FLAG_C | FLAG_D; //dec = 13, bit = 1101
var decflag:uint =  FLAG_A + FLAG_C + FLAG_D; //dec = 13, bit = 1101

Let’s assume that logic elsewhere isn’t aware of the initial value and decides to add an additional flag, in this case, one that was previously assigned. Think of the invalidation mechanisms, setting one prop might call invalidateProps, and then subsequent props settings also calls invalidateProps… sorta analogous right?

bitflag = bitflag | FLAG_A; //dec = 13, bit = 1101

Note that the flag remains the same value. This is due to the fact that the bitwise OR does not carry over like traditional addition. In fact this could be viewed more along the lines of a logic operation for each radix. Now let’s see if the same holds true for traditional decimal operations:

decflag = decflag + FLAG_A; //dec = 14, bit = 1110

Not only did the decimal operation fail us, it also set another flag for us unintentionally. Note that 1110 is the same as:

FLAG_B | FLAG_C | FLAG_D; //dec = 14, bit = 1110

Ok so we’ve seen how the bitmath operations allow us to add flags without having to worry about the whole carry over issue.

Now let’s look at the Bitwise OR operation in more depth. In logic, if A OR B then TRUE (forgive me, I have since forgotten the proper syntax for logic statements). In the case of bitmath, for a given radix, if either one of them is a value of 1, then the radix for the output is 1. The only time the radix to the output is 0 is if both values for that radix are zero. A picture is worth a 1000 words so:

       0001 - FLAG_A
  (or) 0010 - FLAG_B
------------
       0011 - flags

let’s now show that adding FLAG_B again does nothing to the output:

       0011 - flags
  (or) 0010 - FLAG_B
------------
       0011 - flags

let’s try a more complex example:

       0001 - FLAG_A
  (or) 0010 - FLAG_B
  (or) 1000 - FLAG_D
------------
       1011 - flags

next up is what I’d call a HAS FLAG operation

check for a flag w/ bitwise AND

Bitwise OR operations are great for setting flags, but it doesn’t get you very far when you need to check your flags for a particular value. Just like the OR operation, the AND operation is a logic operation. If A AND B then TRUE, or in other words, for a given radix, if both values in a given radix are 1 then the output for that radix is 1, else it’s 0. Another look at this is:

       0001
 (and) 0001
------------
       0001 - both were 1 so output to 1
       0001
 (and) 0000
------------
       0000 - the logical AND statement fails, thus 0 is returned

One thing to note is that the AND statement only evaluates for the 1s in the binary values (or at least how I understand it to operate).

So let’s apply this to our flags to see how we might be able to determine if a value is present in our flags var. Let’s assume our flags have already been set to:

flags = FLAG_A | FLAG_D; //dec = 9, bit = 1001

Now we’re going to check to see if FLAG_C has been set.

var hasFlagC:Boolean = FLAG_C == ( flags & FLAG_C );

Let’s first examine the statement in the parenthesis:

flags & FLAG_C;
       1001 - flags
 (and) 0100 - FLAG_C
------------
       0000 - output

And then we evaluate the output against the flag we’re checking for:

0000 == 0100 = FALSE
or
output != FLAG_C

Ergo FLAG_C was not set. So let’s try another test that we know should return true:

flags = FLAG_A | FLAG_D; //dec = 9, bit = 1001 (from before)
var hasFlagD:Boolean = FLAG_D == ( flags & FLAG_D );

Evaluate the parenthesis first:

flags & FLAG_D;
       1001 - flags
 (and) 1000 - FLAG_D
------------
       1000 - output

output == FLAG_D

Lastly there is the need to remove a flag

removing a flag w/ bitwise AND plus bitwise NOT

Obviously this post wouldn’t be complete without showing you how to remove a flag from a given bitflag. This entails two types of bitwise operations. One you are already familiar with: the bitwise AND. The other is the bitwise NOT statement. Like the above 2 logical operations the concept of the bitwise NOT is to return an inverse of the input:

1001 - input
NOT of input
0110

The common syntax is:

~input

So now we need to combine the AND and NOT operations to remove a flag. Let’s dive in shall we?

       0000 - flags (starting fresh)
 (and) 0001 - FLAG_A
------------
       0001 - flags
 (and) 0010 - FLAG_B
------------
       0011 - flags

We’ve just added a few flags to our value. Now let’s remove them and try to arrive at our initial state of 0.

       0011 - flags
 (and) 1110 - ~FLAG_A
------------
       0010 - flags (see how the AND statement preserve FLAG_B?, now let's remove B)
 (and) 1101 - ~FLAG_B
------------
       0000 - flags (back to default state of no flags set)

Now I will show you that whole process in actionscript:

const FLAG_A:uint = 1 << 0; // dec = 1, bit = 0001
const FLAG_B:uint = 1 << 1; // dec = 2, bit = 0010 
const FLAG_C:uint = 1 << 2; // dec = 4, bit = 0100
const FLAG_D:uint = 1 << 3; // dec = 8, bit = 1000 

var flags:uint;
//adding A, you can also say flags |= FLAG_A; 
flags = flags | FLAG_A;

//add flag b, this time using the shorthand
flags |= FLAG_B;

//now to remove A
flags = flags & ~FLAG_A;

//remove B using shorthand
flags &= ~FLAG_B;

trace(flags.toString()); // 0

and the surprise is…

Adobe made a nifty little utility class just for these types of operations. Check it out:

mx.utils.BitFlagUtil;

It’s an excluded class so you will need to import & instantiate manually, THEN code hints will appear. Here is the documentation for it:

link

as3 code obfuscator

jwopitz — Wed, 01 Feb 2012 18:39:46 +0000

Wanted to share this real quick with folks.

problem

I have been working hard on the as3isolib.v2 trying to prep a test release. As I haven’t decided on a licensing scheme nor do I want to freely release the source, I needed a way to obfuscate the source code of some of the underlying engine code. Everything I have seen so far on the web didn’t allow for you to manipulate an individual .as file and preserve the non-private APIs. It seems rather that most obfuscation programs target out-going SWFs from being decompiled.

desired results

be able to preserve original, human-readable source file while producing an obfuscated file
be able to preserve the non-private variable, functions and consts
be able to integrate into an ANT build script

solution

After doing some digging, I found this nifty little python script by Erik Johnson (http://www.applesaucejuice.net/) that does the first and third things I needed. After looking at it and figuring out some real basic python, I modified the script to only obfuscate private and function-scoped members:

mod’d version (pastebin)(download) - you may encounter some indentation errors when running the script as I do not have a dedicated python IDE
original version (github)

Monthly Expenses Template via Google Spreadsheets

jwopitz — Fri, 13 Jan 2012 23:21:25 +0000

I’ve been keeping track of all my monthly expenses in order to reign in my spending. I absolutely LOVE google docs’ spreadsheets. Here is the template I am using if you’d like to use it. Please feel free to add questions, suggestions & comments

https://docs.google.com/spreadsheet/ccc?key=0As9k6GLAYjwpdDNGMFZFanRweXFlRV9mUGlPeVBNSVE

Propagating Changes from Spark’s Skinnable Component to Skin

jwopitz — Wed, 14 Dec 2011 19:16:19 +0000

preface

I will not be discussing the pros/cons of a Spark skin containing “awareness” of its host component’s properties. That falls into a more in-depth “best practices” discussion to be discussed at a later time.

[note to self]

One way to propagate changes from the SkinnableComponent to the Skin and still leverage the Flex framework’s invalidation mechanisms is to simply update your property and then call invalidateDisplayList. Override your updateDisplayList call in the Skin and fetch the needed values. For this example the particular skin I was creating needed to create a mask whose width was based on a particular value. Seeing as this logic was particular to the skin, I decided to move the logic into the skin rather than the component itself.

hostComponent code

public function set volume(value:Number):void
{
	if (value != _volume)
	{
		_volume = value;
		_volValue = _volume < 0 ? 0 : _volume > 1 ? 1 : _volume; //limit betw 0 & 1

		bVolumeChanged = true;

		invalidateProperties();

                if (skin)
                {
                            skin.invalidateProperties();
                            skin.invalidateDisplayList();
                }
	}
}

variable instantiation via anonymous functions

jwopitz — Thu, 08 Dec 2011 16:30:50 +0000

[Note to Self]

rather than:

var foo:Object = function ():Object
{
   var o:Object = {};
   o.id = "foo";
   o.data = Math.random();

   return o;
}; //will fail with a CTE cannot coerce function to object

you need only add this:

var foo:Object = function ():Object { .... }(); //will succeed

What’s going on here? Well the first will fail giving you a CTE (compile-time error) stating that you are implicitly coercing a function to an object. And that’s true, you have in no way actually called the anonymous function in the first example. Rather you have DECLARED it.

The second bit of code is still declaring/defining the function however you are immediately calling said function afterward.

Not necessarily a best practice but a good trick to add to your bag o’ tricks. Thanks to Nicola Bortignon (http://www.nicolabortignon.com/) for showing me this.

Spark Label linebreak

jwopitz — Mon, 21 Nov 2011 19:19:00 +0000

[Note to Self]

You can’t simply set the text of an MXML declared Spark Label like below and expect linebreak or carriage returns to work:

You now have to explicitly wrap the linebreak or carriage return in binding brackets and single quotes like so: