Movie
The movie is the root of your animation. It contains all the main properties and events of your animation. Here, you can set basic properties like the width, height and title of your animation. You can also add script that is run when the animation ends, or every time it updates. You can quickly access the movie properties at any time by clicking the movie icon on the top left of the properties.
Properties
Width
• The width of the movie in pixels.
|
Height
• The height of the movie in pixels.
|
Scale
• How the movie scales to fit the available space.
|
None – The movie is not scaled.
Center – The movie is not scaled and centered in the available space.
Fill – The movie fills the available space, if the ratio is different then the movie will be clipped.
Fit – The movie fills the available space, if the ratio is different then the space will be letterboxed.
Stretch - The movie fills the available space. The ratio will not be preserved.
Back Color
• The background color.
|
Transparent Back
• The background of the movie is transparent. This only works for HTML.
|
Back Image Scale
• How the background image scales to fit the available space.
|
Center – The image is not scaled and centered in the available space.
Fill – The image fills the available space, if the ratio is different then the image will be clipped.
Fit – The image fills the available space, if the ratio is different then the space will be letterboxed.
Fit Center – If the image is larger than the available space, fit is used. If the image is smaller than the available space, it is centered.
Stretch - The image fills the available space. The ratio will not be preserved.
Back Image
• A background image.
|
Touch Gestures
• Allow exported HTML to support long presses, scrolling and zoom on phones and touch devices.
|
Disable Menu
• Disable the right click menu.
|
Clip
• Clip any overhanging items.
|
Loop
• When the movie has finished playing it will start again.
|
Auto Play
• The movie will automatically start playing.
|
Speed
• The speed of the movie. The default value is 1, or 12 key frames per seconds. 2 is double speed, or 24 key frames per second. 0.5 is half speed. 0 is stopped. -1 is reverse.
|
On Click
• The script to be executed when clicked or pressed.
|
alert(X+" , "+Y);
Use Release
• Allow separate scripts to be used when the movie is pressed and released. Otherwise script is only used when the movie is pressed and then released. With this option 'On Click' is only used when the movie is pressed.
|
On Release
• The script to be executed when the mouse is unclicked or touch is released.
|
On Over
• The script to be executed when the mouse moves over. This value is only available with 'Use Mouse Over'.
|
On Out
• The script to be executed when the mouse moves out. This value is only available with 'Use Mouse Over'.
|
The mouse/touch script events 'On Click', 'On Move' and 'On Release' all include three variable. 'X' The x coordinate of the mouse/touch. 'Y' The y coordinate of the mouse/touch. 'MouseButton' The mouse button that has been clicked, 1 is the left button, 2 is the right button.
On Start
• The script to be executed when the movie starts. This function is only executed when 'Auto Play' is off.
|
On Update
• The script to be executed every time the movie updates. This could be many times a second. The frequency depends on the speed of the web browser and the complexity of the movie.
|
The script event 'On Update' includes two variable. 'TimeChange' The change in movie time since the last update. A time of 1, equals 1 frame. 'SecondsChange' The change in seconds since the last update.
MyTimer+=TimeChange; //Time Passed
On Resize
• The script to be executed when the web browser or device is resized or rotated.
|
On End
• The script to be executed when the movie ends. This script is only executed when 'Loop' is off.
|
GetUrl("NextMovie.html");
On Key Press
• The script to be executed when a keyboard key has been pressed. This script event includes a variable 'Key', which is the unicode value of the key that has been pressed.
|
alert(Key);
On Key Release
• The script to be executed when a keyboard key has been released. This script event includes a variable 'Key', which is the unicode value of the key that has been released.
|
No JavaScript
• This message is displayed in the HTML export if JavaScript is unavailable or has been turned off in the web browser.
|
<b>Message</b><br />
This web browser does not support javascript.<br />
Loader
• Edit the loader.
|
Title
• The title of the movie when exported.
|
Icon
• An icon for your movie. It will appear in web browsers to represent the page. It can also be used as an icon on the home screen of Apple devices.
|
Cursor
• Change the mouse cursor. Cursors are ignored on touch devices.
|
Custom Cursor
• Set the cursor to a cursor in the library.
|
Do Not Cache
• Do not cache this movie when it is exported to a HTML web page.
|
Ambient Color
• Internet Explorer 6-8 does not display the borders of semi transparent items correctly. This average color is used as a background color for the borders. The color of the movie background usually works best.
|
Author
• Your name or company name can be stored in the exported HTML file.
|
Website
• The authors website can be included in exported widgets.
|
E-Mail
• The authors e-mail address can be included in exported widgets.
|
Description
• A description of the movie can be stored in the exported HTML file. This helps search engines understand your movie.
|
HEAD
• Add additional custom HTML to the HEAD tag, when exporting to HTML.
|
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Hippani" />
<meta name="twitter:title" content="HTML Animation with Hippani Animator" />
<meta name="twitter:domain" content="www.Hippani.com" />
<meta name="twitter:description" content="This is an example twitter card. It adds more information to twitter tweets." />
<meta name="twitter:image" content="https://www.Hippani.com/Images/MediumHippo2.png" />
BODY
• Add additional custom HTML to the BODY tag, when exporting to HTML.
|
Google Analytics
• Track the exported HTML file on the internet using Google Analytics. This should be in the format UA-123456-7.
|
Script
Play
• Play the movie.
Play();
|
Stop
• Stop the movie.
Stop();
|
Goto and Play
• Play the movie from a specific frame. For example, GotoAndPlay(100).
GotoAndPlay(Frame:Number);
|
Goto and Stop
• Go to a specific frame of the movie and then stop. For example, GotoAndStop(100).
GotoAndStop(Frame:Number);
|
Play Clip
• Play a clip of the movie from start to end. For example, PlayClip(100,200).
PlayClip(Start:Number,End:Number);
|
Play Loop
• Play a clip of the movie from start to end continuously. For example, PlayLoop(100,200).
PlayLoop(Start:Number,End:Number);
|
Play Then Loop
• Play a clip of the movie from start to end. Then continuously play a loop. For example, PlayThenLoop(100,180,200) This will start on frame 100, play until frame 200 then loop back to frame 180. The start frame of the loop could be before the start frame.
PlayLoop(Start:Number,StartLoop:Number,End:Number);
|
Pause
• Pause the movie. This is like Stop() except it does not break out of any clips or loops it may be in.
Pause();
|
Resume
• Resume the movie. This is like Play() except it does not break out of any clips or loops it may be in.
Resume();
|
Get Time
• Returns the current time of the scene. This is a floating point value.
GetTime();
|
Set Time
• Set the current time of the scene.
SetTime(Frame:Number);
|
Get Frame
• Returns the current frame of the scene. This is similar to the time except it is a whole number.
GetFrame();
|
Set Frame
• Set the current frame of the scene. This is like setting the time but it can only be a whole number.
SetFrame(Frame:Number);
|
Get Speed
• Get the speed of the movie. The default value is 1. 2 is double speed. 0.5 is half speed. 0 is stopped. -1 is reverse. When in reverse the start frame of any loops or clips should be higher than the end frame.
GetSpeed();
|
Set Speed
• Set the speed of the movie. The default value is 1. 2 is double speed. 0.5 is half speed. 0 is stopped. -1 is reverse. When in reverse the start frame of any loops or clips should be higher than the end frame.
SetSpeed(Speed:Number);
|
Item Move To Front
• Bring the item to the front of the layer.
ItemMoveToFront("Script ID");
|
Item Move Forward
• Bring the item forward one place in the layer.
ItemMoveForward("Script ID");
|
Item Move Backward
• Send the item back one place in the layer.
ItemMoveBackward("Script ID");
|
Item Move To Back
• Send the item to the back of the layer.
ItemMoveToBack("Script ID");
|
Item Delete
• Delete an item from a layer using script. This only works for items that do not use the timeline.
ItemDelete("Script ID");
|
Item Duplicate
• Duplicate an item in a layer using script. This only works for items that do not use the timeline.
ItemDuplicate("Script ID","New Script ID");
|
var Box2=ItemDuplicate("OriginalBox","Box2");
var Circles=new Array();
for(var i=0;i<10;i++){
Circles.push(ItemDuplicate("OriginalCircle","Circle"+i));
}