f13x - learning flex from a coldfusion developer's perspective

My first recipe: Magnetic Poetry

noreply@blogger.com (Tony) — Wed, 19 Dec 2007 16:47:00 +0000

so, my first little recipe from the ActionScript 3.0 cookbook, happens to be one that i really like... My fiance' and i have a set on our 'fridge and its always good fun to make some cool poetry or whatever... anyway, this makes a 600x600 dark dark blue magnetic poetry widget. ive not done much with mxml per se, im pretty much sticking to learning actionscript 3.0 first.

so, without any further babbling... here it is, and the code is below.

** NOTE**
i can take credit for only the hacks of this code, the code is basically straight from the book, although i have embellished and changed the code at some points, its basically verbatim. however, i can read this, i can write all of this, i can even understand it all!! so far, being a coldfusion developer hasnt hindered me one bit, in fact, a lot of the stuff ive figured out over the years in cf, directly apply to learning actionscript 3.0. ill talk about that later as i get a good handle on exactly how.

Here is the code for my piece "Floetry"

//this is my take on the magnetic poetry lesson the incredible
//ActionScript 3.0 cook book.
//thanks for showing me the light fellas.

package {
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
[SWF(backgroundColor="#00000f", frameRate="35", width="600", height="600")]

public class Floetry extends Sprite
{
public function Floetry()
{

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//Create a string and split the string into an array of words
//make sure you put spaces at the end, like near the word kennedy.
//if you dont do that, you will end up with words that are joined, bad bad.

var example:String =
"on up down across street buddha karma good bad ugly hottie chick dude tony kennedy president vice-president " +
"lily carlos jezebel poop factory piss carpet bob marley damian jamaica deck i i i on on on at " +
"inside outside three one two four 69 do fire buttslide dog floor jump";
var words:Array = example.split( " " );
var word:Sprite;
var wordText:TextField;
var textFormat:TextFormat = new TextFormat();
textFormat.size = 20;
textFormat.font = 'Calibri';

for ( var i:int = 0; i < words.length; i++ ) {

//here we create a new sprite for each word.
word = new Sprite();
addChild(word);

//next we create a text field within the sprite by creating a new
//Textfield instance and adding it as a child
wordText = new TextField();
word.addChild(wordText);

//now we need to make a textfield that has the value of the word in it
//give it a border and a background and make it not-selectable so that we can drag it around
wordText.autoSize = TextFieldAutoSize.LEFT;
wordText.border = true;
wordText.background = true;
wordText.selectable = false;
//i wanted random font colors so im taking the value of that greyscale color and
//multiplying it with a random value... thanks andy :)
wordText.textColor = Math.random() * 0xaaaaaa;
wordText.backgroundColor = 0x000000;
wordText.defaultTextFormat = textFormat;

//here we actually set the value of the text field with the word
wordText.text = words[i];

//and now we add a event handler for the pickup and dropoff of the textFields
word.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag);
word.addEventListener(MouseEvent.MOUSE_UP, handleDrop);

//and now to make it more like a true refridgerator, lets randomize the placement of the words.
var rx:Number = Math.random() * stage.stageWidth - word.width;
var ry:Number = Math.random() * stage.stageHeight - word.height;
word.x = rx;
word.y = ry;
}

function handleDrag(event:MouseEvent):void {
//the thing we drag will be the textfield, so to get to that
//we have to go up to the parent
var word:Sprite = event.target.parent;

//while dragging we want it to be z-indexed to the top
setChildIndex(word, numChildren - 1);

//now, as the mouse moves, we drag stuff
word.startDrag();
}

function handleDrop(event:MouseEvent):void {
var word:Sprite = event.target.parent;

//stop dragging when mouse lets go
word.stopDrag();
}

}
}
}

Lazy Flex Blogger

noreply@blogger.com (Tony) — Tue, 18 Dec 2007 14:56:00 +0000

ok, so ive pretty much become resolved to the fact that its almost impossible to focus on a blog as well as learning :)

that said, ive learned a ton in the past two or three weeks, and ill have some examples of what ive learned up in a next couple days.

to recap, though, so far i have learned:

looping
conditional actionscript (if else, etc)
how to use the displayList with addChild()
how to add event listeners, how to handle the events that happen, etc
how to move objects on the stage, using easing, using trig and a few other ways
how to draw in absolute positions using just actionscript

what ive also found out to be more true than anything is that you can be a flex interface developer all day long using just mxml and some inline actionscript. however the real way to become a VERY good flex developer is to learn actionscript first and then move into mxml. since mxml is generated down to actionscript and then compiled into .swf files, you can really do just about everything in flex with just actionscript.

so, im going to become first and actionscript 3 developer and then a mxml/flex developer.

cheers til next post.

Flex training at FigLeaf: Day 1

noreply@blogger.com (Tony) — Tue, 04 Dec 2007 00:35:00 +0000

well, today was the first of three days of Flex training at FigLeaf Software, in Washington, DC. The instructor is Dan Blackman, a very well spoken, not boring, and highly knowledgeable non-geek, geek. today we learned A LOT. i dont have any code to show or application to show, but i hope to remember to bring that to the hotel room with me tomorrow.

im going to try to remember as much as i can:

1. containers
2. form controls
3. mxml component development and instantiation
4. use of inline vs. imported classes vs. script block ActionScript
5. using images in your flex app
6. event dispatching
7. event handling
8. debug mode in flexbuilder and how to use trace(), how to use the problems view.
9. how to effectively use workspaces, opening and closing projects
10. i dont remember any more right now :)

great resource for flex information

noreply@blogger.com (Tony) — Thu, 29 Nov 2007 22:11:00 +0000

a friend, andy trice, sent me this link today

http://kanuwadhwa.wordpress.com/2007/08/07/flex-links/

quite possibly one of the best compilation of flex links and useful information.
the entire blog appears to have some great information, and beginning flex information.

in fact, im going to add this blog to my blogroll on the right.

My First Package and the DisplayList

noreply@blogger.com (Tony) — Thu, 29 Nov 2007 21:16:00 +0000

so, following along the lynda.com tutorials, i happened upon the one about the new feature in ActionScript3, and that is the "displayList". New to ActionScript, the displayList is basically the manager for all things that APPEAR on the stage. In order to show something on the stage you must add it to the stage, and conversely in order to NOT display some object on the stage, you can use removeChild().

its nothing too crazy, and really not that hard, but it was cool to see my first little creation come to life! now, this may appear as nothing but a circle with a line through it, but for my company, Navtrak, Inc. the icon you see bears a striking resemblance to our vehicle icon in our software.

anyway, the code for this exercise is below:

package {
import flash.display.Shape;
import flash.display.Sprite;

public class DisplayList extends Sprite {

public function DisplayList() {
var circle:Shape = new Shape();
circle.graphics.lineStyle(5,0x000000,1);
circle.graphics.beginFill(0xcc0000,.75);
circle.graphics.drawCircle(20,20,15);
addChild(circle);
circle.x = 30;
circle.y = 10
var line:Shape = new Shape();
line.graphics.lineStyle(2, 0, 100);
line.graphics.lineTo(25, 25);
addChild(line);
line.x = 30;
line.y = 10;
}
}
}

The example is here.

So far...

noreply@blogger.com (Tony) — Thu, 29 Nov 2007 13:39:00 +0000

well, so far in my lessons i have learned about:

1. classes
2. packages
3. methods
4. properties
5. constructors
6. variables (duhhh)
7. expressions (duhhh)
8. conditional things
9. looping (duhhh)

and now its time to dive into classes a bit deeper, and today in the videos im actually going to be making my first class, and hopefully displaying something on the stage!

week 2 begins

noreply@blogger.com (Tony) — Mon, 26 Nov 2007 15:47:00 +0000

ok, so a little turkey break took my time last couple days, but its week 2, and its time for some flex. i hope today to connect my first coldfusion webservice to a flex data grid. :) coming soon.

the curriculum

noreply@blogger.com (Tony) — Wed, 21 Nov 2007 20:05:00 +0000

im going to get into my curriculum a bit so that i can remind myself what i wanted to do, from the beginning, and see how that changes over time.

week 1
a. read Programming Flex by Chafic Kazoun and Joey Lott
b. take the first set of lessons on actionscript from lynda.com

week 2
a. continue reading and re-reading the book above
b. wrap up on actionscript videos from lynda.com (easily the hardest part for me to pickup, being that i was more of a designer forever, and not a programmer in the oop sense of programming. im more of a coldfusion developer who can design as well)

week 3
a. Flex 2: Developing Rich Client Applications class at figleaf this is a two day class
that delves into the basics of flex development
b. build out my first little application. i want to make a simple CRUD system that i will eventually take into my day job (www.navtrak.net) and implement that as part of an effort to upgrade some backend systems.

week 4
a. continue reading and going over course material and working lots and lots of actionscript classes to become components for that backend app.

week 5
a. christmas :) forget geek stuff for a week

week 6
a. more work on backend components and loads of interface work. mxml i think will be the easy part for me, i think the bane of my flex existence will be actionscript.

week 7
a. another two day class @ figleaf, this time Flex 2: Dashboard Applications
b. back to back! thats right, another class at figleaf the same week: Flex 2: Programming the Visual Experience

this is good for now... this will keep me plenty busy for some time.

i hope to have examples of what im doing up here shortly. although most of the code ive done so far is too tiny to really get into it :)

Flex 2 Useful links

noreply@blogger.com (Tony) — Tue, 20 Nov 2007 15:31:00 +0000

This blog is going to be the chronicle of my trip through learning how to make rich internet applications with yet another tool, Flex. I have been a web developer for about 13 years now and up until this point, everything was "ColdFusion + Javascript + CSS + Photoshop" to make it all look good and act like it should. Well, it's now time to move on and embellish my bag of tricks. And with that, this trip through learning Flex and its two languages, MXML and ActionScript begins!

I wanted to make sure this first post had some of the most useful links that I could get my hands on and to do that I tapped into a good friend and Flex Guru God Warlord, Andy Trice. Andy works for Cynergy and truly has opened my eyes to what is possible, and that it's even possible for me to start doing some of these cool things!

Anyway, here is the first of which I believe there will be MANY links to his site,