Tutorials Grafik
Blendmodes og effekter – adobe guide
3d-rotation
Created: 8 April 2009 • by admin
Categories: grafik • hyperliste
Comments: be the first to comment
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) | 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
Created: 8 April 2009 • by admin
Categories: animation • hyperliste
Comments: 3 comments, add one..
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 for inspiration.

////////////////////////// //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); } }
Created: 6 April 2009 • by admin
Categories: as3 • eksempel • navigation • oevelse
Comments: 2 comments, add one..
Panoramic sliders 2
se Panoramic sliders 1 for en ‘loopende’ version.
Den panorerende effekt i alle disse eksempler, forudsætter at slideren er “for stor” til scenen, på den ene eller begge leder.
Vandret panorering med selvstop
Klik for at aktivere:
Her er bevægelsen til begge sider den samme som i Panoramic sliders 1 – men den standser i begge yderpositioner, i stedet for at gentage sig. En enkelt movieclip-instance på scenen – med grafik og knapper iinlejret deri:
Scene1
> slider – mc-instance med indhold i form af bund og mc/knapper
> > Eventuelle mc-instances eller knapper, med deres indhold
> > bund – mc-instance med grafik eller billedfil
bunds indsætningspunk (det lille kryds på sliders’ timeline) skal være 0, 0.
Bemærk ændringen i SLIDE funktionen fra Panoramic sliders 1. 2 betingelser standser slideren i stedet for at flytte den hen til et tilsvarende sted med mere grafik. (Igangsættelse af slider’s ENTER_FRAME er her kontrolleret med et klik på sliderens bund):
// Skift til tal-værdi, hvis du har problemer med at loade denne film // var SW = 550; // din scenes bredde var SW:int=stage.stageWidth; var cStageX:int=SW/2; var steps:int=15;//antal trin i en ease-bevægelse var movement:Boolean=false;//Mulighed for at stoppe bevægelsen
slider.bund.addEventListener(MouseEvent.CLICK, startstop); // et klik på slider's bund tænder eller slukker for slider's SLIDE function function startstop(e:MouseEvent) { if (! movement) { slider.addEventListener(Event.ENTER_FRAME, SLIDE); movement=true; } else { slider.removeEventListener(Event.ENTER_FRAME, SLIDE); movement=false; } }
function SLIDE(e:Event) { // afpas dine skridt efter afstand mellem mus og scenemidten var difX=(cStageX-mouseX)/steps; // hvis kanten er overskredet, juster afstandens længde til 0 if (e.target.x+difX <= -(e.target.width-SW)) { e.target.x =-(e.target.width-SW); difX=0; } if (e.target.x+difX>=0) { e.target.x=0; difX=0; } e.target.x+=difX; }
Vandret ELLER lodret panorering
Eksemplet ovenfor panorerer vandret på x-aksen. Skal det gøres lodret, må grafikken laves på højkant, og alle x-værdier erstattes med y-værdier, samt width-referencer blive til height.
Vandret OG lodret panorering
Klik for at sætte igang:
Her er også kun en stor movieclip på scenen, med hele scenariet deri. Der er rent faktisk også en knap midt på billedet.
movieclip-hierarkien ser sådan ud (der refereres til instance-navne):
Scene1
> scenario – mc – (kunne sagtens have flere indholds-scener i sin timeline)
> > infobut – mc med 2 labels: but og info, med forskelligt indhold på hver
> > > boble – mc med shapetween
> > bund – mc med grafik eller billedfil – (evt. flere frames med forskellig bg)
> se – mc – øjet med 2 labels: “sened” og “seop” – hver deres indhold
// Hvis du planlægger at loade filmen ind i en anden swf // vil stage.stageWidth og stage.stageHeight måske udløse fejl // Nemmeste løsning: at angive statiske tal // Ellers: Flyt dem ind i de funktioner der bruger dem // Spørg - eller/og Google: as3 stage.stageWidth in loaded swf var SW:int=stage.stageWidth; var SH:int=stage.stageHeight; var cStageX:int=SW/2; var cStageY:int=SH/2; var steps:int=20;//antal trin i en ease-bevægelse var movement:Boolean=false;//Mulighed for at starte bevægelsen
scenario.bund.addEventListener(MouseEvent.CLICK, startstop); // et klik på scenario's bund tænder eller slukker for scenario's SLIDE function function startstop(e:MouseEvent) { if (! movement) { scenario.addEventListener(Event.ENTER_FRAME, SLIDE); movement=true; } else { scenario.removeEventListener(Event.ENTER_FRAME, SLIDE); movement=false; } }
/*
Hvorfor sætte bevægelsen i gang med klik på scenario.bund? hvorfor ikke bare på scenario?
Med et klik direkte på scenario, ville alle dens eventuelle knap-børn arve, og hvert et knap-klik ville automatisk forårsage en on/off effekt.
- bund ligger under børnene, så de arver ikke dens events.
En hvilken som helst anden knap kunne selvfølgelig også kalde den event.
*/
function SLIDE(e:Event) { // afpas dine skridt efter afstand mellem mus og scenemidten var difX=(cStageX-mouseX)/steps; var difY=(cStageY-mouseY)/steps; // hvis kanten er overskredet, juster afstandens længde til 0 if (e.target.x+difX<=-(e.target.width-SW)) { e.target.x =-(e.target.width-SW); difX=0; } if (e.target.x+difX>=0) { e.target.x=0; difX=0; } if (e.target.y+difY<=-(e.target.height-SH)) { e.target.y =-(e.target.height-SH); difY=0; } if (e.target.y+difY>=0) { e.target.y=0; difY=0; } e.target.x+=difX; e.target.y+=difY; }
Knap-funktionaliteten
scenario.infobut.buttonMode=true; scenario.infobut.addEventListener(MouseEvent.MOUSE_OVER, over); scenario.infobut.addEventListener(MouseEvent.MOUSE_OUT, out); scenario.infobut.addEventListener(MouseEvent.CLICK, showINFO);
function over(e:MouseEvent) { // brems, flere skridt(længere tid) steps*=2; } function out(e:MouseEvent) { // farten op, færre skridt(kortere tid) steps/=2; } function showINFO(e:MouseEvent) { if (e.target.currentLabel=="but") { e.target.gotoAndPlay("info"); } else { e.target.gotoAndStop("but"); } }
Created: 6 April 2009 • by admin
Categories: as3 • eksempel • hyperliste • oevelse
Comments: be the first to comment
Panoramic sliders 1
Se eventuelt Panoramic sliders 2, for slidere der stopper når de når til kanten.
Koden
/*
slider1 = 2 instances af img1
slider2 = 2 instances af img2
slider3 = 2 instances af img3
Sørg for:
- at importere aflange billedfiler eller lave aflang grafik, >= scenebredden.
- at aligne hver billedfil til 0,0 - i dens billedmovieclip (img1, img2, img3).
- at placere 2 instancer af billedmovieclippet side om side ind i slideren.
- at aligne det første instance af billedmovieclippet til 0,0 i slideren.
- at placere eventuelle knapper i billedmovieclippet - ikke i slideren.
- at sætte frameraten op til 32, for en glidende bevægelse.
*/// Hvis du planlægger at loade filmen ind i en anden swf // vil stage.stageWidth her sandsynligvis udløse fejl // fordi Stage ikke findes mens filmen importeres // Det kan undgås ved at angive statiske tal // var SW = 550; // din scenes bredde var SW = stage.stageWidth; var cStageX = SW/2;
slider1.steps = 50; slider2.steps = 30; slider3.steps = 10;
slider1.addEventListener(Event.ENTER_FRAME, SLIDE); slider2.addEventListener(Event.ENTER_FRAME, SLIDE); slider3.addEventListener(Event.ENTER_FRAME, SLIDE);
function SLIDE(e:Event):void { var difX=(cStageX-mouseX)/e.target.steps; e.target.x += difX;
if (e.target.x <= -(e.target.width/2)) { var underStep = -(e.target.width/2)-e.target.x; e.target.x = 0-underStep; } else if (e.target.x >= 0) { var overStep = e.target.x; e.target.x = -(e.target.width/2)+overStep; } }
Pauseknap, mere kode
var pausing:Boolean=true; butclip.buttonMode= true; butclip.addEventListener(MouseEvent.CLICK, ON_OFF); function ON_OFF(e:MouseEvent):void { if (!pausing) { butclip.gotoAndStop("pl"); slider1.removeEventListener(Event.ENTER_FRAME, SLIDE); slider2.removeEventListener(Event.ENTER_FRAME, SLIDE); slider3.removeEventListener(Event.ENTER_FRAME, SLIDE); pausing=true; } else { butclip.gotoAndStop("st"); slider1.addEventListener(Event.ENTER_FRAME, SLIDE); slider2.addEventListener(Event.ENTER_FRAME, SLIDE); slider3.addEventListener(Event.ENTER_FRAME, SLIDE); pausing=false; } }
Timeline hierarkien:
Fidusen med de dobbelte instancer i hver slider, skal sikre at der ikke bliver “huller” i animationen, når slideren når ud til kanten af scenen i begge retninger. Slideren flyttes bare lyn-hurtigt hen til et tilsvarende punkt i nærheden af dens sammenføjning, og fortsætter bevægelsen derfra. Der skal være to for at opnå denne evighedseffekt (!).

Scene1
> slider1 – mc
> > img1a – mc-instance af img1
> > img1b – mc-instance af img1
> slider2 – mc
> > img2a – mc-instance af img2
> > img2b – mc-instance af img2
> slider3 – mc
> > img3a – mc-instance af img3
> > img3b – mc-instance af img3
> butclip – mc-instance med 2 labels stadier:”pl” og “st”, med forskellig grafik

Yderligere interaktion
En eventuel knap i panoramaen vil derfor være smart at placere i det movieclip, som tvillinge-instancerne er dannet udfra (og ikke i slideren). For at kunne nå denne knap med actionscript skal instancen navngives, og begge tvillinge-instancerne omkring dem skal have navne – derfor: img1a, img1b, osv.
Koden på scenen for en knap kaldet ‘dut’ vil kunne ligne dette:
// Dobbelte aktiveringer, men deler samme event-function slider1.img1a.dut.buttonMode= true; slider1.img1b.dut.buttonMode= true; slider1.img1a.dut.addEventListener(MouseEvent.CLICK, GROW); slider1.img1b.dut.addEventListener(MouseEvent.CLICK, GROW); function GROW(e:MouseEvent):void { slider1.img1a.dut.scaleX *= 1.5; slider1.img1b.dut.scaleX *= 1.5; }
Created: 3 April 2009 • by admin
Categories: as3 • eksempel • oevelse
Comments: be the first to comment
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
Created: 2 April 2009 • by admin
Categories: hyperliste • xml
Comments: be the first to comment
