Home How-to Video tutorial: “Elf Yourself” yourself – Personalized video on the web

22 Comments

1. 

   iBrent

   November 13, 2009

   Awesome! Thanks for sharing this Serge.

   Do you think there is a way to get face motion tracking in Flash, and create the experience at runtime, thus allowing people to upload video and replace with their face?

   Thanks,

   iBrent
2. 

   Serge Jespers

   November 13, 2009

   In theory, yes… But the result will not be as tight as doing the motion tracking in After Effects. In theory, the user could select a color to track. You could then track that color with some ActionScript but the result greatly varies based on various factors like CPU and how unique that color is in that video… I would not recommend it…
3. 

   Jamie Scanlon

   November 13, 2009

   Hi Serge,
   I’m a Flex engineer here at JibJab and actually the person who built our ‘Starring You’ head tracking technology.

   I definitely appreciate your kind words and your interest in how we built ElfYourself.

   Best,
   Jamie
4. 

   Bart Stassen

   November 16, 2009

   looks so easy the way you explain it, good job :)
   I already did some motion tracking work with AE in the past … very powerfull stuff.
5. 

   Jose David Menendez

   November 23, 2009

   Great tutorial, how they make a moving path to use in choose a face?
6. 

   Flash Dev

   November 24, 2009

   Thanks for the tutorial. Really great stuff! Elf Yourself is really fun and I do get requests for this kind of work – so this is a great help.

   My next problem is my clients usually want to be able to share this thru YouTube, etc…

   Any suggestions how to output this as shareable video instead of flash? Are there tools for this? I have been hitting a lot of dead ends searching.
7. 

   Jose D. Menendez

   December 2, 2009

   Great tutorial:

   I have problem creating markers in After effect.

   Im selecting in track point a attach point but when i create a markers and click to see a information of marker not create a name and when I export work flash never read a track point.

   Only need know,

   Why the function convert selected properties to marker.jsx not create a markers name?
8. 

   Serge Jespers

   December 2, 2009

   
   Jose D. Menendez:
   

   Why the function convert selected properties to marker.jsx not create a markers name?

   Not sure what is going wrong there. Will check with a colleague in the morning.
9. 

   dogimo

   December 14, 2009

   Hi and thx for the tutorial.
   do you know if it’s possible to get an updated version of the script “convert properties to markers” since the one provided with cs4 doesn’t name markers so it doesn’t work on flash ? or maybe you know where to find it, the original link on the adobe blog posted by Coleman doesn’t work. Or maybe you’ve find another solution to bypass the issue.
10. 

    Serge Jespers

    December 14, 2009

    Not sure what is going on with that script. My machine has a fresh install of CS4 so should be exactly the same as yours…
11. 

    dogimo

    December 14, 2009

    I work on a pc, maybe this is the difference. I’ve managed the problem modifiyng the jsx file myself by replacing line 48 with :
    existingMarker.cuePointName = existingMarker.cuePointName;

    instead of :
    existingMarker.cuePointName = time; which was naming each marker with the current time. so now you have to create the first market, name it as you wish then apply the script to it and all the markers will be named as the first one, so it will go fine on flash.
12. 

    dogimo

    December 14, 2009

    Serge, regarding your tutorial, do you know a way to convert the tracker point 2 rotation informations to rotation ?
13. 

    vamapaull

    December 17, 2009

    It’s not working… I tried everything… Every flv has some cuePoint error (and I tried more then 40 video files until now).

    I believe the problem is the “Convert Selected Properties to Markers.jsx” file.
14. 

    Serge Jespers

    December 17, 2009

    For those having problems with the script, please make sure that you have updated your version of After Effects to the latest available version. Use the Adobe Updater to make sure you have the latest version.
15. 

    AtALoss

    February 12, 2010

    After updating my script in AE, and converting the markers for my motion tracking (Multiple motion tracks on the video) and exporting to FLV it all seems good to go. But when I import the video into flash and then go into debug, it throws an Illegal Cue Point error. I’ve spent hours and hours and can’t get this to work. Can someone please tell me what I’m doing wrong?
16. 

    Howard

    February 17, 2010

    Hi Serge,

    I like your tutorial and it did work for me, now I was wondering how I could make a 3d plane follow and make is turn from side to side like this website http://www.theecodance.com. I hope you can point me somewhere that I can learn how to use 3d object with minimal knowledge of AS3. Thanks.
17. 

    Robert

    April 1, 2010

    Hello!

    With this tutorial, I’ve been able to also add rotation and scale in a similar manner, but I can’t stop there. How can I add data for more than one character? I tried using multiple movie clips to contain the data, but this causing problems with the sync once it is uploaded to web. Is there any way to add multiple character data to the cue points? Many Thanks, Robert
18. 

    Serge Jespers

    April 2, 2010

    Hi Robert,

    I think in this case you may want to export the cuepoints as an XML file instead of embedding it in the FLV.
19. 

    zico

    June 13, 2010

    Fisrt, sorry for my english…
    This code no worked for me. The problem was that my AFX is not in english and, the consequence is that the code is different :
    is not : var values:Array=paramObj["Track Point 1_attach Point"].split(/,/);
    is (in french for me): var values:Array=paramObj["Point de suivi 1_Point d'attache"].split(/,/);
    So, if your AFX is not in english, your obliged to modify your code. The name parameter is not the same…

    Thank for this. Your save my life !
    ;-))
20. 

    Wally

    December 9, 2010

    Hey mate, thanks for the AWESOME tutorial, just what i was looking for my project at work.
21. 

    laFunk

    December 16, 2010

    @dogimo THX FOR THAT SCRIPT HOTFIX!

    Regarding the rotation information, i used some simple trigonometrics to achieve that:

    var values:Array=param["Track Point 1_Attach Point"].split(/,/);
    var values2:Array=param["Track Point 2_Attach Point"].split(/,/);
    var myRadians:Number = Math.atan2(values2[1]-values[1], values2[0]-values[0]);
    var myDegrees:Number = Math.round((myRadians*180/Math.PI))+90;

    Thanks for the tut, Serge =)
22. 

    gl

    December 20, 2010

    Hi Serge – many thanks for an exceptional tutorial; you make the complicated impossible seem easy! I, too, would really appreciate an updated tutorial showing how more than one character can be tracked/added as this would make a great how-to into a spectacular one!

    Perhaps you, or someone else with more than a fleeting knowledge of flash could help me with this – the problem I have is adding the face once the video is in flash. I import the png file, convert to a movie clip and give it an instance. It plays fine, but I can’t position it on top of the existing face in the video. In order for it to be positioned in the right place when compiled, I have to put it to the left and above the video and takes quite a bit of tweaking to get this right…it would be great to have an answer to this – thanks again!!