every post on this blog will within a few weeks be republished at the new blog.
the new blog will be entirely in english, and have a proper way of showing actionscript.

so, to celebrate, here are some blogstats:
total views: 10042
highest numbers of views in one day: 118
posts: 90
comments: 47
spam comments: 2619
categories: 24

top post:

http://www.campjohn.dk/wp/?p=114

…with 396 views.

(the pictures in this example is made by my colleague Rune, who is a true wizard with Paint )

the example above could be coded like this in ActionScript3.0:

//stop the timeline
stop();

//import the classes you need
import caurina.transitions.Tweener;

//create the Sprite to hold the picture to be shown on mouseOver
//a Sprite is like a MovieClip but without the timeline
//we don’t need any timeline in this example, so a Sprite is fine
var myForegroundSprite:Sprite = new Sprite();

//create Strings to hold the two links to the pictures to be shown
var myBackgroundPictureURL:String = “infoPicRED.jpg”;
var myForegroundPictureURL:String = “infoPicRED_shift.jpg”;

//start the function createBackground
createBackground();

//the function createBackground
function createBackground():void {
//create a Loader, to actually load the picture into Flash
var myBackgroundLoader:Loader = new Loader();

//load the picture
var url:String = myBackgroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myBackgroundLoader.load(urlReq);

//make the Loader visible in Flash by placing it on Stage
addChild(myBackgroundLoader);

//start the functionen createForeground
createForeground();
}

//the function createForeground
function createForeground():void {
//place the myForegroundSprite on Stage
addChild(myForegroundSprite);

//
var myForegroundLoader:Loader = new Loader();

//
var url:String = myForegroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myForegroundLoader.load(urlReq);

//set the opacity of the myForegroundSprite to 0, so it still is the myBackgroundLoader,that is visible, even though the myForegroundSprite is placed on top of it
myForegroundSprite.alpha = 0;

//put the myForegroundLoader into the myForegroundSprite and place it on Stage.
//the reason why the myForegroundLoaderen is not placed directly on Stage, is that it is not possible to interact with Loaders
//Sprites are interacable, that’s why we nest it
myForegroundSprite.addChild(myForegroundLoader);

//start the function createInteraction
createInteraction();
}

function createInteraction():void {
//if the mouse is over the Sprite, start the function myMouseOver
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);

//if the mouse is leaving the Sprite, start the function myMouseOut
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OUT, myMouseOut);

//show the hand icon instead of the arrow icon when the mouse interacts with the myForegroundSprite
myForegroundSprite.buttonMode = true;
}

function myMouseOver(e:Event):void {
//let the myForegroundSprite fade in in 0.7 seconds
Tweener.addTween(myForegroundSprite, {alpha:1, time:0.7, transition:”linear”});
}
function myMouseOut(e:Event):void {
//let the myForegroundSprite fade out in 0.7 seconds
Tweener.addTween(myForegroundSprite, {alpha:0, time:0.7, transition:”linear”});
}

and here’s the code without all of the comments:
stop();

import caurina.transitions.Tweener;

var myForegroundSprite:Sprite = new Sprite();

var myBackgroundPictureURL:String = “infoPicRED.jpg”;
var myForegroundPictureURL:String = “infoPicRED_shift.jpg”;

createBackground();

function createBackground():void {
var myBackgroundLoader:Loader = new Loader();
var url:String = myBackgroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myBackgroundLoader.load(urlReq);
addChild(myBackgroundLoader);
createForeground();
}

function createForeground():void {
addChild(myForegroundSprite);
var myForegroundLoader:Loader = new Loader();
var url:String = myForegroundPictureURL;
var urlReq:URLRequest = new URLRequest(url);
myForegroundLoader.load(urlReq);
myForegroundSprite.alpha = 0;
myForegroundSprite.addChild(myForegroundLoader);
createInteraction();
}

function createInteraction():void {
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);
myForegroundSprite.addEventListener(MouseEvent.MOUSE_OUT, myMouseOut);
myForegroundSprite.buttonMode = true;
}

function myMouseOver(e:Event):void {
Tweener.addTween(myForegroundSprite, {alpha:1, time:0.7, transition:”linear”});
}
function myMouseOut(e:Event):void {
Tweener.addTween(myForegroundSprite, {alpha:0, time:0.7, transition:”linear”});
}

check out the entrypage for Friendtex here:

the link will not only adjust to the size of browserwindow you use, but if you resize your browserwindow, the link will adjust again. nice, right?

både det først synlige billede, samt det store zoom-billede hentes dynamisk, ligesom overskriften og brødteksten…
billederne og teksterne, der tages med, inkluderes i URL-kaldet, og teksterne refererer til Dynamic Web-tags.
det gør, at man kun behøver at bruge en enkelt .swf-fil i Dynamic Web, for at håndtere ALLE billedzooms på produkterne.
og alt er redigerbart for kunden / administratoren af hjemmesiden.

infobox’en i højre hjørne er “fremme” på billedet, de første 3 gange man ser modulet, derefter er det gemt væk næsten helt udenfor scenen. om infobox’en er synlig eller ej styres ved hjælp af en slags Flash cookie; et Shared Object.

slutteligt forstår modulet, at hvis der kun refereres til et enkelt billede i URLkaldet, så skal det ikke være muligt at zoome i billedet. smart :O)

flashmodulet kaldes sådan her i HTML/JavaScript:

+’<embed src=”‘+flashFile+’?pic=’+pic+’&pic_zoom=’+pic_zoom+’&zoomOrNot=’+ zoomOrNot +’&headlineText=’+prodheading+’&normalText=’+prodtext+’”‘

istedet for den typiske udgave:
+’<embed src=”typiskflashfilnavn.swf”>’

se zoom-modulet lavet til Kitchn i Flash her:

dette krævede selvfølgeligt et eksperiment, og her er hvad jeg er kommer frem til:
tricket er at have en eventListener, der altid forholder sig til størrelsen på stage
stage.addEventListener(Event.RESIZE, onResize);

og så et kald, der bruger Flash’ens størrelse til at flytte logo’et til den rigtige placering
public function onResize(event:Event):void {
_customLogo.onResize(stage.stageWidth, stage.stageHeight);
}

public function onResize(stageWidth:Number, stageHeight:Number):void {
_stageWidth = stageWidth;
_stageHeight = stageHeight;

_logoX = -(_logo.width / 2) + (_stageWidth / 2);
_logoY = -(_logo.height / 2) + (_stageHeight / 2);
Tweener.addTween(_logo, {x:_logoX, y:_logoY, time:0.8, delay: 0.3, transition:”easeinout”});
}

det er pænt smart.
og ved hjælp af Tweener, bliver effekten, når logo’et flyttes på plads desuden, desuden lidt lækker

se et eksempel på et logo, der altid placerer sig centralt her:

desuden skal det nævnes, at billedet er taget af Heriberto Herrera fra El Salvador, der desuden leverede et billede til IFS-banneret, lavet tidligere på året..

underligt nok, overvejede jeg ikke, hvordan man fik flammen til at få en farve, der rent faktisk passede til en flamme.

dette har jeg nu rådet lidt bod på.
man kan nemlig bruge ColorMatrixFilter til at ændre den farve, ens bitmap tager.
ColorMatrixFiltret forventer 20 numre i et Array, hvor nogle af disse styrer, hvor meget man ønsker at intensificere Red, Green, Blue og Alpha.

for at for flammen i min animation til at få farver, der passer til en flamme, har jeg brugt følgende parameter:
var cmf:ColorMatrixFilter = new ColorMatrixFilter([1.8, 0, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 0, 0.66, 0]);
bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), cmf);

tallet 1.8 repræsenterer Red, som forstærkes en del, 1.02 repræsenterer Green som forstærkes næsten ubetydeligt, 0.6 repræsenterer Blue, som der mister en del styrke, og 0.66 repræsenterer alpha-værdien.

se eksemplet, hvor flammens farver, rent faktisk minder om en flammes, her

i det første eksempel kan hele ideen ses.
- logo’et flyttes rundt på scenen.
- 40 gange i sekundet tages et billede af scenen, og dermed det, der tegnes af logo’et, og reproduceres som baggrund

se Tweener, bitmap og filter-eksempel 1 her

smart smart.
men det kan gå hen og blive meget mere smart.

hvis man f. eks. ønsker at fade, det logo’et tegner, ud over tid, kan man bruge et filter på sin animation.
det kunne f. eks. være et BlurFilter.

se Tweener, bitmap og filter-eksempel 2 her

nu tegnes animationen istedet for som en sløret hale, der følger animationen.
og det begynder at se godt ud.

BlurFiltret er defineret således:
var bf:BlurFilter = new BlurFilter(8, 8, 3);

og tilegnet bitmap-baggrunden på denne måde:
bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), bf);

hvis man ønsker, at halen ikke bare skal tegnes efter animationen, men istedet fungere som en slags flamme, over logo’et, kan man sørge for, at reproduktionen af baggrunden hele tiden flyttes opad.

dette kan gøres ved hjælp af følgende:
bmd.scroll(0, -5);
og giver følgende effekt:

se Tweener, bitmap og filter-eksempel 3 her

der er tusindvis af muligheder.
foreløbelig slut herfra, men forhåbentligt får jeg tid til at eksperimentere lidt mere med ideen

lommeregneren er lavet af Lee Brimelow og kan hentes her:

derfor var min opgave nu, at lade tilfældigheden bestemme, hvilken af de 3 firmaer, der blev repræsenteret først på forsiden. det var forholdsvist nemt at gå til. den nuværende flash var lavet ud fra timeline animation, hvor et layer blot tweenes ind ovenpå et andet – basic stuff:

alt jeg gjorde herefter var så, at lade flash’en vælge et bestemt tal mellem 0 og 2.
hvis tallet var 0, skulle flash’en afspille tidslinien fra det første billede, var den 1 fra det andet og var den 2 fra det tredie.
alt jeg skulle bruge var denne lille stump kode:

stop();

var mitNummer:Number = new Number();
mitNummer = Math.floor(Math.random()*3);

trace(“mitNummer = “+mitNummer);

if (mitNummer == 0){
gotoAndPlay(“billede0″);
} else if (mitNummer == 1){
gotoAndPlay(“billede1″);
} else if (mitNummer == 2){
gotoAndPlay(“billede2″);
} else {
trace(“something is seriously fucked up!”);
}

samt 3 frame-labels.
fin løsning, ikke :O)

se forsideflash’en til birk INdoor her

reload bare ovenstående links, og du vil af og til se et nyt billede som start på flash’en.