Aprenda a convertir códigos FrameScript en ActionScript a código JavaScript en HTML5 Canvas.
Asignación de fragmentos de código ActionScript a HTML5
A continuación se incluye la lista de fragmentos de código JavaScript/HTML5 equivalentes para los códigos FrameScript/ActionScript:
Acción |
ActionScript |
HTML5 |
Detener en este fotograma |
stop(); |
this.stop(); |
Hacer clic para ir al fotograma y detener |
gotoAndStop(5); |
this.gotoAndStop(5); |
Hacer clic para ir al fotograma y reproducir |
gotoAndPlay(5); |
this.gotoAndPlay(5); |
Haga clic para ir a una página web |
navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");
|
window.open("http://www.adobe.com", "_blank"); |
Cursor de ratón personalizado |
function fl_CustomMouseCursor(event:Event) { nombre_instancia_aquí.x = stage.mouseX; nombre_instancia_aquí.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; |
Reproducción de un clip de película |
nombre_instancia_aquí.play(); |
this.nombre_instancia_aquí.play(); |
Detener un clip de película |
nombre_instancia_aquí.stop(); |
this.nombre_instancia_aquí.stop (); |
Hacer clic para ocultar un objeto |
nombre_instancia_aquí.addEventListener(MouseEvent.CLICK, fl_ClickToHide);
function fl_ClickToHide(event:MouseEvent):void { nombre_instancia_aquí.visible = false; } |
this.nombre_instancia_aquí.addEventListener("click", fl_ClickToHide.bind(this));
function fl_ClickToHide() { this.nombre_instancia_aquí.visible = false; } |
Mostrar un objeto |
nombre_instancia_aquí.visible = true; |
this.nombre_instancia_aquí.visible = true; |
Hacer clic para colocar un objeto |
nombre_instancia_aquí.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);
function fl_ClickToPosition(event:MouseEvent):void { nombre_instancia_aquí.x = 200; nombre_instancia_aquí.y = 100; } |
this.nombre_instancia_aquí.addEventListener("click", fl_ClickToPosition.bind(this));
function fl_ClickToPosition() { this.nombre_instancia_aquí.x = 200; this.nombre_instancia_aquí.y = 100; }
|
Hacer clic para mostrar un campo de texto |
nombre_instancia_aquí.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.nombre_instancia_aquí.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); } |
Evento MouseClick |
nombre_instancia_aquí.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void |
this.nombre_instancia_aquí.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler() |
Evento MouseOver |
nombre_instancia_aquí.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);
function fl_MouseOverHandler(event:MouseEvent):void |
var frequency = 3; stage.enableMouseOver(frequency); this.nombre_instancia_aquí.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler() |
Evento MouseOut |
nombre_instancia_aquí.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);
function fl_MouseOutHandler(event:MouseEvent):void |
var frequency = 3; stage.enableMouseOver(frequency); this.nombre_instancia_aquí.addEventListener("mouseout", fl_MouseOutHandler);
function fl_MouseOutHandler()
|
Mover horizontalmente |
nombre_instancia_aquí.x += 100; |
this.nombre_instancia_aquí.x+=100; |
Mover verticalmente |
nombre_instancia_aquí.y += 100; |
this.nombre_instancia_aquí.y+=100; |
Rotar una vez |
nombre_instancia_aquí.rotation += 45; |
this.nombre_instancia_aquí.rotation+=45; |
Rotar continuadamente |
nombre_instancia_aquí.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously);
function fl_RotateContinuously(event:Event) { nombre_instancia_aquí.rotation += 10; } |
this.addEventListener("tick",fl_RotateContinuously.bind(this));
function fl_RotateContinuously(){ this.nombre_instancia_aquí.rotation+=10; } |
Animar horizontalmente |
nombre_instancia_aquí.addEventListener(Event.ENTER_FRAME, fl_AnimateHorizontally);
function fl_AnimateHorizontally(event:Event) { nombre_instancia_aquí.x += 10; } |
this.addEventListener("tick", fl_AnimateHorizontally.bind(this));
function fl_AnimateHorizontally() { this.nombre_instancia_aquí.x+=10; } |
Animar verticalmente |
nombre_instancia_aquí.addEventListener(Event.ENTER_FRAME, fl_AnimateVertically);
function fl_AnimateVertically(event:Event) { nombre_instancia_aquí.y += 10; } |
this.addEventListener("tick", fl_AnimateVertically.bind(this));
function fl_AnimateVertically() { this.nombre_instancia_aquí.y+=10; } |
Aumento progresivo de un clip de película |
nombre_instancia_aquí.addEventListener(Event.ENTER_FRAME, fl_FadeSymbolIn); nombre_instancia_aquí.alpha = 0;
function fl_FadeSymbolIn(event:Event) { nombre_instancia_aquí.alpha += 0.01; if(nombre_instancia_aquí.alpha >= 1) { nombre_instancia_aquí.removeEventListener(Event.ENTER_FRAME, fl_FadeSymbolIn); } } |
this.addEventListener('tick', fl_FadeSymbolIn.bind(this)); this.nombre_instancia_aquí.alpha = 0;
function fl_FadeSymbolIn() { this.nombre_instancia_aquí.alpha += 0.01; if(this.nombre_instancia_aquí.alpha >= 1) { this.removeEventListener('tick', fl_FadeSymbolIn.bind(this)); } } |
Desvanecimiento de un clip de película |
nombre_instancia_aquí.addEventListener(Event.ENTER_FRAME, fl_FadeSymbolOut); nombre_instancia_aquí.alpha = 1;
function fl_FadeSymbolOut(event:Event) { nombre_instancia_aquí.alpha -= 0.01; if(nombre_instancia_aquí.alpha <= 0) { nombre_instancia_aquí.removeEventListener(Event.ENTER_FRAME, fl_FadeSymbolOut); } } |
this.addEventListener('tick', fl_FadeSymbolOut.bind(this)); this.nombre_instancia_aquí.alpha = 1;
function fl_FadeSymbolOut() { this.nombre_instancia_aquí.alpha -= 0.01; if(this.nombre_instancia_aquí.alpha <= 1) { this.removeEventListener('tick', fl_FadeSymbolOut.bind(this)); } } |
Hacer clic para cargar imagen desde biblioteca |
nombre_instancia_aquí.addEventListener(MouseEvent.CLICK, fl_ClickToLoadImageFromLibrary);
function fl_ClickToLoadImageFromLibrary(event:MouseEvent):void { // Si quiere añadir una imagen distinta desde la biblioteca, // escriba otro nombre en el campo de texto Clase del paso 4 anterior y en el siguiente código. var libImage:MyImage = new MyImage();
var holder:Bitmap = new Bitmap(libImage); addChild(holder); } |
this.nombre_instancia_aquí.addEventListener('click',fl_ClickToLoadImageFromLibrary.bind(this));
function fl_ClickToLoadImageFromLibrary() {
var libImage = new lib.MyImage(); this.addChild(libImage); }
|
Añadir instancia desde la biblioteca |
var fl_MyInstance:LibrarySymbol = new LibrarySymbol(); addChild(fl_MyInstance); |
var fl_MyInstance = new lib.LibrarySymbol(); this.addChild(fl_MyInstance); |