31 Replies Latest reply on Oct 10, 2017 6:02 PM by Premiopolis

    What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?

    Premiopolis Level 1

      Or any HTML content. Would love the ability to create an HTML file, format it 3840x2160 or 1920x1080, etc, give the body background-color an opacity of 0, and and run full HTML/CSS/JS directly in a timeline.  It's a little out there, but would be a great extra way of getting lower 3rds and any other info quickly, easily, dynamically into an edit.

        • 1. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
          Bruce Bullis Adobe Employee

          It's not possible today.

           

          To my knowledge, you're the first to request such behavior—which, after further consideration, is kind of odd, because it sounds pretty compelling.

           

          When you say 'format it 3840x2160...', how would you propose doing that? In the HTML, or in some PPro-provided sizing layer?

          • 2. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
            Premiopolis Level 1

            I was imagining the dimensions would be defined in the HTML, standard CSS

             

             

              body{

               width:3840px;

               height:2160px;

               background-color:rgba(0,0,0,0)l;

              }

             

            But re-thinking it, you might even be free as the editor/graphic designer to actually ignore the defining the body height/width, under the assumption that the sequence frame size effectively defines the browser window.innerWidth and .innerHeight.  More important is the allowance for background-color:rgba(r,g,b,0); for alpha-channel-style support on any and all HTML objects.

             

            The easiest and obvious path I imagine most users would choose would be to create and clone a bunch of single, static html pages, changing, say divs that hold Name and Title info per each page.

             

            But the more compelling thing for, say, a sports program, a game show, science shows, or other stats-heavy programming would be to allow full JavaScript coupled with an ability to pass in data from the playing sequence, things like...

              - Timecode at Playhead

              - ClipNameAtTrackV3

              - (or more dramatically) MetaDataField[*FieldName*]ForClipOnTrackA5, where *FieldName* is any field from the PPro MetaData display.

             

            Opens up a whole world of options, including...

            - Out-sourcing typing and spell-checking to producers and assistants

            - Quickly integrating web content, including animated web content, into programming

            - Increasing dynamic content in programming

            • 3. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
              jingtaotan Level 1

              Sounds like a very cool, inspiring idea

               

              What if instead of HTML, you used the Canvas API in the browser to draw whatever lower-thirds graphic you wanted, save the Canvas data as a Blob, then write it to disk as a temporary image (PNG) file, and import it into Premiere?

               

              If you need to allow the user to make changes to the Canvas drawing in the panel, you could repeatedly overwrite that temporary PNG file, and Premiere (should) refresh the image used on the timeline.

               

              Just an idea that might be worth trying.

               

              Saving HTML5 canvas as image | We Work We Play

              HTMLCanvasElement.toBlob() - Web APIs | MDN 

              • 4. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                Premiopolis Level 1

                jingtaotan wrote:

                 

                What if instead of HTML, you used the Canvas API in the browser

                Funny you should mention that.  I've got dom-to-image-master library downloaded waiting for me to run tests (no idea if that's a way to go or if your posted links (thanks for including) might be better.  Totally an option, and one that would work across multiple edit systems.

                 

                What's so compelling about the Adobe approach is creating a dynamic and increasingly open eco-system, from interactivity between apps to the increasingly powerful SDK.  Going with HTML instead of exported PNG would mean your text is potentially (hopefully) vector graphics, so that conceivably zooms into a page would retain resolution.  Of course that assumes a) this is possible; b) if so, how HTML renders to the screen.

                • 5. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                  jingtaotan Level 1

                  Seems like it may be possible to turn the contents of a Canvas element into SVG, that should solve the raster/vector problem?

                   

                  Fabric.js Javascript Canvas Library

                  • 6. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                    Premiopolis Level 1

                    There, as far as I'm aware, you run into Premiere's current limitations.  It handles AI files well enough, but not SVG.

                    • 7. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                      Premiopolis Level 1

                      Possible workaround: Embed an SVG object in a Photoshop or AI file, update the SVG, and see if that works.  Haven't tested yet.

                      • 8. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                        johnt53984649 Level 2

                        Wait, I thought Premiere didn't do continuous rasterization the way After Effects could.  Even when you import an Illustrator file, I thought it always rasterizes it.  Am I wrong, did they change that in an update or something?

                        • 9. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                          Premiopolis Level 1

                          Great alias, "wastingyourlifeaway" (sounds like one too many hours toiling away in a darkened room)

                           

                           

                          I just tested.  A couple of things:

                            - In Illustrator there doesn't seem to be a way to an external SVG.  It's vector graphics, and embedding, as opposed to linking, is the only option.

                            - In Photoshop you can link to an external SVG, so you get the benefit of changing the SVG to update the PSD, but you nonetheless lose resolution when scaling.

                            - There's actually no reason to export HTML to SVG.  If you can make HTML dynamic, you can do it to SVG as well.

                           

                          But going back to the bigger picture:

                           

                          The goal of all of this is to find ways to gain powerful, coherent control over large numbers of motion graphics, making use of Adobe-based templates to control the look, and external data sources to deliver the content.  With this architecture you would get huge benefits:

                            - Change a template, and you affect everything in the show using based on that template

                            - Re-assign any particular text graphic to a different template (say "ID Lower 3rds Left" to "ID Lower 3rds Right"), to surgically make one change, retaining the source data (e.g. name & ID)

                            - Change a data content for any entry at any time, in such a way that responsibility for proper info, spelling, legal concerns etc. lies outside the edit bay -- and text graphics update with minimal down time in the edit bay.

                           

                          For shows that use a small number of lower 3rds or maybe use a lot of them, but have been around a few seasons, you don't necessarily this level of sophistication.  But as shows become increasingly elaborate with their integration of style elements and content -- think sports, game shows, new generation science shows, and up and coming web content -- especially during the development stage, the above strategy can be mean time & money savings, fewer errors, and quantum improvements in style and creativity.  Suddenly you're able to do develop and continually update large numbers of sophisticated, motion graphic text elements.

                           

                          We're currently using a custom-developed system that can take Adobe templates (PS, AI, ID, and esp. AE).  That system generates external files using rigorous naming conventions so that updates appear in the timeline the moment the render finishes.  This external file approach has certain benefits in that it can be used across all editing platforms: Premiere, Avid & FCP.

                           

                          But the All-Adobe approach would conceivably be a smoother overall workflow environment.

                           

                          Live Text Templates held out the promise not using external files, but it turns out there are a few down-sides:

                            - The data is maintained in the edit system, so entries, updates, typos, etc. remain the burden & responsibility of the editor.

                            - The data content is reviewable in with the kind of oversight and management power you get from a database or spreadsheet.

                            - Switching between templates requires re-entering the data content.

                           

                          Custom Panels are not yet an alternative because

                            - Automating the importing of Comps from AE to PPro is not yet possible

                            - Moving data between AE and PPro is not yet there (though, per Bruce's suggestion, you could create temporary data transfer files to compensate)

                            (Bruce, LMK if I'm wrong about this.  Always looking for better ways to achieve this)

                           

                          The HTML idea outlined above seems like an intriguing extra opportunity.  You wouldn't get nearly the design sophistication of After Effects, but they'd be quick to create, and can leverage the expertise of web designers, coders and data wranglers.

                          • 10. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                            johnt53984649 Level 2

                            I don't know why my e-mail still shows up as my username.  The username should be John Travolski.  I only use that e-mail to make accounts that I aren't particularly important.  It's kind of annoying how many people have commented about my username at this point.  When I'm logged in, this is what I see on every post:

                             

                            4d066640a2864aae9d78078093a737f7.png

                             

                            I don't know why everybody else sees "wastingyourlifeaway."

                            • 11. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                              Premiopolis Level 1

                              So last night along came a perfect example of where this feature would be very useful.  Clients call needing to generate 13 basically-the-same, but-with-slight-changes close credit rolls.

                               

                              So we know

                              - the contents will change by some small amount per episode.

                              - each credit roll has to be styled exactly the same

                              - The styling will be changed multiple times before we've completed generating the credit roll.  Each minor tweak will need to be applied to all 13 episodes.

                               

                              HTML/CSS/JS offers great tools for making this a practical, efficient process:

                              - You can assign classes to various parts of the roll

                              - You can change any individual line

                              - Results cascade

                               

                              I don't see Premiere or After Effects, nor even Illustrator or Photoshop having the kind of flexibility you can get from an HTML environment.

                              But of course, none of those apps accommodates an embedded HTML page, so I can see great solution is very close, but just can't make that final leap.

                              I'm looking into Generating SVG from HTML, or even perhaps figuring out a way to dynamically generate SVG text as a solution, but it would have been great to create some HTMLs and just link to them in AE or PPro.

                              • 12. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                Bruce Bullis Adobe Employee

                                I think the tools available in after effects exceed what will be possible via HTML, for the foreseeable future… Which doesn't mean your idea isn't worth trying. 

                                 

                                You could write a PPro Importer plug-in,  that interpreted a webpage into pixel buffers.

                                • 13. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                  Premiopolis Level 1

                                  In terms of doing great visual FX and stellar styling, HTML is no match for AE, absolutely agree.

                                   

                                  But when it comes to close credits, those are typically simple enough to look at, plain white text on black background, but there's enormous complexity, confusion and all kinds of political battles going on behind the scenes as things get closer to lock, and my impression is AE is not geared toward this kind of unsexy text management type stuff.

                                   

                                  So to give an example: I've got a credit roll built of data that comes in three different types, say Names, Titles, and a Header

                                  A Header would be something like "Hong Kong Production Unit"

                                  A Title might be "Stunts"

                                  Names "[some long list of names]"

                                  Production might ask, on Monday, for Header to be centered in the roll, Title right-justified, Names left-justified, meeting in the middle, top-edge aligned

                                  Then on Tuesday we all take a look and decide, no, everything centered, one thing after another, Header under one style, Title at another, Names at yet another.

                                  Then on Wednesday they change their minds again.

                                  And through all of that they are making text additions and subtractions and spelling fixes

                                   

                                  I've got the credits list for each show in a database, that can generate JSON files which HTML can suck up and process producing a perfectly styled roll in a split-second, and It doesn't take a lot of CSS and JS to keep up with any and all unreasonable production demands.  The cascading nature of HTML and the ability to make style changes against classes makes this quick to apply.  Even changing an crazy long list of thank you's into a wider 4-column block is a snap.

                                   

                                  But try doing the same thing with AE, and -- to the best of my knowledge -- you run into all kinds of challenges with placement and styling that really slow you down, not to mention you have to chase any style changes across (in this case) 13 episodes. This is not what AE is really about.  So that's where HTML integration into Adobe products would be very helpful, not for sexy text graphics but for the visually simple, clerically complex ones.

                                   

                                  You wrote:

                                  [Bruce Bullis]

                                  You could write a PPro Importer plug-in,  that interpreted a webpage into pixel buffers.

                                   

                                  Sounds exciting.  How would I begin to do something like that?

                                  • 14. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                    Bruce Bullis Adobe Employee

                                    To some, those challenges of placement and styling are a career.

                                     

                                    [Bruce Bullis]

                                    You could write a PPro Importer plug-in, that interpreted a webpage into pixel buffers.

                                     

                                    Sounds exciting. How would I begin to do something like that?

                                    Here's the PPro C++ SDK; feel free to reach out to API Engineer Zac Lam with any questions; tell him I sent you.

                                    Premiere Pro Developer Center | Adobe Developer Connection

                                    • 15. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                      Premiopolis Level 1

                                      Bruce Bullis wrote:

                                      To some, those challenges of placement and styling are a career.

                                      So wait no HTML integration on the horizon because Adobe is out to protect jobs for closing credit roll designers?  I certainly appreciate the sentiment, but we'd have to switch over to Adobe Forums' "labor rights & protections" discussions, which I suspect no one has set up yet.  Integrating something as novel as this would open up all kinds of new opportunities, which I hope would inspire credits designers with new tools on top of the great ones Adobe's already created.  Feature request!

                                       

                                       

                                      Sounds exciting. How would I begin to do something like that?

                                      Here's the PPro C++ SDK; feel free to reach out to API Engineer Zac Lam with any questions; tell him I sent you.

                                      Premiere Pro Developer Center | Adobe Developer Connection

                                      No way to do it via some ExtendScript route?   C++ only?  Unfortunately I'm not familiar with it.  Perhaps time to learn. 

                                      • 16. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                        Bruce Bullis Adobe Employee

                                        C or C++ are required, not an interpreted language, for pushing pixels in a timely fashion.

                                        • 17. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                          Premiopolis Level 1

                                          Bruce Bullis wrote:

                                           

                                          I think the tools available in after effects exceed what will be possible via HTML, for the foreseeable future…

                                          Ok, so taking you up on AE route, here's the challenge:

                                          I've got a credit roll.

                                          First line is a title: "Script Supervisor"

                                          Second line is a name: "Leo Tolstoy"

                                          Then a little space followed by another title/name pair, and say a 3rd batch with 1 title and 2 names

                                          etc. etc. plus exceptions to the pattern like a few logos, columnar titling, etc.  But at this point keeping

                                           

                                          Of course I can brute force all this in manually, meticulously building a credit roll controlling all the fonts, sizing and styling as I go, but I'd rather not have to do that.

                                           

                                          I'd rather, however assign each entry a style.  Then as the various demands and changes come down from production I can change the font of a single class, and have it ripple through the entire credit roll.

                                           

                                          Is there any way in After Effects to do this?  That's my first step (If so, the second step is filling in the data from an external data source using a custom panel).  In the land of HTML you create divs and with classes and then apply CSS changes to those classes and everything cascades into place. I'm not aware of any Adobe product that can achieve the same effect with the same amount of ease and control.  If I'm wrong and Adobe has a great solution, I'd love to see it.

                                          • 18. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                            Bruce Bullis Adobe Employee

                                            They're not from Adobe, but numerous ExtendScript-based solutions similar to the workflow you've [above] are available, for After Effects.

                                             


                                            aescripts.com

                                             

                                            Also, scripting aside, your workflow reminded me of this tutorial, which I found helpful:

                                            How to create text templates for Premiere Pro | Adobe After Effects CC tutorials

                                            • 19. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                              Premiopolis Level 1

                                              Text templates I'm familiar with, as well as credit roll templates, but this is different.  The Live Text Templates works for handling global changes across a bunch of single page graphic text elements in one timeline, but can't address a credit roll with it's long list of entries and the repeating patterns of font stylings.  The goal is to generate a super flexible credit-roll system, a system that make it possible to edit the text and do global font changes per the whims of the production team. 

                                              • 21. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                ETorr Level 1

                                                Per Bruce's suggestion I've been looking into the PPro C++ SDK.  No idea if this is going ot eventually bear fruit, so in the meantime, wanted to re-up this thread with a real-world example of when this would be of great benefit:

                                                 

                                                We've got over 100 videos in production / post.

                                                Each video has an Intro card that consists of stylized text and a unique graphic element.

                                                 

                                                The stylized text we can handle using Live Text Templates coupled with a Custom Panel which references an external data set to keep the text ever updating and accurate.  In other words, we do absolutely no text entries in PPro or AE; it's all stored in an external database and piped in using a Custom Panel.

                                                 

                                                That same database also knows the unique graphic paired with each text entry, and we'd love to leverage that BUT...

                                                 

                                                ...to the best of my knowledge neither AE expressions nor PPro, nor LTTs/MOGRTS can programmatically reference an ever-evolving large volume of external graphics files.  I hope I'm wrong about that.

                                                 

                                                HTML 5 / CSS + JS seems much more adept at referencing external image files, sizing and positioning them than AE, and in this particular case we're using AE less for it's rich visual controls than as a stand-in for what would be much easier in a browser.

                                                 

                                                This idea is admittedly out of the norm but there's a lot of potential value in there.

                                                • 22. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                  sberic Level 2

                                                  This whole thread sounds a lot like folks are requesting something like what Scaleform did for games: allow game devs to use Flash to create animated UI in video games because Flash is good at UI...

                                                   

                                                  Perhaps hacking a Chromium Embedded Framework to handle certain inputs (timeline position?) and render to a specific frame buffer would get you a good deal of the way there...?

                                                  • 23. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                    ETorr Level 1

                                                    sberic  wrote

                                                    Perhaps hacking a Chromium Embedded Framework to handle certain inputs (timeline position?) and render to a specific frame buffer would get you a good deal of the way there...?

                                                    +1 re: Chromium, inputs, and frame buffer

                                                    The challenges in building such an interface are considerable but hopefully limited:

                                                    What I could imagine this as either a plugin effect or as of now entirely fictional "dynamic media layer", either way a feature whose value could be entered via an AE expression along the lines of... (This is pulled from an AE concept -- making use of a fictional "DynamicMediaLayer" -- suggesting maybe the better place to develop this concept is within AE and imported to PPro via Live Text Template / MOGRT).

                                                     

                                                    AeConcept2.jpg

                                                    Where the layer serves as the rendered result of the value returned by the expression, in the above example the URL to this discussion.

                                                    But you could just as easily pass a path to a custom-coded locally-hosted URL.

                                                    Immediate Considerations:

                                                    • Sberic's "Inputs" could be passed to the HTML via query string (the above example passes the Timeline Postion via AE's "time" variable to the query string's "ThisTime" variable)
                                                    • Re "Frame Buffer": No doubt the above "Dynamic Media Layer" would likely need to be rendered to be reliable.  It would make sense to add an additional property -- a pre-render delay -- that waits a pre-defined amount of time per frame prior to rendering to allow the HTML page to fully load before beginning the rendering

                                                     

                                                    I can imagine a PPro plug-in accomplishing basically the same via property inputs.

                                                    To the extent the above AE-based example implies a desire for PPro to  adopt AE-type expressions, that's something that would be a welcome improvement, but that's a good topic for a separate discussion.

                                                    • 24. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                      sberic Level 2

                                                      ETorr  wrote

                                                       

                                                      • Re "Frame Buffer": No doubt the above "Dynamic Media Layer" would likely need to be rendered to be reliable.  It would make sense to add an additional property -- a pre-render delay -- that waits a pre-defined amount of time per frame prior to rendering to allow the HTML page to fully load before beginning the rendering

                                                      I think I would probably structure things a little differently to avoid the requirement of a "pre-render" delay. I would probably have the interface be: "Here are some times. [Wait.....] Oh! Thanks for the frame!" This would assume that the contents of the browser had its own internal timeline that you would simply be syncing with the "time" value. You could also develop a setup that would freeze time until "pumped" by this request (via a time delta) - effectively, only ticking the webpage when the plugin in PP or AE requests a frame.

                                                      • 25. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                        ETorr Level 1

                                                        sberic  wrote

                                                         

                                                        I think I would probably structure things a little differently to avoid the requirement of a "pre-render" delay. I would probably have the interface be: "Here are some times. [Wait.....] Oh! Thanks for the frame!" This would assume that the contents of the browser had its own internal timeline that you would simply be syncing with the "time" value. You could also develop a setup that would freeze time until "pumped" by this request (via a time delta) - effectively, only ticking the webpage when the plugin in PP or AE requests a frame.

                                                        I would operate on the assumption of a browser without an internal timeline.  You could certainly code one up, but unlike an AE frame, a browser window never really knows when it's done loading content.  The native logic of a browser page is to gather its assets asynchronously.  The browser page is complete only after the last asset falls into place, and even then it might contain timeOuts and setIntervals that evolve the page indefinitely.

                                                         

                                                        In other words I'm thinking under the assumption that a feature like this would serve a variety of uses, both locally-hosted pages wholly developed & managed by the production team, but also web-hosted pages, content from various sites over which you have no control over the content.

                                                         

                                                        Once you open up Adobe AE / PPro to integrate HTML content, the possible ways of using it are quite numerous.

                                                         

                                                         

                                                        So going back... when a web page receives AE's "time" value via query string, it's not perceiving it as actual time, just a value that the web developer can use to dynamically render the page according to whatever logic is appropriate.

                                                         

                                                        And the point of a delay-before-render is to give pages enough time to load.  Locally-hosted wholly-controlled pages could be coded up to render within a second or fraction thereof so set a pre-delay to 1sec or .5 if that'll do it.  Meanwhile  https://forums.adobe.com/inbox  takes about 5 seconds, so set the delay to 5.5 or 6 -- whatever makes the process reliable.

                                                        • 26. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                          sberic Level 2

                                                          ETorr  wrote

                                                          In other words I'm thinking under the assumption that a feature like this would serve a variety of uses, both locally-hosted pages wholly developed & managed by the production team, but also web-hosted pages, content from various sites over which you have no control over the content.

                                                          I see. Something that flexible would most certainly require that kind of input.

                                                           

                                                          But if you're going that far, I would suggest doing a simple screen-capture. My understanding was that HTML/JS could be useful for creating interesting UI. My followup assumption is that the default "white" background of the webpage would actually be alpha=0 so that you could create graphical overlays for various features. If you're using it to capture something live into a render, well... I could see that being useful for sure, but I'm not sure I see what gains you get out of simply importing a screencap...

                                                           

                                                          Still a neat idea to explore!

                                                          • 27. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                            ETorr Level 1

                                                            sberic  wrote

                                                             

                                                            But if you're going that far, I would suggest doing a simple screen-capture. My understanding was that HTML/JS could be useful for creating interesting UI. My followup assumption is that the default "white" background of the webpage would actually be alpha=0 so that you could create graphical overlays for various features. If you're using it to capture something live into a render, well... I could see that being useful for sure, but I'm not sure I see what gains you get out of simply importing a screencap...

                                                             

                                                            Still a neat idea to explore!

                                                             

                                                             

                                                             

                                                            sberic  wrote

                                                            My understanding was that HTML/JS could be useful for creating interesting UI.  My followup assumption is that the default "white" background of the webpage would actually be alpha=0 so that you could create graphical overlays for various features.

                                                            There's a lot of power under the hood of HTML/CSS/JS.  It's hardly a replacement for the sophisticated rich visual environment AE offers, but when it comes to handling data to generate dynamic (albeit simpler) visuals HTML can (not always) be a faster design+code environment.

                                                             

                                                            RE "white" background: Actually you can define the the "document" or "document.body", of a web page as having a background alpha from 0 to 1 in decimal increments (so effectively anything from 0% to 100% opacity).  Likewise any element in a web page can be defined, either it's backgroundColor or overall opacity the same way.

                                                             

                                                            sberic

                                                            If you're using it to capture something live into a render, well... I could see that being useful for sure, but I'm not sure I see what gains you get out of simply importing a screencap...

                                                            A web page can be any size, extending beyond the screen via scrolling.

                                                             

                                                            If you're developing custom overlays for HD or UHD etc, you could define your HTML doc width to match (1920x1080, 3840x2160 etc)

                                                            But 3rd party remote sites are whatever they are, extending down however long.

                                                             

                                                            Theoretically the rendered web content could capture that excess page, and allow you to pan & zoom over it in the same way you can now manipulate oversized media, whereas a screen grab is only as big as the screen from which it's grabbed.

                                                            • 28. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                              sberic Level 2

                                                              ETorr  wrote

                                                               

                                                              There's a lot of power under the hood of HTML/CSS/JS.  It's hardly a replacement for the sophisticated rich visual environment AE offers, but when it comes to handling data to generate dynamic (albeit simpler) visuals HTML can (not always) be a faster design+code environment.

                                                              Totally agreed here. I think the only thing I'd strike from that statement would be the"albeit simpler" caveat. AE lets you do a lot of neat stuff (and quickly!), but there are some very complex things that you may want scripted control over and the web is becoming quite a platform for that kind of thing (WebGL 2.0 enables, well, just about anything you care to throw onto a GPU...).

                                                               

                                                              ETorr  wrote

                                                               

                                                              RE "white" background: Actually you can define the the "document" or "document.body", of a web page as having a background alpha from 0 to 1 in decimal increments (so effectively anything from 0% to 100% opacity).  Likewise any element in a web page can be defined, either it's backgroundColor or overall opacity the same way.

                                                              I was aware that you could set those values. I mentioned the "white" color because my understanding (assumption?) was that if you set a simple HTML page's background color to alpha=0 it would still show white (white being what the browser presumably uses as a "clear color").

                                                               

                                                              ETorr  wrote

                                                               

                                                              A web page can be any size, extending beyond the screen via scrolling.

                                                               

                                                              If you're developing custom overlays for HD or UHD etc, you could define your HTML doc width to match (1920x1080, 3840x2160 etc)

                                                              But 3rd party remote sites are whatever they are, extending down however long.

                                                               

                                                              Theoretically the rendered web content could capture that excess page, and allow you to pan & zoom over it in the same way you can now manipulate oversized media, whereas a screen grab is only as big as the screen from which it's grabbed.

                                                              It's not a theoretical Have you seen that Chrome 59 included a new Headless Mode feature? You can use it to easily create screenshots at whatever resolution you care to request. If you don't want to go through the "hassle" of headless mode, you could also simply open the DevTools and manually snap a screenshot!

                                                               

                                                              It looks like this functionality is also available in Chromium. There may be a way to take multiple consecutive screenshots of a webpage using the setup or even extend it to a video capture. But... that's kind of what we've been talking about already anyway ;p

                                                              1 person found this helpful
                                                              • 29. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                                ETorr Level 1

                                                                You may have just made my day, maybe my month.  Now I'm not going to get anything else done.

                                                                • 30. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                                  sberic Level 2

                                                                  One thing I just noticed while closing my tabs is this Puppeteer project over on GitHub. It's a NodeJS package that allows, amongst several other things, screenshot grabbing... Seems pretty darn neat!

                                                                  1 person found this helpful
                                                                  • 31. Re: What would it take to allow the visual contents of a Custom HTML panel to appear as a clip in a timeline?
                                                                    Premiopolis Level 1

                                                                    sberic  wrote

                                                                     

                                                                    One thing I just noticed while closing my tabs is this Puppeteer project over on GitHub. It's a NodeJS package that allows, amongst several other things, screenshot grabbing... Seems pretty darn neat!

                                                                    Thanks for this one.  Been testing it, and it's already proving to be helpful.  Not too hard to implement.  The challenge will developing a means of producing animation on a per-frame basis.  Not intrinsically easy but it seems achievable.  Thanks again.