My first recipe: Magnetic Poetry

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

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.

My First Package and the DisplayList

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.

the curriculum

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 :)