I've converted a .fla file to .js file, I've added several listeners on multiple elements in that file. Among which 'click','mousedown' & 'mouseover' are working fine, but 'pressmove' & 'pressup' events are not responding, and they are not even generating any error. Here is my code snippet:
/****this snippet is from converted .js file *********/
(lib.knob_rot_but = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 2
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#999999").ss(0.5,1,1).p("ABlhlQArArAAA6QAAA7grAqQgqArg7AAQg6AAgrgrQgqgqAAg7QAAg6AqgrQArgqA6AAQA7AAAqAqg");
this.shape.setTransform(26.4,0);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.rf(["#FFFFFF","#CCCCCC","#999999","#666666"],[0.239,0.8,0.941,1],-0.2,0.2,0,-0.2,0.2,14.8).s().p("AhlBlQgqgqAAg7QAAg6AqgqQArgqA6gBQA7ABAqAqQAqAqAAA6QAAA7gqAqQgqAqg7AAQg6AAgrgqg");
this.shape_1.setTransform(26.4,0);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(4));
}).prototype = p = new cjs.MovieClip();
/******* My Listeners ******/
var helpButtonDown = DeviceService.getHelpButtonDown();
helpButtonDown.addEventListener("click", function(){alert("helpButtonDown button clicked")}); //works fine
var powerButtonUp = DeviceService.getPowerButtonUp();
powerButtonUp.addEventListener("click", function(){alert("powerButtonUp clicked")});//works fine
/*** Knob Listener***/
var knob = DeviceService.getKnob();
knob.addEventListener("mousedown", function(){console.log("mousedown on knob")}); //woks fine
knob.addEventListener("pressmove", function(evt){console.log("proess move on knob evt :" + evt)}); // doesn't work :(
Touch events such as pressmove and pressup require you to enable the Touch Class, see the example and Docs below.
var stage = new createjs.Stage("canvasId");
createjs.Touch.enable(stage);
http://www.createjs.com/Docs/EaselJS/classes/Touch.html
The events pressmove and pressup were introduced in version v0.7.0 whereas the CreateJS publisher publishes to v0.6.0. Try changing to version v0.7.0 in your tag.
Related
We're converting Animate projects to HTML5, and it's dumping out code that creates multiple instances of a Sprite-type object. It's generating sprite definitions like this:
(lib.quarterback = function() {
this.spriteSheet = ss["Page12_Canvas_atlas_"];
this.gotoAndStop(11);
}).prototype = p = new cjs.Sprite();
And, those being used multiple times like this:
// Quarter Back copy 1
this.instance_19 = new lib.quarterback();
this.instance_19.parent = this;
this.instance_19.setTransform(-16.1,-371.1);
this.instance_19._off = true;
this.timeline.addTween(cjs.Tween.get(this.instance_19) /* snip! */ .to({_off:true},1).wait(51));
// Quarter Back copy 2
this.instance_20 = new lib.quarterback();
this.instance_20.parent = this;
this.instance_20.setTransform(-16.1,-371.1);
this.instance_20._off = true;
this.timeline.addTween(cjs.Tween.get(this.instance_20) /* snip! */ .to({_off:true},1).wait(51));
// Quarter Back copy 3
this.instance_21 = new lib.quarterback();
this.instance_21.parent = this;
this.instance_21.setTransform(-16.1,-371.1);
this.instance_21._off = true;
this.timeline.addTween(cjs.Tween.get(this.instance_21) /* snip! */ .to({_off:true},1).wait(51));
// etc.
Everything form the start of these instances on the timeline, up through the snipped portion in the example, works OK. However, the only one instance of each Sprite (quarterback in this case) is successfully being removed from the timeline at/near the end. The others simply get "stuck" in the their last position.
We've proven that these instances are OK on their own -- removing all but any one of them shows the expected behavior. But, having more than one instance of any given Sprite seems to prevent them all from being removed.
What's going on here?!
The following example will toggle the target off on frame 0, and then back on for frame 1. You can use the "visible" property to achieve the same effect.
var tween = createjs.Tween.get(target).to({_off:false}).wait(1).to({_off:true}).wait(1).to({_off:false});
In above code that target is a graphics, to hide/show we are using _off.
Even i got this issues i have solve by calling a function and hide the movieclip
this.timeline.addTween(cjs.Tween.get(this.instance_21).to({_off:true},1).wait(51).call(hideInstance,this));
function hideInstance()
{
this.instance_21.visible =false;
}
I am using the following code to wait for all images to load before drawing them onto the canvas. This works great in Firefox and works great when I enter the url of the page directly into the address bar of Chrome. However, when I attempt to use the refresh button in Chrome the images fail to load.
var need_to_load = 2;
var items = 0;
function item_loaded() {
items +=1;
if (items >= need_to_load) {
context.drawImage(router_pic,router_x,router_y,80,80);
context.drawImage(switch_pic,router_x,switch_y,60,60);
}
} // end item_loaded
var router_pic = new Image();
router_pic.src = "images/router.png";
router_pic.onload = item_loaded();
var switch_pic = new Image();
switch_pic.src = "images/switch.png";
switch_pic.onload = item_loaded();
Can someone point me in the right direction as to why and how to make this work with Chrome?
I realize in this case I can get rid of the item_loaded() function, but I have another more complicated canvas drawing where it makes the most sense to wait for all images to load before drawing them to the canvas.
Chrome version is 33.0.1750.152 if that makes any difference.
You're currently using the onload handler wrong. It need to have only a reference to the handlers - here the result of those functions are returned to it instead.
Simply change these lines:
router_pic.onload = item_loaded; //no parenthesis
switch_pic.onload = item_loaded;
I would also recommend switching the onload line with src line so src comes last.
Hope this helps!
Currently I have an intro screen to my flash file which has two objects.
A button which will load an external flash file using:
var myLoader:Loader = new Loader();
var url:URLRequest = new URLRequest("flashgame.swf");
The second thing is a Numeric Stepper, which will be from 1 to 10. If the user selects a number e.g. 3 then the game speed I have set in the flashgame.swf should be changed
Such as:
var gameSpeed:uint = 10 * numericStepper.value;
But I think my problem is coming into place because the stepper and gamespeed are from different files.
Anyone got any idea please?
I have also tried creating a stepper in the game file and used this code:
var gameLevel:NumericStepper = new NumericStepper();
gameLevel.maximum = 10;
gameLevel.minimum = 1;
addChild(gameLevel);
var gameSpeed:uint = 10 * gameLevel.value;
For some reason the stepper just flashes on the stage, no errors come up and the game doesn't work
When you execute you code, the stepper has no chance to wait for user input.
There is no time between theese two instructions.
addChild(gameLevel);
var gameSpeed:uint = 10 * gameLevel.value;
You should wait for user input in your NumericStepper, and then, on user event, set the game speed.
Edit: Yeah I know it's kinda sad to type out all this code (especially since some people wouldn't even be grateful enough to say thanks) but I think this question is important enough to justify the code as it may be helpful to others in future also.
Hi,
You were close. In your game file you could have put a var _setgameSpeed and then from Intro you could adjust it by flashgame._setgameSpeed = gameSpeed; It's a bit more complicated though since you also have to setup a reference to flashgame in the first place. Let me explain...
Ideally you want to put all your code in one place (an .as file would be best but...) if you would rather use timeline then you should create a new empty layer called "actions" and put all your code in the first frame of that.
Also change your button to a movieClip type and remove any code within it since everything will be controlled by the code in "actions" layer. In the example I have that movieclip on the stage with instance name of "btn_load_SWF"
Intro.swf (Parent SWF file)
var my_Game_Swf:MovieClip; //reference name when accessing "flashgame.swf"
var _SWF_is_loaded:Boolean = false; //initial value
var set_gameSpeed:int; //temp value holder for speed
var swf_loader:Loader = new Loader();
btn_load_SWF.buttonMode = true; //instance name of movieclip used as "load" button
btn_load_SWF.addEventListener(MouseEvent.CLICK, load_Game_SWF);
function load_Game_SWF (event:MouseEvent) : void
{
//set_gameSpeed = 10 * numericStepper.value;
set_gameSpeed = 100; //manual set cos I dont have the above numericStepper
if ( _SWF_is_loaded == true)
{
stage.removeChild(swf_loader);
swf_loader.load ( new URLRequest ("flashgame.swf") );
}
else
{ swf_loader.load ( new URLRequest ("flashgame.swf") ); }
swf_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, Game_SWF_ready);
}
function Game_SWF_ready (evt:Event) : void
{
swf_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, Game_SWF_ready);
//Treat the Loader contents (flashgame.swf) as a MovieClip named "my_Game_Swf"
my_Game_Swf = swf_loader.content as MovieClip;
my_Game_Swf.gameSpeed = set_gameSpeed; //update gameSpeed variable in flashgame.swf
//also adjust SWF placement (.x and .y positions etc) here if necessary
stage.addChild(my_Game_Swf);
_SWF_is_loaded = true;
}
Now in you flashgame file make sure the there's also an actions layers and put in code like this below then compile it first before debugging the Intro/Parent file. When your Intro loads the flashgame.swf it should load an swf that already has the code below compiled.
flashgame.swf
var gameSpeed:int;
gameSpeed = 0; //initial value & will be changed by parent
addEventListener(Event.ADDED_TO_STAGE, onAdded_toStage);
function onAdded_toStage (e:Event):void
{
trace("trace gameSpeed is.." + String(gameSpeed)); //confirm speed in Debugger
//*** Example usage ***
var my_shape:Shape = new Shape();
my_shape.graphics.lineStyle(5, 0xFF0000, 5);
my_shape.graphics.moveTo(10, 50);
my_shape.graphics.lineTo(gameSpeed * 10, 50); //this line length is affected by gameSpeed as set in parent SWF
addChild(my_shape);
}
The key line in intro.swf is this: my_Game_Swf.gameSpeed = set_gameSpeed; as it updates a variable in flashgame.swf (referred as my_Game_Swf) with an amount that is taken from a variable in the Parent SWF.
This is just one way you can access information between two separate SWF files. Hope it helps out.
I'am trying to figure out how to change material on loaded 3ds object/mesh during run-time after mouse click.
(Away3D 3.5/3.6)
3ds object is loaded with Loader3D:
//global mesh variable and view3d
var my_mesh:Mesh;
var view:View3D = new View3D();
//creating a parser with initial material
var max3ds_parser:Max3DS = new Max3DS();
max3ds_parser.material = new WireColorMaterial(0xFF0000);
var loader:Loader3D = new Loader3D();
loader.addEventListener(Loader3DEvent.ON_SUCCESS, onSuccess);
loader.loadGeometry("myMesh.3ds", max3ds_parser);
addChild(view);
addEventListener(Event.ENTER_FRAME, onEnterFrameRenderScene);
function onSuccess(e:Loader3DEvent):void{
my_mesh = Mesh(e.loader.handle);
view.scene.addChild(my_mesh)
}
function onEnterFrameRenderScene(e:Event):void{
my_mesh.rotationY += 15;
view.render();
}
So, after all this the 3ds object is added to the scene with initial material (WireColorMaterial) applied with parser object. But now I want to change the initial material after mouse click, so:
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void{
//start FAIL here:
my_mesh.material = new WireframeMaterial(0x000000);
//end FAIL
trace("clicked!");
trace(my_mesh.material)
}
After the mouse click nothing changes in the view, my_mesh spins as it did with the initial material on. But the trace material shows that the new material was indeed applied.
Is there any other way to do this, or is there some kind of a way to refresh the scene to make it use the new material? Or refresh the view? Or should you somehow parse my_mesh again? Cheers.
I would recommend importing your models via Prefab3D. This will allows you to pre-process all these assets in a visual tool.
I either use the awd format or just export meshes as AS3 classes. Export as AS3 classes also compresses that data with the rest of you assets in the swf, a nice little bonus :)
I was revisiting some code for a simple picture viewer that I created in Action Script 2.0 now taking on the same task in AS3. At present i'm well aware that the command .loadMovie is no longer used. After numerous attempts to find a solution I have come up dry.
At the moment I have a movie clip symbol(target_mc) on the stage that I want to load jpegs from a external file when I mouseOver a button. Can any one give a example of how this should be approached using the "new load" variable.In the AS2 version i also used (on release) in the button code.
training_btn is the button instance.
Please see an example of my code below:
training_btn.addEventListener(MouseEvent.CLICK, imageOver);
function imageOver(evt:MouseEvent) {
this.target_mc.loadMovie("galleryimage/p_traininglink.jpg")
}
Any ideas would be very helpful.
Wayne
Here at the Republic of Code is an excellent step-by-step tutorial on how to work with the loader class in as3
Yeap
training_btn.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
function onMouseUp (evt:MouseEvent):void {
var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("myPhoto.jpg"));
target_mc.addChild(my_loader);
}
So, basically the whole structure of the laoder has change between AS 2 and 3.
Now you need to create a different object that loads the content.
var loader:Loader = new Loader();
Than you can do two things:
Add event listener and than trigger the load
Trigger the load and add the loader to the stage
The difference between these two style is big, the first one will add a listener and wait for the load to complete and after that it will call a method you define in the listener to do any further instuctions.
The second one starts loading the content and adds the loader to the display list so that when the content is loaded it automatically displays.
1.
// add the listener
laoder.contentLoaderInfo.addEventListener( Event.Complete, onLoadComplete );
// trigger the load (remember: the url is alwais a URLRequest object)
loader.load( new URLRequest("path_to_file") );
// additional var for storing the content (only the content, without the loader)
var content:Bitmap;
function onLoadComplete( e:Event ):void{
content = e.target.content as Bitmap;
// you could use also:
// content = loader.content as Bitmap;
// you can do some modifications before displaying the content
// and finally add it to the display list
this.target_mc.addChild( content );
}
2)
// trigger the load (remember: the url is alwais a URLRequest object)
loader.load( new URLRequest("path_to_file") );
this.target_mc.addChild( loader );
The two ways are correct but I prefer using the first one cause it gives you more controll. You can also check out the progress of loading by listening to the ProgressEvent.PROGRESS.
link: Loader Documentation
link: URLRequest Documentation
Hope it helps. Search in google for more info about loading external data, there's a lot of resource about that.
It would probably best to create a Class that would handle all of this, but to answer your question, your code would look something like:
var outLoader:Loader = new Loader();
outLoader.load(new URLRequest("outImage.jpg"));
var overLoader:Loader = new Loader();
overLoader.load(new URLRequest("overImage.jpg"));
overLoader.visible = false;
var training_btn:Sprite = new Sprite();
training_btn.addChild(outLoader);
training_btn.addChild(overLoader);
training_btn.buttonMode = true;
training_btn.mouseChildren = false;
training_btn.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
training_btn.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
addChild(training_btn);
function rollOverHandler(e:MouseEvent):void {
overLoader.visible = true;
}
function rollOutHandler(e:MouseEvent):void {
overLoader.visible = false;
}