CreateJS MouseEvent
Hi,
I am trying to convert an AS3 file to HTML5. The createJS extension for flash seems like a great tool but I am experiencing some difficulties.
My application cycles through an xml list of buttons, creates an object for each, collects the JS file that is the button (exported using Flash's createjs extension), positions it on the stage and then adds the appropriate event listener.
The problem I am having is that, while the buttons do move to their correct positions visually, the event listener is remaining at the top left of the stage rather than where the button has been moved to. When I click at the top left corner of the stage then the alert fires but if I click where th button has been moved to then it does nothing.
I have pasted some JavaScript code below.
Any help would be very gratefully received.
for(var i=0,ii=Modal.shellObjects.length; i<ii; i++){
var f = Modal.shellObjects[i].id;
var exportRoot = new lib[f]();
stage.addChild(exportRoot);
Modal.shellObjects[i].image=exportRoot;
if(Modal.shellObjects[i].x>-1){ Modal.shellObjects[i].image.x=Modal.shellObjects[i].x; }
if(Modal.shellObjects[i].y>-1){ Modal.shellObjects[i].image.y=Modal.shellObjects[i].y; }
switch(Modal.shellObjects[i].id){
case "closebtn":
Modal.shellObjects[i].image.addEventListener("click", function(event) {
alert("Close button clicked");
break;
Having never used the feature before but plenty of JS experience, I'm going to assume that the object was drawn into something (Canvas?) and the CreateJS library marked the area the object exists in as clickable via the handler and simply doesn't expect it to move. You can detect clicks on the canvas but cannot detect clicks on a graphical object drawn into a canvas itself, you do it by detecting position. If you investigate the addEventListener method of Modal it will probably show just that. That said, again, I haven't used CreateJS, I do it by hand. Unfortunately that doesn't definitively answer your question but if you open a new document, make a single button that moves completely on roll and export via CreateJS and it doesn't work, chances are it's a limitation of the current library.
Similar Messages
-
Hi,
I've been trying to do an animation for mobile phones, but it's not working.
The movie itself is very simple.
It's a movie clip (with sequential pictures of a product to make a 360° view) and 2 buttons (nextFrame and prevFrame).
The first time I tried to export using the toolkit, it didn't work and I was told that buttons were displayed as movieclips.
So, I changed my movie. Now there's no butons at all, only movieclips.
I used ActionScript 3 to do everything, and I don't see what I can do to make it works properly.
Here is the ActionScript:
banner.stop();
PrevGo.addEventListener(MouseEvent.CLICK, goPrev);
function goPrev(evt:MouseEvent):void {
if(banner.currentFrame == 1){
banner.gotoAndStop(10);
}else{
banner.prevFrame();
NextGo.addEventListener(MouseEvent.CLICK, goNext);
function goNext(evt:MouseEvent):void {
if(banner.currentFrame == 10){
banner.gotoAndStop(1);
}else{
banner.nextFrame();
The problem when I export the movie is that the movieclip is loaded without clicking.
If I export the movie without the plugin, it works, but I can't see at iPhone...
Does anybody know how I can fix that problem?
ThanksHello,
We are working on tutorials/documentation that should help you do simple programming after exporting your Flash assets to HTML5.
If there are tutorials you are looking for in general, I would recommend that you take a look at these:
http://www.adobe.com/devnet/createjs.html
http://www.adobe.com/devnet/createjs/articles/getting-started.html
http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html
http://www.youtube.com/watch?v=Rhd2QblTtuU
http://www.youtube.com/watch?v=ptZ0DxkoZEM
Regards,
Suhas Yogin -
I need help to install Toolkit CreateJS for Flash CS6.
Hi,
I need help in installing CreateJS for Flash CS6. I had downloaded the Toolkit CreateJS from here: http://www.adobe.com/go/downloadcreatejs and here: http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit- createjs.html. When I attempted to install the extension using Adobe Extension Manager, the installation files did not have the required .zxp or .mxp files. It only had a file with a .mxi extension. Please advise. Thanks.Why installing IIS o_O?
For Installing a developer Machine just install Oracle Developer suite; for testing your forms you use OC4J ("start OC4J instance" in start menu), and you can run your forms in web; no need for a aditional webserver (don't believe there's an OC4J connector for IIS available; and if so I wouldn't use it either ;-))
For Installing a server for "productional" use install Oracle Application Server (available on otn) which comes with an Apache as webserver and all the other needful things for runnung forms on the web.
For configuring both of them just take a look at the documentations on http://otn.oracle.com
regards
christian -
Can I use more than one html5/js animation produced with Flash/createjs in a website?
Hi, I am producing some animations with Flash that will be delivered in html5/js trough createjs. The trouble is that, after including the first animation in my html website, the rest of the animations are overwriting with the first one, therefore, if I attemp to insert a second animation in my website, it will actually replace the first animation I already had placed...
I have already tried the following:
- change the default canvasID for another one
- change the resources and Javascript name spaces in Createjs export settings
- change manually the name of the functions (lib, img, cjs) in the Javacript file
None of these seem to fix the problem. So, I am now wondering if is actually possible to insert more than one animation in a website....
I would really appreciate a quick answer, as I am working on a project with a very tight timing, and really need to sort this out a.s.a.p.
Thank you very much in advance for the help.then you made some mistake.
start with two different flas. one with a red rectangle on stage and the other with a blue rectangle on stage and nothing else. publish your html and js files.
combine the two into one and, if you have a problem, post the code from your one html file and your two js files. -
Hey everyone, I was wondering if someone could help point me in the right direction for solving this. I have created 5 short animations using Flash and when I published each ".fla " (with Toolkit for CreateJS extension) I get 5 different html5 files with their own respective javascripts. Is there a way to get all those canvas tags in one html5 file and still have it work. I'd love a hint on where to begin so I can begin researching the solution.
Thanks!
-DJWhy do you think that one will be over written?
You can sync as many ipods/iphones/ipads as you like to one computer. Each is different and will only sync what you select. -
I developed a Flash Player swf application with Flash Builder 4.7 (64-bit) before and it has worked well before Flash Player version <= 16. Recently, I updated to Windows 8.1 with Internet Explorer 11 and Flash Player 17.0.0.134.
It is strange that stageX and stageY in MouseEvent.MOUSE_WHEEL gets the position of the whole web page other than that of swf stage, But it works well in Windows 7 with FP 17.
Another problem is BitmapData.setVector() doesn't work normally when the DPI of screen is set to 125%, even in Windows 7 with FP 17, but it works in FP16 before.
By the way, it is interesting that all the above works well in Firefox with FP 17 even in Windows 8.1.
Does anyone encounter this problem? Is there some workarounds on that?Internet Explorer has a unique Flash Player release from Firefox, so it is probably a new bug unique to that IE release. Have you tried this on more than 1 machine? If so, I would say report a bug about it.
https://bugbase.adobe.com -
MovieClip Filter Causing issues with EventListeners (mouseEvent.ROLL_OVER)
Hello,
I have been working on a flash photo gallery for the web. It loads thumbnails from an xml file into a loader which is then made the child of a movieclip.
The thumbnails are animated and triggered with mouse events of ROLL_OVER and ROLL_OFF. I have this working, or appearing to, when the movieclip containing the loaded thumbnail has no filters applied to it.
I want add a drop shadow on the ROLL_OVER event and remove the drop shadow on the ROLL_OFF event. I also have this working, however my problem arises when I mouse over the very edge of the movieclip. This cauese the ROLL_OVER and ROLL_OFF function to fire in rapid succession, creating a flashing dropshadow. This looks aweful and I really have no idea what would be causing this issue.
Thanks in advance for any advice!
Regards.Thanks for the reply.
I also found it difficult to believe that the filter was causing issues with the roll over/out events. I will expand on the example code you provided so you get an idea of what I am trying to accomplish and where my issues arise.
EDIT: I should add that the issue is only present when I tween AND add a filter. If I only add a filter or if I only tween I have no issues but the combination or adding a filter and tweening causes the OVER/OUT events to fire rapidly.
//This code does not result in a flashing animation
myClip.addEventListener(MouseEvent.ROLL_OVER, overClip);
myClip.addEventListener(MouseEvent.ROLL_OUT, outClip);
function overClip(e:MouseEvent):void
myTween = new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1.5 , 3, true);
myTween = new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1.5 , 3, true);
function outClip(e:MouseEvent):void
myTween = new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1 , 3, true);
myTween = new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1 , 3, true);
//However if i add these lines of code to add and remove a filter I can observe the flashing effect when the mouse is near the edge of the moveclip
myClip.addEventListener(MouseEvent.ROLL_OVER, overClip);
myClip.addEventListener(MouseEvent.ROLL_OUT, outClip);
function overClip(e:MouseEvent):void
myClip.filters = [myDropShadowFilter];
myTween = new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1.5 , 3, true);
myTween = new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1.5 , 3, true);
function outClip(e:MouseEvent):void
myClip.filters = [];
myTween = new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1 , 3, true);
myTween = new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1 , 3, true);
Is there something obviously wrong with this approach to adding a filter/tweening? I am fairly new to flash.
Thanks again!
Message was edited by: Dafunkz -
"Toolkit for CreateJS" Missing from Flash CC Menu
I'm a Creative Cloud user running the latest version of Flash Professional CC on my 27" iMac running OSX Mavericks. I want to export an animation file using CreateJS. However, the "Toolkit for CreateJS" option is missing from my "Window" drop down menu - it's not even grayed out, it's just not there. Using the alternate of Shift+F9 doesn't work either. I tried downloading the CreateJS extension from Adobe but is says I need to be running CS6 for it to work, and that "Toolkit for CreateJS" is supposed to come pre-installed in Flash CS Pro. But it's not there. This is very frustrating, and I'd be deeply grateful for any help someone could give me. Thanks!
HTML5 publishing with the new update is now more inetgarted with the application and we now have a new document type called "HTML Canvas" which publishes using the same CreateJS libraries.
The Toolkit for CreateJS panel is no longer present with the new update, but the HTML5 publishing using the toolkit is now intgerated as part of the HTML canvas document type that you will see new in this update.
Please refer to:
http://helpx.adobe.com/flash/using/whats-new.html#Creating%20and%20pub lishing%20HTML5%20Canvas%20content
Also you can convert your previously created AS3 document that publish to HTML5 into HTML5 Canvas documents. This is also mentioned in the documentation below:
http://helpx.adobe.com/flash/using/creating-publishing-html5-canvas-do cument.html
-Sujai -
Once I create a html5 animation using the 'Toolkit for CreateJS' in flash, how do I then insert it into a webpage via Dreamweaver:
This has been sending me round in circles for over a week - can anyone let me know how I do this or can they point me in the direction of a tutorial? Thank you in advance - d;-)There are some tutorials on Adobe site:
<http://www.adobe.com/devnet/createjs/articles/getting-started.html>
<http://tv.adobe.com/watch/adc-presents/toolkit-for-createjs-part-1-designing-game-assets/>
<http://tv.adobe.com/watch/adc-presents/toolkit-for-createjs-part-2-adding-game-interactivi ty/>
The parts 1 and 2 are videos about 10 minutes each while the first link is a detailed article that you can print and practice on your machine.
Hope this helps. -
Can the name of a specific node in a JTree be returned by MouseEvent?
I have created a mouseListener for a JTree. When a node in the JTree is clicked it should display the name of the node in a JOptionPane. Currently, I have the following:
tree.addMouseListener(new MouseAdapter()
public void mouseClicked(MouseEvent me)
if(me.getClickCount() % 2 == 0)
String s = "Blank";
s = (me.getSource()).toString();
JOptionPane.showMessageDialog(null, "Double clicked "+ s, "two", JOptionPane.PLAIN_MESSAGE);
}//mouseClicked
});//MouseListener
This gives me the class X Y value, border, maxsize, etc.... when a node is double clicked.
Does anyone know of a better way?Don't use MouseListener.
Instead, make yourself a TreeSelectionListener as follows:
public class WhererverYourTreeIs implements TreeSelectionListener
public void valueChanged(TreeSelectionEvent e)
TreePath path = e.getPath();
System.out.println(path.getLastPathComponent());
public void initStuff()
tree.addTreeSelectionLIstener(this);
} -
Dont detect MouseEvent as2 to as3.
Hello. I transform a as2 game to as3. transform all the code and the game start but dont detect any MouseEvent associated to a MovieClip. In stage yes but not in any MovieClip. This is one example of my code...
Code:
wheelmain.wheel.addEventListener(MouseEvent.MOUSE_DOWN, onWheelDown);
wheelmain.wheel.addEventListener(MouseEvent.MOUSE_UP, onWheelUp);
wheelmain.wheel.addEventListener(MouseEvent.ROLL_OUT, onWheelRollOut);
wheelmain.wheel.addEventListener(MouseEvent.CLICK, onWheelReleaseOutside);
function onWheelDown(e:MouseEvent)
trace("Boton del raton pulsado.");
//sndPotencia.start();
potenciaRuletaOn();
wheelmain.wheel exists and is a MovieClip. The movie dont show nothing to console.
Anybody help me?.
thanks!.Sorry for my bad english.
Well, if i change one of the lines and type this:
wheelmain.wheel.addEventListener(Event.ENTER_FRAME, onWheelDown);
when the output console write:
Boton del raton pulsado.
Boton del raton pulsado.
Boton del raton pulsado.
Boton del raton pulsado.
That means that the object is displayed and accessible, but for some strange reason it seems that no stage Movieclip dispatches any mouse event. -
this.addMouseListener(new MouseAdapter(){
private void showIfPopupTrigger(MouseEvent mouseEvent) {
try {
l.write("22222222222");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
if (popupMenu.isPopupTrigger(mouseEvent))
try {
l.write("3333333");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
String name = getValueAt(getSelectedRow(), 1).toString();
if(getValueAt(getSelectedRow(), 2).toString().equals("FOLDER"))
popupMenu.init(false,name);
else
popupMenu.init(true,name);
popupMenu.show(mouseEvent.getComponent(), mouseEvent.getX(), mouseEvent.getY());
public void mousePressed(MouseEvent mouseEvent) {
try {
l.write("000000000000000000000");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
if (mouseEvent.getButton() == MouseEvent.BUTTON3) // BUTTON3 is the right mouse button
try {
l.write("11111111111111111111");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
showIfPopupTrigger(mouseEvent);
public void mouseReleased(MouseEvent mouseEvent) {
showIfPopupTrigger(mouseEvent);
});In the above given code, when I right click the mouse button, control reaches till l.write("22222222222");, but, it is not getting inside if (popupMenu.isPopupTrigger(mouseEvent)) , instead of that, control again goes to public void mousePressed(MouseEvent mouseEvent), what can be the reason?
RonyI got the output with this.
if (popupMenu.isPopupTrigger(mouseEvent))
int indRow = rowAtPoint(mouseEvent.getPoint());
getSelectionModel().addSelectionInterval(indRow, indRow); -
MouseEvent not firing on DisplayObject click in AS only project in Flash Builder 4
Hello,
I'm having difficulty getting MouseEvents to fire in an ActionScript only project. It doesn't make any sense to me. My code is below and this object is the top most object on the stage.
var click:Sprite = new Sprite();
click.name = 'clickLayer';
click.mouseEnabled = true;
click.addEventListener(MouseEvent.CLICK, mouseClickHandler);
addChild(click);
function mouseClickHandler(e:MouseEvent):void{
trace('click');
var url:String = loaderInfo.parameters.clickTag;
navigateToURL(new URLRequest(url), '_blank');
My class extends Sprite.
Everything else works fine. Something I found strange is that TextFields will fire MouseEvents when clicked if I add the EventListener, but not DisplayObjects.
Thanks for your help.I just made the width & height the width & height of the container (Sprite), but still nothing.
I also tried adding a "container" sprite to the main stage, and adding everything to that sprite - but that sprite won't instantiate and doesn't show on the stage, meaning anything added to that sprite doesn't show either.\
Also: I've tried adding MouseEvent listeners to every display object I add to the stage and nothing will fire MouseEvents except TextFields. -
AdvancedDatagird to ignore MouseEvent.MOUSE_WHEEL events
Hi,
Is there a way to get a AdvancedDatagird to ignore MouseEvent.MOUSE_WHEEL events?Both these don't work sorry
<mx:mouseWheel>
<![CDATA[
public function ignoreMouse(event:MouseEvent):void {
event.stopPropogation();
event.preventDefault();
]]>
</mx:mouseWheel>
<mx:mouseWheel>
<![CDATA[
function ignoreMouse(event:MouseEvent):void {
event.stopPropogation();
event.preventDefault();
]]>
</mx:mouseWheel> -
How do I add a mouseEvent to an area
does anyone know how i add a mouseEvent to an area?
i want to test the response of the user to hit a Graphic on the screen
but i dont know how to make the Graphic so that it can be hit.
Simple enough problem just im a bit dim. lol
THanks for any help that would be offered,
BrainYou could add a mouse listener to the whole panel (or whatever container you're using) and then test each mouse click to see if it's within the area you're looking for.
The getPoint() method of MouseEvent will tell you where the event occurred. If the graphic is rectangular, you can use the contains(Point p) method to see if the event occurred inside that region.
Maybe you are looking for
-
Automator: How to create a PDF contact sheet?
Hi, I'm trying to create a PDF from multiple images in automator. The PDF should contain: First Page: A contact sheet with all images Following pages: One page for each image Any idea how to achieve this? I don't even get the contact sheet working –
-
Slice battery for thinkpadt4​30s
Hello, I have a thinkpad t430s with a 6 cell battery, i need to add batterylife and i find a socket that appears to be a socket for a slice battery in the bottom of my laptop however when i search for the battery on lenovo website or anywhere else i
-
OS X 10.9.3, Mail sounds gone
Hitting "Send" for a message in OS X mail (Version 7.3 (1878.2): My normal "swoosh" sound that used to confirm that an email was been sent has gone silent. Where do I set things to get it back? It's trivial, but I miss it.
-
Need templates of standard queries out put.
hai i need templates of standerd purchasing queries (exel output) . ie query result in excel.
-
My Mac book won't turn on. All I get is the apple logo and a loading icon and bar, then it just shuts down. What do I do?