This [mx] mask transition, script or tween?

This site Here

check out the little intro (it has replay btn) transitions, a venetian blind mask thingy

I’m thinking that this would have to be tweened (the panels don’t rotate together) but hope such an action could be scripted… any ideas how it may be ???

When I look closely, it doesn’t look like the panels are actually rotating, although that is the (no doubt desired) effect. I reckon it could be scripted like this:

Start with image1 on top. Behind that, load another image. With actionscript create 8 or 9 tall, rectangular masks (one for each “blind”), each resting adjacent to the other so that at full size they completely cover the area of image1. Set the _xscale = 0, then use an interval to increase the _xscale of each one until it equals 100. It looks like they offset this animation too, so that each mask would start its animation just after the one before it.

What do you think?

Well I think I’d have to stack by layers - each img w/ its’ own mask animation
but the offset of the appearence of turning of said panels is where I can’t get a start on (?)

My guess is the “turning panels” effect is simply a trick of the eye. When you have all those masks scaling from thin to wide, one after the other real quick, it makes it look like their turning panels, but in reality they’re not.

If Flash were on this public computer, I’d give it a try to see whether I’m talking out my ___ or not, but when You look at it real close, the images don’t move at all. They stay completely still, it’s just the masks that move. If that’s really the case, then it’s just a trick caused by the particular way the masks scale.

(?)

Yeah I’m sure you’re right there … it is an illusion from the shrinking of the panels … and each img would need its’ own mask I’m sure…

I’m wondering tho, is there an efficient one block of code method to get them to ‘dominoe’ as they do or would one have to stagger a series of onEnterFrame’s with a prototype set on each piece (?)

tomorrow I’ll open flash and give a go at duplicating the effect from trial - just looking for a heads-up on the shortest/efficient course to avoid unnecc. bulk. and waste.

One could definitely do it with one block of code . . . a number of ways for sure, depending on how you set up the clips. I’ve got some things in my head, maybe when I get home tomorrow I’ll give it a try too. Let me know what you figure out.

here’s the one I’m trying to emulate :: thisThingy

…didn’t get on it right away but…

ok I got the revolving blinds to work >>HERE<<

[pics are quick-n-crappy stretches just for place holding]

… laying over each picClip with some cool lil diddy later is a no sweat thing…
… but now what I need is to set up a timed / delay trigger to load & swap images (prefferably dynamic) and set this mask (trade-off) to each of them in a sequence

my brain’s tired now…

any ideas out there ?

Nice work. As you can see I haven’t gotten right on it either. :slight_smile:

You could use a setInterval() to set the timed delay. It depends on how you’ve set up the clips, but assuming each “blind” was its own movieclip named blind1_mc, blind2_mc, blind3_mc, etc., and assuming that on each blind clip was a frame at the beginning of the animation labeled “_startRotation”, then you might use something like this:


for (var i=1; i < 11; i++) {
	_root["blindsInterval" + i] = setInterval(rotateBlind, i * 100, i);
}

function rotateBlind(i) {
	_root["blind" + i + "_mc"].gotoAndPlay("_startRotation");
	clearInterval(_root["blindsInterval" + i]);
} 

It’d probably be a good idea to preload the images into these blind1_mc, blind2_mc, etc. clips before this animation runs.

Thx… I’ll prolly use the setInterval later for this somehow for timing the cycle to new pix

I found a really cool tutorial over at http://www.ultrashock.com (time based scripted animation) which helped get me this far

actually, I only keep referring to the “rotation” [because I’m stuck on the visual description thing] - it’s not rotated
but it is all scripted way different … and useing the _xscale…

…all placed within a clip which serves as the mask which is “set” & “unset” (with ‘setMask’) one at a time over each “picClip”

Right now the setMask is timeline/frame oriented but I’m looking for to cycle that assignment dynamically along with the loading of new pics to maybe apply this to a gallery app. (???)

brain still tired - sentences are tougher - must sleep for now

Ha ha, right, by “rotate” I was just being metaphorical, meaning “when you change the _xscale”. Yeah, the time based animation is a good tutorial. If you used setInterval (and you may want to do it otherwise), you could use set a dynamic offset:


var timeOffset = 100; // the number of milliseconds before the next "blind" starts to "rotate" (change _xscale)
_root["blindsInterval" + i] = setInterval(rotateBlind, i * timeOffset, i);