Interaktionsudvikling, Multimediedesigneruddannelsen, Erhvervsakademi Århus

Interaktionskonstruktion

1. semester - efteraar 2009 - 1md09M- flash og actionscript

Plan for dag 4

 

 

Litteratur

Lesson 6 - Creating Preloaders in actionscript 3.0

Kopier fra chapter 5 - Game Animation: Shooting and Bouncing Games
Fra Gary Rosenzweig: "ActionScript 3.0 Game Programming University". http://flashgameu.com/

 

Filer til denne dag: dag4.rar (2.7Mb ) !!!


 

Preloader

Flash filer kan ofte blive forholdsvist tunge (dvs. noget større en 100K), og derfor skal brugeren sidde og vente på, at
swf filen bliver downloadet på klienten.

For at give brugeren en fornemmelse af downloadprocessen, bruger man et preloader som i procent eller via en form for visualisering afgiver hvormeget der er downloadet dvs.

procent = downloadet / størrelse af swf filen * 100

 

Eksempler på forskellige preloadere:


http://www.flash-website-builder.com/preloaders/

 

Kode eksempel fra intro_preloader.fla (se dag4.rar)

 

var requestObj:URLRequest = new URLRequest("waterIntroAnimation.swf");
var loaderObj:Loader = new Loader(); // Der instanceres et loader objekt

addChild(loaderObj);

loaderObj.load(requestObj); // load the external file waterIntroAnimation.swf

loaderObj.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadProgress);

function preloadProgress(event:ProgressEvent) {

var loadedPercent:Number = event.bytesLoaded / event.bytesTotal * 100;


// output

loader_txt.text = loadedPercent + "%";
box_mc.width = loadedPercent;

}


 

For at få noget lidt mere spændende at se kan man få variablen loadedPercent til at udviklingen af en framebaseret animation.

 

Eksempel: Animations_preloader.fla

I dette eksempel er der lagt et movieclip med instansnavnet loadingAnimation ind på stagen.

loadingAnimation er en frame baseret animation som i alt fylder 33 frames, og ved at bruge kommandoen gotoAndStop(frame) udvikles animationen i takt med at den eksterne swf loading ind.

 

 

var loadedPercent:int = event.bytesLoaded / event.bytesTotal * 100;
var frame:int = loadedPercent/3;

output_txt.text = loadedPercent + "%"+" => Frame = "+frame;
loadingAnimation.gotoAndStop(frame);


 

I Lesson 6 laver man en preloader via to flash komponenter ( UILoader, ProgressBar).

En flash komponent kan ses som et symbol eller Klasse, der kan indstilles via component inspectoren.

Instans navnet UILoaderen er loadWindow og bar for ProgressBar

// status paa loading vises via loadingAnimation, i tekstfeltet prog_txt og ved //længden af progress baren.

var percent:int = loadWindow.percentLoaded;
loadingAnimation.gotoAndStop(Math.ceil(percent/3));
prog_txt.text = String(loadWindow.bytesLoaded) + " of " + String(loadWindow.bytesTotal) + " bytes" + "\n" + " (" + percent +"% loaded)";
bar.setProgress(e.bytesLoaded, e.bytesTotal);

 

Se evt. lesson06_complete_med_kommentar.fla

 

 


Tidsbaseret animation via AnimatedObject

(se også udleverede fotokopier fra chapter 5 - Game Animation: Shooting and Bouncing Games )

 


var a:AnimatedObject=new AnimatedObject(mouseX, mouseY,200,0);

addChild(a);

Der skabes her en ny instans af animationsobjektet som tager parameterne ( startX, startY, hastighedX, hastighedY).
Selve AnimatedObject klassen er defineret i en ekstern actionscript fil der hedder AnimatedObject.as .


Da animationen er tidsbaseret er den ikke afhængig af frame rate.
Prøv at ændre framerate og se hvad der sker.

Når computerens processor belastes vil frameraten i en swf fil automatisk falde og en tidsbaseret animation vil måske hakke lidt, men fortsætte med samme hastighed.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

AnimationObject.fla

 

Får man en såkaldt for løkke til at lave 100 bolde, der flyer i forskellige retninger med forskellig hastighed, kommer det til at se sådan ud.

for (var i:uint=0; i<100; i++) {

var a:AnimatedObject=new animatedObject(mouseX,mouseY,getRandomSpeed(),getRandomSpeed());

addChild(a);
}

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

AnimationTest_mouse.fla

(prøv at ændre antallet af bolde som bliver sendt afsted).


AirRaid spillet

(se også udleverede fotokopier fra chapter 5 - Game Animation: Shooting and Bouncing Games )

I dette spil begynder man for alvor at bruge objekt orienteret programmering i ActionScript 3.0 samt anvendelse af tidsbaseret animation som ovenfor.

 

Der indgår følgende klasser i spillet:

Airplane (flyer maskinerne egenskaber/properties og metoder som er kodet i Airplan.as )

AAGun (en Anti Air Gun som kan styres til højre og til venstre samt affyrer bullets - kodet i AAGun.as )

Bullet (Animationsobjekter som bliver sendt afsted fra AAGun instansens x position - kodet i Bullet.as )

AirRaid (Er Selve spillet som laver instanser af Airplan, AAGun og Bullet samt bl.a. registrere om en Bullet instans rammet er Airplan instans )

Se også min håndskitse (bagerst i fotokopierne) af et såkaldt klassediagram, som illustrerer hvilke metoder og egenskaber klasserne har, samt klassernes indbyrdes relationer.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player