-
How can I motion track in AE and apply it to a symbol in Flash?
I need your help!!!
I’m working on a project similar to the popular “Elf-Yourself” e-card or JibJab’s “Staring You” sendable e-cards. Basically a user can go online, upload their picture, crop out their face, and it “stick it” onto the head of a dancing character in the video. They can then share the video link to all their friends.
If you have no idea what I’m talking about, check out this video
(I hired another production team to code the flash site for me, but I am preparing all the footage and video elements myself.)Here’s what I’ve done so far:
* I filmed several actors dancing infront of a green screen & Keyed the footage in AfterEffects.
* I also used AAE to motion track the talent’s head and applied the motion to a “blank face” I created in PS (I ultimately need this blank face to be an editable movie symbol in flash so it can be replaced by the user’s picture).
* I isolated the each of the 2 layers (the dancer and the blank face) and independently exported them from AAE as a .PNG image sequence (it’s the only way I know how to maintain the transparency… is there another way?).
* In flash, I then created 2 movie symbols, one for each of the image sequences.So far, so good–sort of…
In flash, the movie symbol of the blank face tracks perfectly over the movie symbol of the dancer, BUT this is also where the problem arises.
(BTW, If you are still reading and following along at this point, thank you so much !! You rock! 🙂
Here’s my problem:
The edge of the movie symbol with the blank face is NOT constrained to the edge of the face, but rather it is the size of the document. I basically have a static movie of face bouncing around. If I were to replace this symbol with the cropped out image of the user’s face it would not move because the movie symbol does not move.Here’s my question:
How can I use After Effects to track the motion of the dancer’s head, and apply that motion to an editable symbol in Flash?The only solution I can think of right now (which makes me cringe) is to create a symbol of the face in flash and hand animate the movement to match the dancer’s head. This would take F-O-R-E-V-E-R because I’m doing about a dozen different characters. I really really really hope to find a way to do all my motion tracking in AfterEffects.
Few other possible solution questions:
* Does Flash have a motion tracking feature I’m unaware of?
* Can I export the motion tracked blank face from AAE with the transparent regions cropped out?
* -or- Can I import the image sequence into Flash with cropped layers, like you can in AfterEffects?I am so grateful for any help or insight you can offer.
(BTW, I’m using CS3 for both AfterEffects and Flash)
Thank You!
Eric Schlenker
Innovative Monkey Productions -
11 Replies
-
Hey Eric,
I was wondering if you ever resolved your problem? Basically I’m doing something very similar, where we have a video and a dynamic text field that needs to follow the video’s movements. If you solved this dilemma I would love to know what you ended up doing because I ma having great difficulties getting it to look right. (i’ve tried frame by frame and motion tweens! arhhhhh!)
Thanks for any help you can offer!
Brett
-
Hey Brett,
I figured out how to make it work! The solution I found actually allows you to grab keyframes in AAE for ANY layer property and apply them to ANY layer inside Flash! I’m pretty stoked with this solution because it saves a TON of time and allows you to use AAE’s powerful motion tracking capabilities (which beats tweening in flash any day)!
“Note: in order for this to work you must have AAE CS3 (at least I think you do). If you don’t, have fun tweening 🙁
Here’s the process:
1) Motion track your video in AAE and apply the trackpoint info (X&Y keyframes) to a null layer as the target layer. Then select the null layer, hit “P” to show it’s new position KF’s, and then click the word “position” to select ALL of it’s KF’s (they should all turn yellow).
2) With all the position KF’s selected for the null layer, choose: File>Scripts…>Convert Selected Properties to Markers. This should then create a layer marker with a black dot in the middle on the null layer for every frame that has a position keyframe. (If you don’t see the markers with a black dot in it then your script might need to be replaced… I can send you the script if it doesn’t work)
This feature is new to CS3 (I think) and enables you to embed “Flash Video Cue Point and Parameter information” into the .flv video that you render from AAE. Basically every one of those layer markers with a black dot should contain the X&Y values for that layer. To see what I mean, double click on one of the markers and look at the bottom half of the Layer Marker dialogue window. The Parameter Name should be “Transform_Position” and the Parameter Value should have a bunch of numbers in it… this is your X&Y coordinates for the null layer for that frame.3) Add the comp to the render queue and change the output module format to “Adobe Flash Video.” You can still change all of your normal render settings to suit your project needs.
For my particular project I needed the .flv to maintain its transparency so I selected channels: “RGB + Alpha” Depth: “Millions of Colors+” Color: “Premultiplied (Matted).” If you don’t have any transparent areas, just keep your channel setting to the RGB default.
Anyways, when you finish choosing all your billion&1 render settings, go ahead and render out your .flv
**Move to Flash**
4) Once your .flv is rendered, open up a new flash project. I used ActionScript 3.0 and I’m not sure if it will work with 2.0… feel free to give it a shot and let me know.
5) Import your .flv to the stage as a movie clip on a new layer.
6) Put your Dynamic text field thing that you were talking about for your project on a new layer as well (or whatever graphic or element that you want the position keyframes from AAE applied to)
7) Create a third new layer and name it “Actions.” Copy this script to the actions panel:
**********************************************************************************
import fl.video.*;
var prop:String;
var obj:Object;
var val:*;YOURMOVIE.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
function cp_listener(eventObject:MetadataEvent):void {
obj = eventObject.info.parameters;
for (prop in obj)
{
val = obj[prop];
if (prop == “Transform_Position”){
var results:Array = val.split(/,/)
YOURTARGETLAYER.y = Number(results[1]);
YOURTARGETLAYER.x = Number(results[0]);
};
}
}
}**********************************************************************************
You will want to change “YOURMOVIE” to whatever instance name you gave your flash video that contains the cue point markers from AAE and also change “YOURTARGETLAYER” to whatever instance name you are giving your target layer (in your case the dynamic text layer thing).
This script basically looks for (or “listens” for) a MetadataEvent… AKA the cuepoint markers you added in AAE. When it finds one, it is going to take the Transform_Position information (in this case an X&Y value) and apply it to the layer of your choice.
Hopefully it will work when you test the movie. It took me a few times to fiddle around with it to get it to work, but this is also the first time I have ever used Flash!
I think I made it sound a lot harder than it really is. After you do it once or twice, the whole process only takes about 2 minutes total… which beats 2 hours of frame-by-frame positioning layers by hand. The end result is FLAWLESS and looks incredible.
I hope this helps, Good Luck!
Eric Schlenker
-
Thanks for that Eric,
Pretty easy in the end aye. (looked complicated but once I got in there it was sweet). Funny that you said it was the first time you used flash cause it was my first time using after effects. ha Gotta love CS3.
Thanks for the quick reply!
-
Hi Eric,
This advice was amazing works like a charm, did you find a way to name the cue points in after effects so that flash can read them? at the moment i am having to do each one individually!!
Thanks,
Pablo
-
Hello Eric,
You mentioned that if there weren’t little black dots on the markers, the script might need to be updated. Can you send that to me/tell me how to fix that?
Thanks!
-John Morton
john@johnfmorton.com
https://supergeekery.com -
After doing some digging on the web, I found the updated version of Convert Selected Properties to Markers.jsx that Eric Schlenker mentioned above.
On the official Adobe blogs there is a video tutorial called “Creating Interactive Video with After Effects and Flash” by Michael Coleman. You can see it at the URL below.
https://blogs.adobe.com/keyframes/2007/10/creating_interactive_video_wit.html
In that tutorial, he provides a download of the files he shows. Included in that download is an updated version of Convert Selected Properties to Markers.jsx that will fill in a “name” value when creating your markers. If there is nothing in the name field, Flash can’t detect the cue point event.
-
Hello,
If I wanted to create the “Elf your self” video WITHOUT flash and just use AECS3, what would be the basic procedure be?
Any help would be appreciated.
Thanks,
Simon
-
You’re the man!
Many thanks for that!
Really appreciated.
Simone -
Hi John,
I was interested in this thread. I need to track some videos and export the cue points on flash. I’ve done perfectly all the process in the link you posted. The only think is that when I use the “convert properties to markers” AE just creates some markers without any name (so no black square inside the marker) and it doesn’t work when I use it in flash. I think it’s a script problem.Now I’ve checked that page of the tutorial and I cannot find the updated script to download…
Whoever has got it could please send to me at this address:
s.nunziato@gmail.com?
Thanks in advance
simone -
Hello Simone,
It’s been a while since I did this, but I think the updated script is part of the tutorial download.
I’m basing that on a comment late in the thread there though “If you’re having problems with the script, you may need to download the tutorial files which contain a new version of the “Convert Keyframes to Markers” script. Just replace the existing script in your After Effects application folder with the new one and you’re good to go.”
Here’s a link that the tutorial mentions:
https://share.acrobat.com/adc/adc.do?docid=82b95ff3-738a-11dc-b75f-151d3f6d9313
Good luck!
-John
—
site: https://jmx2.com
blog: https://supergeekery.com
Reply to this Discussion! Login or Sign Up