Download CS3 JSFL Documentation here

This is a link to the latest and greatest JSFL documentation - CS3. Grab it while it’s hot. It’s full of stuff that wasn’t in there in previous documentation. If this link ever goes bad and it shouldn’t, leave me a comment and I will put it up myself. Enjoy.

No comments

View Banner

View Website

 

I built these snickers banners a little while back. I was excited to build them because it involved one of my child hood heroes Mr. T. Although the banners themselves didnt use Mr.T, the website did. I was fortunate enough once again to convince the client to do these banners in Flash 8 because of BitmapData. The banners required a shattering effect which was done using the draw method of the BitmapData class. If these would have been done in an earlier version of Flash, there would have been significant chugging of the processor when the image shatters. Check it out, let me know what you think.

No comments

The freaking Wii!!!! I couldn’t believe this when I saw it. The way the depth of field was being manipulated, I thought I was looking at some crazy hologram, but kooler. This could really make the user feel like they are emmerced in the experience. Hooking up the infrared lights in place of the LED lights on the glasses, genius! Imagine what could be done with this technology combining Flash and Papervison. This is the type of stuff that makes me wish I could spend the majority of my day doing lab work. His demo was not done in Flash by the way.

No comments

 

I came across this today and was very impressed. Although the drawings are simple, the animations are incredible. I’ve always considered myself a connoisseur of 2D animation. I couldn’t believe how responsive the character is to the keyboard controls. Let me know what you think.

No comments

View Banner

I built this banner a while back. I was able to convince the client early on to have this built in Flash 8 because that was the dawning of BitmapData in Flash. Without BitmapData there would have to be layers upon layers of MovieClips with transparent images in them which is never a good thing. I don’t even want to think about how hard this thing would be chugging the processor. Everything had to be under 40K filesize which wasn’t easy with such a graphics heavy banner. Basically all I did was overlap a bunch of images (the individual sprays) for each color as the spraycan moved across. That gave the illusion the can was spraying. When the can stopped spraying I took a snapshot (BitmapData.draw()) of the container MovieClip which housed the spray and removed all of the spray MovieClips from the stage. That kept the Flash player free and clear of having to constantly redraw all of those transparent images. It all came out pretty smooth, I was happy about that.

No comments

VIEW EXAMPLE
DOWNLOAD SOURCE

If you do alot of banners or work on projects with small filesize constraints, you should be hip to TweenLite written by Jack Doyle. This is a powerful Object Tweening engine that is incredibly small in file size (about 2.5K or so). Other Tweening Engines such as Caurina Tweener are a whopping 10K. That is alot of resources! One thing that TweenLite does not natively have which we at ICG need on a frequent basis is the ability to tween the timeline of a MovieClip. The reason TweenLite doesnt have this feature is because it’s original purpose is to be small in filesize and not bloated by excessive bells and whistles. The following is a workaround without changing Jack’s source files:

*DISCLAIMER: The following modification is using TweenLite VERSION: 5.8, it may not work with future versions of TweenLite.

 

//======================================================

 

import gs.TweenLite;
class gs.TweenLiteEnhanced {
public static function to ($obj:Object, $time:Number, $params:Object):Void {
if ($params._frame) {
$obj._frame = $obj._currentframe;
$params.onUpdateNew = $params.onUpdate;
$obj.onUpdate = function () {
$obj.gotoAndStop (Math.ceil ($obj._frame));
$params.onUpdateNew ();
};
$params.onUpdate = $obj.onUpdate;
}
TweenLite.to ($obj,$time,$params);
}
}

 

//======================================================

USE:
TweenLiteEnhanced.to(mcBox, 5, { _frame:300})
// mcBox is the name of the MovieClip

 

It works by injecting a function into the MovieClip which runs a gotoAndStop to the current value of the custom _frame property. It gets called on every update (the “onUpdate()” method). It only adds about 300 bytes above the class. Try it out, let me know what you think.

4 comments

I haven’t posted in a while. This is a very simple yet effective JSFL I wrote for a coworker. He needed an easy way to set all the objects he had selected on stage to a whole pixel. Sometimes vectors get blurry if they land on a fraction of a pixel and clients can be quick to point this out. It would suck to do this manually if you had any number larger than 12. Imagine if you had 200 objects onstage and everyone was potentially not on a whole pixel. The world would be doomed without this.

 

// An array of objects that are selected.
var objects = fl.getDocumentDOM().selection
// Loop thru the objects and set their X and Y coordinates to a round number.
for(var i = 0; i < objects.length; i++){
objects[i].x = Math.round(objects[i].x)
objects[i].y = Math.round(objects[i].y)
}

 

Thats it. Stick the above code in a JSFL file, select some objects and run it.
SOURCE FILE

 

 

No comments

We are currently doing some big work for a major client. We hire some forth party vendor to do some heavy lifting for us because we are swamped with other work. I was never in any of these calls so I don’t know the whole story. Maybe the vendor has some really great reasons for dropping the ball but here’s my take on it. Apparently the vendor was talking the right talk and promising us the moon. They had a good amount of time to create several Flash sites. Time passes and we need to see progress. The vendor literally submits an FLA with an imported PSD file in it for graphics. Some minimal code which was in AS2 when in the contract we specifically stated AS3. What they submitted may have taken one of us here maybe 30 to 45 minutes to do. We now have a week to bring the project inhouse and spit out 5 sites along with all the other work we are supposed to deliver to our other clients. If you ask me who really gets scarred in this transaction it is the Digital Media team. Its crap like this that keeps us at work till 2 am instead of 10 pm.

A good rule of thumb if you are a vendor is to under promise and over deliver. That gives your client that “HOLY CRAP THESE GUYS ARE AMAZING” bang factor that compels them to keep you as a vendor, send you an ungodly amount of work, and pay you your well deserved hefty fee (within reason of course). If a vendor wants to run with the Pros, he has to train like a Pro, commit like a Pro, and deliver like a Pro. Don’t jerk your clients around especially when there are reputations to uphold and potential millions of dollars at stake. If you make a commitment and you don’t know how the hell you are going to pull off some magical whurly gig that you have never done before, work your ass off and do everything possible to figure it out. Get some consultation before you commit if necessary. Maybe we just expect everyone to put out the quality of work we do. Maybe we are part of the few that strive to do fantastic work. But Good Lord man, If you make a commitment, keep it. If you get a scope of work that you know is way over your head, consider not taking it and keep learning. After reading this if you are an Interactive Vendor or Freelancer and want to be considered to do some great work, contact me with your info and portfolio and I’ll see about hooking you up with some ICG projects. Check out my portfolio section, it is 99% ICG work.

No comments

I wrote this very reusable class called the “CreateBitmapData” class a little while back. I’ve used it in multiple projects and it has saved me countless hours and natural hair color. Basically you pass and Array of image URLs and a callback function expecting an Array of BitmapData Objects and it’s as easy as that. It utilizes the built in MovieClipLoader class and will push in an undefined value into the returning Array if there is an error loading the image. This is a failsafe so that it doesn’t completely break whatever you are doing. I will try to have an AS3 version for it soon. Check it out, let me know if you make any modifications.

DOWNLOAD SOURCE

How to use it:
//—————————————————

import CreateBitmapData;
var objCreateBitmapData:CreateBitmapData = new CreateBitmapData();

function bitmapsReciever($bitmaps:Array){
// Do what you want with the BitmapData Objects Array here.
}
objCreateBitmapData.create([”http://www.example.com/pic1.jpg”,”http://www.example.com/pic2.jpg”], {scope: this, func:”bitmapsReciever”})

//—————————————————

 

Here’s what the code actually looks like if your interested:
/*

Author: Charles D Clements copyright 2007
Email: charlesdclements@yahoo.com
WebSite: www.charlesclements.net

Pass an Array of image paths into this class and it will return an Array with all the
BitmapData Objects created into the specified return object as a parameter.

*/
import flash.display.BitmapData;
class CreateBitmapData {
/*
Variables
*/
// MovieClips
private var mcContainer:MovieClip;
private var mcInnerContainer:MovieClip;
// MovieClipLoader
private var objMovieClipLoader:MovieClipLoader;
// Numbers
private var numIncrement:Number = -1;
// Arrays
private var arrImageStrings:Array = [];
private var arrNewBitmaps:Array = [];
// Strings
private var strClassName:String = “CreateBitmapData”;
// Objects
private var objCallback:Object;
/*
Constrructor
*/
public function CreateBitmapData() {
trace(’CreateBitmapData’);
this.arrImageStrings = [];
this.arrNewBitmaps = [];
}
/*
Creates BitmapData from external Images.
$array: an Array of external image URLs.
$callbackObj: an Object containing a scope and a callback function in which it returns an Array of BitmapData Objects to.
The callback function should be expacting an Array.
———————————————————
ex: objCreateBitmapData.create([”http://www.example.com/pic1.jpg”,”http://www.example.com/pic2.jpg”], {scope: this, func:”bitmapsCreated”})
*/
public function create($array:Array, $callbackObj:Object):Void {
trace(’create’);
this.arrImageStrings = $array;
this.objCallback = $callbackObj;
this.mcContainer = _root.createEmptyMovieClip(”mcContainer”, _root.getNextHighestDepth());
this.mcContainer._visible = false;
this.loadImages();
}
/*
Load external images from Array.
*/
private function loadImages():Void {
this.numIncrement++;
if (this.numIncrement < this.arrImageStrings.length) {
this.mcInnerContainer = this.mcContainer.createEmptyMovieClip(”mcInnerContainer”, 0);
this.objMovieClipLoader = new MovieClipLoader();
this.objMovieClipLoader.addListener(this);
(this.arrImageStrings[this.numIncrement] == undefined) ? this.spotTaken() : this.loadClip(this.arrImageStrings[this.numIncrement], this.mcInnerContainer);
} else {
this.done();
}
}
/*
Local loadClip() function that calls the MovieClipLoader loadClip() function.
*/
private function loadClip($URL:String, $container:MovieClip):Void {
this.objMovieClipLoader.loadClip($URL,$container);
}
/*

*/
private function onLoadError(target_mc:MovieClip, errorCode:String, httpStatus:Number):Void {
trace(”>> loadListener.onLoadError()”);
trace(”>> ==========================”);
trace(”>> errorCode: ” + errorCode);
trace(”>> httpStatus: ” + httpStatus);
this.spotTaken();
}
/*
If the URL is undefined this inserts an undefined into the Array to be returned.
*/
private function spotTaken():Void {
this.arrNewBitmaps.push(undefined);
this.loadImages();
}
/*
Listens for when the image has loaded.
*/
private function onLoadInit($clip:MovieClip):Void {
var bmd:BitmapData = new BitmapData(this.mcContainer._width, this.mcContainer._height, true, 0×00000000);
bmd.draw(this.mcContainer);
this.arrNewBitmaps.push(bmd);
this.loadImages();
}
/*
Called when all images have been loaded.
*/
private function done():Void {
this.bitmapDataCreated();
this.clear();
}
/*
Load external images by passing an Array.
*/
private function clear():Void {
this.numIncrement = -1;
this.arrImageStrings = [];
this.arrNewBitmaps = [];
this.mcContainer.removeMovieClip();
}
/*
Load external images by passing an Array.
*/
public function getBitmaps():Array {
return (this.arrNewBitmaps);
}
/*
Calls the Callback passed into the setup.
*/
private function bitmapDataCreated():Void {
this.objCallback.scope[this.objCallback.func](this.getBitmaps());
}
}

Comments are off for this post

Where I work we do alot of banners. I wrote a class a while back that has come in handy multitudes of times. It contains a handful of public functions and I’ve used it on many major advertising banner campaigns (various HP banners, Snickers – Get Some Nuts, Toyota Sequoia, etc).

VIEW EXAMPLE
DOWNLOAD SOURCE

EXAMPLE SITUATIONS:

 

HOW TO USE IT:

//—————————————————————————
import UserInteraction;
var objUserInteraction:UserInteraction = UserInteraction.getInstance();
function endFunc() {
trace(’endFunc called’);
objUserInteraction.reset();
}
objUserInteraction.setup({clip:mcClip, timer:3, show:true, timerCallback:{scope:this, func:”endFunc”}});
//—————————————————————————

1. Import the class
2. Create an instance of it
3. Create a MovieClip of the desired hit state area and name it
4. Create a function that the class will call at the end of timer
5. Call the setup function

AVAILABLE PUBLIC FUNCTIONS:

METHOD

getInstance():UserInteraction

Creates a new instance of the class.

————————————–

METHOD

setup($obj:Object):Void

Passes all the necessary variables into class.

PARAMS

$obj : Pass an object of the following params:

clip: MovieClip that will be used as hit area.

timer: Time set in seconds.

timerCallback: Function that is called once the user has been out of the area for designated time.

rollOverCallback (optional): Function that can be called on rollover.

show (optional): When set to true will make the MovieClip visible at 50% alpha. Default is set to false.

————————————–

METHOD

reset():Void

This allows the hit area to be used again after the timer condition has been met.

————————————–

METHOD

stop():Void

This stops all functionality at work in the class and also hides hit area.

SIDE NOTES:

• You may want to keep the hit area a bit smaller than the actual target area especially with banners. This is suggested because if the user rolls out of the area too quick, Flash may think that the mouse is still over the hit area and the timer will not be started.

• Always scale the contents of a MovieClip and not the MovieClip as a whole from the outside. You may get undesired results other wise.

 

 

 

 

 

 

 

No comments