RIA CFML Flex Flash

Fireworks FXG to Flash Builder

Sat, 01 May 2010 09:39:00 -0700

Fooling around with the FXG capabilities to embed optimized graphics that can be scaled I found a few issues, not sure if they're bugs but here's my findings. I'm using Fireworks CS4 and Flash Builder 4. I basically created a rectangle with a border and gradient fill then placed large text with border as well. Not really sure what the FXG limitations are but this didn't work. Without any other changes I exported to FXG. First of all, no matter what I do, if the FXG export includes any images that has to be embeded I get an error right away saying: com.adobe.fxg.FXGException: Error 'Error reading image' occurred while embedding image: '/test.assets/Image_0.png'. Then I have to open the FXG file and delete the foward slash before the path to test.assets. There's a fix I'm sure but I'm just posting this quick fix for now. Secondly, the gradient is broken like a .gif does to .jpg images. Not sure what to do about that for now but I have to flatten the gradient pieces, making the FXG vector scaling useless. Third, the text is improperly placed. Originally I had the text centered but Flash Builder placed it lower right of the rectangle. Finally I had to flatten the text in FW to get it right. I think the text placement is correct but the scale throws it off. *Eventually I had to convert the text into paths, duh vectorized, and it worked. This seems to also fix the gradient issue. Doing this however makes editing the text combersome, having to delete it and replace it then export it again. I am however impressed with the file size, an 84k png exported to FXG is less than 3k. Cheers.

GraniteDS for Flex 3 and Glassfish

Mon, 08 Feb 2010 12:46:00 -0700

Is it just me or is GraniteDS just too complicated? I'm an expert using FMS Flash Media Server and I understand BlazeDS but Granite Data Services is beyond plug-n-play. First, what is the stack and why is it hard to figure out? Tide, EJB, Gravity, Pojo, Seam, Spring, Guice, etc.. I have Glassfish v3 installed on my Windows PC along with MySQL and I want to create a Flex 3 application that uses GraniteDS 2.0.x with consumer and publisher, possibly along with Cairngorm Enterprise and no, I do not want an example, I want steps. I'm using Eclipse with Flex 3 plugin, and I don't want to use Maven or Gas3. 1. How do I get GDS installed on the Glassfish server so that I have a gateway (http://xxxxxx/graniteamf/amf), what files, how and where to put them, etc.. 2. Do I use Gravity? Tide? EJB? etc.. 3. What are all of the configuration pieces and minimum params? I'll take anything I can get to work locally that touches GDS for real time data services with push. I've read everything I can online including the GDS web site and can not find a clear concise simple step by step tutorial or documentation. And if I ever figure it out I will certainly write a tutorial for my blog; sadly it'll be the only clear tutorial available. So if anyone can tell, show, or point me to the right location, thank you. And I have to warn you, for over 2 weeks now I have tried everything I can find with no success. Please help.

Adobe Misses Flex Boat

Tue, 02 Feb 2010 19:51:00 -0700

It's my opinion that Adobe is making a mistake renaming Flex Builder to Flash Builder. Simply put, when it comes to business applications, businesses still don't want to buy a Flash solution. Adobe should catch this wave created by the Flex craze and call it just that, Flex.

OVP Open Video Player for Flex

Sat, 05 Dec 2009 13:11:00 -0700

I'm working on creating a simple video chat component for my application and came across this open source solution from the good folks at OpenVideoPlayer.com. You can download the latest open source flash video player version from SourceForge. Open it up and go to the core\bin and drag the ovp_core.swc to your project's asset folder. Now open project properties within your project and add the swc file through the Flex Build Path, Library path. Now the openvideoplayer package and akamai package will be available for development from the org and com packages. Below is a very basic Hello World I used to make sure it operated correctly as expected. I'm not sure yet if I'll use it for my specific needs which are very basic. This OVP brings a lot of other features I may or may not need, like running ads, which I may need. But for now I'll go through and see if it has the features I require before making a commitment.

Notice that you don't include the usual rtmp:// when connecting. I believe it does some of it's own decision making about connection protocols, meaning you don't have to test connections and try HTTP tunneling etc.. becuase it'll do it for you. Now to put up a simple video UI, connect it to my camera, and then stream it to FMS and back again.

Starter bare-bones AS camera class

Fri, 04 Dec 2009 19:15:00 -0700

Just starting on this class and thought I'd post a good starting point for learning.


package classes{
	import flash.media.*;
	import flash.net.*;
	
	import mx.core.UIComponent;

	public class Chatcam extends UIComponent{
		private var netconnection:NetConnection;
		private var nsPlayer:NetStream; 
		private var video:Video;
		private var vidPlayer:Video; 
		private var camera:Camera; 
		private var microphone:Microphone;
		private var uic:UIComponent;
		
		public function Chatcam(nc:NetConnection,publishedCam:String=""){
			netconnection = nc;
		}
		public function detectCamera():Boolean{
			return Camera.getCamera();
		}
		public function publishCamera(cameraName:String,publishType:String="live"):void {
			camera = Camera.getCamera();
			camera.setQuality(0,100);
			camera.setKeyFrameInterval(15);
			camera.setMode(240,180,15,false);
			//cam.setMotionLevel(35,3000);
		    microphone = Microphone.getMicrophone(); 
		    microphone.setUseEchoSuppression(true);
		    microphone.setSilenceLevel(0,2000); 
		    var ns:NetStream = new NetStream(netconnection); 
		    ns.attachCamera(camera); 
		    ns.attachAudio(microphone); 
		    ns.publish(cameraName,publishType); 
		}
		public function displayPublishingVideo():void {
			video = new Video(); 
		    video.attachCamera(camera); 
		    addChild(video);
		}
		public function displayPlaybackVideo(cameraName:String):void {
			nsPlayer = new NetStream(netconnection); 
		    nsPlayer.play(cameraName); 
		    vidPlayer = new Video(); 
		    vidPlayer.attachNetStream(nsPlayer); 
		    addChild(vidPlayer); 
		}
		
	}
}

Example usage:




	
	
		";
			}
		]]>

Using do as the event name in Coldbox, don't.

Tue, 20 Oct 2009 07:10:00 -0700

It took me a day to figure this out, live and learn right. I used 'do' as the event name in one of my Coldbox applications as opposed to 'event' given as the default. If you're considering what to name your events in Coldbox, don't. Just use the default 'event' name given. I was just trying to be unique but it backfired. The 'do' term is a reserved keyword in Flex, ActionScript actually. The lesson I got from this is to not ever use any keywords from any language for which you may mix. In this case I was using Flash remoting from my Flex application to to fire remote ColdFusion functions from the Coldbox framework remote proxy. Here is the code I was using in my Flex actionscript. Notice the 'event' object param passed to the proxy process function, you can't use 'do', well technically you can but don't because it won't work.


private function authenticateClient():void {
	var cProxy:RemoteObject = getColdBoxProxy();
	cProxy.addEventListener(FaultEvent.FAULT,faultHandler);
	cProxy.process.addEventListener(ResultEvent.RESULT,authenticateHandler);
	cProxy.process({event:"general.doRemoteLogin"});
}
/* UTILITY METHOD TO GET A CBPROXY OBJECT, You can separate all this to a delegate class */
public function getColdBoxProxy():RemoteObject{
    var cProxy:RemoteObject = new RemoteObject("ColdFusion");
    cProxy.source = _model.cbProxyPath;
    cProxy.showBusyCursor = true;
    return cProxy;
}

Flex 3: Who changed the shared object?

Fri, 16 Oct 2009 19:40:00 -0700

So you have a shared object connected and your setting properties to fire off the SyncEvent handler but you want the client to know if it did it or did another client do it. Not confused are you? Just take a look at this code to use on a SyncEvent to tell who changed the shared object's property.


private static const SUCCESS:String = "success";
private static const CHANGE:String = "change";
//SharedObject Sync Handler

private function soSync(e:SyncEvent):void {
	switch(e.changeList[0].code) {
		case SUCCESS:
			trace(e.changeList[0].code + "! I did it.");
		break;
		case CHANGE:
			trace(e.changeList[0].code + "D by someone else.");
		break;
	}
}

This comes from the 'changeList' property of the SyncEvent class in the flash.events package. Additional code values include 'clear', 'reject', and 'delete'. There's also a 'name' param with the property name and an 'oldValue' param with the old value if the code is reject or change.

Flex 3: TextArea Scrolling for Chat

Fri, 09 Oct 2009 04:59:00 -0700

In a chat application you want the message entered to be placed into the textarea component possibly all the way down or up and scrolled to the last entry line. However just placing a new line a text always adds to the textarea but does not scroll automatically. What we want to do is automatically scroll the textarea on input of a new message using the textarea's verticle scroll position. Basically all you have to do is update the component's verticalScrollPosition attribute with the component's maxVerticalScrollPosition value. But there is a problem with the amount it scrolls when subjected to the change, it doesn't scroll all the way. To fix the scroll position so it butts up to the edge or end of the list we'll need to use the callLater() performance method. Follow my example and try it for yourself. I'm just creating a simple button and textarea example. Each time the button is clicked it inserts text into the text area, growing it the more you click it. The click also resets the scroll position to the bottom, just like chat should.




	
	
		Mauris blandit vehicula turpis. " + 
					"Aenean lacus quam, adipiscing in, sodales non, viverra " + 
					"euismod, odio. Donec nec sem commodo massa vestibulum posuere.";
					
			private function init():void {
				textOutput.htmlText = "Welcome
";
			}
			
			private function updateTextArea():void {
				textOutput.htmlText += string;
			}
			
			private function doUpdateTextArea(e:MouseEvent):void {
				updateTextArea();
				callLater(setMaxScroll);
			}
			
			private function setMaxScroll():void {
				textOutput.verticalScrollPosition = textOutput.maxVerticalScrollPosition;
			}
		]]>

Clicking on the button calls the doUpdateTextArea() function concatenating the htmlText value with the string variable causing the scroll bar to grow with content. Then a callLater() method is called with the setMaxScroll() function, setting the verticalScrollPosition to equal the textArea's maxVerticalScrollPosition. The callLater() method simply makes Flex wait to call the function only after it makes sure that everything else has finished. Without doing so the scroll will take place before all the text is updated and will miss a line or two.

Is Flex now Flash? New Flash Builder name stinks.

Wed, 07 Oct 2009 16:26:00 -0700

It sickens my stomach to think what a big mistake this name change is, changing Flex Builder to Flash Builder. I've never seen so many new jobs open up for a single product than I have with Flex. Flex jobs are everywhere and paying good. Flex, Flex, Flex. Not Flash or Flash Applications Developer, just Flex. The main point here not matter what you think of the whole ontology of Adobe products is that FLEX is to the industry a seperate paradigm, even though it's not quite that much of a shift. We (developers) know the underlying truth but it won't hurt if the client doesn't know that the application your proposing and demonstrating is in fact a Flash based application built using the Flex framework. All they need to know is that, sure, it's a Flex application. Technically it's an Internet application that runs in the Flash player developed using a Flex framework MXML markup and ActionScript through a Flash Builder IDE. If you want to specialize in Flex, fine, you're a Flex Developer. However, if you want to create an Internet application that runs in the Flash player developed using the Flash IDE then you are a Flash Developer. I just don't think it's fair that Flex Developers have to work in a product named for a totally seperate skill set. The most difficult thing for myself to understand is whether or not to continue to call myself a Flex Developer or should I say Flash Developer? If I say I'm a Flex Developer in 3 years and there's no "Flex" product, will they know what I'm talking about? Flash Builder is I think going to kill the Flex momentum. In war momentum is everything. This was a bad decision and I don't know if they can ust change their minds now or not but what can it hurt, better than killing it altogether. Adobe needs to get a backbone, admit to the mistake and go back to calling it Flex. It really is a totally different business solution from Flash. Please, I'm trying to save future careers here.

Fireworks PNG imported to Flash shrinks or resized

Sat, 03 Oct 2009 12:49:00 -0700

I was stuck on this one issue for a while looking for a solution or answer on Google. I never found an answer but I finally figured it out myself. If you have any more information to clear this up please share. I'm working on a Flex application that requires image assets for the layout such as the logo, a nice title image, buttons, borders, and so on. I created the assets in Fireworks and saved them as PNG's (PNG32), ready to be imported into the Flash CS3 library. What I'm doing is creating an image assets SWC file I can add to my Flex build library path. In case your new to doing this, it is a way to embed image assets into your Flex project and use them as components. As opposed to using the Embed metatag. Maybe I'll blog about that too, but back to my issue. So after saving my PNG's in Fireworks, I import them to the Flash library, ready to configure for Flex using the Convert Symbol to Flex Component command. However I notice that the images, if you place it on the stage or look at them in the Flex output, are much smaller than my originals back in Fireworks. I couldn't figure out why Flash was resizing or shrinking my images when I imported them. I tried it on jpg's also but they turned out fine, it was just PNG's. For some reason I thought about the image resolution in Fireworks and played around with it. I'm not a designer or a graphics person so sue me for not knowing. What I found was that the resolution I was using, 98, was the problem and resetting it to different sizes had different results. I really does matter to Flash what resolution PNG's are saved in. And what works 100% of the time is to use a resolution of 72. Also, if you use the correct resolution of 72 on your PNG's you'll not need to use the Allow Smoothing option on the bitmap properties. Rule #178: Always use an image resolution of 72 when creating PNG images in Fireworks for Flash authoring.

Flex 3 PopUpWindow custom event

Fri, 02 Oct 2009 09:37:00 -0700

My flex application has settings that can be changed by the user. The settings window is accessible from a menu link control that pops up the settings window. Some of the settings are for changing attributes of other custom components within the app. For this demonstration my application has a custom component for which the user can change background images from the settings popup component. The click event from the popup component will fire an event in the parent which chages another component's background, passing it the image class to use. At first I tried to create a custom event in the popup window but it wasn't working like it does for custom components so I had to search for another solution. Eventually I settled on adding events to the popup window object in the main app mxml. This also covers passing data back to the main app from the popup window as well. No need to create a custom event class. 1. Create a titlewindow component for the settings popup with the required embeded images and a tilelist to display them for selection. Selection will immediatly change the background for another child component, the main content canvas component in the main app mxml. Notice the tilelist has no click event handler, it is added in the main mxml.

2. Create the popup window function in the main mxml with a link to make it pop up.


//the main.as used as the source for a script tag in main.mxml
import flash.events.Event;
import mx.managers.PopUpManager;
import comps.SettingsWindow; //the settings popup window custom component

//create a public SettingsWindow variable

public var settings:SettingsWindow;

[Embed(source="assets/title.png")]
[Bindable]
public var Title:Class;

//function to call for opening the settings window

private function openSettings():void {
	//Open a window with settings forms

	settings = SettingsWindow(PopUpManager.createPopUp(this,SettingsWindow,true));
	PopUpManager.centerPopUp(settings);
	//event handler for popup window close button

	settings.addEventListener("close",removeSettings);
	//adding an event listener to a control from the settings window component

	settings['backgroundsList'].addEventListener("click",setMainBackground);
}

//function to remove popup window on close

private function removeSettings(event:Event):void {
	PopUpManager.removePopUp(settings);
}

3. Create the main.mxml with the popup link button and the main content component for which the background will be changed.

Do ColdFusion programmers need to be object oriented gurus?

Fri, 04 Sep 2009 11:25:00 -0700

Before I begin let me just say that although I'm not a certified Java developer, which would make me an automatic OO guru, I do develop Flash and Flex applications using AS3, which is an OO language. Yes, when it comes to OO I know what I'm talking about and have studied and used patterns for a few years. I'm not a pure OOist but who is and who really needs to be? I'm so tired of chasing that alusive brass CFOOP ring of knowledge, trying to become a an object oriented guru with the deepest depths of understanding. I'm already there and so are you, seriously, its not as far as you thought. And I'm talking to CF verterans that use cfc's as objects, and patterns (whether they know it or not) to solve problems. You may not be using pure OO but you are OOing purely enough. For those reading this that know nothing of OO please stop and go read a few beginner OO basic articles and then come back. There's only about a 10% difference between OO in an "OO language" like Java, and OO in the ColdFusion scripting language. And that 10% difference is used about 1% of the time. So you can't create interfaces (technically you can with underlying Java), big deal, and completely irrelevant too. Creating "I" classes is simply rewriting the original class in a more impressive way and there's only a 1% chance you'll actually need the real thing. Interfaces for the most part are for compile time error checking and CF is not a compile time language, not at our level it isn't. Let's see, what else is there that I'll probably never have a need for, or can do in some other CF way. Overloading, constructors, overriding, and multiple inheritance, and that's about it. As for the constructor, we use an init function on object instantiation as a consturctor for now but, CF 9 will have implicit constructors. Overriding can be accomplished in CF using composition. BTW, implicit getters and setters will be available in CF 9 also. Other than the lack of multiple inheritence (which isn't a requirement to be considered a true 'OO capable' language, like Java and Smalltalk), if Adobe added overloading capabilities then CFers could be concidered OOers too. And just like a Java coder can produce crappy non-OO code so can a CF coder create crappy non-OO CF code. Here's the thing though, follow me. ColdFusion is a RAD tool that can be structured in an OO way following proper OO techniques. ColdFusion is OO when and if you need it to be but we certainly don't want it to be totally and purely OO, ever, EVER. If you make it pure OO say goodbye to rapid development and say goodbye to the market it is ment for. OO was devised to help solve complexed problems in very large systems, something that CF can but doesn't do much of. Those complexed and very large systems are far and few between, the market is in the average system, which don't need OO much any ways. All that being said, if you've got the jest of OO terminology down and have enough understanding of the underlying principles that you can apply it safely, stop worrying about it and get back to work. The only way you can become a better OOer is to practise it. And as for those Java guys laughing at us CFers when OO is mentioned, they're just trying to chase away the new kids in their OO sandbox, spoiled sports don't want to share the spotlight. Honestly I don't consider anyone an OO programmer based on the language he uses, it's how he uses the language that defines a programmers OO understanding. And if people will stop refering to CF as it was prior to the MX version we'de stop having this debate in the first place. Once apon a time, ColdFusion couldn't be architectured with OO principles, but now it can. The end.

Mouse and Keyboard events for buttons.

Tue, 25 Aug 2009 11:52:00 -0700

Just playing around seeing if I can simplify associating a button event handler to one function for both a mouse and a keyboard press. It would be nice if the event handler could pass a generic event encompassing mouse and keyboard actions but alas we have to create two handlers. Maybe it can be done with some prototyping, composition, or overriding but creating two handlers is faster still. Any ways, here some scribble code to look at in case your giving the same thing a thought or two.

Flex Key Codes

Tue, 25 Aug 2009 08:57:00 -0700

Just a reference for myself: Keybaord: Enter = 13, ` = 192, 1 = 49, 2 = 50, 3 = 51, 4 = 52, 5 = 53, 6 = 54, 7 = 55, 8 = 56, 9 = 57, 0 = 48, - = 189, = = 187, Backspace = 8, [ = 219, ] = 221, \ = 220, ; = 186, ' = 222, , = 188, . = 190, / = 191, Esc = 27, Shift = 16, Ctrl = 17, Tab = 9, Spacebar = 32 A = 65, B = 66, C = 67, D = 68, E = 69, F = 70, G = 71, H = 72, I = 73, J = 74, K = 75, L = 76, M = 77, N = 78, O = 79, P = 80, Q = 81, R = 82, S = 83, T = 84, U = 85, V = 86, W = 87, X = 88, Y = 89, Z = 90 Other: Enter = 13, up = 38, right = 39, down = 40, left = 37, Insert = 45, Home = 36, Delete = 46, End = 35, Page Up = 33, Page Down = 34 Keypad: Num Lock = 144, / = 111, * = 106, - = 109, + = 107, Locked: . = 110, 0 = 96, 1 = 97, 2 = 98, 3 = 99, 4 = 100, 5 = 101, 6 = 102, 7 = 103, 8 = 104, 9 = 105 Unlocked: . = 46, 0 = 45, 1 = 35, 2 = 40, 3 = 34, 4 = 37, 5 = 12, 6 = 39, 7 = 36, 8 = 38, 9 = 33 OLD: CTRL + A = 1 CTRL + B = 2 CTRL + C = 3 CTRL + D = 4 CTRL + E = 5 CTRL + F = 6 CTRL + G = 7 CTRL + H = 8 CTRL + I = 9 CTRL + J = 10 CTRL + K = 11 CTRL + L = 12 CTRL + M = 13 CTRL + N = 14 CTRL + O = 15 CTRL + P = 16 CTRL + Q = 17 CTRL + R = 18 CTRL + S = 19 CTRL + T = 20 CTRL + U = 21 CTRL + V = 22 CTRL + W = 23 CTRL + X = 24 CTRL + Y = 25 CTRL + Z = 26 ALT + A = 197 ALT + B = 166 ALT + C = 199 ALT + D = 206 ALT + E = 180 ALT + F = 207 ALT + G = 169 ALT + H = 211 ALT + I = 136 ALT + J = 212 ALT + K = 190 ALT + L = 210 ALT + M = 194 ALT + N = 152 ALT + O = 216 ALT + P = 222 ALT + Q = 140 ALT + R = 174 ALT + S = 205 ALT + T = 134 ALT + U = 168 ALT + V = 175 ALT + W = 221 ALT + X = 188 ALT + Y = 193 ALT + Z = 253

ActionScript 3 Tutorial AS3 for Flash & Flex

Mon, 24 Aug 2009 10:35:00 -0700

Working in Flex this morning and as usual I need to do a search for some information on an AS3 class and I came across this excellent tutorial. It's mostly a beginners guide but a good refresher if you've been away from AS3, Flash or Flex for a while. Sometimes I can go a whole year or more without doing any ActionScripting, because I'm doing a ColdFusion project, then have to jump right into another project requiring AS. Senocular.com's AS3 tutorial for Flash CS3