We will name it "lower-third" instead of "New composition" - sounds much better. Just the last step before we export our graphic - we must give a name to our composition. That's it!įor more information about actions, take a look at the dedicated tutorial just for actions. So far everything looks good, but how are we going to tell CasparCG when to stop the graphic and when to wait for the outro command? It is as simple as navigating to frame 40, which will be our "stop" keyframe, and clicking the "Stop & Outro" button. From frames 40 to 60, the shape will fade out.įew more minutes of playing and here is our final animation. We will try to animate white background shape to slide from the bottom to the top from frame 0 to frame 15. In the Timeline panel, click on the little arrow to open all available properties and start adding keyframes, moving them, deleting them. Caspercg run html template free#Here you are free to do anything you want - slide up, down, left, right, fade-in, cut, dance, fly… Whatever! Since we have already done some nice work with Loopic, it is always recommended to save the project occasionally. In this example, we used Exo 2 Regular and Exo 2 Bold fonts, so both fonts should be imported. Once imported, the fonts will appear in the fonts dropdown list. Caspercg run html template plus#All you need to do is click on the Plus button in the Fonts section of the Resources panel and select the fonts. Using underscore prefix is not required, however, it is recommended and it is the convention of naming text elements in CasparCG world.Īdding fonts is very simple in Loopic. We will name the name element as " title" and subtitle as "subtitle". But key detail here is that our fields need to have unique ID names so we can identify them - in other words, we need to know what information to show in what text element. We will also change layer's order so that our guide is the last layer.Īdding Text elements is as simple as adding Shape elements. This is important because layers marked as guides will not be exported from the project. To set the layer as a guide, right-click on it and choose Set as a guide. Once it is imported, we will lock it by clicking the lock icon and setting the layer as a guide. In this tutorial, we will create a new Image layer and select our background image. This way we can estimate the final look of the graphic once it is played on-air. It is always a good idea to add an example background image, just for design and development purposes. Repositioning and renaming layers techniques are very simple in Loopic. This can be easily changed in the settings panel - pick any color of your choice. You can easily resize and reposition shapes and change their background color.Īs we are designing our lower third graphic with a white background, there is a problem - we can not see the white shape anymore because the composition background is white by default. Two shapes have just decorative purpose and the third one is there to serve as a background to our text which will be added. To create new shapes, click on the Plus button in the Timeline section and select Shape. Creating background elementsģ background elements will be created before adding text, and those are Shape elements. There is also a video version of the tutorial available on YouTube. Our final graphic should look like the graphic on the next animation.įinal result of this tutorial is also available as a demo project on Loopic - you can load it by clicking on it in the Welcome popup. The goal of this tutorial will be to create a new graphic template and converting it to HTML format compatible with CasparCG using Loopic. Important note: this tutorial uses Loopic Beta version and has not been updated with the latest Loopic version.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |