Advanced Editor

Advanced editor is a fully featured HTML editor which allows you to create compelling overlays using a simple WYSIWYG editor or by applying more advanced designs and calling in external graphics using the source code editor. It will apply the HTML layer to your broadcast output as you design it

OVERVIEW

Overview

Click the advanced editor to create text, grids and basic and complex shapes to your broadcast Overlay Buttons

Functions

Format your layout with access to conventional HTML creation functions such as grids, line spacing, fonts, media import, media links and so on

CUSTOM CODE

Add your custom code to overlay on your broadcast

If you want to go beyond the basic editor you can click on 'Source Code' under 'Tools' to input your own custom code. This code can be edited at any time. The editor can make full use of inline CSS, so animation and dynamic content are fully supported. SVG code and any vector based graphics are also supported.

Device Manager

Image Shows a sample SVG animated graphic Animated SVG

Examples

Copy and paste these samples into the source code to see how it works.

A simple animated Logo

}
		.preloader span:nth-child(1){
			animation : circle1 1.5s infinite;
			transition-timing-function 	: ease-in-out;
			transform : translateX(1px) translateY(1px) scale(.7);
		}
		@keyframes circle1{
			0%{
			transform : translateY(5px) translateX(0) scale(1.3);
			}
			50%{
			transform : translateY(0) translateX(23px) scale(2);
      background-color : #c0392b;
			}
			100%{
			transform : translateY(5px) translateX(0) scale(1.3);

}
		}
		.preloader span:nth-child(2){
			animation : circle2 1.5s infinite;
			transition-timing-function 	: ease-in-out;
			transform : translateX(1px);
			transform : scale(1.3);
			transform : translateY(1px);

}
		@keyframes circle2{
			0%{
			transform : translateY(10px) translateX(0) scale(1.3);
      background-color : #fff;
			}
			50%{
			transform : translateY(17px) translateX(0) scale(2);
       background-color : #c0392b;
			}
			100%{
			transform : translateY(10px) translateX(0) scale(1.3);
      background-color : #fff;
			}
		}
		.preloader span:nth-child(3){
			animation : circle3 1.5s infinite;
			transition-timing-function 	: ease-in-out;
			transform : translateX(1px);
			transform : scale(.7);
			transform : translateY(1px);

}
		@keyframes circle3{
			0%{
			transform : translateY(5px) translateX(0) scale(1.3);

}
			50%{
			transform : translateY(0) translateX(-23px) scale(2);
      background-color : #c0392b;
			}
			100%{
			transform : translateY(5px) translateX(0) scale(1.3);

}
		}
    .preloader:hover span{
      animation-play-state: paused;
      cursor:pointer;
    }

</style>

A complex animation

#space {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#space .mother {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #ff5032;
  overflow: hidden;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 12px solid #000;
}
#space .mother::before {
  content: '';
  position: absolute;
  top: -12%;
  left: -12%;
  width: 100%;
  height: 100%;
  background: #642800;
  border-radius: 100%;
  mix-blend-mode: screen;
}
#space .ring {
  position: absolute;
  border: 20px solid rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  box-sizing: border-box;
}
#space .ring:nth-child(1) {
  width: 330px;
  height: 330px;
  -webkit-animation: orbit 10000ms linear infinite;
          animation: orbit 10000ms linear infinite;
}
#space .ring:nth-child(2) {
  width: 370px;
  height: 370px;
  -webkit-animation: orbit 10100ms linear infinite;
          animation: orbit 10100ms linear infinite;
}
#space .ring:nth-child(3) {
  width: 410px;
  height: 410px;
  -webkit-animation: orbit 10200ms linear infinite;
          animation: orbit 10200ms linear infinite;
}
#space .ring:nth-child(4) {
  width: 450px;
  height: 450px;
  -webkit-animation: orbit 10300ms linear infinite;
          animation: orbit 10300ms linear infinite;
}
#space .ring:nth-child(5) {
  width: 490px;
  height: 490px;
  -webkit-animation: orbit 10400ms linear infinite;
          animation: orbit 10400ms linear infinite;
}
#space .ring:nth-child(6) {
  width: 530px;
  height: 530px;
  -webkit-animation: orbit 10500ms linear infinite;
          animation: orbit 10500ms linear infinite;
}
#space .ring:nth-child(7) {
  width: 570px;
  height: 570px;
  -webkit-animation: orbit 10600ms linear infinite;
          animation: orbit 10600ms linear infinite;
}
#space .ring:nth-child(8) {
  width: 610px;
  height: 610px;
  -webkit-animation: orbit 10700ms linear infinite;
          animation: orbit 10700ms linear infinite;
}
#space .ring:nth-child(9) {
  width: 650px;
  height: 650px;
  -webkit-animation: orbit 10800ms linear infinite;
          animation: orbit 10800ms linear infinite;
}
#space .ring:nth-child(10) {
  width: 690px;
  height: 690px;
  -webkit-animation: orbit 10900ms linear infinite;
          animation: orbit 10900ms linear infinite;
}
#space .ring:nth-child(11) {
  width: 730px;
  height: 730px;
  -webkit-animation: orbit 11000ms linear infinite;
          animation: orbit 11000ms linear infinite;
}

@-webkit-keyframes orbit {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
            transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(360deg) rotateY(-1800deg);
            transform: translate(-50%, -50%) rotateX(360deg) rotateY(-1800deg);
  }
}

@keyframes orbit {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
            transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(360deg) rotateY(-1800deg);
            transform: translate(-50%, -50%) rotateX(360deg) rotateY(-1800deg);
  }
}

</style>
<div id="space">
  <div class="mother"></div>
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
</div>

An animated Broadcast tag

/* WebKit and Opera browsers */
  @-webkit-keyframes move-up {
    0%    { -webkit-transform: translate(0px, 0px);
    opacity: 1;}
    10%   { -webkit-transform: translate(0px, 5px);
    opacity: 1;}
    50%   { -webkit-transform: translate(0px, 50px);
    opacity: 0.5;}
    100%  { -webkit-transform: translate(0px, 0px);
    opacity: 0;}
}

/* all other browsers */
  @keyframes move-up {
    0% {
      -moz-transform: translate(0px, 0px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, 0px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, 0px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
    10% {
      -moz-transform: translate(0px, 5px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, 5px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, 5px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
      50% {
      -moz-transform: translate(0px, 15px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, 15px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, 18px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
    100% {
      -moz-transform: translate(0px, 0px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, 0px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, 0px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
  }

#move-up {
    -webkit-animation-name: move-up;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;

animation-name: move-up;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

/* WebKit and Opera browsers */
  @-webkit-keyframes move-down {
    0%    { -webkit-transform: translate(0px, 0px);
    opacity: 1;}
    10%   { -webkit-transform: translate(0px, -5px);
    opacity: 1;}
    50%   { -webkit-transform: translate(0px, -50px);
    opacity: 0.5;}
    100%  { -webkit-transform: translate(0px, 0px);
    opacity: 0;}
}

/* all other browsers */
  @keyframes move-down {
    0% {
      -moz-transform: translate(0px, 0px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, 0px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, 0px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
    10% {
      -moz-transform: translate(0px, -5px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, -5px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, -5px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
      50% {
      -moz-transform: translate(0px, -15px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, -15px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, -18px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
    100% {
      -moz-transform: translate(0px, 0px);
      -moz-transform-origin: 50% 50%;
      -ms-transform: translate(0px, 0px);
      -ms-transform-origin: 50% 50%;
      transform: translate(0px, 0px);
      transform-origin: 50% 50%;
      opacity: 1;
    }
  }

#move-down {
    -webkit-animation-name: move-down;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;

animation-name: move-down;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}
      .cls-1 {
        fill: #8092a0;
      }

.cls-2, .cls-3 {
        fill: #93a5b5;
      }

.cls-2 {
        opacity: 0.5;
      }

.cls-4 {
        font-size: 21px;
        fill: #fff;
        font-family: Arial;
      }

.cls-5 {
        font-weight: 700;
      }

.cls-6 {
        white-space: pre;
      }
      .cls-7 {
        fill: none;
      }
    </style>
  </defs>
  <title>AEI-Product</title>
  <g id ="move-up">
    <polygon class="cls-1" points="145 0 96 0 96 19 114 19 114 58 125 58 125 19 145 19 145 0"></polygon>
  </g>
  
  <g id ="move-down">
    <polygon class="cls-1" points="87 18 39 18 39 37 56 37 56 76 67 76 67 37 87 37 87 18"></polygon>
  </g>
  <polygon class="cls-2" points="342.84 42.51 0 42.51 0 110.92 361.71 110.92 342.84 42.51"></polygon>
  <polygon class="cls-3" points="145 61 145 37 96 37 96 61 87 61 87 37 39 37 39 61 0 61 0 129 372.72 129 391.59 61 145 61"></polygon>
  <text class="cls-4" transform="translate(11 100)">Broadcast from <tspan class="cls-5" x="148.22" y="0">Easylife</tspan><tspan class="cls-6" x="227.61" y="0"> Headquarters</tspan></text>
  <rect class="cls-7" width="1280" height="720"></rect>
</svg>
</div>