kreativeKING - Interactive Developer

Posts tagged “actionscript”

AS3 Basic Preloader Class

I been thinking of ways to preload things in AS3 like you would in AS2. Meaning a simple drag and drop and it preloads. I unfortunately couldn’t come to a solution of just drag and drop. But I have gotten pretty damn close. Last night I started working on a Basic Preloader Class in which I can build more complex preloaders off of. Just like some of the classes in my VIdeoPlayer API, the Base Class gets replaced with BasicPreloader to give it its functionality.


All the BasicPreloader does is load the content, whether is be a Loader or URLLoader operation, show the progress and a complete function. In addition I added a render function which I will build more upon in an Extended class to show some sort of animation. Here is the syntax:




BasicLoader.load(urlString, loaderOrURLLoader);




The Load function takes two parameters. First it takes a string path of the file you want to load. Secondly it takes a string to represent if you are want to use a URLLoader procedure or Loader procedure. To pass the second parameter, it’s best to use the constants packaged with Class which are BasicPreloader.URLLOADER and BasicPreloader.LOADER.

That is the only public function in the class. The other functions protected and can be accessed through class extensions. I hope this will help people out in the community. If you know of any other features that should be added to the Base Class, don’t hesitate to drop me a line or end me a tweet.




Download Here

Here is the Class:

/**
* @author Clemente Gomez.
* @email zomegpro@gmail.com.
* @link http://blog.kreativeking.com.
* @build 1.0 (03-23-09)
* @description Base class to preload assets
*
* @public constants:
* LOADER:String;
* URLLOADER:String;
*
* @public properies:
* bytesLoaded:Number;
* bytesTotal:Number;
* precentage:Number;
* roundedPercentage;
*
* @public methods:
* BasicPreloader() - Constructor.
* load($url:String, $type:String = LOADER):void
*
*/
package com.clementegomez.utils.preloaders
{
import com.clementegomez.events.ParamEvent;
import com.clementegomez.utils.LoaderHelper;

import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;

public class BasicPreloader extends Sprite
{
public static const LOADER:String = "loader";
public static const URLLOADER:String = "urlLoader";

private var url:URLRequest;
private var loader:Loader;
private var urlLoader:URLLoader;
private var loadedBytes:Number;
private var totalBytes:Number;
private var percent:Number;
private var loaderHelper:LoaderHelper;

/**
* The BasicPreloader class is the Base for preloaders. It has all the basic function of
* a preloader. This can be either attached to MovieClip in the library or created dynamically in
* Actionscript 3.0. When attached to a MovieClip you can call the loader at anytime to load your content. This
* class by itself isn’t much visually, this class is mainly to be build upon to create more powerful
* preloaders.
*
* @return = null;
*/
public function BasicPreloader()
{
init();
}

private function init():void
{
trace(“Basic Preloader Initialized”);
}

/**
* THe load function starts the loading process of the asset. The load function accepts two parameters. The
* first being a String to the asset being loaded and the second being a string to describe
* the type of load procedure to use;
*
* @param $url String path to the asset to be loaded.
* @param $type BasicPreloader.LOADER to use the Loader procedure or
* BasicPreloader.URLLOADER to use the URLLoader procedure.
* @default BasicPreloader.LOADER
*
* @return null
* @example Here is an example of the loade function.
*
*
* BasicPreloader.load(“examplePic1.jpg”, BasicPreloader.LOADER);
*
*
*
*/
public function load($url:String, $type:String = LOADER):void
{
if($type == LOADER)
{
loader = new Loader();
loaderHelper = new LoaderHelper(loader, $type);
loaderHelper.addEventListener(ParamEvent.PARAM, complete);
loaderHelper.addEventListener(ParamEvent.PERCENT, showProgress);
loader.load(new URLRequest($url));
}
else if($type == URLLOADER)
{
urlLoader = new URLLoader();
loaderHelper = new LoaderHelper(urlLoader, $type);
loaderHelper.addEventListener(ParamEvent.PARAM, complete);
loaderHelper.addEventListener(ParamEvent.PERCENT, showProgress);
urlLoader.load(new URLRequest($url));
}
else
{
throw new Error(“Type must be of class Loader or URLLoader”);
}
}

protected function showProgress(e:ParamEvent = null):void
{
loadedBytes = ((e.target as LoaderHelper).progress as ProgressEvent).bytesLoaded;
totalBytes = ((e.target as LoaderHelper).progress as ProgressEvent).bytesTotal;
percent = (loadedBytes / totalBytes) * 100;
dispatchEvent(((e.target as LoaderHelper).progress as ProgressEvent).clone());
render();
}

protected function render():void
{
trace(“animation : ” + percent);
}

protected function complete(e:ParamEvent = null):void
{
loaderHelper.removeEventListener(ParamEvent.PARAM, complete);
loaderHelper.removeEventListener(ParamEvent.PERCENT, showProgress);
dispatchEvent(((e.target as LoaderHelper).event as Event).clone());
}

/**
* Return the amount of loaded bytes.
* @return Number
*/
public function get bytesLoaded():Number
{
return loadedBytes;
}

/**
* Return the amount of total bytes.
* @return Number
*/
public function get bytesTotal():Number
{
return totalBytes;
}

/**
* Return the percentage of loaded bytes.
* @return Number
*/
public function get percentage():Number
{
return percent;
}

/**
* Return the percentage rounded to the nearest interger of loaded bytes.
* @return Number
*/
public function get roundedPercentage():Number
{
return Math.round(percent);
}
}
}

Tutorial Published in Web Designer Magazine

Just would like to let everyone know to pick up the 155th issue of Web Designer Magazine. I have been published AGAIN!! What a great feeling to see your words in a publication. Anyway, I wrote a Papervision 3D tutorial for beginning PV3D users. It is an interactive 3D Menu. By the time you get through the complete tutorial, you will know most of the basic tools for creating 3D scenes in PV3D. This isn’t a tutorial on the Great White version of Papervision, This is on the newest release of PV3D which I recommend everyone get.

Here is a link to get your issue.

Javascript and Actionscript Conversation

This weekend my good friend Peter Panton asked my for some help setting up some communication between Javascript and Actionscript. He wanted to be able to get the scroll value of the HTML page and use it in Flash. To be honest, I never did any kind of communication between the two and had no idea where to start. I did some research and came across the ExternalInterface Class.



It took me a while to get how exactly the class worked, but once I got a handle on it, setting up the relation was easy. At first I set up a small test just to see if I can pass information back and forth. Basically is just passes string from the HTML page to Flash and vice versa. You can check it out at ExternalInterface Test 1. All the code will be at the bottom.


Once I jumped for joy with the first example, I got the scroll example to work here. The Javascript just sends the value of the scrollTop to the Flash text field. Since I’m on the Mac, Im not too sure if this works in IE, but it works just fine in FireFox and Safari. The example isn’t rocket science but I figure I’d share it anyway. I’ll even share the example files for you to play with.


Have Fun


Download Examples Here


Example 1 AS



import flash.external.ExternalInterface;

sendBut.addEventListener(MouseEvent.CLICK, toJS);

if(ExternalInterface.available)
{
try
{
ExternalInterface.addCallback("sendToFlash", fromJS);
}
catch(e:Error)
{

}
}

function fromJS($value:String):void
{
oText.text = $value;
}

function toJS(e:MouseEvent):void
{
if(ExternalInterface.available)
{
ExternalInterface.call("sendToJS", iText.text);
}
}

Example 2 AS



import flash.external.ExternalInterface;

if(ExternalInterface.available)
{
try
{
ExternalInterface.addCallback("sendToFlash", fromJS);
}
catch(e:Error)
{

}
}

function fromJS($value:String):void
{
oText.text = $value;
}

Mac vs PC Minisite

Here’s a project I had to do for my Multimedia Design Class. We needed to pick a subject that is up for debate. I decided to do Mac vs PC, seemed to be more fun than smoking or something like that.

I went for a fun UI approach and make it like a desktop. Click on the icons and a window pops up that you can drag around, minimize, etc. It was a pretty fun project. Best of all I got an A!!!!!!.

I also posted the code for anyone who was curious.


Check out the site here





Main SWF File



import gs.TweenLite;
import gs.easing.*;

var wL:Loader = new Loader();
var appHolder:MovieClip = new MovieClip;
var appWindow:Loader = new Loader();
var appIcon:app = new app();
var lockHolder:MovieClip = new MovieClip;
var lockWindow:Loader = new Loader();
var lockIcon:lock = new lock();
var socialHolder:MovieClip = new MovieClip;
var socialWindow:Loader = new Loader();
var socialIcon:social = new social();
var costHolder:MovieClip = new MovieClip;
var costWindow:Loader = new Loader();
var costIcon:cost = new cost();
var performanceHolder:MovieClip = new MovieClip;
var performanceWindow:Loader = new Loader();
var performanceIcon:perform = new perform();
var minimized:Boolean = false;
var cf1:ColorTransform = new ColorTransform();
var cf2:ColorTransform = new ColorTransform();
var showing:Boolean = false;

cf1.color = 0xFFFFFF;
cf2.color = 0x000000;

appHolder.addChild(appWindow);
appIcon.name = "appIcon";
appIcon.mouseChildren = false;
appIcon.buttonMode = true;
lockHolder.addChild(lockWindow);
lockIcon.name = "lockIcon";
lockIcon.mouseChildren = false;
lockIcon.buttonMode = true;
socialHolder.addChild(socialWindow);
socialIcon.name = "socialIcon";
socialIcon.mouseChildren = false;
socialIcon.buttonMode = true;
costHolder.addChild(costWindow);
costIcon.name = "costIcon";
costIcon.mouseChildren = false;
costIcon.buttonMode = true;
performanceHolder.addChild(performanceWindow);
performanceIcon.name = "performanceIcon";
performanceIcon.mouseChildren = false;
performanceIcon.buttonMode = true;

wL.contentLoaderInfo.addEventListener(Event.COMPLETE, addWall);
costWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
performanceWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
appWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
lockWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
socialWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
appIcon.addEventListener(MouseEvent.CLICK, clickEvent);
appIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
appIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
lockIcon.addEventListener(MouseEvent.CLICK, clickEvent);
lockIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
lockIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
socialIcon.addEventListener(MouseEvent.CLICK, clickEvent);
socialIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
socialIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
costIcon.addEventListener(MouseEvent.CLICK, clickEvent);
costIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
costIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
performanceIcon.addEventListener(MouseEvent.CLICK, clickEvent);
performanceIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
performanceIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);

stage.addEventListener(Event.RESIZE, redoWall);

wL.load(new URLRequest("wall3.jpg"));
appWindow.load(new URLRequest("applications.swf"));
lockWindow.load(new URLRequest("security.swf"));
socialWindow.load(new URLRequest("social.swf"));
costWindow.load(new URLRequest("cost.swf"));
performanceWindow.load(new URLRequest("performance.swf"));

function clickEvent(e:MouseEvent):void
{
if(e.type == MouseEvent.CLICK)
{
switch(e.target.name)
{
case "costIcon":
addCost();
costHolder.showing = true;
break;

case "performanceIcon":
addPerformance();
performanceHolder.showing = true;
break;

case "appIcon":
addApp();
appHolder.showing = true;
break;

case "lockIcon":
addLock();
lockHolder.showing = true;
break;

case "socialIcon":
addSocial();
socialHolder.showing = true;
break;

case "close":
trace("closed");
TweenLite.to(e.target.root.parent, .5, {alpha:0, onComplete:removeLoader, onCompleteParams:[e.target.root.parent]});
break;

case "minimize":
if(!e.target.minimized)
{
TweenLite.to(e.target.root.clip, .5, {alpha:0});
TweenLite.to(e.target.root, .5, {delay:.5, scaleX:.5, ease:Bounce.easeOut});
TweenLite.to(e.target.root.title, .5, {delay:.5, scaleX:2});
TweenLite.to(e.target.root.minimize, .5, {delay:.5, scaleX:2, x:"-10"});
TweenLite.to(e.target.root.close, .5, {delay:.5, scaleX:2});
e.target.root.titleBar.transform.colorTransform = cf1;
e.target.root.title.transform.colorTransform = cf2;
e.target.minimized = true;
}
else
{
e.target.root.titleBar.transform.colorTransform = cf2;
e.target.root.title.transform.colorTransform = cf1;
TweenLite.to(e.target.root, .5, {scaleX:1, ease:Bounce.easeOut});
TweenLite.to(e.target.root.title, .5, { scaleX:1});
TweenLite.to(e.target.root.minimize, .5, {scaleX:1, x:"+10"});
TweenLite.to(e.target.root.close, .5, {scaleX:1});
TweenLite.to(e.target.root.clip, .5, {delay:.5,alpha:1});
e.target.minimized = false;
}
break;
}
}
else if(e.type == MouseEvent.DOUBLE_CLICK)
{
trace(e.target.name);
switch(e.target.name)
{

}
}
}

function overEvent(e:MouseEvent):void
{
TweenLite.to(e.target, .4, {scaleY:1, scaleX:1});
}

function outEvent(e:MouseEvent):void
{

TweenLite.to(e.target, .1, {scaleY:.8, scaleX:.8});
}

function upDownEvent(e:MouseEvent):void
{
if(e.type == MouseEvent.MOUSE_DOWN)
{
switch(e.target.name)
{
case "titleBar":
e.target.root.parent.parent.startDrag();
break;

case "costIcon":
e.target.startDrag();
costIcon.removeEventListener(MouseEvent.CLICK, clickEvent);
break;
}
}

else if(e.type == MouseEvent.MOUSE_UP)
{
switch(e.target.name)
{
case "titleBar":
e.target.root.parent.parent.stopDrag();
break;

case "costIcon":
e.target.stopDrag();
costIcon.addEventListener(MouseEvent.CLICK, clickEvent);
break;
}
}
}

function redoWall(e:Event):void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var sw:Number = stage.stageWidth;
var sh:Number = stage.stageHeight;
var scaleW = sw/wL.contentLoaderInfo.width;
var scaleH = sh/wL.contentLoaderInfo.height;
wL.scaleY = wL.scaleX = scaleW;
}

function addWall(e:Event):void
{
var scaleW:Number = stage.stageWidth/wL.contentLoaderInfo.width;
var scaleH:Number = stage.stageHeight/wL.contentLoaderInfo.height;
wL.scaleY = wL.scaleX = scaleW;
//wL.scaleX = scaleW;
stage.addChild(wL);

appIcon.x = 100;
appIcon.y = 100;
appIcon.scaleY = appIcon.scaleX = .8;
stage.addChild(appIcon);

lockIcon.x = 230;
lockIcon.y = 100;
lockIcon.scaleY = costIcon.scaleX = .8;
stage.addChild(lockIcon);

socialIcon.x = 100;
socialIcon.y = 300;
socialIcon.scaleY = socialIcon.scaleX = .8;
stage.addChild(socialIcon);

costIcon.x = 230;
costIcon.y = 300;
costIcon.scaleY = costIcon.scaleX = .8;
stage.addChild(costIcon);

performanceIcon.x = 320;
performanceIcon.y = 200;
performanceIcon.scaleY = performanceIcon.scaleX = .8;
stage.addChild(performanceIcon);
}

function addCost():void
{
if(!costHolder.showing)
{
stage.addChild(costHolder);
costHolder.x = stage.stageWidth / 4;
costHolder.y = stage.stageHeight / 4;
}
}

function addPerformance():void
{
if(!performanceHolder.showing)
{
stage.addChild(performanceHolder);
performanceHolder.x = stage.stageWidth / 4;
performanceHolder.y = stage.stageHeight / 4;
}
}

function addApp():void
{
if(!appHolder.showing)
{
stage.addChild(appHolder);
appHolder.x = stage.stageWidth / 4;
appHolder.y = stage.stageHeight / 4;
}
}

function addLock():void
{
if(!lockHolder.showing)
{
stage.addChild(lockHolder);
lockHolder.x =stage.stageWidth / 4;
lockHolder.y = stage.stageHeight / 4;
}
}

function addSocial():void
{
if(!socialHolder.showing)
{
stage.addChild(socialHolder);
socialHolder.x = stage.stageWidth / 4;
socialHolder.y = stage.stageHeight / 4;
}
}

function addListeners(e:Event):void
{
e.target.loader.content.close.addEventListener(MouseEvent.CLICK, clickEvent);
e.target.loader.content.minimize.addEventListener(MouseEvent.CLICK, clickEvent);
e.target.loader.content.titleBar.addEventListener(MouseEvent.MOUSE_DOWN, upDownEvent);
e.target.loader.content.titleBar.addEventListener(MouseEvent.MOUSE_UP, upDownEvent);
}

function removeLoader(l:Loader):void
{
l.alpha = 1;
if((Object(l.getChildAt(0)).minimize.minimized))
{
Object(l.getChildAt(0)).titleBar.transform.colorTransform = cf2;
Object(l.getChildAt(0)).title.transform.colorTransform = cf1;
TweenLite.to(Object(l.getChildAt(0)), .1, {scaleX:1, ease:Bounce.easeOut});
TweenLite.to(Object(l.getChildAt(0)).title, .1, { scaleX:1});
TweenLite.to(Object(l.getChildAt(0)).minimize, .1, {scaleX:1, x:"+10"});
TweenLite.to(Object(l.getChildAt(0)).close, .1, {scaleX:1});
TweenLite.to(Object(l.getChildAt(0)).clip, .1, {delay:.1,alpha:1});
Object(l.getChildAt(0)).minimize.minimized = false;
}
MovieClip(l.parent).showing = false;
stage.removeChild(l.parent);
}




One of the SWF’s of the Loaded Windows



import gs.TweenMax;
import gs.easing.*;

close.mouseChildren = false;
minimize.mouseChildren = false;
close.buttonMode = true;
minimize.buttonMode = true;

close.addEventListener(MouseEvent.CLICK, clickEvent);
minimize.addEventListener(MouseEvent.CLICK, clickEvent);

close.addEventListener(MouseEvent.ROLL_OVER, overEvent);
minimize.addEventListener(MouseEvent.ROLL_OVER, overEvent);

close.addEventListener(MouseEvent.ROLL_OUT, outEvent);
minimize.addEventListener(MouseEvent.ROLL_OUT, outEvent);

function clickEvent(e:MouseEvent):void
{
switch(e.target.name)
{
case "close":
trace("CLICK");
break;

case "minimize":
trace("MINIMIZE");
break;
}
}

function overEvent(e:MouseEvent):void
{
TweenMax.to(e.target, .7, {colorMatrixFilter:{colorize:0xFFFFFF, amount:1, brightness:1.2}, ease:Bounce.easeInOut});
}

function outEvent(e:MouseEvent):void
{
TweenMax.to(e.target, .7, {colorMatrixFilter:{colorize:0xFFFFFF, amount:0, brightness:1}, ease:Bounce.easeInOut});
}

More Information