SWF It Good

Someone asked me to give an example of the alpha masking in flash. So here is an example.

Source

My wife’s parents gave me the annual gift certificate to Barnes and Noble, so this year I got Actionscript 3.0 Design Patterns. I am excited about it. Last Christmas I got Advanced AS3 Design Patterns but I was just learning AS3 so I couldn’t figure out Design Patterns also.

I have since understood a good deal of the book but I think this one is a little more basic and has more examples. I hope I can apply these new ideas in to my new job as I am coding in a low-level manner so that the work can be used in either Flash or Flex.

If you haven’t heard from the whole Flash community Papervision 3D 2.0 is out w/ textures, more interactive features and new coding conventions like BasicRenderEngine Class. I was working on a Coverflow thing for a client a week ago that I abandoned and just moded Doug McCune. But when I was going to do it myself I was using the Great White Trunk.

Here is what I came up with:

[as]

package
{

import caurina.transitions.Tweener;

import flash.display.*;
import flash.events.Event;

import org.papervision3d.cameras.*;
import org.papervision3d.materials.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.*;
import org.papervision3d.view.Viewport3D;;

public class PV3DTest extends Sprite
{
[Embed(source="images/one.jpg")]
private var Pic:Class;

public var scene:Scene3D;
public var camera:Camera3D;
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;
private var photoContainer:Plane;

public function PV3DTest()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
init();
}

private function init():void
{
scene = new Scene3D()
camera = new Camera3D();
camera.focus = 500;
camera.zoom = 3;

renderer = new BasicRenderEngine();

viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, false, false, true, true);
viewport.addEventListener(Event.ADDED_TO_STAGE, init3d);
addChild(viewport);
}

private function init3d(e:Event = null):void
{
var data:Bitmap;
var photoMat:BitmapMaterial;

data = new Pic() as Bitmap;

photoMat = new BitmapMaterial(data.bitmapData);
photoContainer = new Plane(photoMat, 220, 210, 6, 6);
camera.target = photoContainer;
//photoContainer.yaw(45);

scene.addChild(photoContainer);
renderer.renderScene(scene, camera, viewport);
addEventListener(Event.ENTER_FRAME, render);
}

private function render(evt:Event):void
{
Tweener.addTween(photoContainer, {rotationY: 45, transition:”linear”, time:.5});
Tweener.addTween(viewport, {x: 300, transition:”linear”, time:.5});
renderer.renderScene(scene, camera, viewport);
}

}
}

[/as]

Source | Example

So I’m working from home this week since none of my co-workers are in. So I wanted to work on the couch and not the desk. Then it hit me a can make a table out of something sturdy like a snare drum stand, minimal and efficient.

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

It’s official, starting December 13th I will be an employee of Travelocity. My official title is Web Design Contributor but I will be working alongside the flash team working on upcoming projects. It’s exciting, I’ve always been “The Flash Guy” now I can be one of the flash guys. This is an opportunity to learn and collaborate in a way I have never been able to do. I’ve been teaching myself for the past 2 yrs.
Here is the sad news I have to leave my current job at Eisenberg And Associates. I will have only been there a year on Dec. 3rd. I am in shock. The offering of my new job and the offering of mine last year is almost to the day. I am very grateful for the job I have had. Last year I didn’t get Flex completely and all I could do in ActionScript 3 was make clickable boxes and some other stuff.
Because I was the flash guy at my current job, I was able to build up my knowledge to where now I build only in Flash CS3/AS3/Flex w/ OOP. I had no one to say, “What about the people who have flash player 6″. My thought is they don’t want to see flash anyway if it’s that old, forget them. I had that liberty. That helped build up my skills a lot and helped me get the Travelocity gig.

I enjoy all the people at my current job. I will miss them and getting Eisenstein’s in the morning and being able to walk to work. But sometimes you have to move on. If we didn’t, some of us would be still living with our parents. It’s not that you hate your parents, just another chapter.

So if any Eisneberger’s are reading this…I wish you all the best.

Travelocity here I come.

P.S. I’m working on an Advanced ColorPicker Component for Flash CS3 that I think would be good for the Automotive industry.

P.S.S There’s an opening at Eisenberg’s for a Flash Developer. You can develop how ever you want. I was strictly AS3 and such. For more info post a comment. This is a Dallas Job.

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

I have noticed some times I’m an idiot spending an hour on something that would have take five minutes if I’d have paid attention. Well I’m going to start sharing some things I’ve learned from these times.

1. in Flash/Flex when using the TextEvent.LINK make sure your textfield is set to selected = true.
   the link is clickable even when selected = false, just nothing will happen. Very fishy that should be changed. It is very misleading.