NEW BLOG

important.
I’ve moved the blog to http://www.campjohn.dk/wp/

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.

celebrating 10000 views

hooray, today this blog had it’s view nr. 10.000 :O)

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.

ActionScript3.0: how to make an “enhanced picture-module” in Flash

by loading two pictures on top of each other, and only letting the one on top be visible when mouseOvered, it easy to make an “enhanced picture-module” in Flash.
such a module could look like this:
http://campjohn.dk/AS3/Invita/enhancedPicture/exampla.html

(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”});
}

site that adjust to the size of the browserwindow

I’ve made this entrypage for Friendtex, that is actually a kind of new and improved version of this post about resizing the backgroundpicture to fit any size of browserwindown.
this time, I didn’t only resize the backgroundpicture, but also placed a logo and two textelements depending on the actual size of the browserwindow.

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?

modul til Dynamic Web, der kan zoome i billeder

for Kitchn har jeg lavet dette Dynamic Web flash-modul, der fungerer som billedzoom på deres produkter.
modulet her har flere fordele.

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:

altid centreret logo vha. onResize

Lisa Ingemann Hansen, en kollega hos Co3, spurgte for nyligt, hvordan man kunne sikre, at et logo altid ville blive vist centralt vertikalt og horisontalt i Flash.

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..

Tweener, bitmap og filter-effekter, del 2

sidst skrev jeg lidt om Tweener, bitmap og filter-effekter, og sluttede af med at beskrive, hvordan man kunne fade et logo’s bevægelse ud vha. BlurFilter og samtidigt lade fade’n opføre sig som en flamme, ved at tvinge den op i billedet.

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

Tweener, bitmap og filter-effekter, del 1

jeg har leget lidt rundt med et eksempel på brug af Tweener, bitmap og filter-effekter, og fået nogle sjove resultater ud af det. helt grundlæggende går ideen ud på, at lade et billede leve på scenen, ved at flytte det tilfældigt rundt med Tweener, konstant reproducere det billede laver vha. bitmap og så lade effekterne være medbestemmende til hvordan det kommer til at tage sig ud.

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

lommeregner til Flash

endnu en lækker tilføjelse til Flash – en lommeregner til brug i Flash, så du ikke behøver gå ud og tilbage ind i programmet, hvis du skal have en beregning på plads )

lommeregneren er lavet af Lee Brimelow og kan hentes her:

tilfældig startpunkt i flashfil

Lise Paarup Larsen, en kollega hos Co3, havde tidligere lavet en fin, lille flash til birkindoor.dk, som er en portalforside for firmaerne Multiform, Invita og Møbelgalleriet. flash’en til denne portalforside fadede skiftevis billeder tilhørende de 3 firmaer ind ovenpå hinanden. på sigt blev det firma, der blev vist sidst i flash’en dog temmeligt kede af dette, da man oftest nåede at klikke videre ind fra portalforsiden, inden de overhovedet var blevet repræsenteret i flash’en.

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.