# How to make this ETSY.COM Time Machine

**URL:** <https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878>\
**Category:** flash\
**Created:** [April 8, 2006, 7:12pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878 "2006-04-08T19:12:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 8, 2006, 7:12pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/1 "2006-04-08T19:12:42Z")

</div>

This is cool. I want to make it.

How do you do it?

[http://www.etsy.com/time\_machine.php#goods](http://www.etsy.com/time_machine.php#goods)

I am about medium skilled in my AS

---

<div class="post-metadata">

**Author:** ![rhamej](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@rhamej](https://forum.kirupa.com/u/rhamej)\
**Post date:** [April 8, 2006, 11:21pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/2 "2006-04-08T23:21:03Z")

</div>

Thats not very medium skilled. Thats very advanced. :stunned:

---

<div class="post-metadata">

**Author:** ![NANO3](https://avatars.discourse-cdn.com/v4/letter/n/c2a13f/32.png) [@NANO3](https://forum.kirupa.com/u/NANO3)\
**Post date:** [April 8, 2006, 11:31pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/3 "2006-04-08T23:31:35Z")

</div>

> [@rhamej](#):
>
> Thats not very medium skilled. Thats very advanced. :stunned:

[whisper]He’s saying HE is medium skilled, not the website.[/whisper]

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 9, 2006, 12:28am UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/4 "2006-04-09T00:28:59Z")

</div>

thanks niraj, it can be done tho, anyone got any suggestions? :esmirk:

---

<div class="post-metadata">

**Author:** ![Battin](https://avatars.discourse-cdn.com/v4/letter/b/8dc957/32.png) [@Battin](https://forum.kirupa.com/u/Battin)\
**Post date:** [April 9, 2006, 12:50am UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/5 "2006-04-09T00:50:17Z")

</div>

man… thats crazy!!

---

<div class="post-metadata">

**Author:** ![rhamej](https://avatars.discourse-cdn.com/v4/letter/r/bb73d2/32.png) [@rhamej](https://forum.kirupa.com/u/rhamej)\
**Post date:** [April 9, 2006, 1:29am UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/6 "2006-04-09T01:29:56Z")

</div>

> [@niraj](#):
>
> [whisper]He’s saying HE is medium skilled, not the website.[/whisper]

I know that, I was trying to be nice 😉

---

<div class="post-metadata">

**Author:** ![devonair](https://avatars.discourse-cdn.com/v4/letter/d/3be4f8/32.png) [@devonair](https://forum.kirupa.com/u/devonair)\
**Post date:** [April 9, 2006, 4:22am UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/7 "2006-04-09T04:22:47Z")

</div>

> [@rhamej](#):
>
> I know that, I was trying to be nice 😉

I thought it was a very diplomatic reply… 🙂

That effect could be done using concepts from senocular’s 3d tute: [http://www.kirupa.com/developer/actionscript/3dindex.htm](http://www.kirupa.com/developer/actionscript/3dindex.htm)

and with a little extra trig (to get the images in a spiral)…

And I believe Bit-101 has a tutorial on “throwing” movie clips, but it was written for Flash 5 and painfully outdated…

Basically, just need to put together a whole bunch of pretty advanced stuff…

---

<div class="post-metadata">

**Author:** ![gvozden](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gvozden/32/1084_2.png) [@gvozden](https://forum.kirupa.com/u/gvozden)\
**Post date:** [April 9, 2006, 7:20am UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/8 "2006-04-09T07:20:57Z")

</div>

it’s not that hard as I see it 🙂

add every clip z position (from far to nearest)  
determin clip size on z position (and visibility if it goes behind screen or it’s too far (but that can do \_alpha property based on z position)

position clips around center and use z value for making them bigger or smaller

apply some easing on rotation and that’s it

and then you change z value to all movies and they keep spinning and coming

🙂 LOL just like devonair said

so z value (distance) influences x, y, width, height and alpha  
you just need to figure right evaluations

---

<div class="post-metadata">

**Author:** ![Greggeh](https://avatars.discourse-cdn.com/v4/letter/g/8baadc/32.png) [@Greggeh](https://forum.kirupa.com/u/Greggeh)\
**Post date:** [April 9, 2006, 10:55am UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/9 "2006-04-09T10:55:20Z")

</div>

> 

so z value (distance) influences x, y, width, height and alpha  
you just need to figure right evaluations

yup thats so true, but in the end its pretty \*\*\*\*in hard. I’m up for making this thingy though. Whos with me!

Ill make a start.

write some stuff down etc.

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 9, 2006, 4:55pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/10 "2006-04-09T16:55:27Z")

</div>

Thanks for the replies guys, I will be working hard on this the next couple of days (this is part of my University project). Will post up all the code I come up with!

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 10, 2006, 5:53pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/11 "2006-04-10T17:53:32Z")

</div>

[http://www.devincheevers.com/3D/click\_zoom.html](http://www.devincheevers.com/3D/click_zoom.html)

So this is basically senocluar’s tutorial with different images, but its a start! I’ve got some questions on the code is this, will post them soon.

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 10, 2006, 6:05pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/12 "2006-04-10T18:05:12Z")

</div>

This is the code

[INDENT]// creat an array to store file paths  
filePaths = new Array();  
for (i=0; i\<5; i++) {  
filePaths\* = “images/image”+(i+1)+".jpg";  
}

this.createEmptyMovieClip(“theScene”, 1);  
theScene.\_x = 300;  
theScene.\_y = 300;  
theScene.depth = 1;

selectStar = function () {  
cameraView.target.x = this.x;  
cameraView.target.y = this.y;  
cameraView.target.z = this.z;  
};

displayStar = function (cameraView, focalLength) {  
var x = this.x-cameraView.x;  
var y = this.y-cameraView.y;  
var z = this.z-cameraView.z;  
if (z\<0) {  
this.z = this.z+5000;  
this.x = 500-Math.random()_1000;  
this.y = 500-Math.random()1000;  
x = this.x-cameraView.x;  
y = this.y-cameraView.y;  
z = this.z-cameraView.z;  
}  
// end if  
var scaleRatio = focalLength/(focalLength+z);  
this.\_x = xscaleRatio;  
this.\_y = y_scaleRatio;  
this.\_xscale = this.\_yscale=100_scaleRatio;  
this.swapDepths(Math.round(-z));  
};  
objectsInScene = new Array();  
for (i=0; i\<5; i++) {  
attachedObj = theScene.attachMovie(“star”, “star”+i, theScene.depth++);  
targetJPEG = filePaths_;  
targetMC = \_root.theScene[“star”+i].goBTween.img\_con\_mc;  
// load the target image into the target movieclip  
loadMovie(targetJPEG, targetMC);  
attachedObj.x = 500-Math.random()\*1000;  
attachedObj.y = 500-Math.random()_1000;  
attachedObj.z = i_500;  
attachedObj.onPress = selectStar;  
attachedObj.display = displayStar;  
objectsInScene.push(attachedObj);  
}  
// end of for

cameraView = new Object();  
cameraView.x = 0;  
cameraView.y = 0;  
cameraView.z = 0;

cameraView.target = new Object();  
cameraView.target.x = 0;  
cameraView.target.y = 0;  
cameraView.target.z = 0;  
focalLength = 400;

easeToTarget = function () {  
cameraView.x = cameraView.x+(cameraView.target.x-cameraView.x)/5;  
cameraView.y = cameraView.y+(cameraView.target.y-cameraView.y)/5;  
cameraView.z = cameraView.z+(cameraView.target.z-cameraView.z)/5;  
var i = 0;  
while (i\<objectsInScene.length) {  
objectsInScene\*.display(cameraView, focalLength);  
i++;  
}  
// end while  
};  
theScene.onEnterFrame = easeToTarget;  
[/INDENT]

First thing I want to figure out it is why is it infinite? I mean there are only 5 images but then it goes back to one. This is the first thing I want to get rid of in helping me recreate [etsy.com’s time machine](http://www.etsy.com/time_machine.php#goods).

Thanks :player:

---

<div class="post-metadata">

**Author:** ![Greggeh](https://avatars.discourse-cdn.com/v4/letter/g/8baadc/32.png) [@Greggeh](https://forum.kirupa.com/u/Greggeh)\
**Post date:** [April 10, 2006, 6:07pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/13 "2006-04-10T18:07:34Z")

</div>

have you seen the other sorting types of the site aswell ?

btw you have that in a .fla already ? and where did you get the code?

absolutely crazy

////

```
var z = this.z-cameraView.z; // lowers the z

```

if (z\<0) {  
this.z = this.z+5000; // puts z to 5000 so it can lower again

thats how it loops i guess

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 10, 2006, 6:16pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/14 "2006-04-10T18:16:27Z")

</div>

[http://www.kirupa.com/developer/acti…pt/3dindex.htm](http://www.kirupa.com/developer/acti...pt/3dindex.htm)

The code is from one of senoluars 3D Tutorials, yeah I have seen the other sorting types, really cool!

---

<div class="post-metadata">

**Author:** ![Greggeh](https://avatars.discourse-cdn.com/v4/letter/g/8baadc/32.png) [@Greggeh](https://forum.kirupa.com/u/Greggeh)\
**Post date:** [April 10, 2006, 6:18pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/15 "2006-04-10T18:18:04Z")

</div>

lol, WHERE? haha put it between link tags, kirupa cuts off the url

---

<div class="post-metadata">

**Author:** ![Greggeh](https://avatars.discourse-cdn.com/v4/letter/g/8baadc/32.png) [@Greggeh](https://forum.kirupa.com/u/Greggeh)\
**Post date:** [April 10, 2006, 6:19pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/16 "2006-04-10T18:19:49Z")

</div>

oh btw i think i can create the circle

attachedObj.x = 500-Math.random()\*1000;  
attachedObj.y = 500-Math.random()_1000;  
attachedObj.z = i_500;

x and y are important, create a circle \* 5 or so, then devide it by the rarray length, then \* current i;

i got the code from someone. sourcefiles are at my internship … but the .swf is here: [http://www.grede.nl/other/dstyled](http://www.grede.nl/other/dstyled)

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 10, 2006, 6:20pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/17 "2006-04-10T18:20:16Z")

</div>

Thanks Greggeh, changed the code to this:

if (z\<0) {  
removeMovieClip(this);

```
}

```

And it doesn’t loop!

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 10, 2006, 6:22pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/18 "2006-04-10T18:22:37Z")

</div>

[http://www.kirupa.com/developer/actionscript/shape\_camera.htm](http://www.kirupa.com/developer/actionscript/shape_camera.htm)

Check out the bottom of the page that star animation, thats where the code is from. The whole Tutorial is pretty good.

How would I get the thing is to zoom through automatically rather than having to click.

Like the ETSY on does, it just plays thorugh?

---

<div class="post-metadata">

**Author:** ![Greggeh](https://avatars.discourse-cdn.com/v4/letter/g/8baadc/32.png) [@Greggeh](https://forum.kirupa.com/u/Greggeh)\
**Post date:** [April 10, 2006, 6:27pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/19 "2006-04-10T18:27:11Z")

</div>

x = this.x-cameraView.x;  
y = this.y-cameraView.y;  
z = this.z-cameraView.z;

add

z–;

?

---

<div class="post-metadata">

**Author:** ![devinstar](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@devinstar](https://forum.kirupa.com/u/devinstar)\
**Post date:** [April 10, 2006, 6:29pm UTC](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878/20 "2006-04-10T18:29:11Z")

</div>

where would I put that code?

[Next page](https://forum.kirupa.com/t/how-to-make-this-etsy-com-time-machine/184878.md?page=2)