Helpful stuff on Flash, ActionScript, After Effects etc

new blog, closing this blog down

admin — Sat, 08 May 2010 12:33:27 +0000

Hi all.

First of all:
To everyone: Thanks for reading and commenting on this blog.

After more than 100 post and 3 years of bloggin’ on campjohn.dk I’ve accepted to start up on a blog written in danish instead.
The new blog can be read here:
http://bit.ly/a8NiC5

Please check it out, there might still be useful stuff to look at at the new blog though written in danish.
This blog will live on, and with more that 100 visitors a day, I will repeatedly respond to comments and questions.
But no new blog-content is planned!

Thanks

After Effects: trying to create fake depth of field

admin — Tue, 23 Mar 2010 11:39:45 +0000

soon I’ll be doing a series of vodcasts / short personal video presentations.
thinking this task through and trying to gather inspiration I stumbled upon this short interview with Ralph Hauwert by Lee Brimelow.
this is actually what I really want.

a crystal clear video of the presenter and a background so far away/blurred that your attention is 100% at the presenter. so I found a nice naturally lit location, almost always available for filming and tried doing 2 different test-presentations.

on this first test-presentation, I’ve placed the presenter in the middle of the room, placed myself at the end of the room, and then zoomed in on the presenter to boost the depth of field effect:

and on this second test-presentation, I’ve placed the presenter and myself at the end of the room to see, if it made any difference on the depth of field effect:

shortly, I get a depth of field effect on both my vodcasts, but not at all the same smooth style as the one on Lee Brimelows interview. of course, Lee’s interview is filmed with a EOS 7D with Canon 50mm 1.4 while my vodcast is filmed with a Canon Legria HFS100, and I’m not at all sure these are capable of doing the same kind of footage/film.
but still I hoped for a much better result.

without success I’ve tried creating not the same, but a similar effect using the spot focus effect by Jerzy Drozda Jr, but this does not at all work with a vodcast like the one I’m creating:

I could try making a mask precisely masking the person presenting and then blurring the rest, but as these vodcasts could last for minutes and the presenter is very unlikely to not change position from time to time I fear a LOT of work succeeding with this technique..

so this brings me to these final questions:
1) is the setup of film correct if the task is to create a good depth of field.. I mean how should I place myself and the presenter in the room to get the best depth of field effect?
2) and if the setup actually is correct, can I in any way easily get that beautiful depth of field using any effect in After Effects?

thanks

After Effects: creating a viral film

admin — Wed, 17 Mar 2010 22:25:55 +0000

yes, that’s right.
I’ve tried creating my own viral film.
so what makes a viral film viral?
well, in my opinion, it has to be something that you either hate or love, find funny or tragic, or something that in some way affect you.
something that affects you so much, that you want to share it with someone.

the theme for my viral film.
for my viral film, I’ve chosen the theme young vs old.
you all know when someone old corrects someone young by telling him, how easy it is to be a kid nowadays.
or by telling that being a kid in the old days was no fun at all.
sentences like:
“When I was a kid, we had 14 meters of snow each night!” and “In my days, I was lucky if I even got anything to eat on my birthday!” are both very recognizable :O)
so my theme kind of reverts this.
my theme shows how kids had fun in the old days. and by choosing some very poor examples of fun, it adds a sarcastic, funny angle to the old vs young debate.
hopefully this funny angle is so funny, that people want to share this film with friends or family, making the film a viral film.

filming and locations
the film was filmed on march 2010 with a Canon Legria HFS100.
I tried filming is so old environments as possible, and besides from seeing the tip of a car for a few seconds, I think everything actually looks very realistic and oldish.
by the way, let’s actually call the car a deliberate mistake, film geeks love stuff like this
everything is edited and masked in After Effects, and I used Fast Blur and Posterize Time effects.
the signs between each film is made by Dorthe Lange Bjerg, thanks!

the video is actually quite large – 1280 x 720 pixel – so it looks kinda alright in fullscreen too.
watch the film on vimeo for full options if you please.
and remember, if you like this film very much, post it on facebook, tweet about it or pass it on to your friends and family. thanks.

the easy way to create dummyimages for your Flash projects

admin — Thu, 11 Mar 2010 20:03:26 +0000

I just read about this great service, that easily creates dummyimages for you.
it’s actually called dummyimage.com, try it here:
visit dummyimage.com to see how easy it is to create those dummyimages

so much is customizeable, you can create a certain sized dummyimage like this:
http://dummyimage.com/600×400

you can even decide that you want the dummyimage to have a yellow background:
http://dummyimage.com/600×400/FC0

and that the textcolor on the dummy image is white:
http://dummyimage.com/600×400/FC0/fff

you can also choose between formats, chooses between .jpg, .gif and .png:
http://dummyimage.com/600×400/FC0/fff.png

and finally you can customize the text written on the dummyimage:
http://dummyimage.com/600×400/FC0/fff.png&text=dummyimage.com+rocks!

amazing, absolutely amazing.
this will indeed come in very handy!

Flash: tracking rightclicks from Flash with Google Analytics

admin — Mon, 08 Mar 2010 22:02:23 +0000

for a long time, I’ve been adding my own custom context menu to almost everything I’ve created in Flash.
this means, that when someone rightclicks my Flash, they will see this menu:

and what good has this rightclick menu done me..
well, it links to my blog, right, but has anyone ever come to my blog from this rightclick menu?
actually, I don’t know, but now I’ve decided to do something about it!

setting up a link that will be trackable in Google Analytics:
I’ve changed the link in my right click menu from
“http://campjohn.dk/wp/” to
“http://campjohn.dk/wp/?utm_source=Sanita&utm_medium=flash&utm_campaign=rightclick”

by doing this, I can now use Google Analytics to actually track how many gets to my blog from my rightclick menu.

as you can see, the only rightclick I have so far is the one I’ve generated myself – for the sake of this blogpost.
but in the future I will be able to actually see how many use my rightclick menu.

sorting the tracking of clicks in Google Analytics by using the source parameter:
AND, if using the parameter source (on the picture marked with a red circle) I can filter where the rightclicks come from.
the one I’ve tracked so far comes from this link:
“http://campjohn.dk/wp/?utm_source=Sanita&utm_medium=flash&utm_campaign=rightclick”
because the rightclick comes from a Flash made for Sanita.

but if I were to make Flash for i. e. casino.dk, I could use this link
“http://campjohn.dk/wp/?utm_source=Casino&utm_medium=flash&utm_campaign=rightclick”

and the I would be able to filter all my rightclicks by either the parameter Sanita or Casino and see how many rightclicks each of the Flash’s has generated.
quite nice!

related post on Google Analytics:
ActionScript 3.0: tracking video progress using JavaScript and Google Analytics

showcase: Sanita workwear Flash, part 2

admin — Sat, 06 Mar 2010 21:50:43 +0000

the assignment:
having made an intro for Sanita in Flash, they luckily liked it so much, that they actually requested a variation of the Flash.
this time the Flash-file should be smaller in file size (the original was 262kb) and have almost no text, just statements and pictures.
what we did to keep the file size down was to actually create not 1 but 2 variations of the intro.
each of the variations holds 3 pictures that they loop through.
using only 3 pictures in each variation keeps the file size of the variations at 110kb and 115kb, and by creating 2 different variations, it not only makes the use of the variations more flexible, it also still uses the 6 desired pictures for the variations.

click here to see the result of the first Sanita workwear Flash variation
click here to see the result of the second Sanita workwear Flash variation

the intro:
here is the original intro that the variations are created from:
click here to see the original Sanita workwear Flash intro assignment

After Effects: Catwalk TV ad demo for BON’A PARTE

admin — Wed, 03 Mar 2010 06:11:47 +0000

twice a year or more, I edit catwalk video for BON’A PARTE.
the main work is to color correct the video and make small videos of each set of clothes.
having done this in january, I decided to make a small TV ad-like demo:

I wanted to use only existing material, and I wanted to set it up template based, so it would be fairly easy to reproduce next time catwalk video was shot.
here’s what I ended up with:

ActionScript 3.0: zoom module for Priess

admin — Tue, 02 Mar 2010 20:10:05 +0000

I was asked to create a product zoom module for Priess, that would load one picture. when loaded I should create a small version of the picture, and when moving the mouse around on the small version of the picture, I should show that area in a zoom window.

first of all, check out the zoom module for Priess made in Flash and ActionScript 3.0 here

here is the flow on how I’ve set the module up in ActionScript:
1) I set up a preloader and a right click menu
2) I load the picture
3) when loaded I create a Bitmap version of the picture, that I scale and smooth so it will fit the scaled version window nicely
4) then I add the big picture to the zoom window and and eventlisteners, that react, if the mouse moves around the scaled version window
5) finally I set up the script that moves the big picture in the zoom window. the math for this is the tricky part, but keeping your head cool, it’s actually quite straight forward.

here’s the entire script for the flow in ActionScript:

package {

import caurina.transitions.Tweener;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import MonsterDebugger;

public class PriessZoomContent extends Sprite {

private var _thePicture:String;
private var _md:MonsterDebugger;
private var _bigHolderWidth:Number = 374;
private var _loader:Loader = new Loader();
private var _interact:Boolean = false;
private var _myPreloader:MyPreloader;

public function PriessZoomContent() {
//init();
}

public function init(somePic:String):void {
_thePicture = somePic;
_md = new MonsterDebugger(this);
trace("_thePicture passed to the loaded flash = "+_thePicture);

loadThePicture();
}

private function loadThePicture():void {
_myPreloader = new MyPreloader();
_myPreloader.x = 399;
_myPreloader.y = 176;
addChild(_myPreloader);
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pictureLoaded, false, 0, true);
_loader.load(new URLRequest(_thePicture));
}

private function pictureLoaded(e:Event):void {
trace("pictureLoaded");
_myPreloader.x = 599;
removeChild(_myPreloader);

_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, pictureLoaded);

var bmd:BitmapData = Bitmap(e.target.content).bitmapData;
var bm:Bitmap = new Bitmap(bmd);
bm.scaleX = bm.scaleY = _bigHolderWidth / 2000;
bm.smoothing = true;
trace("bm.width = "+bm.width+" & bm.height = "+bm.height);
BigHolder.addChild(bm);
ZoomHolder.zoomed.addChild(e.target.content);

BigHolder.addEventListener(Event.ENTER_FRAME, bigHolderEvent, false, 0, true);
BigHolder.addEventListener(MouseEvent.ROLL_OVER, bigHolderOver, false, 0, true);
BigHolder.addEventListener(MouseEvent.ROLL_OUT, bigHolderOut, false, 0, true);

}

private function bigHolderOver(e:MouseEvent):void {
_interact = true;
}

private function bigHolderOut(e:MouseEvent):void {
_interact = false;
}

private function bigHolderEvent(e:Event){
if(_interact){
ZoomHolder.zoomed.getChildAt(0).x = -((ZoomHolder.zoomed.width - ZoomHolder.theMask.width) / BigHolder.width * BigHolder.mouseX);
ZoomHolder.zoomed.getChildAt(0).y = -((ZoomHolder.zoomed.height - ZoomHolder.theMask.height) / BigHolder.height * BigHolder.mouseY);
}
}
}
}

credits:
Scott Snyder for the great guitar shot
Alfred Priess A/S: http://www.priess.dk/

showcase: Sanita workwear Flash

admin — Sun, 28 Feb 2010 13:28:08 +0000

just a quick post on this Sanita Flash.
the assignment:
- create a Flash that combines these pictures with the Sanita workwear needed in the situation.
- add an animated sequence besides the pictures.
- have it ready within 2 hours.

click here to see the result of the Sanita workwear Flash assignment

other recent showcases:
University College Mordjylland tabbed informationbar in Flash
New Years Eve 2009 invitation
Xmas 2009, invitation and greeting

showcase: UCN tabbed informationbar in Flash

admin — Mon, 22 Feb 2010 11:32:58 +0000

I’ve just finished a big Flash for University College Nordjylland.
this Flash was to be an alternative menu, a different version of a site-tree, to bring focus to certain areas of the website.

the Flash is made up of 4 tabs that can be chosen by the user.
3 of these tabs contain some kind of interactive element.
the tab “Studieliv” contains some moveable polaroids.
the tab “Karriere” contains 10 cases, each case describing a former student now with a nice career.
the tab “Download” contains downloadable brochures, setup of these inspired by coverflow and the Mac OS X menu.

check out the Flash for University College Nordjylland here:

update: to make sure all content of the informationbar is shown, I’ve added a auto-rotate feature, that changes the tab shown every 5th second, until one of the tabs is clicked.

check out University College Nordjylland here