Archive for the ‘Design’ tag
After Effects: creating a viral film
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
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!
showcase: UCN tabbed informationbar in Flash
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
ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully
in a long line of different galleries, this recent one I made for Fransa is surely one of the best.
it combines detailed teaser views of each picture in 2 different sizes and a moveable large size picture, again in 2 different kind of views.
I like the way it’s build, the way each picture is used in different ways and sizes to create the true gallery experience and the overall smoothness of the gallery.
check out the Fransa gallery here – with concert and handball photos by photographer Flemming Scully
how it works:
the gallery needs an XML with links to each of the 3 sizes of each picture.
in this example the gallery expects a 88 x 123 px thumb, a 190 x 266 px big thumb, and finally for the big version, a picture with at least these measures; 915 x 600 px.
finally along with each picture is a headline text and a descriptive text, both to be delivered in the XML as HTML-texts.
if the gallery is embedded in HTML with a certain parameter, a download button appears in the gallery making each of the big pictures downloadable to the viewer.
how it is set up:
the gallery is set up in ActionScript 3.0 and uses Zeh Fernandos amazing tweening library Tweener.
the gallery is a 500+ lines of ActionScript bastard.
the gallery is set up as a single module and works alone like in the example above (HTML and Flash only).
on the first version made for Fransa the gallery was made to work in the danish CMS Dynamic Web.
the structure of the Flash can be seen here:
FLOW
arrange XML
load alle thumbs
tilføj preloader
opsæt/tilføj thumbs
opsæt forward/backward
load/opsæt/tilføj stort billede
load/opsæt/tilføj medium billede
*/
package {
import ArrayStuff;
import caurina.transitions.properties.ColorShortcuts;
import caurina.transitions.Tweener;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.StyleSheet;
import MonsterDebugger;
public class FransaCollectionContent extends Sprite {
private var _theXML:String;
private var _md:MonsterDebugger;
private var _xml:XML;
private var _thumbArray:Array = [];
private var _mediumArray:Array = [];
private var _largeArray:Array = [];
private var _headerArray:Array = [];
private var _downloadArray:Array = [];
private var _textArray:Array = [];
private var _arrayStuff:ArrayStuff;
private var _preloader:MyPreloader;
private var _thumbHolder:Sprite;
private var _thumbMoveTime:Number = 1.5; //customizable
private var _thumbTransition:String = "easeOutSine"; //customizable
private var _navAlphaOver:Number = 0.4; //customizable
private var _navAlphaOff:Number = 0.2; //customizable
private var _navAlphaTime:Number = 0.6; //customizable
private var _thumbDodgeTime:Number = 0.8; //customizable
private var _mediumFadeIn:Number = 1.8; //customizable
private var _largeFadeIn:Number = 1.2; //customizable
private var _mediumHolder:Sprite;
private var _largeHolder:Sprite;
private var _thumbPart:Number = 0;
private var _thumbChosen:Number = 0;
private var _movePic:Boolean = false;
private var _tooltip:Tooltip;
private var _bigMask:BigMask;
private var _downloadAlpha:Number = 0.6; //customizable
private var _retail:String;
private var _cssLoaded:Boolean = false;
private var _cssLoader:URLLoader = new URLLoader();
private var _css:StyleSheet = new StyleSheet();
private var _zoomMode:Boolean = false;
public function FransaCollectionContent() {
//
}
public function init(someXML:String, retail:String):void {
_theXML = someXML;
_retail = retail;
_md = new MonsterDebugger(this);
ColorShortcuts.init();
trace("_theXML passed to the loaded flash = "+_theXML);
loadTheXML();
//xmlLoaded(null); //DW
}
///*
private function loadTheXML():void {
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(_theXML);
loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);
loader.load(request);
}
private function xmlError(e:Event):void {
var someParam:String = "xml not loaded";
ExternalInterface.call("alert", someParam);
}
//*/
private function xmlLoaded(e:Event):void {
_xml = new XML(e.target.data);
//_xml = new XML(_theXML); //DW
var i:Number = 0;
while(i < _xml.item.length()) {
/*
_thumbArray.push("/files/files/"+_xml.item[i].thumb); //NOTICE
_mediumArray.push("/files/files/"+_xml.item[i].small); //NOTICE
_largeArray.push("/files/files/"+_xml.item[i].large); //NOTICE
_downloadArray.push(_xml.item[i].download); //NOTICE
*/
///*
_thumbArray.push(_xml.item[i].thumb); //NOTICE
_mediumArray.push(_xml.item[i].small); //NOTICE
_largeArray.push(_xml.item[i].large); //NOTICE
_downloadArray.push(_xml.item[i].download); //NOTICE
//*/
_headerArray.push(_xml.item[i].heading);
_textArray.push(_xml.item[i].text);
i++;
}
_arrayStuff = new ArrayStuff();
_arrayStuff.convertToLoaders(_thumbArray);
_arrayStuff.addEventListener("loaderArrayReady", loaderArrayReady);
addPreloader();
}
private function loaderArrayReady(e:Event):void {
_thumbArray = e.currentTarget._loaderArray;
trace(_thumbArray);
setupThumbHolder();
}
//PRELOADER -------------------------------------------------------------------------------------------------------------
private function addPreloader():void {
_preloader = new MyPreloader();
_preloader.x = 789;
_preloader.y = 245
addChild(_preloader);
}
private function hidePreloader():void {
Tweener.addTween(_preloader, {alpha:0, time:1.6});
}
private function showPreloader():void {
Tweener.addTween(_preloader, {alpha:1, time:1.6});
}
//THE THUMBS -------------------------------------------------------------------------------------------------------------
private function setupThumbHolder():void {
_thumbHolder = new Sprite();
var i:Number = 0;
var thumbX:Number = 0;
while(i < _thumbArray.length){
var thumb:Sprite = new Sprite();
thumb.name = String("nr"+i);
thumb.x = thumbX + i * 89;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.CLICK, thumbClicked, false, 0, true);
thumb.addEventListener(MouseEvent.MOUSE_OVER, thumbOver, false, 0, true);
thumb.addChild(_thumbArray[i]);
_thumbHolder.addChild(thumb);
i++;
}
addChild(_thumbHolder);
_thumbHolder.x = 13;
_thumbHolder.y = 267;
//MASK IT
var thumbMask:ThumbMask = new ThumbMask();
addChild(thumbMask);
thumbMask.x = 13;
thumbMask.y = 267;
_thumbHolder.mask = thumbMask;
setupForwardBackward();
setupLarge();
setupTooltip();
setupDownload();
}
private function thumbClicked(e:MouseEvent):void {
_thumbChosen = Number(e.currentTarget.name.replace(/nr/ig,""));
showPreloader();
newMedium();
}
private function thumbOver(e:MouseEvent):void {
Tweener.addTween(e.currentTarget, {_brightness:2.55, time:0});
Tweener.addTween(e.currentTarget, {_brightness:0, time:_thumbDodgeTime, transition:"EaseOutSine"});
}
//FORWARD BACKWARD NAVIGATION -------------------------------------------------------------------------------------------------------------
private function setupForwardBackward():void {
if(_thumbPart > 0){
navLeft.buttonMode = true;
navLeft.addEventListener(MouseEvent.ROLL_OVER, navOver, false, 0, true);
navLeft.addEventListener(MouseEvent.ROLL_OUT, navOut, false, 0, true);
navLeft.addEventListener(MouseEvent.CLICK, navLeftClicked, false, 0, true);
Tweener.addTween(navLeft, {alpha:1, time:_navAlphaTime});
} else {
navLeft.buttonMode = false;
navLeft.removeEventListener(MouseEvent.ROLL_OVER, navOver);
navLeft.removeEventListener(MouseEvent.ROLL_OUT, navOut);
navLeft.removeEventListener(MouseEvent.CLICK, navRightClicked);
Tweener.addTween(navLeft, {alpha:_navAlphaOff, time:_navAlphaTime});
}
if(_thumbPart < Math.floor((_thumbArray.length - 1) / 10)){
navRight.buttonMode = true;
navRight.addEventListener(MouseEvent.ROLL_OVER, navOver, false, 0, true);
navRight.addEventListener(MouseEvent.ROLL_OUT, navOut, false, 0, true);
navRight.addEventListener(MouseEvent.CLICK, navRightClicked, false, 0, true);
Tweener.addTween(navRight, {alpha:1, time:_navAlphaTime});
} else {
navRight.buttonMode = false;
navRight.removeEventListener(MouseEvent.ROLL_OVER, navOver);
navRight.removeEventListener(MouseEvent.ROLL_OUT, navOut);
navRight.removeEventListener(MouseEvent.CLICK, navRightClicked);
Tweener.addTween(navRight, {alpha:_navAlphaOff, time:_navAlphaTime});
}
}
private function navLeftClicked(e:MouseEvent):void {
//if(_thumbPart > 0){
_thumbPart--;
Tweener.addTween(_thumbHolder, {x:-890*_thumbPart+13, time:_thumbMoveTime, transition:_thumbTransition});
//}
setupForwardBackward();
}
private function navRightClicked(e:MouseEvent):void {
//if(_thumbPart < Math.floor(_thumbArray.length -1 / 10)){
_thumbPart++;
Tweener.addTween(_thumbHolder, {x:-890*_thumbPart+13, time:_thumbMoveTime, transition:_thumbTransition});
//}
setupForwardBackward();
}
private function navOver(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:_navAlphaOver, time:_navAlphaTime});
}
private function navOut(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:1, time:_navAlphaTime});
}
//MEDIUM SIZE PICTURE -------------------------------------------------------------------------------------------------------------
private function setupMedium():void {
_mediumHolder = new Sprite();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, mediumLoaded, false, 0, true);
loader.load(new URLRequest(_mediumArray[_thumbChosen]));
_mediumHolder.alpha = 0;
_mediumHolder.addChild(loader);
addChild(_mediumHolder);
setupText();
}
private function mediumLoaded(e:Event):void {
Tweener.addTween(_mediumHolder, {alpha:1, time:_mediumFadeIn});
}
private function newMedium():void {
_mediumHolder.removeChildAt(0);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, newMediumLoaded, false, 0, true);
loader.load(new URLRequest(_mediumArray[_thumbChosen]));
_mediumHolder.alpha = 0;
_mediumHolder.addChild(loader);
}
private function newMediumLoaded(e:Event):void {
newLarge();
setupText();
_mediumHolder.x = 445;
Tweener.addTween(_mediumHolder, {alpha:1, x:0, time:_mediumFadeIn});
}
//LARGE SIZE PICTURE -------------------------------------------------------------------------------------------------------------
private function setupLarge():void {
_largeHolder = new Sprite();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, largeLoaded, false, 0, true);
loader.load(new URLRequest(_largeArray[_thumbChosen]));
_largeHolder.alpha = 0;
_largeHolder.buttonMode = true;
_largeHolder.addChild(loader);
_largeHolder.x = 190;
addChild(_largeHolder);
_bigMask = new BigMask();
addChild(_bigMask);
_bigMask.x = 191;
_largeHolder.mask = _bigMask;
setupMedium();
}
private function largeLoaded(e:Event):void {
largePicInitX();
_largeHolder.addEventListener(Event.ENTER_FRAME, movePic, false, 0, true);
_largeHolder.addEventListener(MouseEvent.ROLL_OVER, movePicTrue, false, 0, true);
_largeHolder.addEventListener(MouseEvent.ROLL_OUT, movePicFalse, false, 0, true);
_largeHolder.addEventListener(MouseEvent.CLICK, largeClicked, false, 0, true);
Tweener.addTween(_largeHolder, {alpha:1, time:_largeFadeIn});
hidePreloader();
}
private function newLarge():void {
_largeHolder.removeChildAt(0);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, newLargeLoaded, false, 0, true);
loader.load(new URLRequest(_largeArray[_thumbChosen]));
_largeHolder.alpha = 0;
_largeHolder.addChild(loader);
}
private function newLargeLoaded(e:Event):void {
Tweener.addTween(_largeHolder, {alpha:1, time:_largeFadeIn});
Tweener.addTween(_largeHolder.getChildAt(0), {x:0, time:2});
hidePreloader();
}
private function movePic(e:Event):void {
if(_movePic) {
var widthToUse:Number;
var heightToUse:Number;
if(_zoomMode){
widthToUse = 915;
heightToUse = 600;
} else {
widthToUse = 444;
heightToUse = 266;
}
var forskelX:Number;
var pctX:Number;
var pxX:Number;
var forskelY:Number;
var pctY:Number;
var pxY:Number;
forskelX = _largeHolder.getChildAt(0).width - widthToUse;
pctX = _largeHolder.mouseX / widthToUse * 100;
pxX = forskelX / 100 * pctX;
forskelY = _largeHolder.getChildAt(0).height - heightToUse;
pctY = _largeHolder.mouseY / heightToUse * 100;
pxY = forskelY / 100 * pctY;
if(_zoomMode){
Tweener.addTween(_largeHolder.getChildAt(0), {x:-pxX, y:-pxY, time:0.4});
} else {
Tweener.addTween(_largeHolder.getChildAt(0), {x:-pxX, y:-pxY, time:0.4});
}
moveTooltip();
}
}
private function movePicTrue(e:MouseEvent):void {
_movePic = true;
}
private function movePicFalse(e:MouseEvent):void {
_movePic = false;
largePicInitX();
tooltipInitPlacement();
}
private function largePicInitX():void {
var widthToUse:Number;
if(_zoomMode){
widthToUse = 915;
} else {
widthToUse = 444;
}
var theX:Number = -((_largeHolder.getChildAt(0).width - widthToUse) / 2);
Tweener.addTween(_largeHolder.getChildAt(0), {x:theX, y:0, time:0.8});
}
private function largeClicked(e:MouseEvent):void {
var someParam:String = _largeArray[_thumbChosen];
if(_zoomMode) {
_zoomMode = false;
Tweener.addTween(_bigMask, {width:444, height:266, x:191, y:0, time:0.8});
Tweener.addTween(_largeHolder, {width:_largeHolder.getChildAt(0).width, height:_largeHolder.getChildAt(0).height, x:190, y:0, time:0.8});
_largeHolder.mask = _bigMask;
addChildAt(_largeHolder, numChildren - 3);
_tooltip.gotoAndStop(1);
} else {
_zoomMode = true;
Tweener.addTween(_bigMask, {width:915, height:600, x:0, y:0, time:0.8});
Tweener.addTween(_largeHolder, {width:_largeHolder.getChildAt(0).width, height:_largeHolder.getChildAt(0).height, x:0, y:0, time:0.8});
_largeHolder.mask = _bigMask;
addChild(_largeHolder);
_tooltip.gotoAndStop(2);
addChild(_tooltip);
}
}
//SETTING UP THE TOOLTIP -------------------------------------------------------------------------------------------------------------
private function setupTooltip():void {
_tooltip = new Tooltip();
addChild(_tooltip);
tooltipInitPlacement();
}
private function tooltipInitPlacement():void {
Tweener.removeTweens(_tooltip);
_tooltip.alpha = 0;
}
private function moveTooltip():void {
Tweener.addTween(_tooltip, {x:mouseX+50, y:mouseY+50, time:0.05});
Tweener.addTween(_tooltip, {alpha:1, time:0.4});
}
//SETTING UP THE TEXT -------------------------------------------------------------------------------------------------------------
private function setupText():void {
if(!_cssLoaded){
//var cssreq:URLRequest = new URLRequest("/Files/Billeder/fransa/flash/fransaflash.css");
var cssreq:URLRequest = new URLRequest("fransaflash.css");
_cssLoader.addEventListener(Event.COMPLETE, cssLoaded, false, 0, true);
_cssLoader.load(cssreq);
} else {
addText();
}
}
private function cssLoaded(e:Event):void {
_cssLoader.removeEventListener(Event.COMPLETE, cssLoaded);
_css.parseCSS(_cssLoader.data);
myText.normalText.selectable = true;
_cssLoaded = true;
addText();
}
private function addText():void {
myText.alpha = 0;
myHeader.alpha = 0;
if(_headerArray[_thumbChosen].search(/\n/i) > -1) {
var alteredText:String = _headerArray[_thumbChosen];
alteredText = alteredText.toUpperCase();
alteredText = alteredText.replace(/\n/ig, "");
myHeader.headerText.htmlText = alteredText;
myText.y = 97;
} else {
myHeader.headerText.htmlText = _headerArray[_thumbChosen].toUpperCase();
myText.y = 67;
}
var normaltext:String = _textArray[_thumbChosen];
normaltext = normaltext.replace(/<br \/>/ig, "");
normaltext = normaltext.replace(/\n/ig, "");
myText.normalText.styleSheet = _css;
myText.normalText.htmlText = normaltext;
Tweener.addTween(myHeader, {alpha:1, time:4.8});
Tweener.addTween(myText, {alpha:1, time:4.8, delay:0.3});
}
//NAVIGATION -------------------------------------------------------------------------------------------------------------
private function showNav():void {
}
//DOWNLOAD -------------------------------------------------------------------------------------------------------------
private function setupDownload():void {
if(_retail.indexOf("448") > -1 || _retail.indexOf("4614") > -1) {
downloadBtn.buttonMode = true;
Tweener.addTween(downloadBtn, {alpha:1, time:_downloadAlpha});
downloadBtn.addEventListener(MouseEvent.CLICK, downloadClicked, false, 0, true);
}
}
private function downloadClicked(e:MouseEvent):void {
//navigateToURL(new URLRequest("/admin/public/getimage.aspx?Image="+_downloadArray[_thumbChosen]+"&Width=10000&Resolution=300&Compression=100&ForceDownload=True"));
navigateToURL(new URLRequest("/Admin/Public/DWSDownload.aspx?File="+_downloadArray[_thumbChosen]));
}
}
}
—
past galleries:
interested in past galleries, check out these,
a gallery made in ActionScript 3.0 and FIVe3D
a looping gallery in ActionScript 3.0
a polaroid picture gallery in ActionScript 3.0
an ActionScript 3.0 dynamic banner used in a photo gallery
a picture gallery made with jQuery
a simple but nice picture gallery in ActionScript 3.0 and Tweener
credits:
Per Henriksen of Co4 for art directing the gallery.
Fransa.
Flemming Scully for the amazing photos.
The Poul Krebs photos are from Herning Rocker 2009.
The HC Midtjylland photos are from the match against SønderjyskE on the 30. of january 2010.
Zeh Fernando for Tweener.
showcase: New Years Eve 2009 invitation
invited our friends to a lovely new years eve with this online New Years Eve invitation
the invitation is build with ActionScript 3.0, using Tweener and TextAnim.
graphics are bought at ActiveDen, then slightly altered.
ActionScript 3.0: creating text animation with textures using TextAnim
when using TextAnim you can add any texture bitmap as pattern for the text.
check out an example of TextAnim animating text
yes, I know, impressive..
but what if replacing the blue color of the text with this texture?
check out an example of TextAnim animation text with a texture bitmap as pattern
the code for the texture example:
import flupie.textanim.TextAnimBlock;
import flupie.textanim.TextAnimTools;
import caurina.transitions.Tweener;
//set your text
myTextField.text = "TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS!";
//Create a bitmap with library linkage instance.
var pattern:Bitmap = new Bitmap(new TABMD(0, 0));
//Configuration
var anim:TextAnim = new TextAnim(myTextField);
TextAnimTools.setPattern(anim, pattern);
anim.interval = 65;
anim.effects = myEffect;
anim.blocksVisible = false;
anim.start(300); //delay to start
function myEffect(block:TextAnimBlock):void {
block.alpha = 0;
block.x = block.posX + 80;
block.scaleX = block.scaleY = 8;
Tweener.addTween(block, {alpha:1, x:block.posX, scaleX:1, scaleY:1, time:.5, transition:"easeoutsine"});
}
new to TextAnim?
be sure to read this on the very basic usage of TextAnim:
ActionScript 3.0: creating text animation with textures using TextAnim
ActionScript 3.0: creating random art using simple vector shapes, part 2
having written this post on how to create random art in ActionScript using simple shapes and read it a few times, I realized that I hadn’t made a version that was in fullscreen mode. so here’s the last example in the previous post remade in fullscreen.
check out this link to see the random vector shape art created in ActionScript in fullscreen!
ActionScript 3.0: creating random art using simple vector shapes
having read this article by Bruno Crociquia, I had to try it out for myself.
so I created some very random vector shapes in Flash, among others, these:
all I had to do from here, was to add a few changes to Bruno’s original code to make it fit my wishes, and then publish my Flash.
click the picture below to see how my Flash ended up:
if you click the flash movie and then press any key the Flash will randomly recreate art!
well, so far so good, Bruno’s task completed..
..but I wanted to see what would happen, if I made the Flash recreate itself constantly.
so I used a Timer, and made the Flash create new art 5 times pr. second.
check out the rather hypnotising Flash art here:
ok, so far so good, but what if I decrease the amout of alpha of each shape from 0.9+ to only 0.4?
actually this creates a quite different effect.
check out the rather hypnotising semitransparent Flash art here:
last, I experimented with a more relaxed flow, I decided to bring one random shape to the stage at a time.
this ended up in this neverending mosaic art, still using those very same vectors.
check out this last experiment on trying to create Flash art here:
the Document Class ActionScript for the last example can be copied from here:
import caurina.transitions.Tweener;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.TimerEvent;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.utils.Timer;
import MonsterDebugger;
public class RandomFlashArtContent extends Sprite {
private var _md:MonsterDebugger;
private var maxscale:Number = 1.2; // this is the maximum scale value that our shapes will be allowed to achieve
private var minscale:Number = 1; // this is the minimum scale value that our shapes will be allowed to achieve
private var maxrotation:Number = 180; // maximum rotation value for our shapes
private var offsetX:Number = 100; // the offset is the value that will trigger the discrepancy of your composition
private var offsetY:Number = 100; //
private var marginX:Number = 100; // this is the margin for the x axis
private var marginY:Number = 100; // this is the margin for the y axix
private var colorPalete:Array = [0xFFE6C9,0x960F66,0xF55E54,0xCC2C57,0x171F21]; //Bending Color For the BLind
private var _timer:Timer;
//background gradient settings;
var type:String = GradientType.LINEAR;
var colors:Array = [ 0x000000, 0x000000];
var alphas:Array = [ 1, 1 ];
var ratios:Array = [ 0, 255 ];
var matr:Matrix = new Matrix();
var sprMethod:String = SpreadMethod.PAD;
var bg:Sprite = new Sprite();
var g:Graphics = bg.graphics;
public function RandomFlashArtContent() {
init();
}
private function init():void {
trace("function init");
_md = new MonsterDebugger(this);
_timer = new Timer(90, 0);
_timer.addEventListener(TimerEvent.TIMER, goCreate, false, 0, true);
_timer.start();
createBackground();
}
private function createBackground(){
//starts a gradient box
matr.createGradientBox(800, 550, 90, 0, 0 ); //make the gradient the size of your stage, set the rotation to 90 degrees
//begins the fill
g.beginGradientFill(type, colors, alphas, ratios, matr, sprMethod );
//draws the rectangle
g.drawRect( 0, 0, 800, 550 ); //be sure to draw the rectangle the size of your stage
addChild(bg);
createComposite();
}
function removeComposite(){
while(numChildren > 0){
//eliminates all of the child objects from the main timeline
removeChildAt(0);
}
}
private function goCreate(e:TimerEvent):void{
createComposite();
}
private function createComposite(){
var obj:RandomObject=new RandomObject();
//what shape to show
obj.gotoAndStop(Math.round(Math.random()*obj.totalFrames));
//set the objects position
obj.x = Math.random() * 700 + 50; //marginX;
obj.y = Math.random() * 450 + 50; //+ marginY;
//sets the scale
obj.scaleX = obj.scaleY = Math.random()*maxscale+minscale;
//sets the rotation
obj.rotation = Math.random()*maxrotation;
//sets a random color from the palette
var c:ColorTransform = new ColorTransform(); // we create an auxiliary color transform object that will carry a random color from the palette
c.color = colorPalete[Math.ceil(Math.random()*colorPalete.length)-1]; // the minus 1 is basically because an array starts at index 0
obj.transform.colorTransform = c; //we apply the color to the object color transformation
//sets an alpha
obj.alpha = 0;
var theTime:Number = Math.random()*15;
var theDelay:Number = Math.random()*15;
var theAlpha:Number = Math.random();
Tweener.addTween(obj, {alpha:theAlpha, time:theTime});
Tweener.addTween(obj, {alpha:0, time:theTime, delay:theDelay});
//adds to stage
addChild(obj);
}
}
}
the color theme for these pieces of art is found at Kuler, and is called “Bending Color For The Blind”.
Timeline animation: 4 banners in 4 hours
this week my friend and colleague Maria Bøge Sørensen was given this assignment:
make 4 banners for 4 different customers in 4 hours.
here’s what Maria ended up with:
check out the 4 different banners made in 4 hours
I think my favorite is the one for Ikast Byliv, which one is your favorite?
ActionScript 3.0: making sure your oversized Flash will be seen in even the smallest browser
so, inspired by Tuna / Tommy Kjær Andersen I decided to make a project including a Flash with a size that would be too big for most of the typical browser resolutions of today.
so I made a MovieClip with a width of 2765 px and height of 1339 px and published that inside a fullsize stretchable Flash.
to make sure that all of the content in the MovieClip would be viewable to everyone, I added an MOUSE_MOVE-eventlistener, that repeatedly would show a certain part of the MovieClip.
in the example above, if your browser has a resolution of 800 x 600 px, this is what you’ll actually see of the entire flash.
where the 800 x 600 px “window” to the Flash will be depends on the position of your mouse.
heres the code for showing the content depending on the position of the mouse:
private function mouseMoved(e:MouseEvent):void {
_allContent.x = -(stage.mouseX / stage.stageWidth) * (_allContent.width-stage.stageWidth);
_allContent.y = -(stage.mouseY / stage.stageHeight) * (_allContent.height-stage.stageHeight);
}
quite simple stuff, actually, but makes a nice effect.
here’s what my project ended up looking like:
check out my oversized Flash here
design supervised by Esben Hindhede, thanks!
—–
the story behind the content in the Flash:
my son Sylvester has just competed in his first official race ever:
1) he ran 1.27 kilometers
2) he completed his run in 25 minutes and 36 seconds
3) he was absolutely last of 70 children competing
…
4) and when he completed his run he got a medal (like every other kid did) and was proud as a peacock