SWF It Good

Ok so at my last job I was working on a boat client’s site. They asked for me to do a color option flash piece in two days. So I thought what was the quickest and easiest way to convey color options to a potential buyer…A color picker. But I thought a conventional ColorPicker was ugly and had a lot of things I didn’t need like the hex code input. Secondly the ColorPicker has a bunch of colors and I only needed a few in one row. So I started getting into the Flash CS3 components code, found ColorPicker and ColorPickerEvent Class and extended them to do what I wanted. The result is the CustomColorPicker.

It uses almost everything the ColorPicker does except this color picker stays open for a time after you have selected a color. The picker event passes which index in the Array was selected and you can use that to listen for a color change and trigger an Array in you app to be used in tandem.

Only problem so far is it doesn’t register the first one selected (on INIT, which is 0) inside of the class yet. You have to do it in your app.

In the working example, it loads xml and that is broken up in to VOs. Each VO’s color is pushed into an Array to be pushed into the CustomColorPicker’s colors property and when clicked it sends a message to change the view of the car, color text and color swatch of the corresponding index. For example if you click index 3, it get VOS_array[3].image, text and displays it.
All this is done on the inside all you have to do is grab the color and array index from the CustomColorPickerEvent.COLOR_CHANGE and you are good to go.

Please excuse the mess, I stripped the client data and grabbed images off of a google search of 08 Honda Civics, and changed up some stuff to look a little different. Leaving it ugly, but it looks good enough for you to get the use of the component.
Hope you like it and let me know if you have any improvements or question.

Source | Example

When when you add features to a class and they aren’t seeming to work, STOP. Your doing something that doesn’t jive w/ you code. You are overwhelmed w/ all the code you already have. You are missing something or your code just doesn’t work w/ what your trying to do.

Solution:

Simple, create a new class. Name it controlVariable (yep, just like in Science class). Try that troublesome code there all by its self. That way if it works in controlVariable then you know you code is correct and just the implimenation in you project is off. I feel this is very helpful when I’m in the trenches. Cause sometimes some code chunks don’t play well w/ others.
Don’t be prideful and recompile a swf for 2hrs just because you think, “I declared that Blue Rectangle, it should be there”. When you didn’t addChild or import or instantiate the Shape Class.
Hope this helps someone.

So the other day I spent 2hrs looking for how to and trying to do an alpha mask (I’ve done on once). So like an idiot I was trying to do it the Photoshop way with level of gray.

My method of thinking

• Black = 100 and White = 0
• but it doesn’t matter what color only the opacity.

If you have never mad a alpha mask in Flash before or CS3 it’s easy.

1. open a fla
2. draw a shape
3. Make that shape a MovieClip
4. name it maskee_mc
5. draw a second shape
6. use a linear gradient
7. choose color
8. set one linear color alpha at say, 40
9. Make that second shape another MovieCilp
10. name it mask_mc

[as]

this.mask_mc.cacheAsBitmap = true;
this.maskee_mc.cacheAsBitmap = true;
// as2 was maskee_mc.mask(mask_mc);
maskee_mc.mask = mask_mc;

[/as]
That’s it!

I have been trying to understand Papervision 3d for the last couple of months, but all the examples are using collada or some elaborate functionality. I just wanted to test something simple. So I made a rotating box it rotates on the y axis.

Here how it goes in Flash CS3:

1. add an image into the library
2. set the linkage name to test.
3. make sure width = 336 / height = 335 (for this example)
4. and add this script

[as]

import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;

var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;
addChild(container);

var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D(p, 10);

var bam:BitmapAssetMaterial = new BitmapAssetMaterial(“test”)
bam.oneSide = false;
bam.smooth = true;

var p:Cube = new Cube(bam, 336, 335, 335, 5, 5, 5);

scene.addChild(p);

scene.renderCamera(camera);

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(event:Event):void
{
p.rotationX % 360 == 0 ? p.rotationX = 1 : p.rotationX += 1;
trace(p.rotationX)
//p.rotationY = stage.mouseY – (stage.stageHeight * 0.5);

scene.renderCamera(camera);
}

[/as]

thats it

So at work we are experimenting with WebOrb to ditch XML. No for good but definatly when there will be a lot of parsing. Anyway, our PHP Programmer downloaded WebOrb and we looked at the examples but the example were either banking on you having previous Flex Data Services experience or they were not that good in my opinion. The most crucial info was not even on the tutorial application page. So I’m going to walk you through the tutorial with the modification I used to get it working from various Google Searches. Mainly no service-cofig.xml.

Read more »

In Actionscript 3 you have to do a little more work then AS2.

When working in AS2 you could easily use a random object:

[as]
_flashVar = flashVar

//rest of code
[/as]

With AS3 you could run into IOERRORs and everything in between. The client app could end up with the ugly Runtime Error box, so being proactive about it is better.

Cause you never know, it may work great in your perfect world but when the PHP guy builds the XML structure wrong or the production artist forgets to upload the pictures. All the client will see is you dropped the ball on the flash.
So if you want to use FlashVars in AS3 I’ve found this to be a good solution. Read more »

**UPDATE**

Thanks to the help of Nolan I was able to get it to:

1. works with case-sensitivity
2. and resets data as you type.

————————————-
I redid the ArrayCollection example so take a look at this example:

[as]
< ?xml version="1.0" encoding="utf-8"?>

< ![CDATA[
import mx.collections.*;

private var collectionArray:Array;
[Bindable]
private var collectionData:ArrayCollection;

private function init():void
{
collectionArray = [{first: 'Dave', last: 'Matthews'},
{first: 'Dave', last: 'Chappelle'},
{first: 'Amy', last: 'Grant'},
{first: 'Bilbo', last: 'Baggins'},
{first: 'Jessica', last: 'Tandy'},
{first: 'Jessica', last: 'Simpson'},
{first: 'Paris', last: 'Hilton'}];
collectionData = new ArrayCollection(collectionArray);
}

public function filter():void {

collectionData.filterFunction = filterFirst;
collectionData.refresh();

}

public function filterReset():void {

collectionData.filterFunction = null;
collectionData.refresh();

}

private function filterFirst(item:Object):Boolean
{

return item.first.match(new RegExp(searchField.text, 'i'))

//return( item['first'].indexOf( searchField.text ) > -1 );
//return item['first'].match(new RegExp(string, “i�))

}

private function search():void
{
if(searchField.text !=”)
{
filter()
}
else
{
filterReset()
}
}
]]>

[/as]

**UPDATE July 19th**
This code uses FlashVars and SWFObject. I ran into a problem, as we continued to build, w/ getting data to show in the swf.
To fix this error switch out[as]
so.addParam(“wmode”, “transparent”);
[/as]with[as]
so.addParam(“wmode”, “opaque”);
[/as]or delete it all together

**UPDATE July 19th**

I’m working on a TileList for work for a peek at our Portfolios. Right now I’m trying to adapt the TileList to my liking with back and forth button instead of the scrollpanel. But I wanted to share the wealth w/ what I’ve dug up on this Flash CS3 component. I find most of what’s online to be really crappy and not too robust.

I’ve provided a zip to my work: titelist.zip

[as]

import fl.controls.ScrollBarDirection;
import fl.events.ListEvent;
import fl.controls.listClasses.*;
import flash.net.*;
import flash.events.*;
import fl.data.*;

var xml:XML;
// this set a var for parameter xmlData that is set in the
// SWFObject
var _xmlData:* = root.loaderInfo.parameters.xmlData;

// if someone for got to set the xmlData parameter
// load default xml
if(_xmlData == undefined)
{
_xmlData = “xml/default.xml”
}

trace(root.loaderInfo.parameters.xmlData);
// request xml file
var requester:URLRequest = new URLRequest(_xmlData as String);
//load xml file
var loader:URLLoader = new URLLoader(requester);

//set dataprovider to the loaded xml
function setItems(evt:Event):void
{
xml = XML(evt.target.data);
trace(xml);
list.dataProvider = new DataProvider(xml);
}

loader.addEventListener(Event.COMPLETE, setItems);

//on click of item go to data/url
function onItemClick(e:ListEvent):void
{
navigateToURL(new URLRequest(e.item.data),”_self”);

}

list.addEventListener(ListEvent.ITEM_CLICK, onItemClick);

// Set scroll bar direction
list.direction = ScrollBarDirection.HORIZONTAL;

// position TileList and set column and row values
list.move(0,0);
list.columnWidth = 122;
list.rowHeight = 112;

list.width = 366;
list.height = 112;
list.columnCount = 3;
list.rowCount = 1;
[/as]

So a couple of weeks ago a friend and I were talking about the now hardship of as3 and retrieving class properties when building app.

Ok, lets say in Class A I load an image.

Class B – I am calling two copies of Class A to make two loaded images. make Objects in Class B. If I try to space them equally with classAobj2.x = classAobj1.width + 5,

I get “5″. That is a problem.
(“But Josh, you shouldn’t have a ton of loader objects.” I know I should make a iterator or something but I’m not there yet)

devonair on gotoandlearn.com forums told me about how to pass that var buy creating a custom event. It works but it’s a waste of time to do that for every time you need it. The same friend I was talking to gave me the great “catch all” for passing var through certain events.

See here:

[as]package events
{
import flash.events.Event;

public class GenericEvent extends Event {
public var _data:*;

function GenericEvent (evt:String) {
super(evt);
}

}
}[/as]

So I tested it and it’s nice I can pass a crap load of stuff because it’s an Object i.e.: generic._data = ({width: load.width, height: load.height});

So let’s do that example:

We are going to make three classes, build it like this:

• /root
• -customEventExample.as

• /events
  • -GenericEvent.as

• /display
  • Loading.as

Let’s start w/ Loading.as because we already have the GenericEvent.

[as]

package display
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.ProgressEvent;
import events.GenericEvent;

public class Loading extends Sprite
{

private var load:Loader;

public function Loading()
{
load = new Loader();
load.load(new URLRequest(“http://www.kornitaly.com/Discografia/Korn.jpg”));
addChild(load);
load.contentLoaderInfo.addEventListener(Event.COMPLETE, loadHandler);

}
private function loadHandler(event:Event):void
{
var generic:GenericEvent = new GenericEvent(Event.COMPLETE);
generic._data = ({width: load.width, height: load.height});
dispatchEvent(generic);
}
}
}[/as]

Now the main class file customEventExample:

[as]

package {
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.Shape;
import flash.events.MouseEvent;
import events.GenericEvent;
import display.Loading

import flash.events.Event;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
[SWF(width="450", height="450")]
public class customEventExample extends Sprite
{
private var _width:int;
private var image:Loading;
private var image2:Loading;

public function customEventExample()
{
image = new Loading();
image2 = new Loading();
addChild(image);
addChild(image2);

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

image.addEventListener(Event.COMPLETE, clickHandler);
image.addEventListener(Event.COMPLETE, clickHandler);
}

public function clickHandler(event:GenericEvent):void
{

_width = event._data.width

trace(_width);
if(image2)
{
image2.x = _width + 5;
}

}
}
}
[/as]

dowload zip

I think this is called a proxy of some sort. I’m still learning Design Patterns. Also I’ve learned you can achieve this w/ the DataEvent.

Wow, Apollo is now beta. I’m going to still call it Apollo. I like it better then that stale name it is now. I like the acronym but not the full name.

Also Flex 3 beta is out!!! Get it now.

Flex builder 3 MOXIE

Flex SDK

Apollo beta 1

Apollo SDK

HAPPY CODING