How to create a AE plugin which converts fps -> milliseconds?

[heikow573428]

Hi Community,

I'm new here and interested in creating a After Effects plugin which displays me fps to milliseconds.

Reason:

Reason why I want something like that is because I'm doing a lot UI animation and interactions and constantly get asked by developers in milliseconds. Ideally I'm looking for a plugin which has some script UI panel so I can place it in my AE workplace. I already created an expression version which is a temporary solution but I would prefer to have it as its own panel.

Question:

I'm new to creating a After Effects panel and so far I can't find any tutorials how to do it. I know the basics of javascript / and will hack my way around if thats possible but I'm not by any means a developer.

Where can I get started and if you have seen something similar even better.

Thank a lot in advance,

Heiko

[Alex White]

Hi,

Here are the best tutorials you can ever find.

https://www.provideocoalition.com/after-effects-extendscript-training-complete-series/

David covers almost everything there, including the panels.

[charlesbevan]

I had a similar need a while back and wrote a quick script that takes some selected keyframes and shows the timespan in milliseconds.  Not a panel but maybe this is all you need? (or at least a start)

As far as I know, panels can't react dynamically to interactions in the rest of the app (like the the timecode display does) so I think you'd have to click something to refresh the panel, regardless.

{
    // cb_KeyframeTiming.jsx
    // v1.1 - 09/04/2018
    // by Charles Bevan (but written really quickly ... sorry if there are bugs)
    function time2ms(t) {
        return Math.round(t*1000) + "ms";
    }
    function roundSec(t) {
        return Math.round(t*100)/100 + "s";
    }
    if (app.project.activeItem)
    {
        var selectedItems = app.project.activeItem.selectedProperties
        var count = 0;
        for ( var x = 0; x < selectedItems.length; x++)
        {
            if (selectedItems instanceof Property && selectedItems.selectedKeys.length > 0) {
                var keyCount = selectedItems.selectedKeys.length;
                var propertyName = selectedItems.parentProperty.name + " > "+ selectedItems.name;
                var firstKey = selectedItems.selectedKeys[0];
                var lastKey  = selectedItems.selectedKeys[keyCount-1];
                var firstKeyTime = selectedItems.keyTime(firstKey);
                var lastKeyTime  = selectedItems.keyTime(lastKey);
                var timeDiff     = lastKeyTime - firstKeyTime;
                alert( "Keyframe Timing Report\n" + propertyName + ":\n" +
                    keyCount + " keyframes selected\n\n" +
                    "Those keyframes span " + time2ms(timeDiff) + " (roughly " + roundSec(timeDiff) + ")\n\n" +
                    // Debug timing               
                    time2ms(firstKeyTime) + " (" + roundSec(firstKeyTime) + ")\tFirst Key (In-Point)\n" +
                    time2ms(lastKeyTime) + " (" + roundSec(lastKeyTime) + ")\tLast Key (Out-Point)\n" +
                    time2ms(timeDiff) + " (" + roundSec(timeDiff) + ")\tDifference (Duration)",
                    "cb_KeyframeTiming", false);
                    // yay we found a property with selected keyframes!
                    count++;
            }
        }
        if (count == 0) alert("Whoops!\nYou need to select a few keyframes first.", "cb_KeyframeTiming", true);
    } else {
        alert("Whoops!\nYou need to select one comp so I can search for selected keyframe.", "cb_KeyframeTiming", true);
    }
}

[IL_JI]

Have a look at Inspector Spacetime, which Adam Plouff (Battle Axe) developed for Google:
The script has a "Counter" button:

"Created with every spec, a counter is also available as its own layer. Create a millisecond counter with a defined start and end point. Start the timer at the beginning of the transition to easily illustrate the global start time."