Convert your ActionScript code to HTML5

Learn how to convert FrameScript codes in ActionScript to JavaScript codes in HTML5 Canvas.

Mapping of ActionScript to HTML5 code snippets

Here is the list of JavaScript/HTML5-equivalent code snippets for the FrameScript/ActionScript codes:

Action

ActionScript

HTML5

Stop at this frame

stop();

this.stop();

Click to go to frame and stop

gotoAndStop(5);

this.gotoAndStop(5);

Click to go to frame and play

gotoAndPlay(5);

this.gotoAndPlay(5);

Click to go to a web page

navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");

 

window.open("http://www.adobe.com", "_blank");

Custom mouse cursor

function fl_CustomMouseCursor(event:Event)

{

               instance_name_here.x = stage.mouseX;

               instance_name_here.y = stage.mouseY;

}

Mouse.hide();

 

function fl_CustomMouseCursor() {

               this.btnNavigate.x = stage.mouseX;

               this.btnNavigate.y = stage.mouseY;          this.instance_name_here.y = stage.mouseY;

Play a movie clip

instance_name_here.play();

this.instance_name_here.play();

Stop a movie clip

instance_name_here.stop();

this.instance_name_here.stop();

Click to hide an object

instance_name_here.addEventListener(MouseEvent.CLICK, fl_ClickToHide);

 

function fl_ClickToHide(event:MouseEvent):void

{

               instance_name_here.visible = false;

}

this.instance_name_here.addEventListener("click", fl_ClickToHide.bind(this));

 

function fl_ClickToHide()

{

               this.instance_name_here.visible = false;

}

Show an object

instance_name_here.visible = true;

this.instance_name_here.visible = true;

Click to position an object

instance_name_here.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);

 

function fl_ClickToPosition(event:MouseEvent):void

{

               instance_name_here.x = 200;

               instance_name_here.y = 100;

}

this.instance_name_here.addEventListener("click", fl_ClickToPosition.bind(this));

 

function fl_ClickToPosition()

{

               this.instance_name_here.x = 200;

               this.instance_name_here.y = 100;

}

 

Click to display a text field

instance_name_here.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);

 

var fl_TF:TextField;

var fl_TextToDisplay:String = "Lorem ipsum dolor sit amet.";

 

function fl_ClickToPosition(event:MouseEvent):void

{

               fl_TF = new TextField();

               fl_TF.autoSize = TextFieldAutoSize.LEFT;

               fl_TF.background = true;

               fl_TF.border = true;

               fl_TF.x = 200;

               fl_TF.y = 100;

               fl_TF.text = fl_TextToDisplay;

               addChild(fl_TF);

}

this.instance_name_here.addEventListener("click", fl_ClickToPosition.bind(this));

 

var fl_TF = new createjs.Text();

var fl_TextToDisplay = "Lorem ipsum dolor sit amet.";

 

function fl_ClickToPosition()

{

              

               fl_TF.x = 200;

               fl_TF.y = 100;

               fl_TF.color = "#ff7700";

               fl_TF.font = "20px Arial";

               fl_TF.text = fl_TextToDisplay;

               this.addChild(fl_TF);

}

Mouse click event

instance_name_here.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);

 

function fl_MouseClickHandler(event:MouseEvent):void

this.instance_name_here.addEventListener("click", fl_MouseClickHandler.bind(this));

 

function fl_MouseClickHandler()

Mouse over event

instance_name_here.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);

 

function fl_MouseOverHandler(event:MouseEvent):void

var frequency = 3;

stage.enableMouseOver(frequency);

this.instance_name_here.addEventListener("mouseover", fl_MouseOverHandler);

 

function fl_MouseOverHandler()

Mouse out event

instance_name_here.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);

 

function fl_MouseOutHandler(event:MouseEvent):void

var frequency = 3;

stage.enableMouseOver(frequency);

this.instance_name_here.addEventListener("mouseout", fl_MouseOutHandler);

 

function fl_MouseOutHandler()

 

Move horizontally

instance_name_here.x += 100;

this.instance_name_here.x+=100;

Move vertically

instance_name_here.y += 100;

this.instance_name_here.y+=100;

Rotate once

instance_name_here.rotation += 45;

this.instance_name_here.rotation+=45;

Rotate continuously

instance_name_here.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously);

 

function fl_RotateContinuously(event:Event)

{

               instance_name_here.rotation += 10;

}

this.addEventListener("tick",fl_RotateContinuously.bind(this));

 

function fl_RotateContinuously(){

               this.instance_name_here.rotation+=10;

}

Animate horizontally

instance_name_here.addEventListener(Event.ENTER_FRAME, fl_AnimateHorizontally);

 

function fl_AnimateHorizontally(event:Event)

{

               instance_name_here.x += 10;

}

this.addEventListener("tick", fl_AnimateHorizontally.bind(this));

 

function fl_AnimateHorizontally()

{

               this.instance_name_here.x+=10;

}

Animate vertically

instance_name_here.addEventListener(Event.ENTER_FRAME, fl_AnimateVertically);

 

function fl_AnimateVertically(event:Event)

{

               instance_name_here.y += 10;

}

this.addEventListener("tick", fl_AnimateVertically.bind(this));

 

function fl_AnimateVertically()

{

               this.instance_name_here.y+=10;

}

Fade in a movie clip

instance_name_here.addEventListener(Event.ENTER_FRAME, fl_FadeSymbolIn);

instance_name_here.alpha = 0;

 

function fl_FadeSymbolIn(event:Event)

{

               instance_name_here.alpha += 0.01;

               if(instance_name_here.alpha >= 1)

               {

                              instance_name_here.removeEventListener(Event.ENTER_FRAME, fl_FadeSymbolIn);

               }

}

this.addEventListener('tick', fl_FadeSymbolIn.bind(this));

this.instance_name_here.alpha = 0;

 

function fl_FadeSymbolIn()

{

               this.instance_name_here.alpha += 0.01;

               if(this.instance_name_here.alpha >= 1)

               {

                              this.removeEventListener('tick', fl_FadeSymbolIn.bind(this));

               }

}

Fade out a movie clip

instance_name_here.addEventListener(Event.ENTER_FRAME, fl_FadeSymbolOut);

instance_name_here.alpha = 1;

 

function fl_FadeSymbolOut(event:Event)

{

               instance_name_here.alpha -= 0.01;

               if(instance_name_here.alpha <= 0)

               {

                              instance_name_here.removeEventListener(Event.ENTER_FRAME, fl_FadeSymbolOut);

               }

}

this.addEventListener('tick', fl_FadeSymbolOut.bind(this));

this.instance_name_here.alpha = 1;

 

function fl_FadeSymbolOut()

{

               this.instance_name_here.alpha -= 0.01;

               if(this.instance_name_here.alpha <= 1)

               {

                              this.removeEventListener('tick', fl_FadeSymbolOut.bind(this));

               }

}

Click to load image from library

instance_name_here.addEventListener(MouseEvent.CLICK, fl_ClickToLoadImageFromLibrary);

 

function fl_ClickToLoadImageFromLibrary(event:MouseEvent):void

{

               // If you want to add a different image from the library,

               // enter a different name in the Class text field at step 4 above and in the code below.

               var libImage:MyImage = new MyImage();

 

               var holder:Bitmap = new Bitmap(libImage);

               addChild(holder);

}

this.instance_name_here.addEventListener('click',fl_ClickToLoadImageFromLibrary.bind(this));

 

function fl_ClickToLoadImageFromLibrary()

{

              

               var libImage = new lib.MyImage();

               this.addChild(libImage);

}

 

Add instance from library

var fl_MyInstance:LibrarySymbol = new LibrarySymbol();

addChild(fl_MyInstance);

var fl_MyInstance = new lib.LibrarySymbol();

this.addChild(fl_MyInstance);

 

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online