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.

Advertisements

August 19, 2008 at 11:42 am Leave a comment

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.

July 14, 2008 at 8:10 pm Leave a comment

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

June 16, 2008 at 6:23 am Leave a comment

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?

April 25, 2008 at 11:29 am Leave a comment

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:

April 14, 2008 at 8:11 pm 1 comment

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

March 30, 2008 at 12:43 pm 1 comment

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

March 26, 2008 at 7:44 pm Leave a comment

Older Posts


December 2017
M T W T F S S
« Aug    
 123
45678910
11121314151617
18192021222324
25262728293031

Top Posts

Blog Stats

  • 17,889 hits