205 posts
  • Has been part of the Envato Community for over 3 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+4 more
acuredreamgift says

I saw few files that feature custom and user friendly control panel, and I was wondering how it’s done… Like someone mentioned in one of the threads, I think that they could be awesome help for people that are first time AE users, so I’d like someone who is familiar with that, to explain or give some tips on where to start with learning. It probably requires scripting, but I’m ready to learn as I have some basic knowledge of C++ and C#, so programming is not something that I’m afraid of. I just don’t enjoy doing it. Duh… Latest file that I saw that features this type of control panel is latest file from IronykDesign.

149 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
davidossahdez says

It’s very impressive! Here’s what I think is going on- lots of expression controls- color, checkbox. Parenting source text parameters between text layers (text that changes in the menu changes in the lower 3rd). It’s not too difficult to do, but you do need a different mindset to pull it off. I’ve been adopting this type of approach to my templates recently.

Well, that is exactly what I did. In my project “Digital Midnight” all the controls are parented and linked with their respective effects all over the place. They act in the same way as the After Effects sliders, but they are a little more eye catching. (I think that this is a benefit from a business POV. At the moment, it only gives a more professional look) Also, the text layers shares their source text property, as you guessed. This approach to develop this Control Panel took me only 4 or 5 days but it wasn’t my initial plan.

I did a little research and found pretty cool options to make an interactive UI. Also, each one has it own disadvantages. Take a look:
  1. Expressions inside After Effects: These are pretty easy to learn and doesn’t need any programming experience, with only drag and drop you are done. The problem is that are pretty slow in terms of performance and doesn’t let any complex customization. The After Effects sliders work with this method. My fist version of the Control Panel simply put a user-friendly user interface to really understand what are you moving and what each property affects in the final look.
  2. The ExtendScript Toolkit: These ones uses the ExtendScript language, are a little bit more complex but let you create more complex things as well. AEScripts.com are filled by a lot of cool scripts made in this “platform”. They are cross-platform so you only need to program one version. The bad news are that an “Installation” process needs to be made. The user should drop the script in the ScriptUI folder inside the After Effects application folders. Also, build a customized UI is pretty difficult. You need to use the After Effects predefined controls
  3. The After Effects API: This is the more powerful but also the more complex one. It uses the C language and it isn’t for beginners. Element 3D and Trapcode Particular are some examples of plugins using the After Effects API. They let you build your own custom UI and make whatever you want. The MAIN problem is that they aren’t cross-platform. So, you need to develop one for Windows and other quite different for Mac. Also, an Installer is needed and I don’t think that the user would like to install plugins of untrusted developers

I’ll try to develop a little further this idea of the Control Panel for my upcoming projects. My initial vision was a interactive UI (maybe a separate application) that let the user modify things on the fly and also preview them just before commit changes to the After Effects project. Maybe someone with more experience with this kind of things can share his thoughts about this. I would love to collaborate with someone to develop this concept a little further and make a quite powerful way to customize templates

NOTE: This is a reply for a different thread. I think that we can continue the conversation in here to collect all the ideas around this topic in one place. This is the link to the old one:
http://videohive.net/forums/thread/official-vh-authors-offtopic/86573?page=5

410 posts
  • Has referred 100+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
GhosTeam says

I love your control panel..I’ve tried to do a similar thing with the color-slider and it does slow everything down (the expressions)...did you use linked Color-Balance HLS?
I think it’s a lot better than the regular controls, however if it makes the project too heavy to handle it’s not worth it…so it’s best with lighter projects ..

5094 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Helps us moderate the forums
+11 more
felt_tips Volunteer moderator says

Expressions are easily the most useful for making a template accessible to the user, generally by linking deep nested properties and attributes to a controller layer in the main composition (it’s actually also a good solution for speed of working on non-template projects). I wouldn’t bother with anything more complex. That’s a bit like reinventing the wheel and the time input is waaaaay too high to make it useful.

Expressions.
They can be simple or complicated. They are nowhere near as fast to execute as compiled code, but considering that a 100 line long expression is a pretty rare event, this doesn’t matter and is usually a fairly insignificant chunk of rendering and previewing time. You can get very complex with expressions if you want to… at the end of the day, it can do most of what Javascript can do. But expressions can also be very simple links between properties and at this level, the effort needed to get started is extremely minimal. Also, you have this brilliant resource… http://videohive.net/forums/thread/the-expressions-thread/79625 ;-)

Scripting.
Scripting is a bigger hurdle. From a syntax point of view, it’s also ECMA script based… so Javascript like, although the syntax differs from expression syntax in many ways. Scripts can be thought of as a kind of macro. Where expressions create dynamic links between properties, scripts can automate user action. Most of the menu commands and other things that you can do as a user in After Effects can be achieved through scripting. Because scripts are edited and debugged externally and because there are significantly less learning resources, it’s a bigger hurdle to get involved with. Also, if you’re going to deliver a script as part of a template, then you need to have tested it significantly in many situations, in every version of Ae that you intend it to be used for and cross-platform. I would tend to develop scripts for your own use, to automate processes that you do often and that are time-consuming.

Ae SDK.
Using the After Effects SDK is very advanced. It uses C++ and utilises a large library of After Effects specific functionality. You need to use an external compiler to create plug-ins. There’s a high cost to getting into this, and you should really only consider it if you’re interested in developing plug-ins. You’d need to be looking at days or months of development time, depending on what you want to achieve. You can use it to create effects, and also to otherwise extend and enhance the After Effects interface.

149 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
davidossahdez says

@felt_tips Let’s imagine that the ideal end product should be like my Control Panel as is displayed in my preview video, I mean, while the preview is playing the user can move a slider and see the effects in real time. He can choose colors, enable and disable options, change the placeholders and so on. The actual version is builded with expressions and it’s not as interactive as we want. Why? Just because the user needs to move manually the time slider and all the controls needs to be rendered in a RAM preview.
So, if expressions aren’t the ideal solution, the next one is ExtendScript. I’m wondering if we can make a web-based application, I mean, the same UI that my project “Digital Midnight” uses for example, but in the cloud. So, the user can modify and preview the final result, then, he press a DOWNLOAD SCRIPT button and we send a .JSX script (As you may know, the .JSX extension means that the script isn’t compiled, so it is a simple javascript file saved with a weird extension and it can be dynamically generated based on the options the user modified in the UI) Then, after the download, the user only needs to run the script (not install anything in any folder, JUST run it) and the script can change the respective options and properties to make the project to look like the preview

The problem is that I don’t know how to make any web based application. This was my initial idea of the Control Panel but in that moment, I really want to publish my project (because it was finished before I made the Control Panel) and this way is too time consuming. So I decide to make it with expressions. Also, the benefit is that only is needed to develop it one time and everyone could use it as a template for their own Control Panels. It is cross-platform and the user doesn’t needs to install anything in their machine, just run the automated script.
I don’t know if I was clear enough but I hope that you understand. Let me know what you think.

79 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Located in Europe
+1 more
Mazuza says

very interesting! thanks guys!

5094 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Helps us moderate the forums
+11 more
felt_tips Volunteer moderator says

Let me know what you think.

I haven’t seen your Control Panel… I don’t know where to find it. Did you link it somewhere? But I think I understand what you’re on about.

What I think is that you’re over-thinking it. You’ve got a 20 year old, highly developed application that’s a very good interface for editing motion graphics. Why not just use what it can do? Why reinvent the wheel? Of course if you want to reinvent the wheel, go ahead, but it will take you months and months to make a robust version of what you’re trying to do. It won’t make your file any more saleable, because that’s not what VH customers react to. Just make a great looking project, then make a great user guide… your project will sell well and you’ll have very few support enquiries.

If you want to develop plug-ins, take a deep breath and go for it. :-)

Oh and by the way, there are a few people who are developing web interfaces to Ae in the kind of way you’re talking about. Afew have cropped up on the forum. I’m pretty certain that that kind of thing in breach of the After Effects EULA.

205 posts
  • Has been part of the Envato Community for over 3 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+4 more
acuredreamgift says

Thanks for some insight guys. I actually wanted to ask about davidossahdez’s control panel, as I thought that IronykDesign’s control panel was like his (saw only picture on iPad, now I watched video and realized that I actually did similar thing in one of my own projects.) But davidossahdez’s is something totally different.

197 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+8 more
IronykDesign says

Thanks for some insight guys. I actually wanted to ask about davidossahdez’s control panel, as I thought that IronykDesign’s control panel was like his (saw only picture on iPad, now I watched video and realized that I actually did similar thing in one of my own projects.) But davidossahdez’s is something totally different.

LOL :) You’re right. What David did is really impressive and is far beyond my knowledge :) I don’t know a thing about C + + and codes :) I actually played with the expressions and just tried to make the project more friendly for the buyers. It was really funny, but it took a lot of time and, as Ben said “It won’t make your file any more saleable, because that’s not what VH customers react to. Just make a great looking project, then make a great user guide…” Totally agree now :) BTW, I love your project David! You really did an amazing job!

5094 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Helps us moderate the forums
+11 more
felt_tips Volunteer moderator says


Thanks for some insight guys. I actually wanted to ask about davidossahdez’s control panel, as I thought that IronykDesign’s control panel was like his (saw only picture on iPad, now I watched video and realized that I actually did similar thing in one of my own projects.) But davidossahdez’s is something totally different.
LOL :) You’re right. What David did is really impressive and is far beyond my knowledge :) I don’t know a thing about C + + and codes :) I actually played with the expressions and just tried to make the project more friendly for the buyers. It was really funny, but it took a lot of time and, as Ben said “It won’t make your file any more saleable, because that’s not what VH customers react to. Just make a great looking project, then make a great user guide…” Totally agree now :) BTW, I love your project David! You really did an amazing job!

Ah… okay – I found your control panel.

Looks good. I stick by what I said about it probably being rather superfluous effort in terms of gaining extra sales.

But I am interested to know how you did it. I couldn’t tell from the preview if it’s a comp inside Ae that’s steering everything or whether you’re controlling from outside, via xml or similar. What puzzles me is that you show real-time changes to an animating project. This is something that After Effects is famously not capable of (any changes need to be rendered through into RAM before previewing in real-time). As far as I’m aware, what you show in your preview is something that neither expressions, scripting nor the SDK are capable of.

Is that for real? :-)

Edit: I’m just reading back through this post in light of the preview I just saw.

From what I understand, your control panel is a slick expressions interface onto your main project that exists in After Effects itself, that uses on screen controls in the comp, instead of Expression Effects to control the various things, and the real-time control-panel in your preview is more of how it would work in an ideal world, rather than how it actually does work.

I fear it will never work like it does in the preview though. After Effects is not a real-time solution. Not yet.

by
by
by
by
by
by