MENU
Search results :

Edgehero.js

More power, Less code


The purpose of the edgehero extension library is to simplify and improve your workflow while you are working on an Adobe Edge Animate project. By removing the need to write a lot of code to implement popular features, it will allow you to save time and get your project published in record time. 

Edgehero.js supports centering, forms/inputs, html5 video,html5 audio, menus, canvas, youtube/vimeo embeding, 3D rotate including 3dcubes, slideshows, and a lot more!

Released under MIT license (open source)

Edgehero on Github




Examples/Demo of Edgehero.js in action

Examples




How does it work?

Simple, just add a class to a rectangle(div).
Example for centering: add class "center" to the rectangle and it will be centered. It's that easy!

How to add an class in Edge Animate


add class

Using Edgehero.js

You can simply use the Animate script loading system to load the edgehero script library.

add class

Click on the Animate Script panel and choose 'Add JS  file from URL to add  the edgehero JS library link shown below.


    
http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js
    
    

Download project

Using Edgehero.js offline

Download Edgehero.js




Download Edgehero.js and remember its location on your computer. In the Animate Script panel choose 'Add JS file from Disk' and navigate to the js file location. Animate will create a js folder and copy the file there.

add class

Download project



What class can I use for a certain function?

Documentation


General

backgroundimage


Will change the image to a backgroundimage that will alwase fit.

center


Center div.

canvas


Changes current file (div) to canvas, css style, classes and id will stay the same.

center


Centers the div to the (horizontal) middle of the screen. 

fixed


Makes the div stick to that part of the screen and stays there, even when scrolling.

label


Changes the current text into a label.

span


Changes the current text into span. Can be used for extra css effects.



Media - Html5 video / Html5 audio

curtime_


Displays the current time of a media file, html5 video or audio.

Example:

curtime_videolink_1

This will show the current time of videolink_1.

durtime_


Displays the duration time of a media file, html5 video or audio.

(total time)

Example:

durtime_videolink_1

This will show the duration time of videolink_1.

autoplay


Can be used to start video or audio files automatically when loaded.

backgroundvideo_ (video)

Can also be used on videos that are imported trough edge animate

It will just update video to the correct side and connect all the other edgehero options to it, for example videobar


Sets a video file as background of a div. It will always fit the screen even for mobile devices. htm5 videoplayer.

Can be used an unlimited amount of times.

Place anything behind the _ for example backgroundvideo_1.

To link it with video files, link it with a variable in Stage actions creationComplete.

Video files have to be in the .webm, .ogg, or .mp4 formats.

Place a '+' sign between the different videolinks.


Example

    
    // this will set the video as background of the div/rectangle
	 backgroundvideo_1 ='movie.mp4'+'movie.ogg'+'movie.webm';
    // put new edgehero.js variables here
    
    

To link only 1 video use the format shown below.

    
    // this will set the video as background of the div/rectangle
	 backgroundvideo_1 ='movie.mp4';
    // put new edgehero.js variables here
    
    

controls


Can be used on video/audio files to add the default controls to the video.

fullscreen_ (video)


Custom controls

When this is clicked the video will appear fullscreen.

Example: 

fullscreen_videolink_1 will make videolink_1 video files fullscreen.

loop


Can be used  to loop video or audio files.

mute_


Custom controls

When the mute control is clicked the video/audio link will mute.

Example:

mute_videolink_1

When clicked, the videolink_1 will be muted.



muted


The muted class needs to be added in the class panel of the video/audio files.

The muted class can be used to start video or audio files muted.

play_ (video/audio)


Custom controls

When this is clicked the video/audiolink will play, when it is clicked again it will pause.

Example:

play_videolink_1

When clicked videolink_1 will play.

poster_


Can be used unlimited anything is added behind the _

Will add the linked image as posterimage for an video (image that will display when a video loads or when it can not be loaded.)

poster needs to be linked.

Example


    
    
		 poster_1 ='image.jpg';
       
    // put new edgehero.js variables here
    
    

timebar_ (video)


Custom controls

Can be used to control the time of an video file.

Example:

timebar_videolink_1

This will control the time of videolink_1.

videolink_ (video)


Can also be used on videos that are imported trough edge animate

It will just update video to the correct side and connect all the other edgehero options to it, for example videobar


Makes a video file the size of the div, it works on the htm5 video player.

Can be used an unlimited number of times.

Place the desired number behind the _. For example if you to play video once, add 1 (videolink_1) or if you want it to play 5 times, add 5 (videolink_5).

To link it with videofiles, link it with a variable in Stage actions creationComplete.

Video files have to be .webm .ogg or .mp4 format.

Place a + sign between the different videolinks.


Example

    
    // this will set the video as background of the div/rectangle
	 videolink_1 ='movie.mp4'+'movie.ogg'+'movie.webm';
    // put new edgehero.js variables here
    
    

To link only 1 video file, use the format in the example shown below.

    
    // this will set the video as background of the div/rectangle
	 videolink_1 ='movie.mp4';
    // put new edgehero.js variables here
    
    

vimeolink_


Creates an embedded vimeo video the size of the div it is placed in.

Can be used a unlimited number of times.

Place the desired number behind the _. For example vimeolink_1 means first video, vimeolink_2 means second video,  and vimeolink_3  means third video, and so on.

To link it with vimeo, link it with a variable in Stage actions creationComplete as shown below.

Example

    
    // this wil create a html5video the size of the div.
	 vimeolink_1 ='https://vimeo.com/70975460';
    // put new edgehero.js variables here
    
    

volumebar_


Custom controls

This will create an volumebar for the video or audio.

Example:

volumebar_videolink_1

This will create a volume bar for videolink_1.

youtubelink_


Can be used an unlimited number of times.

Place the desired number behind the _. For example vimeolink_1 for the first vimeo.

To link it with vimeo, link it with a variable in Stage actions creationComplete.

Example

    
    // this wil create a html5video the size of the div.
	 youtubelink_1 ='http://www.youtube.com/watch?v=T7MqEEGGpus';
    	
    // put new edgehero.js variables here
    
    


Menu

scroll_


Will turn class into button to smooth scroll to an id.

Example:

Scroll_Rectangle

Will scroll vertical to the div Rectangle when clicked.

hscroll_


Will turn class into button to smooth scroll to an id.

Example:

Scroll_Rectangle

Will scroll horizontal to the div Rectangle when clicked.

li


Changes the div into a li (list item) which can be used for lists or menus.


link_ (menu) (link)


Wraps the text or div you place in it, with an "a" tag.

Can be used an unlimited number of times.

Link it with a variable in Stage actions creationComplete.

Replace the generic http://www.mywebsite.com/ with your own link.

Example


    
    // this will set the video as background of the div/rectangle
		 link_1 ='http://www.mywebsite.com/';

    // put new edgehero.js variables here
    
    

lu


Changes the div into a lu, which can be used for lists or menus.




Slideshow

slideshow


Will turn every child of the div into 1 of the slides.

The slideshow is fully responsive and can be used an unlimited number of times.

The slideshow is a horizontal slider.

verticalslideshow


Will turn every child of the div into 1 of the slides.

The slideshow is fully responsive and can be used an unlimited number of times.

The slideshow is a vertical slider.

next_slideshow


Will turn into a next slide button.

Can be placed inside a slideshow without turning into a slide.

prev_slideshow


Will turn into a previous (or back) button.

Can be placed inside a slideshow without turning into a slide.



3d

triangle


Uses 3 children divs to make a 3d cube (3 divs are inserted into the parent div).

Usage: make 3 children divs all the same size and stacked them on top of each others.

- div with perspective class (to make it look like 3D)

    - div with triangle class

          - front side div

          - side side div

          - back side div


In edge animate it should look something like this:

Warning: you need to have a parent div (this div needs to be inside another div), and that container div needs to have the perspective_ class  for the 3D effect to render properly in the browser.  

cube3d


Uses 6 children divs to make a 3d cube (6 divs are inserted into the parent div).

Make 6 children divs all the same size and stacked them on top of each others.

- div with perspective class (to make it look like 3D)

  - div with 3dcube class

      - front div

      - side div

      - back div

      - side div

      - bottom div

      - top div


In edge animate it should look like something like this:

Warning: you need to have a parent div (this div needs to be inside another div), and this container div needs to have the perspective_ class  for the 3D effect to render properly in the browser.  

perspective_


The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to choose the desired amount of perspective you want on the 3D elements.

example

perspective_300px means perspective 300px, so the child divs will stretch far away to create the 3D effect, giving the impression that you are standing really close to it.

perspective_1000px means perspective 1000px (recommended for the best effect).


Warning! When defining the perspective property for an element, it is the CHILDREN elements that get the perspective view, NOT the element itself. Therefore, you have to put the rotation classes (like box3d) as the child of this class for the 3D effects to render properly in the browser.  

rotateX_


Rotates div horizontally to the specified degrees.

example

rotatex_90 means rotate 90 degrees.

rotatex_350 means rotate 350 degrees.


Warning! You need to have a parent div (this div needs to be inside another div), and that div needs to have the perspective_ class for the 3D effects to render properly in the browser.  

rotateY_


Rotates div vertically to the specified degrees.

example

rotatey_90 means rotate 90 degrees.

rotatey_350 means rotate 350 degrees.


Warning! You need to have a parent div (this div needs to be inside another div), and that div needs to have the perspective_ class for the 3D effects to render properly in the browser.  

rotateZ_


Rotates div on the z axis to the specified degrees.

example

rotatez_90 means rotate 90 degrees.

rotatez_350 means rotate 350 degrees.


Warning! You need to have a parent div (this div needs to be inside another div), and that div needs to have the perspective_ class for the 3D effects to render properly in the browser.  

spin3d


Spins  the div's Y axis as well as the X axis.

Recommended to be placed with the cube3d class or the triangle class.


Warning! You need to have a parent div (this div needs to be inside another div), and that div needs to have  the perspective_ class for the 3D effects to render properly in the browser.  

spinX


Spins the div X axis vertically.

Recommended to be placed with the cube3d class or the triangle class.


Warning! you need to have a parent div (this div needs to be inside another div), and that div needs to have the perspective_ classfor the 3D effects to render properly in the browser.  

spinY


Spins the div Y axis vertically.

Recommended to be placed with the cube3d class or the triangle class.


Warning! you need to have a parent div (this div needs to be inside another div), and that div needs to have the perspective_ classfor the 3D effects to render properly in the browser.  

text3d


Makes the text look 3d.

Recommended to be used on text with a white color.




Forms

action_


Used for linking a form to a php file, when submit is pressed, the linked file will activate.

Add action_ as class to an form, then link it with a variable in Stage actions creationComplete.

Example

    
    // Linked file will activate when sumbit is pushed 
	 action_1 ='myphpform.php';
    // put new edgehero.js variables here
    
    

More information about how to send a form as email can be found here.


form


Used for creating forms, like a contact form.

Put input fields as children of this div(inside this div).


It's recommended to put the action class on the same div as this class.

input


Changes the div into a input text field.

It is recommended to have a parent div with the form class.


input-checkbox


Changes the div into a input checkbox.

It is recommended to have a parent div with the form class.


input-email


Changes the div into a input email.

It is recommended to have a parent div with the form class.


input-file


Changes the div into a input file.

It is recommended to have a parent div with the form class.


input-password


Changes the div into a input password.

It is recommended to have a parent div with the form class.


input-submit


Changes the div into a input submit button.

It is recommended to have a parent div with the form class.


name_


Can be used to name the form input fields. For example name_submit will give it the name submit.

textarea


Will change into an textarea.

val_


Will change the value of a input.

a value is the title of a input

So adding the class val_send to a input submit, will set the title of that button to send

newwindow


Can be used with the class link_, to let the link only be opened in a new window

<