I'm quite new to Flash Actionscript & Javascript but I'm hoping to get some help here if possible. I'm creating a website using the canvas element, there is an image on the canvas and when you scroll over a part of that image, a movie clip plays, when you click on it, it takes you to another page.
I'm using flash to create it, but I'm having difficulty figuring out what's going wrong. I'm using code snippets to add in event handlers but I'm not getting the movie clip to play. The link to the page works but the mouse over event does not.
Also, my movie clip contains many layers, will this make a difference?
Any help would be greatly appreciated.
/* Stop a Movie Clip*/
this.movieClip_11.stop();
/* Mouse Over Event*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_11.addEventListener("mouseover", fl_MouseOverHandler_32);
function fl_MouseOverHandler_32()
{
this.movieClip_11.play();
}
/* Play a Movie Clip*/
/* Click to Go to Web Page*/
this.movieClip_11.addEventListener("click", fl_ClickToGoToWebPage_15);
function fl_ClickToGoToWebPage_15() {
window.open("___", "_self");
}
The problem is that javascript handles scope(i.e. this) differently to ActionScript. In AS3 you can assume that the event handler maintains the scope of its containing object. In JS this isn't the case. Here are a couple of solutions to this problem:
You can pass the scope to the event handler using the bind method. For example, this technique is utilized in the code snippets in Flash for HTML5 Canvas/Timeline Navigation/Click to Go to Frame and Play.
this.movieClip_11.stop();
var frequency=3;
stage.enableMouseOver(frequency);
this.movieClip_11.addEventListener("mouseover",
fl_MouseOverHandler_32.bind(this));
function fl_MouseOverHandler_32()
{
this.movieClip_11.play();
}
An alternative solution available in easeljs(the javascript library utilized by Flash for producing HTML canvas content) is achieved by calling the EventDispatcher method called on instead of addEventListener. easeljs docs Now the event handler assumes the scope of the object that dispatched the event.
this.movieClip_11.stop();
var frequency=3;
stage.enableMouseOver(frequency);
this.movieClip_11.on("rollover",fl_MouseOverHandler_32);
function fl_MouseOverHandler_32()
{
this.play();
}
Related
I am creating a chrome extension that adds a button to the youtube player HUD (to the left of the watch later button). This works fine, but the only problem is that when the HUD autofades after a few seconds of inactivity, this button element doesn't.
I've added the button to the following div using javascript:
<div class="ytp-chrome-top-buttons"> </div>
and my button looks like this:
<button class="customClass" id="customID" title="custom title"><svg class="customClass"></svg></button>
I've looked through the source of the page to try and see how exactly youtube makes the other icons disappear, and whether I can copy a class to my svg to make it disappear, but I haven't been able to find it.
I've looked at using a timer and javascript to make the element disappear, but I figured if the functionality is already there, why complicate it.
As a last resort I will be resorting to using the timer method, but I'd much prefer using CSS classes.
I have had a cursory glance into the Youtube Player API, but to be frank, I'm having a hard time understanding how it works (While I have a few years of programming experience, I only started learning javascript, HTML, and CSS yesterday). I also understand that this API is only for embedded youtube videos?
To clarify, I DO know how to use API's in javascript, just not this particular one. I have used the youtube data API to implement the button's functionality successfully.
Any help is appreciated.
Thanks.
If you examine the element changes, you can see that the class list of the video has changed with the change of the bottom bar. When the bottom bar is hidden, the ytp-autohide class is added. Keeping this in mind, after scanning the class changes with the mutation observer, you will reach the desired result when the ytp-autohide class's existence status changes.
var video = document.querySelector("#movie_player");
var lastState = video.classList.contains('ytp-autohide');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.attributeName == "class"){
var currentState = mutation.target.classList.contains('ytp-autohide');
if(lastState !== currentState) {
lastState = currentState;
if(currentState)
console.log("Hided");
else
console.log("Shown");
}
}
});
});
observer.observe(video, {attributes: true});
I have created two xml files for a screen. one named "login-page.port.xml" and the other one is "login-page.land.xaml".
Is there a way to programmatically detect orientation change within the application?
Thanks,
Keks
Yes, there is a way to detect orientation change in the application. The easiest method is in the page you want to get the orientation; add the loaded and unloaded events to your page.xml files:
<Page loaded="pageLoaded" unloaded="pageUnloaded">
In your page.js file; add code like this:
var application=require('application');
exports.pageLoaded = function() {
application.on(application.orientationChangedEvent, setOrientation);
};
exports.pageUnloaded = function() {
application.off(application.orientationChangedEvent, setOrientation);
}
function setOrientation(args) {
// Will console out the new Orientation
console.log(args.newValue);
}
A couple notes;
1. You want to add & remove the event listener as you enter and exit the page; otherwise the listener is global and will continue to fire when the orientation changes even when you are on another page.
2. You can add multiple listeners to this event, so again if you don't remove the listener, then each time you re-load this page you will add ANOTHER copy of this listener to the group and so it will fire as many times as you have added it.
3. On android in v1.6.1 their is a bug in the orientation firing. https://github.com/NativeScript/NativeScript/issues/1656 (Basically if you start in Landscape, rotate it won't detect it. The issue has the patch that I've applied manually to my code).
Now Looking at your actual example; are you aware that at least as of version 1.6.x of NativeScript it will only load the XML for which ever orientation it currently is set as; but it will NOT load the other orientation's xml when you rotate. So, if you are in Landscape; enter the screen then rotate it will still be using the Landscape xml file.
Now with all that said you might seriously consider looking at the nativescript-orientation plugin which I am the author of, this plugin simplifies dealing with screen orientation and allows you to only have ONE .xml file and then change things via css.
For those using angular2-nativescript typescript
Please refer to the on method found in the documentation
on(event: "orientationChanged", callback: function, thisArg?: any):
any Defined in application/application.d.ts:232 This event is raised
the orientation of the current device has changed.
Parameters
event: "orientationChanged"
callback: function
(args: OrientationChangedEventData): void Parameters
args: OrientationChangedEventData
Returns void Optional thisArg: any
Returns any
Example in use:
#Component({
selector: "Test"
//templateUrl, styleUrls, etc...
})
export class TestComponent{
constructor(){
on("orientationChanged", this.onOrientationChanged)
}
public onOrientationChanged = (evt) => {
console.log("Orientation has changed !");
console.log(evt.eventName); // orientationChanged
console.log(evt.newValue); //landscape or portrait
};
}
I've been trying to solve this for several time, but I'm now pointless with this situation. I'm creating a HTML5 canvas project in Flash CC, I'm kinda new in JS (not difficult BTW), the point is, I have around 10 keyframes inside my main timeline, and some classic buttons, all I need to do is to navigate inside every frame when a button is pressed (pretty easy uh!) the trouble is, the first frame works perfectly, but from 2 to the others, I can't be able to use buttons, interactivity is being programmed as follows:
var self = this;
this.stop();
this.btn4.addEventListener("click", clickUno);
function clickUno() {
self.gotoAndPlay(1);
}
Any help will be really appreciated, I just don't know why 1st frame works great, but others doesn't!
I had similar issues with canvas with flash.
I needed to created completed new buttons on every instance you need a button to get code to work. (ODD I know.)
Button code.
this.getinsideIt.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_9.bind(this));
function fl_ClickToGoToAndPlayFromFrame_9()
{
this.Mygreatmovie.gotoAndPlay(350);
}
As I understand, you need a button, clicking on which proceeds your animation 1 frame at a time. Correct?
You should make use of the currentFrame and totalFrames properties of the main stage for this. Query the current frame and move on to next!
var self = this;
this.stop();
if(!this.btn4.hasEventListener("click", clickUno))
this.btn4.addEventListener("click", clickUno);
function clickUno(e) {
var curr = self.currentFrame;
var total = self.totalFrames;
self.gotoAndStop((curr + 1)%total);
}
We are trying to build an HTML game in which abobe edge is being used for animations and those animations are being inserted into iframes. We are trying to preload the iframes before removing the 'loading screen' so that the users won't see blank iframes initially.
Here is the code for loading the iframes.
We have a global variable var middleBotLoaded = false;
The following function tries to dynamically populate the iframe and once the iframe has loaded , we are assigning the variable to true
function _trackIFrameLoading()
{
if (document.getElementById("botzmiddleidlesequence_iframe").attachEvent)
{
document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; });
}
else
{
document.getElementById("botzmiddleidlesequence_iframe").onload = function() { middleBotLoaded = true; };
}
document.getElementById("botzmiddleidlesequence_iframe").src = APP_BASE_URL + "blitzbotzidlesequence/blitzbotz/"+middleBotzId;
}
We have a method to check if the global variable has become true and if so , we are removing the loading screen.The method is being called in a interval of 500 milliseconds
setTimeout(_haveAllCharactersLoaded,500);
function _haveAllCharactersLoaded()
{
if(middleBotLoaded == true)
{
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
});
}
else
{
setTimeout(_haveAllCharactersLoaded,500);
}
}
The problem is that even after the loading screen disappears , the iframe contents take time to come up on the screen .
We have observed that the duration depends on the speed of the net connection , but then , isn't using onload the whole point of making sure that the contents have loaded.
Is there any other approach for dealing with this problem.
Thanks.
EDIT : I have to wait for two days before I can start a bounty but I am willing to award it to anyone who can provide a canonical answer to the question.
I have two answers here.
First, I think you should reconsider the way you're coding this game, unless it's a static, turn based game that only relies upon animations (think Pokemon.)
Second, I have a suggestion for you to try in fixing your code.
First Answer:
You asked if there is any other approach to dealing with this problem.
My first reaction to that, would be to skip using iFrames entirely. Adobe Edge may provide you with a good way to craft animations, but for use in a game engine you will only find yourself fighting against the design of how Adobe Edge handles it's animations.
Instead, I would recommend learning how to use HTML5's canvas element. Canvas is built to handle dynamically loaded content (such as your game engine will be generating.) I can only imagine the event of having particle effect animation overlayed onto a game character as he is hit by a weapon. With your current approach, would you place that in an iFrame? Then, how would you ensure that this particle effect is placed on the correct location on the object?
There are many resources out there to help you begin learning the code you need to make a true game engine in the browser. I would recommend beginning by learning how Canvas works. If you want to animate using the DOM, learn about requestAnimationFrame.
http://creativejs.com/
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Second Answer:
I would recommend looking into the variable scope of your middleBotLoaded. This answer (Set variable in parent window from iframe) would be a good place to look.
Instead of using document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; });
try using document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { parent.middleBotLoaded = true; });
Alternatively, try something along these lines:
onLoad event:
document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { parent.middleBotLoaded();});
Function to handle loading:
function middleBotLoaded()
{
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
});
}
It's a better practice to directly call an event, rather than polling for variable changes using setTimeout.
My problem is I need to capture a keypress but at any given time the user can be inside of an iframe inside of an iframe inside of an iframe.
At first, I thought I could just put the listener on document but that doesn't work if the user is inside of one of those iframes.
Next I thought of attaching the handler to window but ie doesn't support attaching event handlers to window. I'm not even sure if that would work though or it would be the same problem as with document.
Next, I thought I could just go through all the iframes and add individual handlers there but eventually realized that wouldn't work because the iframe doesn't have any html in the dom so there is no way to access iframes nested in it.
One other possible solution is to go to the js of all the iframes and add this code manually but that is way too extreme.
Any other ideas?
I keep answering my own questions but oh well. If you come across this problem I figured out the answer. This uses jquery but you could port it to straight js if you had to.
var myFunction = function () {
alert("hello world");
};
var $myWindow = $(myWindow /*dom object*/);
$myWindow.bind("mouseover", myFunction);
var getNested_iframes = function (document_element) {
$.each(document_element.find("iframe"), function () {
var iframeDocument = $(this).get(0).contentWindow.document; // may need to change this depending on browser
iframeDocument.onkeyup = myFunction;
getNested_iframes($(iframeDocument));
});
}
getNested_iframes($myWindow);