Category Archives: flex 3

Custom UI for Flash Components – Part 4 – Prepping your UI

Part 1|Part 2|Part 3|Part 4
Flex Project File
UPDATE: You will also have to implement one last step: bypassing the flex preloader in order to make this work.

Now that our component is ready, we use the TextField in out Flex project to indicate the current state of the Flash component.

As far as I know, there’s no way of determining which variables are Inspectable in our MyComponent class. This means we have to hard code the resulting variables in Flex as well.

Update our flex Application to the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import adobe.utils.MMExecute;
 
			public function init():void
			{
				buttonLabel.text = MMExecute("fl.getDocumentDOM().selection[0].parameters['buttonLabel'].value");
			}
 
			public function updateParams():void
			{
				MMExecute("fl.getDocumentDOM().selection[0].parameters['buttonLabel'].value = '" + buttonLabel.text + "'");
			}
		]]>
	</mx:Script>
 
	<mx:TextInput id="buttonLabel"
				  change="updateParams()"/>
</mx:Application>

First, we call init() when the Application is done instantiating.
This uses JSFL to retrieve the “buttonLabel” parameter of the selected item on the stage. This will always be your component because it will only show this UI when the component (and only this component) is selected.
It then sets the text attribute of the TextInput to the buttonLabel parameter.
Finally, we’ve set a listener to the change Event of the buttonLabel TextInput that calls the upddateParams() function.
The updateParams sets the buttonLabel parameter of the selected item in Flash to the value of the text attribute of the buttonLabel TextField. This update will happen every time you change the textField, so it will in effect be realtime.

Build your Project again by choosing Build Project from the Project Menu and you’re done. When you drag an instance of your component onto the Stage, the Component Inspector should begin with the default text and if you change it, it should then stick.

UPDATE: You will also have to implement one last step: bypassing the flex preloader in order to make this work.
Part 1|Part 2|Part 3|Part 4
Flex Project File

Custom UI for Flash Components – Part 2 – Creating your component

Part 1|Part 2|Part 3|Part 4
Flex Project File
Create a new Flash file called Components and save it into the src directory of your MyComponentUI Flex Project.
Create a new as file named MyComponent.as and save it in the same folder as the FLA.
Paste the following code in your MyComponent.as file:

package
{
	import flash.display.MovieClip;
 
	public class MyComponent extends MovieClip
	{
		public function MyComponent()
		{
			super();
		}
 
	}
}

In the Flash IDE, create a new symbol of type MovieClip with a dynamic TextField with an instance name of buttonLabel.

Right click the symbol in your library and go to the properties.

If necessary, click the advanced button to display the Linkage section.

Check the box marked Export for ActionScript.

Hit OK.

We’ve now created a library symbol that has a TextField named buttonLabel
Part 1|Part 2|Part 3|Part 4
Flex Project File

Custom UI for Flash Components – Part 1 – Creating your UI

Part 1|Part 2|Part 3|Part 4
Flex Project File
This is the first in a multi-part series. I wish I could make this simpler, but the lack of documentation on how to do this properly let alone how to do it at all is astounding. I used Flex to create my UI, but any AS3 UI should work. This tutorial will use Flex:
Create a new Flex Project and name it MyComponentUI
Use the following code for your Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute">
	<mx:TextInput id="buttonLabel"/>
</mx:Application>

Now, build your project by choosing Build Project from the Project menu.

All we’ve done is create a basic Flex Application with a single TextField named buttonLabel.
Part 1|Part 2|Part 3|Part 4
Flex Project File

Building AS3 Using ANT Scripts

I spent a good chunk of time finding the simplest ANT build script I could and using it to compile my simple AS3 project. This is a simple as it gets:

<project name="build" default="compile">
	<property file="${ant.home}/path.properties"/>
	<taskdef resource="flexTasks.tasks" />
	<target name="compile">
		<mxmlc file="src/AntTest.as" output="bin-debug/AntTest.swf"/>
	</target>
</project>

The project name attribute is up to you.
The default is the target to be run if you just type “ant”
The first property sets basic ANT properties
The taskdef includes Flex-specific information
The target name allows you to reference this action elsewhere in the build file
The mxmlc file is the source for the compiler
The mxmlc output is the output for the compiler
Just replace the as file and swf file with your specific filenames, open up the terminal, browse to the project dir, and type ant
it should produce a swf for you.

clAir – alpha – a Craigslist aggregator in Adobe Air

I’ve been working on a little side project for a while to be able to view multiple Craigslist results pages at once. To make this happen, I’ve built a basic app in PHP, but I thought it would be significantly nicer to build something standalone and FAST. I tried Flex, but the security sandbox was a pain, as was a lack of useful features, so here we go! Please leave feedback and bugs, if you find them.
clair1

Adding an AS3 Sprite to an MXML file

Recently, working on an FLV component, I tried to add a sprite to an MXML component. Since UIComponent inherits Sprite, it’s too high up to be added to the stage. What you CAN do, though, is add the sprite to a UIComponent component in MXML and display it that way.

I’ve used the As3FLV component I wrote in this example. the As3FLV extends sprite, so all we have to do is add it to the UIComponent I’ve created in MXML and it should show up. I’ve also built the As3FLV component to resize itself based on the parent size etc.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				xmlns:local="*"
				xmlns:net="flash.net.*"
				width="100%"
				height="100%"
				creationComplete="init();">
	<mx:Script>
		<![CDATA[
			import com.MEMD.As3FLV;
			private var flv:As3FLV = new As3FLV();
 
			public function init():void
			{
				flv.source = "http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv";
				holder.addChild(flv);
			}
		]]>
	</mx:Script>
	<mx:UIComponent id="holder"
					width="100%"
					height="100%"/>
</mx:Application>

From the top: creationComplete=”init();” – runs the init function at the beginning
import com.MEMD.As3FLV; – imports this class
private var flv:As3FLV = new As3FLV(); – creates a variable named “flv” as an instance of As3FLV
flv.source = “http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv”; – sets the source of “flv” to a sample FLV
holder.addChild(flv); – adds our instance to the UIComponent below
width=”100%” height=”100%” – sets the width and height of the component to 100% of the container.

I’ve also attached a copy of a project below. I hope it helps.

FlexFLV Component

In working with the VideoDisplay component, I ran into occasional problems. Things like setting autoplay to false killing my metadata and such. This is the first draft of a replacement. It doesn’t have any of the crazy bells and whistles of the FLVPlayback component — skinning etc., but it does have most every feature I could think of putting in. If you’re not working in Flex and want the AS3 version, check it out here. If you want to use the AS3 version but use it in Flex, check out Adding an AS3 Sprite to an MXML file

Integrating amfphp, mysql, and flex 3

I’ve spent a day looking for a decent way to integrate a mysql file with an mxml file. I eventually made a hybrid of all of the systems out there and settled on the following:

Wamp – my local mysql/php server.
MXML – the main functionality.
AMFPHP – handles the communication between php and flex
PHP – one php service with a global method
MySQL – database backend

Continue reading →

The right way to embed fonts in Adobe Flex 3

I spent about 8 hours trying to get this just right, so I thought I’d share it. 

First, I got ahold of my fonts. I grabbed one from FontFreak.com and another is a traditional Adobe font. I created a new folder called “assets” in my src directory and put the font in there. note: you can use a local (installed in windows/fonts) font instead of putting the ttf or otf in the assets folder, but if you share your project with anyone else, they will need to install the exact same fonts as you.

There’s multiple ways to embed fonts in Flex, but all of them have one thing in common: the CSS or Style declaration. 

CSS:

@font-face
{
	fontFamily: "Alien Encounters";
	fontWeight: normal;
	fontStyle: normal;
	src: local("Alien Encounters");
}
.alien
{
	fontWeight: normal;
	fontStyle: normal
	fontFamily: "Alien Encounters";
}

MXML:

	<mx:Style>
		@font-face
		{
			fontFamily: "Myriad Pro Condensed Bold Italic";
			font-weight: bold;
			font-style: italic;
			src: url("assets/MyriadPro-BoldCondIt.otf");
		}
	</mx:Style>

From here, you can utilize the fonts using CSS font-family declaration or the MXML font-family declaration — they both should work.

	<mx:Text x="10" y="10" text="Embedded Text" styleName="alien"  fontSize="36"/>
	<mx:Text x="10" y="65" text="Embedded Text" fontFamily="Myriad Pro Condensed Bold Italic" fontWeight="bold" fontStyle="italic" fontSize="36"/>

Things to note: the CSS Embed and the Font Weight and Font Style HAVE to match. If you want the italic version of your font, you HAVE to embed it separately. This means that for a regular, bold, italic, and bolditalic font, you’ll be embedding 4 fonts in your stylesheet. I’ve shown you one normal and one bolditalic font as examples. All features should be interchangable. 
Also, if you don’t include fontStyle and fontweight for all fonts and references, you may get overlap and that can lead to problems.
If your font-names are overlapping, e.g. Myriad Pro Cond, Myriad Pro Cond Italic, you may get undesired results. Be verbose, be specific, and don’t have overlap. I recommend writing these as: Myriad Pro Condensed Regular and Myriad Pro Condensed Italic so that overlap is impossible.

Final thoughts — some fonts just don’t work in Flex for embedding. It may have to do with licensing, or corrupting, but if one doesn’t work, either try running it through a converter and changing it from otf to ttf or vice versa, or using a different font.

Example: Source Enabled

[SWF]http://morganengel.com/FontEmbedding/FontEmbedding.swf, 400, 150[/SWF]