# How is this Flash Site Done?

**URL:** <https://forum.kirupa.com/t/how-is-this-flash-site-done/261305>\
**Category:** flash\
**Created:** [May 26, 2008, 5:15am UTC](https://forum.kirupa.com/t/how-is-this-flash-site-done/261305 "2008-05-26T05:15:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![trex](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@trex](https://forum.kirupa.com/u/trex)\
**Post date:** [May 26, 2008, 5:15am UTC](https://forum.kirupa.com/t/how-is-this-flash-site-done/261305/1 "2008-05-26T05:15:54Z")

</div>

I wanted to make a site like [www.georgespencer.com](http://www.georgespencer.com)

Any ideas how its done?

---

<div class="post-metadata">

**Author:** ![ajcates](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ajcates/32/2435_2.png) [@ajcates](https://forum.kirupa.com/u/ajcates)\
**Post date:** [May 26, 2008, 5:52am UTC](https://forum.kirupa.com/t/how-is-this-flash-site-done/261305/2 "2008-05-26T05:52:44Z")

</div>

With action script, maybe the flash IDE, he could have used flex or something. He might have even had a hex editor and edit the bits himself, I doubt it. He probably took his time as well.

---

<div class="post-metadata">

**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\
**Post date:** [May 26, 2008, 11:21am UTC](https://forum.kirupa.com/t/how-is-this-flash-site-done/261305/3 "2008-05-26T11:21:17Z")

</div>

[QUOTE=trex;2331169]I wanted to make a site like [www.georgespencer.com](http://www.georgespencer.com)

Any ideas how its done?[/QUOTE]

The set up is actually very simple.  
Basically, the content is a large grid of movieclips wrapped in a container movieclip.  
A mask equal to the size of the entire grid is located at the center of the stage.  
The actionscript simply tweens the grid of movieclips to various positions that align the target movieclip with the mask at 100% zoom.

```auto
stop();
import gs.TweenMax;
import fl.motion.easing.*;
stage.scaleMode = StageScaleMode.NO_SCALE;

pixGroup.buttonMode = true;
pixGroup.mouseEnabled = true;
resetBtn.buttonMode = true;
resetBtn.mouseEnabled = true;

pixGroup.addEventListener(MouseEvent.CLICK, pixZoom, false, 0, true);
pixGroup.addEventListener(MouseEvent.MOUSE_OVER, pixAlpha1, false, 0, true);
pixGroup.addEventListener(MouseEvent.MOUSE_OUT, pixAlpha5, false, 0, true);
resetBtn.addEventListener(MouseEvent.CLICK, pixReset, false, 0, true);

TweenMax.allTo([pixGroup.p1,pixGroup.p2,pixGroup.p3,pixGroup.p4,pixGroup.p5,pixGroup.p6,pixGroup.p7,pixGroup.p8,pixGroup.p9], 0, {autoAlpha:.5});

var page:String = "";

function pixAlpha1(event:MouseEvent):void {
	TweenMax.to(event.target, 0, {autoAlpha:1, overwrite:true});
}

function pixAlpha5(event:MouseEvent):void {
	TweenMax.to(event.target, 2, {autoAlpha:.5, overwrite:true});
}

function pixReset(event:MouseEvent):void {
	TweenMax.to(pixGroup, 2, {scaleX:1, scaleY:1, x:250, y:150, ease:Exponential.easeOut, overwrite:false});
}

function pixZoom(event:MouseEvent):void {
	page = event.target.name;
	switch (page) {
		case "p1" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:250, y:150, overwrite:true});
			break;
		case "p2" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:-50, y:150, overwrite:true});
			break;
		case "p3" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:-350, y:150, overwrite:true});
			break;
		case "p4" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:250, y:-150, overwrite:true});
			break;
		case "p5" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:-50, y:-150, overwrite:true});
			break;
		case "p6" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:-350, y:-150, overwrite:true});
			break;
		case "p7" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:250, y:-450, overwrite:true});
			break;
		case "p8" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:-50, y:-450, overwrite:true});
			break;
		case "p9" :
			TweenMax.to(pixGroup, 1, {scaleX:3, scaleY:3, x:-350, y:-450, overwrite:true});
			break;
	}
}

```

Here’s the fla:[[COLOR=“Blue”][U]http://www.byrographics.com/AS3/9pix/9pix.fla.zip[/U][/COLOR]](http://www.byrographics.com/AS3/9pix/9pix.fla.zip)  
Here’s a working example:[[COLOR=“blue”][U]http://www.byrographics.com/AS3/9pix/index.html[/U][/COLOR]](http://www.byrographics.com/AS3/9pix/index.html)

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [May 27, 2008, 12:26pm UTC](https://forum.kirupa.com/t/how-is-this-flash-site-done/261305/4 "2008-05-27T12:26:51Z")

</div>

FYI: Flash 8 does not support AS3 😉