Learn how to convert FrameScript codes in ActionScript to JavaScript codes in HTML5 Canvas.
To see how all the ActionScript code in the example document were converted in to HTML5 Canvas, download BannerNewFeatures_Canvas.zip and open the BannerNewFeatures_Canvas.fla file. To view the final output in HTML5, download Published-Banner-HTML5.zip. And open the BannerNewFeatures_Canvas.html file. How do I convert HTML5 to Flash. It is possible to render HTML5 canvas> animation to a video file. Download phpswfTools by composer. Buy Creating HTML5 Animations with Flash and Wallaby. How do I convert a.swf file to HTML5 and make changes in the code? Flash to HTML5 Conversion Tool on Adobe Labs. “Wallaby” Flash-to-HTML5 conversion tool now available. (at least relative to Canvas). It would be good to fact-check that belief via the Wallaby forum. BFD, can it convert a flash application with user interactivity, database connectivity and video to HTML 5? That would be a game changer.
Html5 Canvas Drawing
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); |
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy