# This \[mx\] mask transition, script or tween?

**URL:** <https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185>\
**Category:** Uncategorized\
**Created:** [May 31, 2003, 6:51pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185 "2003-05-31T18:51:54Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![RelandR](https://avatars.discourse-cdn.com/v4/letter/r/7ba0ec/32.png) [@RelandR](https://forum.kirupa.com/u/RelandR)\
**Post date:** [May 31, 2003, 6:51pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/1 "2003-05-31T18:51:54Z")

</div>

[This site Here](http://www.froglotusyoga.com/)

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 ???

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 31, 2003, 7:47pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/2 "2003-05-31T19:47:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 31, 2003, 8:32pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/3 "2003-05-31T20:32:20Z")

</div>

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 (?)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 1, 2003, 12:54am UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/4 "2003-06-01T00:54:07Z")

</div>

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.

(?)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 1, 2003, 6:38am UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/5 "2003-06-01T06:38:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 1, 2003, 12:32pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/6 "2003-06-01T12:32:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 8, 2003, 10:58pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/7 "2003-06-08T22:58:23Z")

</div>

here’s the one I’m trying to emulate :: [thisThingy](http://www.froglotusyoga.com/)

…didn’t get on it right away but…

ok I got the revolving blinds to work [\>\>HERE\<\<](http://easininto.com/myMoose3.html)

[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 ?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 9, 2003, 5:09am UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/8 "2003-06-09T05:09:41Z")

</div>

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

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:

```auto

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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 9, 2003, 6:38am UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/9 "2003-06-09T06:38:20Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 9, 2003, 2:28pm UTC](https://forum.kirupa.com/t/this-mx-mask-transition-script-or-tween/22185/10 "2003-06-09T14:28:01Z")

</div>

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:

```auto

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

```