Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

how do i do this?

fluidedge

fluidedge

macrumors 65816
Original poster
Nov 1, 2007
1,365
16
Hi,

I'm looking to create an animation of a logo that is made from a ribbon (original i know) and i'd like it to 'create' like this animation does:

http://dotmatrixdesign.net/flasharchive/showmovie.php?filename=callig.swf

how do i create this ribbon in Flash or other software (without wheeling out the heavy machinery of Maya) that follows an exact path i can feed it.

Would you even be able to do this in photoshop with the new animation controls)

I want it just like that with a colour gradient too!

any advice appreciated
 
i'm not really good with motion graphics but i know you can do that sorta stuff in aftereffects. but it can get cheesy real quick.
 
Try doing some research on (can't remember exact name of it) motion lines or motion guides.

There was a way (my flash experience is years old) to draw a line and use it as a guide for motion and motion tween it.

Might be worth looking into.

Another cheap way to do it in flash is to draw the final ribon, then cover it up and uncover it every so many frames and motion tween the frames.
Along those same lines, you can draw a guide (for you to follow) and draw the ribbon and motion tween ever so many frames.
Yet ANOTHER way and probably the preferred way is to investigate some action script to perform the task using a combo of script and motion guides.

Sorry not much more help.
 
Here's how I would do it:

Create overlapping ribbons as layers. (you can use Illustrator to more easily create the core ribbon graphics, then import them to Flash)

On a new layer above each ribbon layer, trace along the center of the ribbon with the path tool, using a stroke-width large enough to completely enclose the width of the ribbon.
Space the path segments on keyframes about 3-5 frames apart.

Convert the stroked paths to fills(shapes) and use shape-tweens to create the progressive animation.
(don't try to go too far between keyframes; the shape-tweens may not work as expected)
Convert the path layers to masks.

GL
 
Cheers for the advice people - i'm thinking of trying this in After Effects. There are a couple of creative cow tutorials that look like they might put me on the right lines.

It's a bit tricky as the brief i have been given is basically "animate my logo please"...:confused: I might go all star wars and change the ribbon into a lightsaber type thing. Might look kinda cool.
 
I am not fluent in Flash but I have done similar effects in Director (which is similar). Basically you start with the finished product then erase, working from end to beginning. Then when you are done reverse it.
 
jdl8422 said:
I am not fluent in Flash but I have done similar effects in Director (which is similar). Basically you start with the finished product then erase, working from end to beginning. Then when you are done reverse it.
Click to expand...

Holy cow I didn't even think of that. Yes that's perfect, you could do that in flash easy. LOL

Only thing is getting the motion tween right but I'm sure it's just tweaking to get the proper effect.
 
This was created using Actionscript (Flash's scripting language). You can tell because it is never the SAME animation, it is all random colours as well as random directions. Click on the link multiple times and you'll understand what I mean.
 
kkat69 said:
Holy cow I didn't even think of that. Yes that's perfect, you could do that in flash easy. LOL

Only thing is getting the motion tween right but I'm sure it's just tweaking to get the proper effect.
Click to expand...

That's what I did for this a few years ago.
 
That was done for a client about 5 years ago... I'm not sure where the FLA file is (I'll post it if I can find it, the client wont mind because they don't exsist anymore).

But the way I created this one was by "cutting up" the original image then masking it out. It wasn't hard but it did take some time to get the timings right.
 
nice idea, I'm much better with photoshop than i am with flash so might give it a go in there - create loads of different layers, masking out a bit more of the logo each time then animate the layers in reverse and tween some frames between them. Cheers everyone.
 
So i've just done it in Photoshop CS3 (Extended) and it worked great - it's a brilliantly clever method to mask out the shape in reverse. Its worked really well, it was so easy to export it out as a .mov and the client really likes it!

Thanks to everyone
 
You'll have to post the video, I'm not sure about everyone else but I'd love to see the end result.
 
i'd love to but i'm afraid i'm under a confidentiality agreement as the work i'm doing is part of a national campaign due to come out soon!! It's nothing special but i'd be in big doo-doo if i broke it.
 
fluidedge said:
So i've just done it in Photoshop CS3 (Extended) and it worked great - it's a brilliantly clever method to mask out the shape in reverse. Its worked really well, it was so easy to export it out as a .mov and the client really likes it!

Thanks to everyone
Click to expand...
Exactly, but in AfterEffects it is done certainly smarter than what you did, as the mask basically adjusts itself to the image it is revealing, whereas what you did is probably a sharp edge mask that doesn't look as great. But if you are happy.
 
It's still being worked on and the photoshop version is a bit of a rough draft as there will need to be some work done in AE eventually, however i'm not really an after effects person so don't know that program as well as photoshop.

It'll do. It's not a huge part of the project like i said.
 
fluidedge said:
i'd love to but i'm afraid i'm under a confidentiality agreement as the work i'm doing is part of a national campaign due to come out soon!! It's nothing special but i'd be in big doo-doo if i broke it.
Click to expand...

Well when it's released upload a link, I wouldn't expect anyone to break client confidentiality.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back