Skip to main content
G
geordiem74078114
Inspiring
March 3, 2017
Question

After Effects 2017 Panel Bootstrap skin + jQuery Spinner plugin

  • March 3, 2017
  • 3 replies
  • 1922 views

Hi all, been working on this the last couple of days, it's not finished but good enough to share.  I've tried to replicate the current AE 2017 look (default dark theme) where possible:

AE Editor UI 2 - JSFiddle

Most of the UI is "hacked" Bootstrap CSS, later I'd like to do this correctly using compiled CSS tools.  The Spinner is implemented as a jQuery plugin and probably needs some work.  The Sliders are a Bootstrap plugin which I've also skinned and need minimal javascript.

I'll be posting all this to GitHub soon so everyone can collaborate.  Let me know if there's any commonly used UI elements I've missed.

TNKS!

Geordie

    This topic has been closed for replies.

    3 replies

    J
    Jakob Wagner 2048
    Inspiring
    February 4, 2019

    Thank you! You are awesome! Is it on Github?

    phlexib
    phlexib
    Inspiring
    March 4, 2017

    Looks awesome !!

    Thanks for sharing.

    In the very useful book Adobe Photoshop HTML Panels Development by Davide Barranca, which also works just fine for After Effect, He has a Chapter for syncing your panel Color Scheme with the host Application, adding an event listener :

    com.adobe.csxs.events.ThemeColorChanged

    and changing the csInterface.gethostEnvironment().appSkinInfo ;

    I don't see anything missing but : I have no idea if it's possible or not, but I would love a drag and drop zone with options.

    awesome work.

    Ben

    G
    geordiem74078114Author
    Inspiring
    March 9, 2017

    I'm in the process of creating a test panel that works across Photoshop, PPro, After Effects and Illustrator.  Alas the Chromium version used by CEP 6.1 and 7 is 41.x and Chromium didn't get CSS variable support till 53.x so I'm going to have to work around it with JS.  Was always a stop gap until I integrate Bootstrap fully into my Gulp build system (which I also want to share eventually)  Stay tuned!

    Mathias Moehl
    Community Expert
    Mathias MoehlCommunity Expert
    Community Expert
    March 3, 2017

    Looks great! For use in CEP panels it would be great to have something build-in that adjusts it to changing UI brightness.

    Mathias Möhl - Developer of tools like BeatEdit and Automation Blocks for Premiere Pro and After Effects
    G
    geordiem74078114Author
    Inspiring
    March 3, 2017

    Thanks!  Yup I want to make the color/theme changes work correctly.  All the colors are stored as CSS variables so only need to change them in one place.  I've seem some panels in the samples folder that plug into theme change events so shouldn't be too difficult.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices