Products
A Software Developer's Blog
Fireworks FXG to Flash Builder
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
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
OVP Open Video Player for Flex
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.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import flash.events.*;
import org.openvideoplayer.net.*;
import org.openvideoplayer.events.*;
import com.akamai.net.*;
public var net:AkamaiConnection;
public function init():void {
ovc = new OvpConnection();
ovc.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler)
ovc.connect("localhost/devCRW");
//net = new AkamaiConnection(); //net.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler); //net.connect("localhost/devCRW"); }
public function netStatusHandler(e:NetStatusEvent):void {
var info:Object = e.info;
switch(info.code) {
case "NetConnection.Connect.Success":
output.text = "Hello World!";
break;
default:
output.text = "Sorry, try again.";
}
}
]]>
</mx:Script>
<mx:Text x="10" y="10" id="output"/>
</mx:Application>
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
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:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:media="flash.media.*">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import flash.net.*;
import flash.media.*;
import classes.Chatcam;
public var nc:NetConnection = new NetConnection();
public var ns:NetStream;
public var rtmpPath:String = "rtmp://localhost/devCRW";
public var cc:Chatcam;
public function init():void {
nc.client = new Object();
nc.addEventListener(NetStatusEvent.NET_STATUS,ncStatusHandler);
nc.connect(rtmpPath);
}
public function ncStatusHandler(e:NetStatusEvent):void {
switch (e.info.code)
{
case "NetConnection.Connect.Success":
stat("Connected");
cc = new Chatcam(nc);
if(cc.detectCamera()){
stat("displayPublishingVideo");
cc.publishCamera("myCamera");
cc.displayPlaybackVideo("myCamera");
addChild(cc);
}else{
stat("Problem with camera.");
}
break;
case "NetConnection.Connect.Rejected":
stat("Rejected!");
break;
case "NetConnection.Connect.Failed":
break;
case "NetConnection.Connect.Closed":
break;
default:
}
}
public function stat(msg:String):void {
status.htmlText += msg + "<br>";
}
]]>
</mx:Script>
<mx:Text x="198" y="10" text="Status:" id="status"/>
</mx:Application>
Using do as the event name in Coldbox, don't.
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.
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?
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
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.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init();">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
public var string:String = "<br/>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<br/>";
}
private function updateTextArea():void {
textOutput.htmlText += string;
}
private function doUpdateTextArea(e:MouseEvent):void {
updateTextArea();
callLater(setMaxScroll);
}
private function setMaxScroll():void {
textOutput.verticalScrollPosition = textOutput.maxVerticalScrollPosition;
}
]]>
</mx:Script>
<mx:Panel x="10" y="10" width="250" height="200" layout="absolute" id="myPanel" title="Chat">
<mx:TextArea x="10" y="10" width="210" height="106" id="textOutput" liveScrolling="true" verticalScrollPolicy="on"/>
<mx:Button y="124" label="Add Content" id="connectButton" labelPlacement="left" horizontalCenter="-57" click="doUpdateTextArea(event);"/>
</mx:Panel>
</mx:Application>
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.
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
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.
Aura skin for Clint Willard's BlogCFC inspired by Brooks Bilson's Bolg.
All trademarks property of their owners.