Archive for the ‘Photography’ Category
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.
ActionScript 3.0: ExtractBox Class version 2
a while ago I had found an .as-file that I moderated, so I could use it as I wanted on any regular quadrilateral picture.
see what I ended up with here:
ExtractBox.as version 1
now I’ve worked a bit more on this class so that it works on any rectangular picture, and have ended up with this new version:
check out version 2 of the ExtractBox.as file on a passport photo shoot of my 2 youngest kids here:
the entire code for making this happen:
var eb1:ExtractBox = new ExtractBox("600x450.jpg", 10, 10, 450, 600, 4, 0x000000, 0xFFFFFF);
addChild(eb1);
import caurina.transitions.properties.ColorShortcuts;
import caurina.transitions.Tweener;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
public class ExtractBox extends Sprite {
private var _myImg:Loader = new Loader();
private var _imageHolder:Sprite;
private var _borderBox:Shape;
private var _interactionBox:Shape;
private var _interactiveBox:Sprite;
private var _maskBox:Shape;
private var _scale:Number;
private var _mySize:Number;
private var _myHeight:Number;
private var _myWidth:Number;
private var _myBorder:Number;
private var _myURL:String;
private var _myOffColor:Number;
private var _myOnColor:Number;
function ExtractBox(theURL:String, theX:Number, theY:Number, theHeight:Number, theWidth:Number, theBorder:Number, theOffColor:Number, theOnColor:Number) {
_myURL = theURL;
//_mySize = theSize;
_myHeight = theHeight;
_myWidth = theWidth;
_myBorder = theBorder;
_myOffColor = theOffColor;
_myOnColor = theOnColor;
x = theX+(_myWidth/2);
this.y = theY+(_myHeight/2);
setup_imageHolder();
draw_borderBox();
drawPictureBox();
draw_interactionBox();
add_imageHolder();
ColorShortcuts.init();
_scale = _maskBox.scaleX;
}
private function onPictureBoxOver(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOnColor, time:1.6});
Tweener.addTween(_maskBox, {scaleX:0.95, scaleY:0.95, time:1.6});
}
private function onPictureBoxOut(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOffColor, time:1});
Tweener.addTween(_maskBox, {scaleX:1, scaleY:1, time:1});
}
private function setup_imageHolder():void {
_imageHolder = new Sprite();
}
private function draw_borderBox():void {
_borderBox = new Shape();
_borderBox.graphics.beginFill(_myOffColor);
_borderBox.graphics.drawRoundRect(-(_myWidth/2),-(_myHeight/2),_myWidth,_myHeight,0);
_borderBox.graphics.endFill();
_imageHolder.addChild(_borderBox);
}
private function drawPictureBox():void {
_myImg.load(new URLRequest(_myURL));
_myImg.x = -(_myWidth/2)-2;
_myImg.y = -(_myHeight/2)-2;
_imageHolder.addChild(_myImg);
_maskBox = new Shape();
_maskBox.graphics.beginFill(0xFF9999);
_maskBox.graphics.drawRoundRect(-(_myWidth/2)+_myBorder,-(_myHeight/2)+_myBorder,(_myWidth-(_myBorder*2)),(_myHeight-(_myBorder*2)),0);
_maskBox.graphics.endFill();
_imageHolder.addChild(_maskBox);
_myImg.mask = _maskBox;
}
private function draw_interactionBox():void {
_interactionBox = new Shape();
_interactionBox.graphics.beginFill(0x000000);
_interactionBox.graphics.drawRoundRect(-(_myWidth/2),-(_myHeight/2),_myWidth,_myHeight,0);
_interactionBox.graphics.endFill();
_interactionBox.alpha = 0;
_interactiveBox = new Sprite();
_interactiveBox.addChild(_interactionBox);
_imageHolder.addChild(_interactiveBox);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OVER, onPictureBoxOver);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OUT, onPictureBoxOut);
}
private function add_imageHolder():void {
addChild(_imageHolder);
}
}
}
showcase: an XML-based double picture module with zoom
some time ago, I did this DoublePictureModule, but have never really written a post about it.
actually, the module works quite nicely.
it reacts to an equal amount of pictures listed in an XML-file.
each set of pictures is showed in the Flash and a nice reflection is created too.
each picture can be seen in a larger version, and when zoomed in, the picture can be moved around, so details can be seen.
check out the DoublePictureModule here:
feel free to comment on it!
the DoublePictureModule is written in ActionScript 3.0 and uses Tweener.
the pictures are by Stig Meyer Jensen and is from the soccer match FCM vs FCK on the 20th of june 2009.
showcase: Mac-alike menu
did this intro recently.
It’s designed as an alternative, Mac OS X-looking menu with simulated 3D look and the unavoidable reflection.
the pictures, menutexts and links are all updated in an external XML-file.
check it out here:
http://campjohn.dk/AS3/Co3/Proline/index_dynamic.html
all sushi pictures in the example above are by Ariel da Silva Parreira, Mexico, thanks for the great photos.
check out Ariels full set of pictures here:
http://www.sxc.hu/profile/arinas74
this flash is made in ActionScript 3.0 and is using Tweener.
ActionScript 3.0: mouseOver effect on loaded jpg
so, while randomly browsing through topics at FlashForum.dk I stumbled upon this .as-file, and I had to try it out. I instantly fell for the idea, and I made some adjustment to the .as-file, so that it fit my temper.
all pictures are by Dimitri Castrique, thanks for the wonderful pictures Dimitri.
I like this very much.
it’s so very simple, it simply displays a picture with a simple frame that interacts on MouseOver/Out.
but it’s so smooth and exactly the kind of eyecandy that takes an ActionScript project from average to good.
here’s the ActionScript making it all happen:
import ExtractBox;
var eb1:ExtractBox = new ExtractBox("dimitri_c01.jpg", 0, 0, 300, 4, 0x000000, 0xFFFFFF);
var eb2:ExtractBox = new ExtractBox("dimitri_c02.jpg", 310, 0, 300, 4, 0x000000, 0xFFFFFF);
var eb3:ExtractBox = new ExtractBox("dimitri_c03.jpg", 620, 0, 300, 4, 0x000000, 0xFFFFFF);
var eb4:ExtractBox = new ExtractBox("dimitri_c04.jpg", 0, 310, 300, 4, 0x000000, 0xFFFFFF);
var eb5:ExtractBox = new ExtractBox("dimitri_c05.jpg", 310, 310, 300, 4, 0x000000, 0xFFFFFF);
var eb6:ExtractBox = new ExtractBox("dimitri_c06.jpg", 620, 310, 300, 4, 0x000000, 0xFFFFFF);
addChild(eb1);
addChild(eb2);
addChild(eb3);
addChild(eb4);
addChild(eb5);
addChild(eb6);
import caurina.transitions.Tweener;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
public class ExtractBox extends Sprite {
private var _myImg:Loader = new Loader();
private var _imageHolder:Sprite;
private var _borderBox:Shape;
private var _interactionBox:Shape;
private var _interactiveBox:Sprite;
private var _maskBox:Shape;
private var _scale:Number;
private var _mySize:Number;
private var _myBorder:Number;
private var _myURL:String;
private var _myOffColor:Number;
private var _myOnColor:Number;
function ExtractBox(theURL:String, theX:Number, theY:Number, theSize:Number, theBorder:Number, theOffColor:Number, theOnColor:Number) {
_myURL = theURL;
_mySize = theSize;
_myBorder = theBorder;
_myOffColor = theOffColor;
_myOnColor = theOnColor;
x = theX+(_mySize/2);
this.y = theY+(_mySize/2);
setup_imageHolder();
draw_borderBox();
drawPictureBox();
draw_interactionBox();
add_imageHolder();
_scale = _maskBox.scaleX;
}
private function onPictureBoxOver(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOnColor, time:1.6});
Tweener.addTween(_maskBox, {scaleX:0.95, scaleY:0.95, time:1.6});
}
private function onPictureBoxOut(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOffColor, time:1});
Tweener.addTween(_maskBox, {scaleX:1, scaleY:1, time:1});
}
private function setup_imageHolder():void {
_imageHolder = new Sprite();
}
private function draw_borderBox():void {
_borderBox = new Shape();
_borderBox.graphics.beginFill(_myOffColor);
_borderBox.graphics.drawRoundRect(-(_mySize/2),-(_mySize/2),_mySize,_mySize,0);
_borderBox.graphics.endFill();
_imageHolder.addChild(_borderBox);
}
private function drawPictureBox():void {
_myImg.load(new URLRequest(_myURL));
_myImg.x = -(_mySize/2)-2;
_myImg.y = -(_mySize/2)-2;
_imageHolder.addChild(_myImg);
_maskBox = new Shape();
_maskBox.graphics.beginFill(0xFF9999);
_maskBox.graphics.drawRoundRect(-(_mySize/2)+_myBorder,-(_mySize/2)+_myBorder,(_mySize-(_myBorder*2)),(_mySize-(_myBorder*2)),0);
_maskBox.graphics.endFill();
_imageHolder.addChild(_maskBox);
_myImg.mask = _maskBox;
}
private function draw_interactionBox():void {
_interactionBox = new Shape();
_interactionBox.graphics.beginFill(0x000000);
_interactionBox.graphics.drawRoundRect(-(_mySize/2),-(_mySize/2),_mySize,_mySize,0);
_interactionBox.graphics.endFill();
_interactionBox.alpha = 0;
_interactiveBox = new Sprite();
_interactiveBox.addChild(_interactionBox);
_imageHolder.addChild(_interactiveBox);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OVER, onPictureBoxOver);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OUT, onPictureBoxOut);
}
private function add_imageHolder():void {
addChild(_imageHolder);
}
}
}
hope you like it.
showcase: a polaroid picture gallery made in Flash
even though having just finished one picture gallery 3 days ago: showcase: using a dynamic banner made in Flash for a photo gallery I guess I still had appetite for more.
so I re-invented the polaroid a bit, and made this gallery of polaroids:
http://campjohn.dk/AS3/Co3/Invita/PolaroidGallery/
each polaroid in this solution consists of a picture, some text and a link.
all pictures, texts and links are added dynamically using XML.
each polaroid can be clicked and dragged to another position.
if a polaroid is just clicked, it links to the picture from Daniel Jaeger Vendruscolos profile page at sxc
all pictures are by Daniel Jaeger Vendruscolo from Pato Branco, Paraná, Brazil, thanks Daniel.
the polaroid gallery is made in ActionScript 3.0 and uses Tweener.
hope you like it.
showcase: using a dynamic banner made in Flash for a photo gallery
some time ago I made this dynamic banner, and looking back at it today made me realize what a nice little piece of work, I has actually done :O)
the banner is quite simple.
it’s dynamically build and accepts 5 parameters:
- some text
- a headline
- another headline
- a picture
- a link
so feeding the dynamic banner with these parameters and using it several times I made this small picturegallery:
check out the picture gallery
all pictures in this picture gallery are shot by Andrew Beierle, thanks Andrew :O)
the banner is made in ActionScript 3.0 and uses Tweener.
hope you like the picture gallery.
showcase: Miss O, Biga and TEKO
in less than a month it’s christmas, and at work I’ve just made a christmassy TV add for Miss O in Holstebro, Denmark. the ad was made in After Effects and is mostly just speak and still photos.
Per Andersen from Komo helped by making the nice snow, thanks.
check out the TV ad for Miss O here – WMV
for Biga I made a lot of Flash during the last months. one of the latest things I’ve made is this Flash for their Berlin kitchen. the kitchen can be made in exactly your favorite color, and in the Flash you can choose to see the kitchen in a range of colors.
check out the Flash for Bigas Berlin kitchen here
for TEKO, I’ve revitalized a project, that is to show their amazing enviroment and wonderful buildings.
the main part of the revitalization is showing the pictures in a new design. when redesigning it though, I again was baffled by the very nice pictures used in this project.
check the revitalization of the TEKO pictures here
the photos are by Per Nielsen from www.photo-corner.dk
ActionScript 3.0: simple picture gallery made with Tweener
I was asked to do a simple setup for a picture gallery, that would show 5 different pictures.
and in only a couple of hours this gallery was made.
nothing fancy about it, and the only “flashy part” is the Show more pictures-bar… (the Se flere billeder-bar).
check out the simple ActionScript 3.0 and Tweener gallery here
the code for the Flash can be seen here:
var isShowed:Boolean = false;
var fadeNumber:Number = 0.7;
var _pictureHolder:MovieClip = new PictureHolder();
_pictureHolder.stop();
addChild(_pictureHolder);
var _redSlider:MovieClip = new RedSlider();
_redSlider.redbar.buttonMode = true;
_redSlider.thumb1.buttonMode = true;
_redSlider.thumb2.buttonMode = true;
_redSlider.thumb3.buttonMode = true;
_redSlider.thumb4.buttonMode = true;
_redSlider.thumb5.buttonMode = true;
_redSlider.tilbageTilOversigten.buttonMode = true;
_redSlider.thumb1.addEventListener(MouseEvent.CLICK, showProperPicture);
_redSlider.thumb2.addEventListener(MouseEvent.CLICK, showProperPicture);
_redSlider.thumb3.addEventListener(MouseEvent.CLICK, showProperPicture);
_redSlider.thumb4.addEventListener(MouseEvent.CLICK, showProperPicture);
_redSlider.thumb5.addEventListener(MouseEvent.CLICK, showProperPicture);
_redSlider.redbar.addEventListener(MouseEvent.CLICK, openCloseMenu);
_redSlider.tilbageTilOversigten.addEventListener(MouseEvent.CLICK, navigateToHome);
_redSlider.thumb1.mouseChildren = false;
_redSlider.thumb2.mouseChildren = false;
_redSlider.thumb3.mouseChildren = false;
_redSlider.thumb4.mouseChildren = false;
_redSlider.thumb5.mouseChildren = false;
_redSlider.mouseChildren = true;
activateBlack();
_redSlider.thumb1.black.alpha = 0;
addChild(_redSlider);
_redSlider.x = 702;
var _morePictures:MorePictures = new MorePictures();
_morePictures.addEventListener(MouseEvent.CLICK, openCloseMenu);
_morePictures.buttonMode = true;
addChild(_morePictures);
_morePictures.x = 722;
var _photographers:MovieClip = new Photographers();
_photographers.x = -180;
_photographers.y = 352;
addChild(_photographers);
function openCloseMenu(e:Event):void {
trace("function openCloseMenu");
if(isOpen){
isOpen = false;
Tweener.addTween(_redSlider, {x:702, transition:"EaseOutSine", time:0.8});
Tweener.addTween(_morePictures, {x:722, transition:"EaseOutSine", time:0.8});
} else {
isOpen = true;
Tweener.addTween(_redSlider, {x:637, transition:"EaseOutSine", time:0.8});
Tweener.addTween(_morePictures, {x:737, transition:"EaseOutSine", time:0.8});
}
}
function showProperPicture(e:Event):void {
var eClicked:String = e.target.name;
eClicked = eClicked.slice(-1);
_pictureHolder.gotoAndStop(Number(eClicked));
activateBlack();
e.target.black.alpha = 0;
}
function navigateToHome(e:Event):void {
if(isShowed){
Tweener.addTween(_photographers, {x:-180, transition:"EaseOutSine", time:0.8});
isShowed = false;
} else {
Tweener.addTween(_photographers, {x:4, transition:"EaseOutSine", time:0.8});
isShowed = true;
}
}
function activateBlack():void {
_redSlider.thumb1.black.alpha = fadeNumber;
_redSlider.thumb2.black.alpha = fadeNumber;
_redSlider.thumb3.black.alpha = fadeNumber;
_redSlider.thumb4.black.alpha = fadeNumber;
_redSlider.thumb5.black.alpha = fadeNumber;
}
—–
the photos are found at www.sxc.hu and are taken by:
CB, Venezuela
Mark Forman, USA
Jonathan Coussens, USA
Nick Bobby, Bulgaria
Gert-Jan Kappert, The Netherlands
nice photos, guys! :O)
showcase: Alex Hulgaard, Snejbjerg El, 3D product carrousel
Alex Hulgaard and I made a bet in 2006, and this bet has now been made into a small flash:
check out the bet made between Alex Hulgaard and Felix Sanchez here
this flash is kinda hard on your cpu, so it might only work properly on faster machines
—–
full, simple website for Aksel Sixhøj and Snejbjerg El – check out the lightning replacing the menu at times :O) – crazy gimmick!
check out the Snejbjerg El website here
—–
product carousel, a worn out webthing?
perhaps, but with 3D and papervision it has had a small rennassaince..
check out a version here, it’s simple but works properly.
- it shows 10 pictures.
- the picture in front is clickable, and can made bigger.
- when big and clicked, the picture will return to normal size..
- it can be turned both right and left.
- is the front picture made big and the carousel turned the big picture automatically returns to normal size
check out the product carousel in Papervision 3D here:
the photos for the product carousel are taken by Zoli Plosz, Romania and Asif Akbar, India.
thanks for the photos, guys!