Informacje o konwertowaniu kodów FrameScript w skryptach ActionScript na kody JavaScript w skryptach HTML5 Canvas.
Odwzorowywanie wycinków kodu ActionScript na HTML5
Poniżej wymieniono wycinki kodu JavaScript/HTML5 odpowiadające kodom FrameScript/ActionScript:
Operacja |
ActionScript |
HTML 5 |
Zatrzymaj na tej klatce |
stop(); |
this.stop(); |
Kliknij, aby przejść do klatki i zatrzymać |
gotoAndStop(5); |
this.gotoAndStop(5); |
Kliknij, aby przejść do klatki i odtworzyć |
gotoAndPlay(5); |
this.gotoAndPlay(5); |
Kliknij, aby przejść do strony internetowej |
navigateToURL(new URLRequest(„http://www.adobe.com/pl"), "_blank");
|
window.open(„http://www.adobe.com/pl", "_blank"); |
Własny wskaźnik myszy |
function fl_CustomMouseCursor(event:Event) { nazwa_wystąpienia.x = stage.mouseX; nazwa_wystąpienia.y = stage.mouseY; } Mouse.hide();
|
function fl_CustomMouseCursor() { this.btnNavigate.x = stage.mouseX; this.btnNavigate.y = stage.mouseY; this.nazwa_wystąpienia.y = stage.mouseY; |
Odtwórz klip filmowy |
nazwa_wystąpienia.play(); |
this.nazwa_wystąpienia.play(); |
Zatrzymaj klip filmowy |
nazwa_wystąpienia.stop(); |
this.nazwa_wystąpienia.stop(); |
Kliknij, aby ukryć obiekt |
nazwa_wystąpienia.addEventListener(MouseEvent.CLICK, fl_ClickToHide);
function fl_ClickToHide(event:MouseEvent):void { nazwa_wystąpienia.visible = false; } |
this.nazwa_wystąpienia.addEventListener("click", fl_ClickToHide.bind(this));
function fl_ClickToHide() { this.nazwa_wystąpienia.visible = false; } |
Pokaż obiekt |
nazwa_wystąpienia.visible = true; |
this.nazwa_wystąpienia.visible = true; |
Kliknij, aby ustalić położenie obiektu |
nazwa_wystąpienia.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);
function fl_ClickToPosition(event:MouseEvent):void { nazwa_wystąpienia.x = 200; nazwa_wystąpienia.y = 100; } |
this.nazwa_wystąpienia.addEventListener("click", fl_ClickToPosition.bind(this));
function fl_ClickToPosition() { this.nazwa_wystąpienia.x = 200; this.nazwa_wystąpienia.y = 100; }
|
Kliknij, aby wyświetlić pole tekstowe |
nazwa_wystąpienia.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);
var fl_PoleTekstowe:TextField; var fl_TekstDoWyswietlenia:String = "Lorem ipsum dolor sit amet.";
function fl_ClickToPosition(event:MouseEvent):void { fl_PoleTekstowe = new TextField(); fl_PoleTekstowe.autoSize = TextFieldAutoSize.LEFT; fl_PoleTekstowe.background = true; fl_PoleTekstowe.border = true; fl_PoleTekstowe.x = 200; fl_PoleTekstowe.y = 100; fl_PoleTekstowe.text = fl_TekstDoWyswietlenia; addChild(fl_PoleTekstowe); } |
this.nazwa_wystąpienia.addEventListener("click", fl_ClickToPosition.bind(this));
var fl_PoleTekstowe = new createjs.Text(); var fl_TekstDoWyswietlenia = "Lorem ipsum dolor sit amet.";
function fl_ClickToPosition() {
fl_PoleTekstowe.x = 200; fl_PoleTekstowe.y = 100; fl_PoleTekstowe.color = "#ff7700"; fl_PoleTekstowe.font = "20px Arial"; fl_PoleTekstowe.text = fl_TekstDoWyswietlenia; this.addChild(fl_PoleTekstowe); } |
Zdarzenie: kliknięcie myszą |
nazwa_wystąpienia.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void |
this.nazwa_wystąpienia.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler() |
Zdarzenie: wskazanie myszą |
nazwa_wystąpienia.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);
function fl_MouseOverHandler(event:MouseEvent):void |
var częstotliwość = 3; stage.enableMouseOver(częstotliwość); this.nazwa_wystąpienia.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler() |
Zdarzenie: odsunięcie myszy |
nazwa_wystąpienia.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);
function fl_MouseOutHandler(event:MouseEvent):void |
var częstotliwość = 3; stage.enableMouseOver(częstotliwość); this.nazwa_wystąpienia.addEventListener("mouseout", fl_MouseOutHandler);
function fl_MouseOutHandler()
|
Przesuń w poziomie |
nazwa_wystąpienia.x += 100; |
this.nazwa_wystąpienia.x+=100; |
Przesuń w pionie |
nazwa_wystąpienia.y += 100; |
this.nazwa_wystąpienia.y+=100; |
Pojedynczy obrót |
nazwa_wystąpienia.rotation += 45; |
this.nazwa_wystąpienia.rotation+=45; |
Obrót w pętli |
nazwa_wystąpienia.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously);
function fl_RotateContinuously(event:Event) { nazwa_wystąpienia.rotation += 10; } |
this.addEventListener("tick",fl_RotateContinuously.bind(this));
function fl_RotateContinuously(){ this.nazwa_wystąpienia.rotation+=10; } |
Animacja w poziomie |
nazwa_wystąpienia.addEventListener(Event.ENTER_FRAME, fl_AnimateHorizontally);
function fl_AnimateHorizontally(event:Event) { nazwa_wystąpienia.x += 10; } |
this.addEventListener("tick", fl_AnimateHorizontally.bind(this));
function fl_AnimateHorizontally() { this.nazwa_wystąpienia.x+=10; } |
Animacja w pionie |
nazwa_wystąpienia.addEventListener(Event.ENTER_FRAME, fl_AnimateVertically);
function fl_AnimateVertically(event:Event) { nazwa_wystąpienia.y += 10; } |
this.addEventListener("tick", fl_AnimateVertically.bind(this));
function fl_AnimateVertically() { this.nazwa_wystąpienia.y+=10; } |
Efekt pojawiania się klipu filmowego |
nazwa_wystąpienia.addEventListener(Event.ENTER_FRAME, fl_FadeSymbolIn); nazwa_wystąpienia.alpha = 0;
function fl_FadeSymbolIn(event:Event) { nazwa_wystąpienia.alpha += 0.01; if(nazwa_wystąpienia.alpha >= 1) { nazwa_wystąpienia.removeEventListener(Event.ENTER_FRAME, fl_FadeSymbolIn); } } |
this.addEventListener('tick', fl_FadeSymbolIn.bind(this)); this.nazwa_wystąpienia.alpha = 0;
function fl_FadeSymbolIn() { this.nazwa_wystąpienia.alpha += 0.01; if(this.nazwa_wystąpienia.alpha >= 1) { this.removeEventListener('tick', fl_FadeSymbolIn.bind(this)); } } |
Efekt zanikania klipu filmowego |
nazwa_wystąpienia.addEventListener(Event.ENTER_FRAME, fl_FadeSymbolOut); nazwa_wystąpienia.alpha = 1;
function fl_FadeSymbolOut(event:Event) { nazwa_wystąpienia.alpha -= 0.01; if(nazwa_wystąpienia.alpha <= 0) { nazwa_wystąpienia.removeEventListener(Event.ENTER_FRAME, fl_FadeSymbolOut); } } |
this.addEventListener('tick', fl_FadeSymbolOut.bind(this)); this.nazwa_wystąpienia.alpha = 1;
function fl_FadeSymbolOut() { this.nazwa_wystąpienia.alpha -= 0.01; if(this.nazwa_wystąpienia.alpha <= 1) { this.removeEventListener('tick', fl_FadeSymbolOut.bind(this)); } } |
Kliknij, aby załadować obraz z biblioteki |
nazwa_wystąpienia.addEventListener(MouseEvent.CLICK, fl_ClickToLoadImageFromLibrary);
function fl_ClickToLoadImageFromLibrary(event:MouseEvent):void { // Aby dodać inny obraz z biblioteki, // wprowadź inną nazwę w polu tekstowym Klasa w powyższym kroku 4 oraz w kodzie znajdującym się poniżej. var obrazzBiblioteki:MyImage = new MyImage();
var holder:Bitmap = new Bitmap(obrazzBiblioteki); addChild(holder); } |
this.nazwa_wystąpienia.addEventListener('click',fl_ClickToLoadImageFromLibrary.bind(this));
function fl_ClickToLoadImageFromLibrary() {
var obrazzBiblioteki = new lib.MyImage(); this.addChild(obrazzBiblioteki); }
|
Dodaj wystąpienie z biblioteki |
var fl_MojeWystapienie:LibrarySymbol = new LibrarySymbol(); addChild(fl_MojeWystapienie); |
var fl_MojeWystapienie = new lib.LibrarySymbol(); this.addChild(fl_MojeWystapienie); |