Spritesheet animation easeljs-0.7.1.min.js - html

I am trying to make a spritesheet animation that keeps on looping but there is going something wrong in my code. the image doesn`t get displayed on the screen and still getting this error: Uncaught TypeError: Cannot read property 'move_obj' of null. could someone help me getting this fixed.
function init() {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
score = 0;
var munt = new Image();
munt.src = "imgs/sprite.png";
munt.onload = Tiltie;
}
function Tiltie(event){
var munt = event.target;
var container = new createjs.Container();
stage.addChild(container);
var spriteSheet = new createjs.SpriteSheet(
munt, //image to use
100, //width of each sprite
100, //height of each sprite
{
move_obj: [0, 9]
});
bmpSeq = new createjs.BitmapAnimation(spriteSheet);
bmpSeq.regX = bmpSeq.spriteSheet.frameWidth/2|0;
bmpSeq.regY = bmpSeq.spriteSheet.frameHeight / 2 | 0;
bmpSeq.gotoAndPlay("move_obj");
bmpSeq.currentFrame = 0;
stage.addChild(bmpSeq);
Ticker.addListener(window);
// Best Framerate targeted (60 FPS)
Ticker.setInterval(17);
}

Old Q :) Not very familiar with this version though, may I recommend using the new EaselJS v0.8.0+?
As for Spritesheet Animations, I've built a basic setup for EaselJS and all you'll have to do is declare a few parameters and you're done.
Also, my setup uses some new extra libraries from EaselJS which offer support for WebGL including a few fixes, check it out here
Let me know if you need any assistance, cheers

Related

My ByteArray isn't retaining filters

I have an RTMP stream that I need to take a screenshot of. I got a security error using bitmapData.draw() since it was coming from AWS S3 so I found a workaround that allows me to take a screenshot of the video:
var bitmap = new Bitmap();
var graphicsData : Vector.<IGraphicsData>;
graphicsData = container.graphics.readGraphicsData(); //-- container is a sprite that holds my video element
bitmap.bitmapData = GraphicsBitmapFill(graphicsData[0]).bitmapData;
var image:ByteArray = new JPGEncoder(85).encode(bitmap.bitmapData);
At this point, I send the ByteArray to PHP, create a JPG out of the ByteArray and save it to the server. That all works great.
The issue is I apply filters realtime to the container sprite which alters the look of the video like brightness, contrast, saturation etc, but when saving to the server, the saved image doesn't contain the filters I had applied.
I tried reapplying the filters to bitmap, graphicsData and bitmap.bitmapData, but nothing worked.
How can I either retain the filters applied or reapply the filters to the above code?
EDIT
Here is how I initially apply the filters:
private function applyEffects(effects:Array):void
{
currentEffects = effects;
var props:Object = {};
for (var i:String in effects)
{
props[effects[i].effect] = effects[i].amount;
}
TweenLite.to(container,0,{colorMatrixFilter:props});
}
props object could look something like: {contrast:0.5,saturation:1}
Ok, I have solved this on my own with a little suggestion Jack Doyle (GSAP Author) gave me. I have described what I did differently in the comments of my code:
var graphicsData:Vector.<IGraphicsData>;
graphicsData = container.graphics.readGraphicsData();
var origBitmap:Bitmap = new Bitmap();
origBitmap.bitmapData = GraphicsBitmapFill(graphicsData[0]).bitmapData;
//-- at this point I have a screenshot of the video
var props:Object = {};
for (var i:String in currentEffects)
{
props[currentEffects[i].effect] = currentEffects[i].amount;
}
TweenLite.to(origBitmap,0,{colorMatrixFilter:props});
//-- at this point I've reapplied the effects.
//-- originally, sending bitmap.bitmapData to the encoder didn't retain the filters so I went 1 step further
//-- create a new bitmapData and draw the reapplied filter'd bitmap
var filteredBitmapData:BitmapData = new BitmapData(640,360);
var filteredBitmap:Bitmap = new Bitmap(filteredBitmapData);
filteredBitmapData.draw(origBitmap);
//-- encode the new bitmap data
var image:ByteArray = new JPGEncoder(85).encode(filteredBitmapData); //-- filteredBitmapData is now filtered and I can send this to the server

Three.js JSONLoader blender model error: property 'length' undefined

I have been trying out Three.js lately and i used the exporter addon for Blender to test out making models in blender and exporting so i can use them in a three.js program.
I included the add-on to blender, and using just the basic cube model of blender, exported it to .json as the exporter says. Then i imported the model into my three.js using this as a guide
but that gave me an error:
Uncaught TypeError: Cannot read property 'length' of undefined.
Ive already searched online and tried a few different approaches(like including a materials in the function call of the loader) but nothing seems to work.
I also checked stackoverflow for answers but so far nothing seems solved. If anyone would clarify what im doing wrong I would be very grateful.
The code for my three.js program:
var WIDTH = 1000,
HEIGHT = 1000;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var radius = 50,
segments = 16,
rings = 16;
var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCCCCCC
});
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(
radius,
segments,
rings),
sphereMaterial);
var pointLight =
new THREE.PointLight(0x660000);
var $container = $('#container');
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
var loader = new THREE.JSONLoader(); // init the loader util
scene.add(camera);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
loader.load('test.json', function (geometry, materials) {
var material = new THREE.MeshFaceMaterial(materials);
var object = new THREE.Mesh(geometry, material);
scene.add(object);
});
(function animloop() {
requestAnimFrame(animloop);
renderer.render(scene, camera);
})();
When you export, change the Type from buffergeometry to Geometry (Blender 2.76)
In my experience so far with the exporter, you have to be very careful which boxes you tick!
This length error is usually because you are either not exporting the vertexes, or exporting the scene rather the object.
I have the same issue with the new exporter.
If select SCENE then I usually get "Cannot read property 'length' of undefined"
If I select only the object and the materials and vertices. It usually just seems to get stuck forever.
UPDATE
Check this response to this issue!
Threejs blender exporter exports in wrong format
As roadkill stated earlier, exporting as Geometry instead of BufferedGeometry works.
Also note that loading JSON model loading is handled asyncronously (the callback is only called only when the operation is completed, the rest of your code keeps running). The model won't exist for the first frame or two, so check that your model exists before doing any operations with it inside the animation loop.

Loading images using the URLRequest

recently started to learn ActionScript 3 and already have questions.
question remains the same: I'm uploading a picture using the object Loader.load (URLRequest). Loaded and displayed a picture normally. But it is impossible to read the values of attributes of the image height and width, instead issued zero. That is, do this:
var loader:Loader=new Loader();
var urlR:URLRequest=new URLRequest("Image.jpg");
public function main()
{
loader.load(urlR);
var h:Number = loader.height;// here instead of the width of the image of h is set to 0
// And if you do like this:
DrawText(loader.height.toString(10), 50, 50); // Function which draws the text as defined below
// 256 is displayed, as necessary
}
private function DrawText(text:String, x:int, y:int):void
{
var txt:TextField = new TextField();
txt.autoSize = TextFieldAutoSize.LEFT;
txt.background = true;
txt.border = true;
txt.backgroundColor = 0xff000000;
var tFor:TextFormat = new TextFormat();
tFor.font = "Charlemagne Std";
tFor.color = 0xff00ff00;
tFor.size = 20;
txt.x = x;
txt.y = y;
txt.text = text;
txt.setTextFormat(tFor);
addChild(txt);
}
Maybe attribute values must be obtained through the special features, but in the book K.Muka "ActionScript 3 for fash" says that it is necessary to do so. Please help me to solve this. Thanks in advance.
Well it's simple.
Flash is focused on the Internet, hence such problems.
If you wrote loader.load (urlR); it does not mean loaded. Accordingly, prior to the event confirming the end of loading, in loadare Null
if, instead of certain functions would be more code that would perhaps tripped your approach.
Yeah plus still highly dependent on the size of the file that you read.
Well, in general it all lyrics. Listen event on loader.contentLoaderInfo.addEventListener (Event.INIT, _onEvent), onEvent and read properties.
You need to wait for your image to load to be able to get values out of it.
Attach an eventListener to your URLLoader.
var urlR:URLRequest = new URLRequest("Image.jpg");
loader.load(urlR);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete);
function loader_complete(e:Event): void {
// Here you can get the height and width values etc.
var target_mc:Loader = evt.currentTarget.loader as Loader;
// target_mc.height , target_mc.width
}
Loader

change the color of flash cs6 createjs exported lib object

i've testing some code in using createjs + box2dweb, i exported a vector ball in blue color drawn by flash cs 6, here is part of the code.
var birds = (function() {
var spawn = function() {
//circle = new lib.ball1();
//var birdBMP = new createjs.Bitmap("images/bird.png");
var birdBMP = new lib.ball1();
birdBMP.x = Math.round(Math.random()*500);
birdBMP.y = -30;
birdBMP.regX = 60.75; // important to set origin point to center of your bitmap
birdBMP.regY = 60.75;
birdBMP.snapToPixel = true;
birdBMP.mouseEnabled = false;
stage.addChild(birdBMP);
box2d.createBird(birdBMP);
}
return {
spawn: spawn
}
})();
here i want to do change the color of the blue ball, how can i do that?
******updated*******
inclucde js
change code
birdBMP.cache(0, 0, 121.5, 121.5);
colorRan1 = Math.round(Math.random()*255);
colorRan2 = Math.round(Math.random()*255);
colorRan3 = Math.round(Math.random()*255);
birdBMP.filters = [
new createjs.ColorFilter(0,0,0,1, colorRan1,colorRan2,colorRan3,0)
];
birdBMP.updateCache();
I don't know too much about the createjs Flash Extension, but I highly suspect, that from the Flash Export there is also no way to simply "change" a color - you have probably three options:
1) ColorMatrixFilter - this involves caching ect. and I wouldn't recommend this for your purpose.
2) Draw another ball in the desired color and change the Bitmap to that other (differently colored) ball.
3) Or if it is a simple shape you can use the exported lib.ball1() method and extend it with a color-parameter. - In that case you would also have to change the references bitmap/shape, if you want to change the color post-creation.

Flash AS3 animation not running in IE9

I've got five Flash animations, that use AS3 computeSpectrum to create video animations for some of my songs.
Tested in Chrome, Firefox, Opera, and Safari just fine. Tested in IE7 and IE8 just fine. Tested in IE9, the flash player opens, but the music doesn't play, and the animations don't even start. This ONLY occurs in IE9.
Web page here: http://seanmurphy.co.cc/index4.html
The animations are under the music tab (bottom tab, main screen).
Does anyone have a line on what the heck is going on? I've made sure the Flash player is up-to-date (like I said, actually uninstalled IE9, back to IE8 and worked fine). I've made sure the linked mp3 files are in both the root folder and the attached audio folder (just in case). I've researched this all over, but no one seems to have this same problem.
Flash AS3 code below:
var url:String = "SubwayGirl.mp3";
var request:URLRequest = new URLRequest(url);
import flash.filters.*;
import fl.motion.Color;
var myBlur:BlurFilter = new BlurFilter();
myBlur.quality = 10;
myBlur.blurX = 0;
myBlur.blurY = 6;
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, completeHandler);
s.load(request);
var song:SoundChannel = s.play();
song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
var ba:ByteArray = new ByteArray();
var gr:Sprite = new Sprite();
gr.x = 150;
gr.y = 575;
addChild(gr);
var time:Timer = new Timer(.0001);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();
function completeHandler(event:Event):void {
//event.target.play();
};
function randomNumber(low:Number=0, high:Number=1):Number
{
return Math.floor(Math.random() * (1+high-low)) + low;
}
function soundCompleteHandler(event:Event):void {
time.stop();
};
function timerHandler(event:TimerEvent):void {
SoundMixer.computeSpectrum(ba, true);
var i:int;
gr.graphics.clear();
gr.graphics.lineStyle(1, 0xffffff);
myBlur.blurX = randomNumber(1, 5);
myBlur.blurY = randomNumber(1, 25);
myBlur.quality = randomNumber(1, 100);
gr.filters = [myBlur];
gr.graphics.beginFill(0xffffff);
gr.graphics.moveTo(10, 5);
var w:uint = 20;
for (i=0; i<500; i+=w) {
var t:Number = ba.readFloat();
var n:Number = (t * 100);
gr.graphics.drawCircle(w, -i, -n);
var yy = i * (t+210);
var place = yy.toString(16).toUpperCase();
while(place.length < 6) {
place = place+"0";
}
place = "0x" + place;
var myColor:ColorTransform = gr.transform.colorTransform;
myColor.color = 0xC941D0;
gr.transform.colorTransform = myColor;
};
};
Anyone with a hint on this? I've spent hours researching this with no resolution.
Any further info needed will be ASAPed over. Thanks.
EDIT: Okay, here's the scoop: I've got Flash animations playing at seanmurphy.co.cc/soundTest1.html in IE9. That is, they play if the browser cache is emptied, and you load the page once. If you reload the page, or go back to the page after visiting another page, the animations and music WON'T play, until you empty the cache again.
As well, I've copied the Flash object and embed codes over to a temporary index file at seanmurphy.co.cc/index6.html, but they won't play even with the browser cache emptied.
As you might think, this is driving me friggin' nuts! Does ANYONE have an explanation for the idiotic crap that IE is pulling here? I'd really really like to put this thing to bed. Thanks!
It may have something to do with the Security Sandbox violation:
SecurityError: Error #2121: Security sandbox violation:
SoundMixer.computeSpectrum: http://seanmurphy.co.cc/audio/IndianSummer-amped.swf
cannot access http://seanmurphy.co.cc/audio/SubwayGirl.swf.
This may be worked around by calling Security.allowDomain.
at flash.media::SoundMixer$/computeSpectrum()
at IndianSummer_fla::MainTimeline/timerHandler()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()