Archive for the 'Flex 3' Category

External Interface Callbacks with Jquery

So first off, NEVER use this most lazy of hacks to reference the flash object when calling a method in a flash file:

?View Code JAVASCRIPT
1
2
3
4
// some code
function test() {
	flashID.ner("hello"); // BAAAAAAD!
}

For some reason it works… Some of the time. On Safari when testing running from Flex. On my Mac.

I was being lazy and not really thinking back to how things work in Javascript at the time, then having recently started using Jquery, I tried:

?View Code JAVASCRIPT
1
2
3
4
5
// some code
function test() {
	var flashMovie = $('#flashID');
	flashMovie.ner("hello"); // ALSO BAAAAAAD!
}

Also doesn’t work, for some reason Jquery removes the methods associated with the embed tag that is written, and replaces them with only the Jquery methods. So in order for this to work the code needs to be simply:

?View Code JAVASCRIPT
1
2
3
4
function test() {
	var flashMovie = document.getElementByID("flashID");
	flashMovie.ner("hello"); // FINALLY! It worked.
}

SWFAddress, if You Aren’t Using it for All Your Flash, Start to

We’ve been using SWFAddress for a while now, and while I was cleaning old project files out of Flex I came across my first Flex Test using it. It’s simple, and in fact, SWFAddress has been improved a bunch since this test was made (mostly involving SEO, and fallback links + Google Analytics). Now we’re using it for running our entire navigation schemes for all Flash sites, mini-sites, components, and even in our pitches.

Check out my example (click anywhere to move the box, then use the back/forward buttons for undo/redo).

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package {
	import com.asual.swfaddress.SWFAddress;
	import com.asual.swfaddress.SWFAddressEvent;
 
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class SWFAddress_test extends Sprite
	{
		private var _square:Shape;
 
		public function SWFAddress_test()
		{
			SWFAddress.addEventListener(SWFAddressEvent.INIT, init);
		}
 
		private function init(evt:SWFAddressEvent):void
		{
			SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddressChange);
			stage.addEventListener(MouseEvent.CLICK, gotoAddress);
 
			_square = new Shape();
			_square.graphics.beginFill(0x0);
			_square.graphics.drawRect(0,0,50,50);
			this.addChild(_square);
		}
 
		private function handleSWFAddressChange(evt:SWFAddressEvent):void
		{
			trace(evt.path);
			var address:Array = evt.path.split("/", 3);
			var xLoc:Number = Number(address[1]);
			if(!isNaN(xLoc)) moveSquare(xLoc);
 
		}
 
		private function gotoAddress(evt:MouseEvent):void
		{
			SWFAddress.setValue(this.mouseX.toString());
		}
 
		private function moveSquare(loc:Number):void
		{
			_square.x = loc;
		}
	}
}

Flex Custom Validator Email Confirmation

Pretty simple stuff. This was driving me a bit crazy at the beginning of the day so I decided to just cut and paste my source code hoping this will help someone else out. Basically I just want to create a custom validator that makes sure one field is equal to another in flex. Pretty simple but if you are a noob you will find this task a bit sucky…. Her is the code

Actionscript Custom Validator.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package com.flextradeshow.classes
{
	import flash.text.TextField;
 
	import mx.controls.TextInput;
	import mx.validators.ValidationResult;
	import mx.validators.Validator;
 
	public class EqualValidator extends Validator
	{
		private var results:Array;
 
		[Bindable]
		public var textbox:TextInput = new TextInput();
 
		public function EqualValidator()
		{
			super();
 
		}
		override protected function doValidation(value:Object):Array
		{
			results = [];
			results = super.doValidation(value);
			if(results.length > 0)
			{
				return results;
			}
			if(value!=textbox.text || !value)
			{
				results.push(new ValidationResult(true,null,"NaN","Not a matching value sorry"));
				return results;
			}
			return results;
		}
	}
}

This is the code you need in your view to use the validator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="utf-8">
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tsclasses="com.flextradeshow.classes.*" >
	<mx:StringValidator
		id="nameValidator"
		source="{_iname}"
		property="text"
		minLength="4"
	/>
	<mx:EmailValidator
		id="emailValidator"
		source="{_iemail}"
		property="text"
	/>
	<mx:EmailValidator
		id="emailConfirmationValidator"
		source="{_iconfirmemail}"
		property="text"
	/>
	<tsclasses:EqualValidator id="sameEmailValidator" source="{_iconfirmemail}" textbox="{_iemail}" property="text" />
 
	<mx:Form labelWidth="100" width="302" height="100%" horizontalScrollPolicy="off">
		<mx:FormItem label="Full Name" required="true">
			<mx:TextInput  id="_iname"/>
		</mx:FormItem>
		<mx:FormItem label="Email" required="true">
			<mx:TextInput id="_iemail"/>
		</mx:FormItem>
			<mx:FormItem label="Confirm Email" required="true">
			<mx:TextInput id="_iconfirmemail" />
		</mx:FormItem>
		<mx:FormItem label="Birthday">
			<mx:DateField  id="_ibirthday" />
		</mx:FormItem>
		<mx:Spacer height="15"/>
		<mx:Label text="Free mimoDesk Sample (Choose One)"></mx:Label>
		<mx:Box paddingLeft="110">
			<mx:RadioButtonGroup id="freemimodesk"/>
			<mx:RadioButton label="Star Wars" groupName="freemimodesk" selected="true"/>
			<mx:RadioButton label="Tokidoki" groupName="freemimodesk"/>
			<mx:RadioButton label="Original Core Series" groupName="freemimodesk"/>
			<mx:RadioButton label="Not Interested" groupName="freemimodesk"/>
		</mx:Box>
		<mx:Spacer height="15"/>
		<mx:Label text="Subscribe to any of the following Newsletters"></mx:Label>
		<mx:Box paddingLeft="110">
			<mx:CheckBox label="Consumer" selected="true"/>
			<mx:CheckBox label="Press"/>
			<mx:CheckBox label="Wholesale"/>
		</mx:Box>
		<mx:Box horizontalAlign="right" width="100%">
			<mx:Button label="Subscribe"/>
		</mx:Box>
	</mx:Form>
</mx:Panel>

FIVe3D Rocks, but name is hard to type fast…

I don’t know where the capitalization came from, but it’s such a simple API for anyone who’s happy with AS3 (is there anyone who isn’t?) that FIVe3D worth the challenging finger-work. I made this demo in about 3 hours total, it draws bitmaps, and adds them to Sprite3Ds, and mimicks what we’ve been working on for 2 months in Papervision3D (I’ll definitly have a link to that when its fully launched).

For a great many simpler 3D applications, I think FIVe3D is the way-to-go, but Papervision3D still does have an edge in speed (when properly optimized that is) if dealing with more then 20 or so planes.

One quirk of FIVe3D that I initially didn’t get, was that the order of my addChild statements determines what shows up on top of what, not the Z value of the sprite, so included with this source is a handy depth sorter loop, that will work with any 53D setup.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
FIVe3D Test Source

Also modified it a little so that height and width could be stored in the sprite3D class, i know bad me, but until i get my head around Mathieu’s version of Matrix3D. That ugly blinking plane on the right side is actually a series of bitmapDatas, that are playing back (like cached animation) that I learned from John Grden a few weeks ago. I’m working on my own version of a class to automatically create bmp animations from a timeline swf, unless his goes open source…

Fixed Opening FLAs in Flex 3 for OS X

So we’ve been developing in Flex 3 for the last 3 months now, and I’m wondering why I didn’t switch earlier… Anyway a small annoyance that bothered me for the first couple weeks was the inability to double click any files that needed to be edited outside of Flex. It just throws this weird error:
Unable to open external editor…
(com.adobe.flexbuilder.ui.osx_3.0.194161)
Sort of more about the error here…

With a little research it seems that this is a problem with the System Editor settings with Eclipse itself (which Flex Builder is based, for the noobs like I me).

So taking a bit of a shot in the dark I looked through com.adobe.flexbuilder.ui.osx_3.0.194161, and it didn’t seem to have anything other then commands to open system editable? files. So just deleted the package from the plugins folder (actually i moved it to a plugins-disabled folder in the main Flex directory), and holy crap it worked!

So far I and my co-developer Sean, and our intern Derek haven’t come across any other errors, or changes in performance, just the unfettered ability to double-click FLAs and watch them load in Flash.

Give it a try and lemme know if your results vary. Though I suppose you should be doing so at your own risk…