Category: Flash sites

Actionscript 3: Pass multiple parameters defined in external file to ExternalInterface.call()


There was a situation where the javascript function name and the number of parameters to it was defined in an external JSON file. Since the number of parameters was dynamic, we needed a way to have ExeternalInterface call with the correct number.

The solution is simple.

in the external file, pass in a string of the function name and all the parameters:

"myFunctionName,param1,param2,param3"

and in your actionscript code

	var myString:String = "myFunctionName,param1,param2,param3";				
	var paramArray:Array = myString.split(",");
	ExternalInterface.call.apply(null, paramArray);

The secret is the apply() method. All functions in actionscript is a type of object with couple of built in methods, and the apply() method allows you to pass in an array.

Test with a simple alert in your html wrapper

<script>
  function myFunctionName(value1, value2, value3) {
    alert("myFuncName fired : " + value1 + value2 + value3);
  }
</script>

Another way is to pass an object with the paramters you need attached to it and cycle thru that in javascript.

Actionscript 3: Quick swipe logic for touch devices

If you are trying to simulate a swipe behavior like iOS devices, you would notice two things.

One is that if you drag a slide beyond the half way point, it will snap to the next slide, otherwise it will snap back to its original position.

Second is that if you do a quick swipe, it will go to the next position regardless if you passed the center point.

To achieve that quick swipe calculation, this is the logic you need.
First the variables:

private var xpos1:Number
private var xpos2:Number
private var time1:uint;
private var time2:uint;

Next is the mouse down event:

private function onMouseDown(event:MouseEvent):void
{
  this.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

  xpos2 = this.mouseX;
  xpos2 = this.mouseX;
  time1 = getTimer();
  time2 = getTimer();
}

Then in the EnterFrame:

private function onEnterFrame(event:Event):void
{
  xpos1 = xpos2;
  xpos2 = this.mouseX;
  time1 = time2;
  time2 = getTimer();
}

and the actual logic in the mouse up event;

private function onMouseUp(event:MouseEvent):void
{
  this.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  this.removeEventListener(Event.ENTER_FRAME, onEnterFrame);

  var time:Number = (getTimer() - time1) / 500;
  var velocity:Number = (this.mouseX - xpos1) / time;
  trace(velocity);
}

The velocity can now be used to find a good tolerance for the quick swipe.

Actionscript 3: Detect hidden movieclip on stage overlapping buttons

If  you run into issues with an invisible display object covering your button but you don’t know where it is, this handy code snippet I got from my co worker Kris can trace it out for you.

Just drop it in your constructor.

stage.addEventListener(MouseEvent.CLICK,_checkMouseEventTrail,false,0,true);
function _checkMouseEventTrail($e:MouseEvent):void
{
var p:* = $e.target;
while(p)
{
trace(">>", p.name,": ",p);
p = p.parent;
}
};

Actionscript 3: Using modulos to wrap a moving movieclip

A clean way to wrap a movieclip wrapping around the stage is to use modulos

var widthOfStage:Number = stage.stageWidth;
var velocity:uint = 1;
myClip.x = (myClip.x + velocity) % widthOfStage;

That part is easy. The difficult part is handling moving left when you encounter negative number. The solution to that is to add the original width back in to keep it positive.

var velocity:uint = -1;
myClip.x = widthOfStage + ((myClip.x  + velocity) % widthOfStage);

A problem you might occur is if you try to move back right, your clip might jump. So to keep both left and right movement synced modify the original right movement to:

var velocity:uint = 1;
myClip.x = widthOfStage + ((myClip.x  + velocity) % widthOfStage);

[ad#Google Adsense]

Actionscript 3: Bold not working on external fonts in a font family.

There was an issue with compiling external font swf made up of a font family in flex builder. For example when trying to generate a set of AkzidenzGrotesk regular, light, bold and black the bold will now show up.

Here is a typical font embedding code in an actionscript project.

package {

	import flash.display.Sprite;

	public class AkzidenzGrotesqueBold extends Sprite
	{

		[Embed(source='assets/AkzidenzGrotesk-Bold.otf',  fontName='AkzidenzGrotesqueBold')]
		public static var AkzidenzGrotesqueBold:Class;

	}
}

Every font will compile and generate a corresponding swf except bold.

To get around this issue make sure to define the font weight.

package {

	import flash.display.Sprite;

	public class AkzidenzGrotesqueBold extends Sprite
	{

		[Embed(source='assets/AkzidenzGrotesk-Bold.otf',  fontWeight='bold' fontName='AkzidenzGrotesqueBold')],
		public static var AkzidenzGrotesqueBold:Class;

	}
}

Don’t bother defining the fontFamily=”AkizidenzGrotesk”, CSS in flash will ignore it. It only uses the fontName=”blah”.
Bold font should have fontWeight=”bold”, italic font should have fontStyle=”italic” and a bold italic should define both.

Hope that helps
~mark

[ad#Google Adsense]

Actionscript 3: Get ratio value between two numbers

Simple utility for getting a ratio between two numbers. Thanks to my friend Jamie for the method.


private function returnValue(value:Number, actualMin:Number, actualMax:Number, ratioMin:Number, ratioMax:Number):Number{
     return (((value - actualMin) / (actualMax - actualMin)) * (ratioMax - ratioMin)) + ratioMin;
}

Here is also a simpler version when you know the percentage of the number range.


public function returnValue( percentage:Number, min:Number, max:Number ):Number {
    return ((( max - min ) / 100 ) * percentage ) + min;
}

This version returns a percentage of the two range of numbers.


public  function returnValuePercentage( _value:Number, min:Number, max:Number ):Number {
return ((( _value - min ) / ( max - min )) * 100 );
 }

[ad#Google Adsense]

Actionscript 3: Detect the difference between a Mouse click and a Mouse drag.

How do you tell if the user clicked or dragged in your flash app? Take a look:

private var time:uint;

function onMouseDown(event:Event):void {
     time = getTimer();
     startDrag();
}

function onMouseUp(event:Event):void {
     var diff = getTimer() - time;
     if (diff < 250) {
           trace("clicked");
     }
     stopDrag();
}

[ad#Google Adsense]

Actionscript 3: Move first array index to the back and back to front

Here is a very cool line of code to manipulate an array.

If you want to take the first item of an array and place it at the end:

myArray.push(myArray.shift());

If you want to take the last item of an array and place it back at the front:

myArray.unshift(myArray.pop());

[ad#Google Adsense]

Actionscript 3: Check if flash is stand alone or in browser

Here is a quick code snippet if you want to have links trace the value locally but link out in the browser.


if (Capabilities.playerType == "StandAlone" || Capabilities.playerType == "External") {
	trace("data.CTAOpen.@url : " + data.CTAOpen.@url );
} else {
	navigateToURL(new URLRequest(data.CTAOpen.@url), "_self");
}

Or you can use RegExp

var isStandAlone:Boolean = new RegExp("file://").test(loaderInfo.url);

[ad#Google Adsense]