[EDIT]Flash MX actionscript question[/EDIT]
I’m looking for some help (even if on a conceptual level only) on how I would go about doing a similar effect to the particle effect on orisinal. http://ferryhalim.com/orisinal/text/particles.htm I want to use my own image, probably in black + white/greyscale, and have it be dynamically created, similar to the way the word “ORISINAL” is created on the site.
Any ideas? I kinda imagine using some sort of pixel array, and doing an alpha fade/ease on a bunch of little 1 px movieclips to move them into position in the array, but I don’t know.
Any suggestions would be appreciated. And if you think I’m already headed down the right path, any more suggestions would be nice too, since the idea of creating an array with on/off values makes sense to me, but it’s just an idea, which is a long ways away from implementation.
Thanks kirupians!
-C
Actually this could be donw with (and probably would be better off with) tweens.
If you were to animate so many particles in via actionscript, you could end up with a processor intensive effect (although you could use AS to duplicate a movie clip with a tween in it to help this)
But if you are not up with your AS your easiest bet would be to use a movie clip with the blocks in animation and use that clips layer as a mask layer to the layer that contains the original image.
it would be pretty difficult to code the whole array by hande but if you make a little grid thig. have a small square movie clip with 2 frame, one with a light square and the other with a darker square. then use a nested loop to make the grid by duplicating the square MC. while duplicating it give each duplicated MC a variable named type and a value of one. ie. this.type = 1. then make a proto so that when you press (mouse down on a square) a square then the type changes from 1 to 2 and if pressed again 2 to 1. when the type is changed, make the MC gotoAndStop on it’s type. then make a a final proto that when a different key is pressed ie enter then it loops through all the MC type and traces an array for you…
that;s about it… i made a tile based world editor like this but instead of 2 types i had 10 different tile types…
Weird, it didn’t work at home, works fine at work though. I think your method will work, you’re saying that it would probably be too processor intensive if I duplicated a little clip a whole bunch of times to use as the mask? In your example, you use a big bar as the mask, I’m wondering if I take a little square clip and do a similar process with it if that would be too processor-intensive.
Another issue- If I were to try to duplicate the effect on Orisinal, for example, as my little mask clips slide to the left, they reveal each part of the bitmap as they pass over it. I was looking for more of an effect where the bitmap appears to be “constructed” out of solid particles, not have each little mask clip reveal whichever part of the image they happen to be over. I’ll have to try this out and see how it looks, though, this may not be much of a problem.
Thanks for the help. [EDIT] You too, zylum. I appreciate it. [/EDIT]
-C
Creating the entire effect via AS poses the chance of being too processor intensive, but duplicating clips that contain a tween will help to tone that down because you won’t be running so many onEnterFrame commands and if statements.
The effect at Orisinal is done via masking, not particles building the shape, it’s just a trick of the eye… again for the reasons mentioned previously, building an entire “image” out of particles can be processor intensive, so you are still better off with tweens and masks.
As for making it stop in the correct column… just have it tween that way, if you space your duplicated clips just right they will stop in the right place.
If you don’t know much about duplicateMovieClip() and how to space the duplicated clips I recommend working with and experimenting more with that before attempting something like this, because doing this requires knowledge of how masks work, how tweens work, and how duplicateMovieClip() works.
I’m pretty good with masks and tweens, however, if my mask clip is 2px by 2px, say, and I have a 20 px by 40 px movie, that’s 200 clips, and 200 tweens I would have to do by hand. Way too inefficient, I want to do this with AS tweens, which is what I think you’re talking about. I don’t think it will be too hard. I’ve never worked with duplicateMovieClip() before, but I can’t imagine it’s that difficult.
Your .fla makes pretty good sense to me, from the quick look at your addbar() function. The only thing I’m not sure about is how I’m going to tell each clip where to stop without specifying it individually. hm. I’ll have to think about that one for a little bit. The only difference between your clip and what I want to do, is that you only have to worry about the _x property of each duplicated movie clip, the _y is managed by the timeline tween you created. I need to figure out a way to tween each duplicated movie clip to a dynamically set x,y coordinate, which I imagine I can do with an incremented variable similar to what you did for the x coordinate.
Also I was thinking, perhaps create another mask over the whole shebang, that gradually expands to cover the whole movie as the masks reveal the image- that way you won’t see the mask clips moving over the entire image as they make their way to their destination.
If you look at my .fla file, my bar is actually an actual tween (not an AS tween) and the clip that contains the tween is duplicated, so that way I wouldn’t have to do 10+ clips with the same exact tween.
Then my tween is ended with a stop() action so that it doesn’t loop around and it stops at it’s final place.
Doing an AS tween would involve each little clip to run an onEnterFrame command, and inside that you will run the movement code + the if statements needed to stop the clip at the right places, and that is what will be too processor intensive which is why I recommended regular tweens.
Ok, but do you see what I mean about the x,y coords?
If you’ve got 200 2x2 pixel mask movieclips that need to fill in a 20x40 grid that covers your masked image, you would have to create a tween for each topmost mask clip in each column, and duplicate that clip 20 times down the column. Then you’d have to do the same thing for the other 39 rows, decrementing the stop position of the tweens by 2px every column.
Your example doesn’t have to worry about the clips overrunning each other on the y axis, because each mask clip fills an entire column, so there’s no clip that comes in behind it to mask the next spot, there’s only clips next to it, running parallel.
I suppose I could do this, just seems like there might be a better way. I can see how the onEnterFrame() actions required by an AS tween would be processor intensive, however. I’ll have to play with it a bit.
I don’t think you understand. If you do the tween manually, and tween it 10px to the left, then the clip will always end up 10px to the left of where you originally put it, so there is no need to decrement the stop position if you do a tween, which is why I said to use a regular tween, it would save on enterFrames and if statements and processor intensivity.
As for laying it out, that is all up to you, but if I were doing it I would do…
2px tween clip as the motion
put x number of these in another movie clip to create the column and the effect you want
use the clip that contains these x number of tween clips to duplicate across the stage
You COULD do this via AS row by row, column by column, but it would be so much easier just to line the clips how how you want in the way you want doing a standard tween.
That looks really good, zylum. I tried to adapt lost’s AS to my movie, and got some weird results. I’m at work and the file is at home, so I’ll upload later.
In the meantime, I’m going to attempt to sift through your script. Thanks man.
-C
yea, what it really is, is a mask of the name and then a bunch of little square MC’s with a slight left tween, a size increase and slight rotation. the Mc is duplicated a bunch of times and then tweened into position and masked. my version is really ****ty because i forgot to take out a lot of unnecessary code… i should have used tweens for the square instead of AS… maybe i’ll make another version later…
