|
Dette er et eksempel på en interaktiv baggrund på en webside. Den er lavet med Flash, og teksten overlapper Flash movien v.h.a. position:absolute i et div-tag i xhtml. Hvis man indsætter en Flashfilm på normal vis v.h.a. et embed-tag vil Internet Explorer ikke lade den gå igang. (Dette problem er grunden til at man sommetider skal klikke 2 gange på en knap før der sker noget) Dette er løst v.h.a. SWFObject som sørger for at Flashfilmen loades og startes. Kilde: Min flashmovie har jeg lavet ved at kombinere forskellige teknikker fra kapitel 3 i bogen Flash Math Creativity. David Hirmes (den ene af de 15 forfattere) viser der hvordan et net af movieclips kan skabe mange forskellige spændende effekter. (Se mit skript nederst på siden) Flash bliver brugt på mange måder på Multimediedesigneruddannelsen på Århus Købmandsskole hvor jeg underviser i bl.a. New Media design, Interaktionskonstruktion, Visualisering og Kommunikation. Vore studerende bliver Webudviklere og Medieudviklere og mange af dem specialiserer sig i et af uddannelsens delområder som fx. 3D-modellering, video til web, storytelling, usability, avanceret webprogrammering, brug af CMS systemer, Flash animation og webhandel. Dette framescript ligger i frame 1. I library skal der ligge et movieclip (med navnet atom) med lidt forskellige billeder i de forskellige frames. Jeg har tegnet forskellige nodebilleder. Husk at sætte flueben i "Export for actionscript" under "Linkage". |
|
This is an example of an interactive background on a web page. It was made using Flash and the text is placed over the Flash movie using position:absolute in a < div > tag in xhtml. If you put a Flash movie on a web page with the object tag provided by the Flash editors publish function Internet Explorer won't let it start before you click it or press spacebar. "Click to activate and use this object" (This problem is sometimes the reason for you having to click twice on a button before anything happens) The problem is solved using the SWFObject function that will load AND start the Flash movie. Source: I made this Flash movie by combining a host of techniques from chapter 3 in this book: Flash Math Creativity. David Hirmes (one of 15 authors) shows us how a grid of movie clips can form various exciting effects. (See my script at the bottom of the page) Flash is used in many ways at the Multi media design education at Aarhus Business College where I teach New Media design, Interaction construction, Visualization and Communication. Our students becomes Web and media developers and individually they have specialized themselves in one the educations sub-areas like 3D-modelling, video for web, storytelling, usability, advanced web programming, the use of CMS (content management systems), Flash animation and web commerce. This framescript is placed in frame 1. In the library there must be a movie clip (named atom) with slightly different pictures in its frames. I have drawn a few different notes. Remember to tick "Export for actionscript" under "Linkage". |
// This script is heavily inspired
// by David Hirmes´ chapter (ch 3)
// in the book Flash Math Creativity
var bredde:Number = Stage.width;
var hojde:Number = Stage.height;
var xAntal:Number = 20;
var yAntal:Number = 12;
var total:Number = xAntal * yAntal;
var afstand:Number = 30;
var teller:Number = 0;
createEmptyMovieClip("container", 0);
container._x = (bredde - (afstand * xAntal)) / 2;
container._y = (hojde - (afstand * yAntal)) / 2;
for (y=0; y < yAntal; y++) {
for (x=0; x < xAntal; x++) {
teller++;
var atom:MovieClip = container.attachMovie("atom", "atom" + teller, teller);
atom._x = x * afstand;
atom._y = y * (afstand + 10);
atom.gotoAndStop(Math.floor(Math.random() * atom._totalFrames)+1);
atom._alpha=5;
}
}
var sizer:Number = 0;
container.onEnterFrame = function(){
var teller:Number = total + 1;
while(teller--) {
var atom:MovieClip = this["atom" + teller];
var naerhed:Number = Math.sqrt( (this._ymouse - atom._y)*(this._ymouse - atom._y)+ (this._xmouse - atom._x)*(this._xmouse - atom._x));
naerhed = 50-naerhed/5;
if (naerhed < 5) {
naerhed =5 ;
}
atom._alpha=naerhed;
var rotation:Number = Math.atan2(this._ymouse - atom._y, this._xmouse - atom._x) / Math.PI * 180;
atom._rotation = rotation;
}
}