About six months ago we had some convoluted way of doing something on the backend (PHP), and in order to get something back I was give an single object with a ton of properties and I had to loop over them. For the life of me I couldn’t find any snippets of code that let me loop through an objects properties and get the actual key names… its very simple to loop through an object and get the values, thats cake…. but I was like… hmmm how do I get the key names?

So I came across Dictionary, which I always thought was just an expansion of Object, and I could never really figure out what it did that object didn’t except for the fact that as3coreLib has a Dictionary Utility class that makes it so you can loop over an object and get the keys, and its a light weight .swc file, so I used it up, and started using dictionaries for that reason, and haven’t used Generic Objects ever since, because I figured they did the same thing except Dictionary classes gave me the ability to loop through them and get the keys….

The other day I ran across some code, and thought to myself, so I use a DictionaryUtility class, why didn’t I ever think to even look through the ObjectUtil class in as3… so anyway…. there is a function in that class called getClassInfo, that will give you an array of the properties back… I felt pretty stupid after that, but needless to say I found another way to make my life easier coding….

here is a really small snippet.

var classInfoProperties:Array = ObjectUtil.getClassInfo(a[0]).properties as Array;

This blog post got moved to adobe!!! boo yah!!

John wrote up, and used screen shots, and outlined the application better than I did, but I built it, but he’s the one with the contacts at adobe that wanted the example apps of sfdc… glad I could be a part of it.

To view my running application click here to view the source click here

The Video

(it takes a minute to load)

This blog post has been moved to ADOBE! boo yah!

John’s the one who wrote the documentation and took the screen shots and got the deal with adobe to get the project and example put on adobe.com, so they wanted him to be the author.

but here is the video

To view my running application click here to view the source click here

The Video

(it takes a minute to load)

When you have a project that requires a dynamic interface, and you are adding and removing tabs, lets say you need to reset the selectedIndex of the TabNavigator back to 0, because you may be adding tabs that are not relevant to what you originally had on the screen… when you simply do a “tabNav.removeAllChildren()” on the TabNavigator, and change the selectedIndex in the same function, it just simply doesnt work… there is a bug for it… http://bugs.adobe.com/jira/browse/SDK-14157

So the more elegant solution that also pays attention to the flex framework is by using commitProperties() when you use commitProperties it guarantees that things will be done after the initialization is done in the component, it also is guarantees things will only run once per frame I believe… (don’t quote me on that, i’m just to lazy to look up where I read that, because I’ve got to get back to work)

anyway… when you use invalidateProperties() when you want to remove the children, you would simply set the selectedIndex before you invalidate, and then do the work in commitProperties… and it should just work because of the way commitProperties is supposed to work…

when in reality, it doesnt work either…

so what you end up having to do is use callLater( commitProperties )

private var _tabNavChanged:Boolean = false;
public function resetTabNav():void
{
tabNav.selectedIndex = 0;

_tabNavChanged = true;
callLater( commitProperties )
}

_tabNavChanged = false;
}


}//end function

Hope this helps someone… didn’t really take long i suppose I’m just used to using commitProperties

Application – Source

The Problem

When you create an air app and host it on a server somewhere, you often times have updates, and you need to publish a new .air file to the server so people that continue to download your app, get the newest, healthiest version. The problem with that is that after bug fix (which may take all of 2 minutes), you need to connect to your ftp site, or ssh, or email the new file to yourself, remote desktop into the server, and check your email and put the new file into it’s correct path on the server.

The Solution

Create an ANT Script that logs into you ftp site, and uploads the new files, and it goes from a some what menacing task, to being a delightful 2 or 3 click deployment. There are some things you have to do to eclipse to get the ftp tag to work right in ANT… They are listed below in the steps to take to get ANT up and going in eclipse or flexbuilder.

ftp.username = username
ftp.password = password
ftp.dir = dirToUploadFilesTo
ftp.server = myDomain.com
ftp.localDir = E:/ClickStats_Basketball_1_0/update

<target name="ftp-push-to-server">
<echo>Pushing files to ftp site: ${ftp.server}</echo>
<ftp
server = "${ftp.server}"
userid = "${ftp.username}"
password = "${ftp.password}"
action = "put"
remotedir = "${ftp.dir}"
verbose = "true"
>
<fileset id="ftp.upload.fileset" dir="${ftp.localDir}" />
</ftp>
</target>

The Video

Prerequisite: /using-the-air-update-framework

Your going to need to do a few things to make sure ant is working:

1. follow the steps on adobe’s site
2. once ant is installed (how to is in the previous link) you then need to make sure you have at least java 6 installed
3. now in eclipse or flexbuilder open your prefrences > (in tree on left go to) Java > Installed JREs > click “Add” > Browse for “JRE home directory” > “C:\Program Files\Java\1.6.x” (or something like that) > it should find a bunch of system libs > then click “OK”
4. WHILE STILL IN THE PREFERENCES WINDOW > verify new JRE is checked Preferences > Java > Installed JREs (should have jre1.6.xxx checked, INSTEAD OF Flex builder 3
5. Preferences > Java > Compiler > (in first drop down) Compiler compliance level: select “6.0″ instead of “5″
6. NET Commons Jar file: commons-net-1.4.1.jar
7. Getting FTP to work with Eclipse: getting-ftp-to-work-with-ant-in-eclipse
8. ANT Commons Jar file: ant-commons-net.jar
9. That should be all you have to do to get ANT up and running.

Links:

• Some Noteworthy negatives about deployment using ant: ant-sucks-for-ftp-deployment
• Book: Ant In Action By Steve Loughran
• Adobe: AIR Update Framework

Here is the zip of the Project – SOURCE

The Problem

When you embed a lot of fonts you immediately hurt your compile times. In the video I go about showing you how just embedding a few fonts can’t hurt your compile times, I have about 8 fonts embedded and 2 of them with bold font embeddings as well. This slowed down my compile time to 8 seconds, with barely any mxml, it’s all css and embedding fonts that caused the issue. This post goes to show you how to create a separate project to hold your css and how to include it as runtime css in your original project.

A (possible) Solution

The solution is to create a separate project to hold you css and embedded assets, the reason for this is most the time in your development cycle once you are done setting up the style it just sets there… and then you work on the logic of the application…

So what you do is create a separate project put your css and the embedded assets in the seperate project, and set its output folder to be the actual project’s html-template folder, then you right-click the css file and make sure “Compile CSS to SWF” is checked. This tells flexbuilder to compile a swf just for the css file… NOTE: you may have to make a change to the css file to get it to output the swf.

Once the file is a swf, and the output folder is your destination project you simply use StyleManager.loadStyleDeclarations(‘somecss.swf’); to load your css on the “initialize” event of the main application mxml file.

To also help improve compile times you can try using unicode ranges for you font as well, and only embedding what you need Using unicode ranges for fonts

Please see the video for more details

 Here is the zip of the Project - SOURCE

THE VIDEO

(be patient, it takes a minute to load)

http://link.brightcove.com/services/player/bcpid1733261879?bclid=1729365228&bctid=1738803895

A friend asked me today how to create a simple slider component… I told him, the simplest way in flex, would probably be to have a MoveEffect that would just move a container.

So basically you use masking to mask some stuff, then turn off horizontalScrollPolicy, and verticalScrollPolicy, and then you just set the moveEffect.xBy to -100 or positive 100, (depending on the distance you want to move it, and what your trying to show… here is a really simple example.

Please don’t take this code too seriosly, it’s nothing fancy, it’s super simple, and all you would have to do to spice it up would be add a black background, and reflection or two, some images instead of vbox’s, and some better looking buttons with arrow icons… but i’m not the one who needs the component, so I’m not gonna put too much more time into this… (not that it took long)

Application - Source 

This relates to all the following posts:

Paint Canvas Application – Paint Canvas Source

Drawing with the UIComponent in Flex (part 3) Application – Drawing with the UIComponent in Flex (part 3) Source  

Making Flex look 3D

Programmatic Visualization

Drawing with the UIComponent – 4

Drawing with the UIComponent – 3

Drawing with the UIComponent – 2

Drawing with the UIComponent – 1

I knew you could limit the character ranges in your style sheets but didn’t know what to look up… I was reading jun’s article on performance considerations and the link for adobe’s docs and example on it was in his article… so this is my blog post reminding myself of how to do it for the future…

Adobe Livedocs Setting Character Ranges

Basically you have reserved keywords in flex like “id” and “class” amongst others… I was traversing through some xhtml that i brought in remotely and it had many div tags. One of the issues I ran into with it was trying to manipulate div’s with certain class attributes… so i was doing some searching through the html with e4x and trying to grab things with e4x operators like body..div.(@class == ‘headlineText’) this would theoretically grab all of my div tags that have that class name…

but the compiler bombs on this and says class is reserved… so the proper syntax for this is body..div.(@['class'] == ‘headline’) I found this when looking at some xml standards online
NOTE: you may get an error: ‘A term is undefined and has no properties’ error when searching for divs that don’t have the class attribute… you pretty much have use a for each loop and loop through the div XMLList that you would get back from these operations:

var body:XML = myXML.body[0];
var divList:XMLList = body..div; //searchs body for all div tags

then you would loop through them.

for each( var p:XML in divList )
{
if( p.@['class'] == ‘headlineText’ )
//do something
}
}

for some reason you get an error when trying to filter this way with xml when the attribute isn’t there… this only seems to happen when you use filtering operations like body..div (which gets all of the div’s) I think it may actually be a bug… it seems to me this should just return an empty XMLList if there isn’t any found… but i guess it just doesnt work…. hmmm… anyway

thats all for now.

Application - Source

The basis of what changed in the line tool, is exactly what I stated above… if you take a look at Version 3 of the Drawing package

Version 3 Application – Version 3 Source

You will see that all you could do was draw a line and a rectange, depending on the chosen tool… I saw a post on flexcoders about drawing and editing drawing lines. I really didn’t feel like working on my “work” project for some reason… so i read some flexcoders and then decided to make an example of this.

Here are some links to previous posts on DrawingWithTheUIComponent:

• Version 3 Post
• Making Flex “look” 3d
• Programmatic Visualization
• Version 2
• Version 1
• Paint Canvas Application
• Relationship Mapper By Andrew Trice

http://seraf.mediabox.fr/wow-engine/as3-3d-physics-engine-wow-engine/

 note: i haven’t used it yet, but need to save the link so i don’t forget it…  the demo’s are really awesome.

Application - Source

Please Note:  Javascript has to be on in your browser and the javascript is in the html-template > index.template.html file.

Finally it’s here…

OPEN SOURCE FLEX XML MP3 PLAYER

Flex xml mp3 player

Basically you can specify an xml playlist from the url, and have it play whatever is in the playlist…

The links for the examples are on the right side.

You can also specify the playlist in the url if you’d like:

http://cctracker.axelscript.com/Examples/xspfPlayer/bin/xmlPlayer.cfm?playlist%5Furl=http://killtheheart.com/playlist.xml

here are the variables you can use:

• playlist_url : the url of the xspf file to load
• podcast_mode : (true/false) if true the playlist url could be an rss feed to a podcast and it will play the all of the podcasts
• repeat_playlist : boolean value that make the repeats the playlist after the end
• song_url : String the href location of a single song you want to play, when this is used playlist_url is ignored
• song_title : the name of the song you want to use

The music player can also be used to play single mp3 files instead of playlists, the parameters are:

• song_url : the url of the single mp3 you want to play
• song_title : the text to replace the players default’s

and you could even create a custom playlist on your site (this link doesn’t work it’s an example) http://flexcoders.nl/someplaylist.xml

and as long as it was in the right format, it’s all good….

here is the format http://examples.axelscript.com/Examples/xspfPlayer/bin/data.xml

right click and view source to actually copy and paste xml…

It’s loosely based on the xspf (‘spiff’) standard, it’s an open source shareable playlist format…

Here is the documentation on it:

http://www.xspf.org/xspf-v1.html#rfc.section.4.1.1.2

here is another example of a playlist

http://www.killtheheart.com/playlist.xml

• Resources
• Google Code
• labs.flexcoders.nl
• axelscript.com
• Big Version
• Small Version