Ideas on

Hello everybody,
Maybe some of you know already the site if not you can check it out, it’s pretty awesome. Anyway, Inigo and I were wondering how he did the fading effect on the main page of his site (issue 01).

If anyone has an idea, or even better a fla, that would be great.

pom :asian:

You mean for the preloader, how it fades in according to the preloader?


Oh, no no no, Kyle, I mean when you get on the site, and move your mouse from the right to the left, pictures fade in and out.

pom :asian:

I have my little idea :stuck_out_tongue:

Well actually it is quite simple. The difficulty in making it work smoothly, was not the code, but rather the images I chose and the motion tweens.

I chose several images, each on its own layer and then I started to create a motion tween for them (rather then using code i.e. alpha setting, I used a tween). The tween has the advantage over the actionscript that I can have more control over it. After I set the tweens up exactly how I wanted them, I made it into a movie clip of its own. This movie was then manipulated through the motion of the mouse. Each time I move the mouse the playhead inside the image movie clip adjusted accodingly.

Now, I chose the good old motion tween because I wanted more controle over the animation, but because of it the project is less modular. In my case thats ok, because I did not intend to switch out any images, but if you intend to switch out images, you might want to use such a property as “_alpha”. Also I would suggest in that case to use xml to load a list of images that will be used in the animation, this way it would be truely modular. This would be a good solution if you wanted to show photograps that blend into each other…these photos could then be updated.

I chose the static route because I wanted it to stay they way it is, as with a sculpture. The tween itself took me quite some time in beta testing before I got the motion the way I wanted it to.

Code for mouse:
(attach this code to the image movie clip)

onClipEvent (enterFrame) {
gotoAndStop (Math.ceil(_root._xmouse));

and you should be good to go, now if you do it as an alpha setting make sure your to echange the gotoAndStop command with the “_aplpa” setting of “this” and make sure your math creates a percentage value of 1 - 100%. the code as it stands now will go to a frame of the image movie clip, but make sure your tween is as many frames as your movie is wide, or it wont work, unless you use the _alpha property.

Hope that does the trick.



And I even understood some of it!


Actually, that’s how I had done it :stuck_out_tongue: Cool, I was right! :slight_smile: I tried the _alpha method too, but it is EXTREMELY CPU consumming.

Anyway, very nice effect, Alex.

pom :asian:

I tried that, but it didnt worked :frowning:
i dont know what i’m doing wrong
there’s the fla:

anyone ?¡??? :o

Well, there is a little problems with your code, my dear. Because what Alex said is not exactly what you have to write. There has to be some sort of propotionality between the mouse position and the frame you’re going to.

That’s why you have to get (not the mouse position simply) but the position of the mouse relatively to the entire scene width. Your scene is 550 pixels wide, so there will be something like

gotoAndPlay (Math.ceil(_root._xmouse/550));

But it’s not over yet. Because with this formula, when you’re at the right end of your movie, _xmouse=550, which makes gotoAndPlay(1). Not so good, because at that point you want it to go to the last frame of your tween (frame 50). Therefore, you have to multiply your formula by 50.

onClipEvent (enterFrame) {
	gotoAndStop (Math.ceil(_root._xmouse*50/550));

pom :asian:

Or: you can make a tween that has as many frames as the scene is wide. If you have 550 frames in your tween, then you could simply gotoAndPlay(_root._xmouse). Otherwise, you will gotoAndPlay(400), whereas you have only 50 frames…

pom :asian:

You do beautiful work, Alexander. Congrats!


Download an example FLA file of how it’s done from .

Study and change it as much as you need.

Good luck

Yep, except the pictures stack on his example, so you’ll have to edit the registration point to get the right effect in your fla. But thanks, it’s nice!

pom :asian:

cool, i could make it !!!

and with the other example, where should i move the reg. point to???

Well, in his fla Ma’deel calculates the distance from the mouse to the registration point, so if the pictures stack, this distance will always be the same. That’s why he didn’t put them at the same place.

That’s why you have to move the registration point of the first picture to the left, leave the second as is, and move the third to the right. And so on if you have 4…

pom :asian:

That’s interesting, we should put that in the best of Kirupa when we’re done :stuck_out_tongue:

ok, got that,
and another, how can i make that dynamic movmement of the little lines above the numbers?

well… the fla links in this thread are broken, so it would not do much good to have these in the best of… Pom, can you upload your version so we can check it out? Please?

Oh, btw… I have a cool tutorial on the way…

ilyaslamasse, thanks for helping out. You are a scholar and a gentleman. I wish there were more of you around to make this forum a bit more lively (you are all great, dodn’t get me wrong, but ily really participates on all levels and goes beyond the nescessary steps of helping). Hey I am hoping my company will eventually get the right group of clients so that I need to hire designers to join me, I would hire. Anyways, pipedreams, I am still workingon it and it will be a while, takes a bit to get yoru name out there and then to build relationships…cause let me tell you, no matter how good you are (and I know there are a lot of good designers out there) the important winning factor is the relationship building part, getting to know your client, getting your foot in the door and making yoru presentation stick, basiclally you gotta be a good talker. I see a lot of companies out there with shite sites (heck almost all are) and its only because the design firm had a good business guy who coudl talk his way into theh company and land that job, its all about the talk and not the walk, to teh business world its more important how good your proposal looks, rather then your actual work…most of them don’t give a flying f… about creative. HAHAHHA anyways. Just a part of life…

And so the designers at Kirup move on :wink:

>Eberth: Well, I haven’t figured that out yet… The lines are moving, no prob, only when the mouse moves, all right. But the inertia thing I don’t understand :slight_smile:

>Inigo: What do you mean, brocken links? And I’m sure I posted my fla somewhere… I’ll check that. Btw, what tute are you talking about? I’m all ears =)

>Alex: Wow! Thanks. And I know what you mean about good talkers. Isn’t it the same everywhere? When there are more than 2 people around, I can’t even spell my name right. But you’re an awesome designer, I’m sure you’ll I don’t know how to say that in English make it, basically.

pom :asian:

Ma’deel: do you think you could repost the zip? Right now it tells me that is no longer available.

thank you very much.