(category) LIST of posts

Turorials Animation

adobeAnimationguide
Den bedste hurtige cs4 rundtur
et par små ulemper med den nye motiontween måske

Frame by frame

walk cycle
walk cycles tricks
Dermot O’connor den proffe walk cycle i 4 dele

bones

bones på photoshop movieclips (lag er jeres venner) | flash-cs4-animating-puppets.html En god og grundig gennemgang af bones på movieclips
part2 target=”_blank” | part3 | part4 | part5 | part6
animate bones

3D

3d-rotation
exploring, animating 3d
bog og sider
scriptede 3d classes på flashandmath

cs4 effekter

spraybrush med moviclips!
deco-tool med movieclips

Blandet

cutout teknik med pelikan

Panoramic sliders 3

Eksplorativ navigation, se panoramic sliders 1 og panoramic sliders 2.
Her med faste stationer og en flytbar menu.

En grafik-bund (større end scenemålene, men med samme proportioner) og et par “arealer”, som udgør forskelligt præsentations-indhold – samlet i en movieclip: areas. Skaleres op og ned med klik på bunden.
Knapper for at kunne fokusere på disse arealer samlet i en movieclip: menu. Flyttes med musen.
Se fx. billyharveymusic eller sqcircle for inspiration.

pan

//////////////////////////
//Scenens størrelser - NB: angiv værdier i tal
//hvis filmen skal kunne loades ind i en andenswf.
var SW:int=stage.stageWidth;
var SH:int=stage.stageHeight;
//lokale faktiske mål, som nye mål kan beregnes udfra
var aW:Number=areas.width;
var aH:Number=areas.height;
/////////////////////////////
// Antal trin før målet nås (ease in)
var steps:int=12;
// zoom faktorer i forhold til scenestørrelse
var zFactorBig:int=3;
var zFactorSmall:int=1;
////////////////////////////
//Den skalering (stor lille) areas skal vises med nu
var zFactor:int=zFactorBig;
//areas indledende skalering
var targW:Number;
var targH:Number;
// Det mål, som areas haster imod lige nu
var targX:Number=areas.x;
var targY:Number=areas.y;
//////////////////

Start- variablerne er opdelt i 3 kategorier:
- Statiske mål som af praktiske grunde er gemt i variabler, fordi de hele vejen igennem skal bruges i udregninger.
- Parametre som nemt kan justeres. (her er areas beredt til at kunne blive 3 gange så stor som scenen.)
- Dynamiske værdier, som ændrer sig undervejs og som skal være tilgængelige for funktionerne.

menu.buttonMode=true;
menu.addEventListener(MouseEvent.MOUSE_DOWN, drag);
menu.addEventListener(MouseEvent.MOUSE_UP, drop);
menu.a1but.buttonMode=true;
menu.a1but.addEventListener(MouseEvent.CLICK, setTarget);
menu.a2but.buttonMode=true;
menu.a2but.addEventListener(MouseEvent.CLICK, setTarget);
areas.area1.buttonMode=true;
areas.area1.addEventListener(MouseEvent.CLICK, setTarget);
areas.area2.buttonMode=true;
areas.area2.addEventListener(MouseEvent.CLICK, setTarget);
menu.zoombut.buttonMode=true;
menu.zoombut.addEventListener(MouseEvent.CLICK, setTarget);
areas.bund.addEventListener(MouseEvent.CLICK, setTarget);
//////////////////////////
function drag(e:MouseEvent):void {
	e.target.startDrag();
}
function drop(e:MouseEvent):void {
	e.target.stopDrag();
}
///////////////////////////
function setTarget(e:MouseEvent) {
	// op- og ned-zomning (bund og den røde knap)
	if (e.target.name=="zoombut"||e.target.name=="bund") {
		// hvis målet var lille, så sæt det til stort - ellers omvendt!
		if (zFactor==zFactorSmall) {
			zFactor=zFactorBig;
			//areas koordinater, musens klik, skaleret op og centreret
			targX=(-mouseX*zFactorBig)+(SW/2);
			targY=(-mouseY*zFactorBig)+(SH/2);
		} else {
			zFactor=zFactorSmall;
			targX=0;
			targY=0;
		}
	}
	//forskellen mellem areas medfødte mål og det skalerede mål
	//bruges til at finde area1's og area2's præcise koordinater 
	var adifX:Number=((SW*zFactorBig)/aW);
	var adifY:Number=((SH*zFactorBig)/aH);
	if (e.target==menu.a1but||e.target==areas.area1) {
		zFactor=zFactorBig;
		targX=-(areas.area1.x*adifX)+(SW/2);
		targY=-(areas.area1.y*adifY)+(SH/2);
	}
	if (e.target.name=="a2but"||e.target.name=="area2") {
		zFactor=zFactorBig;
		targX=(-areas.area2.x*adifX)+(SW/2);
		targY=(-areas.area2.y*adifY)+(SH/2);
	}
	targW=SW*zFactor;
	targH=SH*zFactor;
	areas.addEventListener(Event.ENTER_FRAME, GETGOING);
}
//////////////////
function GETGOING(e:Event):void {
	areas.x += (targX-areas.x)/steps;
	areas.y += (targY-areas.y)/steps;
	areas.width += (targW-areas.width)/steps;
	areas.height += (targH-areas.height)/steps;
	//Hvis den næsten er i mål, så siger vi den er hjemme og slukker motoren!
	if (Math.abs(areas.x - targX) < 1 && Math.abs(areas.y-targY)<1&&Math.abs(targW-areas.width) < 1 && Math.abs(targH-areas.height) < 1) {
		areas.x=targX;
		areas.y=targY;
		areas.width=targW;
		areas.height=targH;
		areas.removeEventListener(Event.ENTER_FRAME, GETGOING);
	}
}

Tutorials XML

Lynda.com introduktion til xml Se de gratis videoer på listen

random image med uiloader til xml
En simpel imageloader vel forklaret

En simpel xml-menuloader til knapper
En simpel menu får menupunkter med en xml-fil, der hentes fra en class på et movieclip
ria-coder.com/blog/creating-xml-based-menus-with-flash-cs4-and-flex

accordeon med xml fra thetechlab
accordeon med xml fra riacodes

Slideshow med Caurina tweener
thetechlabs.com: create-a-as3-slideshow-with-xml
Slideshow mwd Tweenmax
active.tutsplus.com: build-a-dynamic-flash-and-xml-slideshow-with-scripted-transitions

Slideshow mwd flash’s egen tweener
republicofcode: as3slideshow

videoplayer med xml playlist

podcast-player (ikke testet)

Preloader ekstern

Den nemmeste relaterede tutorial – er nok denneher:
monkeyflash.com/flash/creating_a_custom_preloader

var ldr:Loader = new Loader();
 
ldr.load(new URLRequest("content.swf"));
 
ldr.contentLoaderInfo.addEventListener(Event.OPEN, loadOpen);
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
 
function loadOpen(e:Event):void {
    trace("Loading begun");
} 
 
function loadProgress(e:ProgressEvent):void {
    var percentLoaded:Number = e.bytesLoaded/e.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
    trace("Loading: "+percentLoaded+"%");
}
 
function loadComplete(e:Event):void {
    addChild(ldr);
    trace("Complete");
}

Preloader intern

Hvor preloader af eksterne filer håndteres med “contentLoaderInfo”, ligger den interne info om enhver flashfil i “loaderInfo”.

Forberedelse

Dynamiak tekstfelt: pct_txt
Animeret movieclip på 100 frames: frames100_mc

flashscope.com: the-most-creative-flash-preloaders-of-all-times

// placeres på en keyframe - før alle andre frames ..
// Husk at trykke CTRL+ENTER 2 gange for at teste preloader.
stop();
loaderInfo.addEventListener(ProgressEvent.PROGRESS, PHANDLER);
function PHANDLER(e:ProgressEvent) {
	var pctLoaded:int = Math.round(e.bytesLoaded/e.bytesTotal * 100);
	pct_txt.text=pctLoaded.toString()+" %"; 
	frames100_mc.gotoAndStop(pctLoaded); 
}
loaderInfo.addEventListener(Event.COMPLETE, CHANDLER);
function CHANDLER(e:Event) {
        // Næste linie er nyttig hvis filmen selv bliver loadet ind i en anden 
        loaderInfo.removeEventListener(ProgressEvent.PROGRESS, PHANDLER);
	gotoAndStop("der-hvor-filmen-starter");
}

Timeline til navigation

Scenen (eller et movieclip) er vandret delt op i kapitler / sektioner / scenarier – som udgør stationerne i en navigation.
En sektion er en sekvens af en eller flere frames – der med fordel kan indledes med en label – og kan afsluttes med en play-back action (fx. stop(); eller gotoAndPlay(en_eller_anden_frame);).
Den første sektion er som regel den, filmen starter med.
Tidslinien er lodret delt op i lag efter keyframes funktionalitet og varighed (fx. actionscript, labels, og forskellige slags indhold).

Præsentation / site

Dette er en traditionel timeline-baseret strukturering af en præsentation.

minisite

Indholdet på scenens keyframes er samlet i overordnede movieclips.
Selve knapperne til brug for navigationen kunne ligge direkte på scenens frames eller være organiseret i overordnede movieclips som menuer.
På scenens Labels-lag: keyframes med labels, som indleder de forskellige sektioner.
På scenens Actions-lag: keyframes med actions (som regel stop(); ), som afslutter de forskellige sektioner.
På scenens første action-lag: knapfunktioner, fx.

stop();
home_but.buttonMode=true;
home_mc.addEventListener(MouseEvent.CLICK, gohome);
function gohome(e:MouseEvent) {
	gotoAndStop("home");
}

Se Det konkrete eksempel på Mini site

Varieret indhold

Nedenstående eksempler er sektionerede tidslinier på movieclips.
Navigationen er ikke nødvendigvis tydelig for brugeren, men bliver en metode til at gøre objekter komplekse, på en overskuelig måde. Play-back kommandoer som gotoAndPlay() giver udvikleren mulighed for at kunne variere movieclippets udseende eller ‘adfærd’.

nav2a

hund_mc.gotoAndPlay("sit");

Denne kodelinie kan optræde i forbindelse med forskellige events eller if-betingelser.
Metoden er praktisk og ligetil – og også god at falde tilbage på, hvis det er uoverskueligt at scripte sig til forskellige tilvalg, eller variationer.

nav2b

Følgende tidslinier er ikke opdelte i sektioner, der navigeres på deres frames med udregnede tal og ikke labels.

nav2d Denne tidslinie ville kunne bruges til et slideshow eller galleri, med et nyt billede på hver frame.
Kommandoen gotoAndSop(currenFrame+1); i en eventlistener kan bruges på en next-knap eller iværksættes af en timer.

nav2c Dette eksempel er bare en movieclip med en animeret tidslinie. Med kommandoen gotoAndStop(tal); hvor tallet er en udregning på baggrund af et imput, kan det visualisere en udvikling eller en gradvis forandring i en proces. Fx. i en preloader.