How To Import Scripts and Preload Images

Importing Scripts

WHY?

You might ask the question 'whats the need?' as the conventional way of adding the script into the head of the HTML page is the same principle.
The Main reason is that it gives you the flexibility to add scripts which are necessary for a class to function correctly, for example extends classes.

Another reason is that it save you time adding scripts which are essential to the framework.

WHEN?

You import your script before the stage is initialised so all your scripts are ready to access each other.

HOW?

You ensure the JS3  script is added to the HTML page and then you call the 'import' function.

IMPORT("js/com/component/display/MovieClip");

Provide it with the url to the js file but don't put the extension ('.js').

Preload Images


WHY?

When using Javascript to dynamically build components it will take time to see images for the first time as it needs to load. So the embed feature lets you preload these images before stage is initialised.

HOW?


Call the embed function and pass in the url and the second parameter is the name of the asset, this allows you to reference it in the code.


Embed("images/bg.jpg","Background");

To access it you need to get it from the styleManager, so ensure you have waited till the styleManager has loaded then call the following function.

listening for the styleManager:
styleManager.addEventListener(Event.EMBEDS_LOADED,onloadedStyle)

accessing assets:
styleManager.getAssetByName("Background")



Full Code:

IMPORT("js/com/component/display/MovieClip");


Embed("images/bg.jpg","Background");
Embed("images/loader.png","loader");




(function(window) {


var dis;


stage.addEventListener(Event.ADDED_TO_STAGE,init);
function init()
{

stage.removeEventListener(Event.ADDED_TO_STAGE,init);
stage.addEventListener(Event.RESIZE,resize);

styleManager.addEventListener(Event.EMBEDS_LOADED,onloadedStyle);


}
function onloadedStyle()
{


 dis =new DisplayObject();
dis.background(styleManager.getAssetByName("Background"));
dis.setWidth(300);
dis.setHeight(300);
addChild(dis);


}

JS3 - Drag Objects

Working on improving: not working currently.
Example:



Code:


sprite.addEventListener(MouseEvent.MOUSE_DOWN,onDown);
sprite.addEventListener(MouseEvent.MOUSE_UP,onUp);

       function onDown()
      {
sprite.startDrag();
       }


        function onUp()
       {
sprite.stopDrag();
        }

JS3 - Motion Tween

Example:





Code:


        var t1;
t1 = new  Tween(sprite,'alpha',Tween.elasticEaseOut,1,0,4,onTweenComplete);
t1.start();


       function onTweenComplete()
      {
   sprite.alpha(1);
   t1 = new  Tween(sprite,'x',Tween.elasticEaseOut,0,100,4,onTweenComplete);
   t1.start();
       }

JS3 - Debugger (Console Window)

To invoke the console window, execute the debug() function and your traces will appear in the console window.



console.debug();
trace("hello");
trace("hello");
trace("hello");
trace("hello");
trace("hello");
trace("hello");
trace("hello");
trace("hello");
trace("hello");
trace("hello");

JS3 - Create A Sprite

Framework updated: not working on this older version.
Example:



Code:


        var sprite = new Sprite();
sprite.lineStyle(3,"0x00ff00");
sprite.beginFill("0x0000FF",0);
sprite.drawRect(10,10,100,100);
sprite.endFill();
addChild(sprite);

JS3 - Create A Movieclip

Framework updated: not working on this older version.
Example:




Code:
      
       var clip = new MovieClip();
clip.name="movieclip";
clip.styleName="movieclip";
clip.src="images/walking2.png";
clip.setFrameRate(50);
clip.build();
clip.setWidth(195);
clip.setStyle();
clip.gotoAndPlay(0);
clip.x(0);
clip.y(0);
addChild(clip);

JS3 : Create Timer

var timer =new Timer(1000,1);
timer.addEventListener(TimerEvent.TIMER_COMPLETE,onTimer);
timer.start();



function onTimer()
{
trace("COMPLETE");
}