help to create this effect/style

[tylerlovesmarla]

hi everyone,

i want to go about making a victorian style site where the designs seem to grow out of each other, like vines and flowers and such. I just don't know and understand the best way to go about this. sites that create a effect like that are

http://www.crushed.co.uk/
(the vines growing on the side flash)

http://www.havaianas.com/

and

http://www.crushed.co.uk/cuervoSplash/
(skip the intro, the effect under the jose cuervo type)


Thanks in advance

[billingsgate]

Some of those are done with shape tweening, some are done with masking. All are clearly done by experienced and talented designers who know their stuff. Offhand I would say that the vines on crushed.co.uk are a combination, with the growing effect done with masking, and the flower blooms are shape tweens. Same with Havaianas The Cuervo effect is all done with masks.

You can do a similar effect by starting out with an outstanding design, creating a mask from a duplicate of the design, and then working backwards to eliminate the mask shape, either by shape tweening or (much easier, actually) frame by frame, erasing a little bit of it each time.

[tylerlovesmarla]

Thank you for the respond, i'm going to give it a go now, frame by frame that is. Thanks again, though

[Snakesnake]

Hey dude. I sort-of agree with the previously posted answer to you question. Frame by frame would be a good idea if you had 24 million years to live. I think a better idea would be to make a graphic( name it " growing flower) with a flower popping up, and then slow to a stop. Then make another 500 frames of the duplicated flower ( press F5 on frame..hmm...frame 600 hundred of so... :rolleyes: )Make sure this sequence is centered. Then pull up the Library, make a MovieClip,( call it Flower-Vine Seqeunce ) and go into it's editing space. Go to the library and drag the " growing flower " to a spot. Copy this flower. Then, go to the next frame, ( MAKE SURE THE FRAMES ARENT TWEENED! )add another flower, then add another flower so that a path of flowers is being made. I SAY AGAIN make sure THESE FRAMES THAT THE FLOWERS ARE BEING PUT INTO AREN'T TWEENED! Then, once you have about 20 flowers or so popping up one by one each frame, make a new layer. Call it "vines". This is where frame-by-frame is handy dandy! Now just draw your vines so that they seem to go along with the flowers...then add a stop action to the last frame, then drag
" Flower-Vine Seqeunce " to the main stage, and there you have it! Please ask me questions if you have some...

[billingsgate]

There are many ways to get these sorts of effects. Granted, Snakesnake's suggestion will create a far more sophisticated animation than my first response. I was just offering a quick and easy answer to how to get the effect as seen on a couple of the example sites mentioned.

Snakesnake's method will duplicate the same flower many times. If you stretch and squash and tint different instances of it, it can look good. Or you can create 5 different "growing flowers" and duplicate them.

The image on the Cuervo site is simply a graphic design that is revealed little by little through masking. This effect could not be accomplished with Snakesnake's method. On the other hand, the crushed site makes use of both methods combined, as far as I can tell.

So it depends on what effect you're after and what final design you want to end up with.

I disagree that frame-by-frame editing is necessarily time-consuming. In this sort of effect it's just a repetitive action of erase-go to next frame/erase-go to next frame. A 100-frame sequence can be done in 15 minutes. In fact, it can often take far less time to do it this way than a lot of shape tween tweaking or movie clip creation, and can save hours over trying to construct and test an Action Script based effect. But it all depends on what you are trying to accomplish, and how creative you are as a designer and animator.

[jacob111]

Hey billingsgate, I have been trying to figure out how to create the vine technique and I was wondering if you could elaborate on how to erase the mask step by step...I tried importing my vine jpeg into flash, then created a new layer, then pasted the duplicate vine image exactly on top of the first layer, then added keyframes to 50, and then what?
Do you go bit by bit and erase the vine image on the duplicate layer, and then go to layer properties and click mask? this hasn't been working for me, please let me know how to best achieve this effect, thanks , Jacob

[smanandhar]

trace("test");

[nathank000]

Just Some programming thoughts...
would it be possible to create 3-4 flowering movie clips that reveal the flower As though it is growing

then place All of those clips inside one movie clip or different frames
or the first frame put a Stop function and a function to randomly choose a number between 2& 4 and then go to that frame.

voc that we have a clip that randomly plays one of the blooms - put that clip in random locations or the stage with Action Script

then locate the center of those clips And draw a curvy line to each one.

it there was time Allowed in the bloom movies - the Vines would have time to grow to a seemingly blank location And then the flowers would bloom

Possible?

[Egg]

I don't think most of these effects use either tweening or masking. I believe there just a series of drawings imported into Flash to create a movie clip. The cuervo vine is just a simple movie clip resized and repositioned within another movie clip. It's very clever and simple when you grasp the idea behind the animation.
Below is a series of images that go towards creating the growing vine effect. Once you've created a movie clip, you can create an other, using only this MC, but starting at different points along the time line, rotated and resized as required.
Egg

[Egg]

You can view an example here (http://www.harwich-charter-400.co.uk/temp/vine.html)
Giving it extra time, the animation could be made to run smoother, but I think the effect is correct.
From there it becomes quite simple to add leaves and flowers.
As here (http://www.harwich-charter-400.co.uk/temp/vine2.html)
Egg

[billingsgate]

Very nicely done, egg. Lovely.

Sorry I didn't answer jacob111's question before. I've been too busy to take a look at this forum. Or even at my own kids (they've grown in the meantime).

I still think a smoother animation effect can be achieved by using only egg's final drawing, putting a mask over it, then either erasing the mask a little bit at a time in a keyframe sequence, or doing some shape tweening of the mask. THEN duplicate the movie clip as egg has done.

My way is more of a pain in the @r$e but has two advantages:

1) The underlying design can be quite complex without driving up file size, since there is only one instance of the design.
2) The masking option enables smoother animation (more inbetween stages) and some control and experimentation in the speed and easing of the animation. I would most likely apply a little negative easing as each branch grows.

Egg's method has these advantages:

1) It is more straightforward and, if you're confident in your drawing, it's faster to accomplish.
2) Again, if you're confident, you can achieve more lifelike animation by doing it keyframed like this. Whereas in my way, the shape remains static, so its "growth" is not as lifelike as a keyframed animation.
3) Depending on the complexity of the design, egg's method will most likely make a slightly smaller SWF output than mine.

I think either way looks great to anyone's eye.

Sorry I don't have time to do an example.

There is more than one way to skin a kitty. An effect like the growing plant doesn't have a single solution. That's one of the many things I enjoy about Flash, inventing your own solutions to visual effects.

[rockman2023]

My question has less to do with the actual effect of the animation, and more of the design aspect of the graphic involved.

It may be redundant to ask, but by what means would you go about creating the vine? Would you use Illustrator, Flash, or Photoshop? What techniques are involved in doing so, besides keeping it symmetrical?

Lastly, thank you for your examples; they really help.

[Egg]

I created the vine in XaraXtreme, an excellent vector program, so you could do it in Illustrator equally as well. I think a vector program is best for this type of drawing as it allows the use of 'Strokes' with varying widths. I completed the vine, then exported to Flash, undid a section of 'growth', exported to Flash, undid somemore, exported etc.

I never use Flash to create shapes nor Raster programs, so I can't comment on their benifits.

Egg

[rockman2023]

Thanks for the suggestion. I DO have to play around with Illustrator and see if I can achieve the desired effect.

[icemart525]

i think the vines under cuervo used setInterval with duplicateMovieClips. you just need to MCs, one that grow to the left and the other to the right.

[behzad]

Hi,
Do you guys have ever seen the "Nokia L'Amour"(7360-7370-7380) phone and also its flash intro design?
i like the way that the plant growing.
iwant to ask , first how to create a plant like that using illustrator and in vector format and then whats the best way to make the plant seems growing?
and also please tell me whats the certain name of this art?
what should i call it?!!

Thanks in advance,
B.Saeedi