vector graphics perspective effect in Final Cut Express

August 6, 2005 5:06 AM

Mac Final Cut Express and vector graphics, maybe Flash: How to make a vector graphics motion sequence to be incorporated into a Final Cut Express video.

I am making a kind of travel guide video (final destination DVD and web) and want to animate a vector graphics city map that I am making (in Fireworks). I want to have the map skew from flat overhead view to a foreshortened perspective as shown here. I know I can make a sequence in Flash and import it to FCE. This kind of skew is simple to do in Fireworks or Photoshop, but in Flash (me not so good) when I choose "skew" it just tilts the graphic sideways.

Is there a way to do this in Flash that I am missing, or is there a free or cheap OS X program I can use to edit a sequence like this. Bonus if I can then zoom in to show a single city block or intersection.

posted by planetkyoto to computers & internet (7 comments total)

Planet, are you trying work with flash or FCE?

I'd do this in After Effects (or Motion with a plugin). Much easier. Both have the ability to do a corner manipulation of an object. I apologize that I do not know flash (if Grumblebee was around I know he does.)

You're really doing vector graphics animation (which flash is good for) as opposed to editing. This is entirely a flash question (if that's a tool you own) not as much a FCE question.

For totally free, there's cinepaint (formerly filmgimp) that might work...but I"ve never used it.
posted by filmgeek at 10:38 AM on August 6, 2005

If you have OS X Tiger, install the developer tools and check out Quartz Composer. I can't guarantee that it will do what you want, but it is free and worth trying.
posted by ijoshua at 1:09 PM on August 6, 2005

To do this in flash:
1) Select your drawing with the selection tool
2) Then click on icon for the free transform tool (you'll see a bounding box, similiar to what you'd get in photoshop)
3) Move your mouse pointer over a corner, hold ctrl + shift, click and drag the corner. Now you can skew it the way you want to.
**If this method doesn't work, it's likely because it's been imported into an object of the type 'graphic'. If that's the case, I'll get to what to do below.**

Zooming in on the drawing just means it needs to be larger. You do that with the free transform tool as well:
1) Select the drawing
2) Click the free transform tool
3) Click and drag a corner while holding shift and alt.

Now, you want to animate it. To do that you need to use motion-tweening, which is somewhat more tricky. There are tutorials on motion tweening in the flash help files (atleast in flash 6 and 7), and also plenty of them on the net. It works by creating a set of key frames on a timeline, and letting flash animate what happens between them.

The problem is, flash does not know how to skew a "graphic". (It's treated as a symbol. Nevermind what that means.) I dont know for sure, but it may be that when you import a vector drawing to flash from fireworks, all of it is imported as a graphic. And you can't skew the graphic, only what's inside it.

To skew what's inside a graphic:
1) Double click the graphic. Now you're "inside it", and can edit it contents.
2) Make sure every layer in it is unlocked. (There may be only one layer).
3) Select all of what's inside the graphic, and skew that as described above.
4) Click on "scene 1" to return to the main timeline.

You'll have your drawing skewed, but you automatically animate this process. You'd need to create every frame of the animation by hand, duplicate your graphic in your library, gradually skewing the contents of every individual duplicate of your original graphic. That might get tricky, but if you really need to animate the skewing, email me if you have problems. Heck, send me your .fla file, it'll take 3 minutes to do this entire animation really. (I'm going on vacation though, so you'd have to get in touch within the next 6 hours!)

Now animating the enlargement of the skewed graphic won't be a problem. Flash will do that automatically, you just need to tell it how you want it to be in the first frame, and how you want it to be in the last frame. Here's a basic walkthrough:
1) If your drawing isn't of the type "graphic", select it, right click it and select 'convert to symbol'. In the window that pops up, select "graphic" as it's behaviour.
2) Create more frames on your timeline. You do this by clicking on your layer in the timeline and then pushing the f5 button. You'll see the new frames in the timeline. For this example, create a total of 10 frames.
3) Right click on any of the frames you've created and select 'create motion tween'.
4) Right-click on frame 10, select 'insert new keyframe.' You will see a black bot appearing in the frame, and a arrow going from your 1st to your tenth frame.
5) With the 10th frame selected, the graphic will be selected as well. Click the free transform tool and enlarge it as described above.
6) Now if you press enter, you should see your graphic being gradually enlarged on your stage.

These instructions work in Flash MX 2004, it may not work in, for example, flash 5.

Damn that was long, hopefully I didn't miss something. It's hard to explain and understand, but very easy and quick to do once you get it. Really, if you send me the .fla within 6 hours I'll get it done for you, and you'll be able to see what I've done as well.
posted by cheerleaders_to_your_funeral at 9:35 AM on August 7, 2005

BTW, I know Final Cut allows a kind of motion tweening as well, with a similiar keyframe system as the one flash uses. It may even allow animating skews. However it very likely won't deal with your drawing as a vector drawing, so it might look crappy when you zoom in. How you might do it in Final Cut, top of the head: Save a very high resolution copy of your graphic in photoshop, as a transparent .png. Import that into Final Cut, skew and animate (if it's possible).
posted by cheerleaders_to_your_funeral at 9:44 AM on August 7, 2005

*the Final Cut version I've tried that did animations wasn't Final Cut Express. Dont remember what version it was, but it wasn't Express. Don't know if it's possible in that one.
posted by cheerleaders_to_your_funeral at 9:48 AM on August 7, 2005

Fimgeek, you're probably right that it's a Flash question, but because I couldn't figure out whether Flash can do it, I made it perhaps too fuzzy a question. Cheerleaders, I'll try that and report back tonight. Thanks.
posted by planetkyoto at 8:09 PM on August 7, 2005

Well, I finally did get it to work in Flash, by breaking it apart and using shape tween. I had to put a whole lot of shape hints in there to keep it from loking like a plate of spaghetti in the tweened stages, but it did look presentable after more than 20 hints.

However, I found that FCE does indeed have a panel (motion --> distort) that can create this kind of perspective in my graphics, so I'll probably be using that.

However However, now that I've found how easy it is to import Flash movies into FCE, I'm certainly going to take advantage of its abilities, so the exercise was very good for me.

Thanks to everyone who replied.
posted by planetkyoto at 9:05 AM on August 10, 2005