Cette section décrit la conversion de codes FrameScript dans ActionScript en code JavaScript dans HTML5 Canvas..
Mappage d’ActionScript en fragments de code HTML5
Voici la liste des fragments de code JavaScript/HTML5 équivalents pour les codes FrameScript/ActionScript :
Action |
ActionScript |
HTML5 |
Arrêter la lecture à partir de cette image |
stop(); |
this.stop(); |
Cliquer pour atteindre l’image et arrêter la lecture |
gotoAndStop(5); |
this.gotoAndStop(5); |
Cliquer pour atteindre l’image et démarrer la lecture |
gotoAndPlay(5); |
this.gotoAndPlay(5); |
Cliquer pour accéder à une page Web |
navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");
|
window.open("http://www.adobe.com", "_blank"); |
Curseur de souris personnalisé |
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; |
Lire un clip |
instance_name_here.play(); |
this.instance_name_here.play(); |
Arrêter un clip |
instance_name_here.stop(); |
this.instance_name_here.stop(); |
Cliquer pour masquer un objet |
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; } |
Afficher un objet |
instance_name_here.visible = true; |
this.instance_name_here.visible = true; |
Cliquer pour positionner un objet |
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; }
|
Cliquer pour afficher un champ de texte |
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); } |
Événement MouseClick |
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() |
Événement MouseOver |
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() |
Événement MouseOut |
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()
|
Déplacer horizontalement |
instance_name_here.x += 100; |
this.instance_name_here.x+=100; |
Déplacer verticalement |
instance_name_here.y += 100; |
this.instance_name_here.y+=100; |
Faire pivoter une fois |
instance_name_here.rotation += 45; |
this.instance_name_here.rotation+=45; |
Faire pivoter continuellement |
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; } |
Animer horizontalement |
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; } |
Animer verticalement |
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; } |
Fondu en entrée dans un 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)); } } |
Fondu en sortie dans un 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)); } } |
Cliquer pour charger une image de la bibliothèque |
instance_name_here.addEventListener(MouseEvent.CLICK, fl_ClickToLoadImageFromLibrary);
function fl_ClickToLoadImageFromLibrary(event:MouseEvent):void { // Si vous souhaitez ajouter une autre image de la bibliothèque, // entrez un nom différent dans le champ de texte Classe à l’étape 4 ci-dessus et dans le code ci-dessous. 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); }
|
Ajouter une occurrence depuis la bibliothèque |
var fl_MyInstance:LibrarySymbol = new LibrarySymbol(); addChild(fl_MyInstance); |
var fl_MyInstance = new lib.LibrarySymbol(); this.addChild(fl_MyInstance); |
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?