How to set Bitmap image in Canvas background? AS3 - actionscript-3

I have image as Bitmap:
var bitmapImage:Bitmap=getDefaultImage();
I need to set this bitmap as canvas backgroundImage.
I find method
myCanvas.setStyle("backgroundImage",url);
But i dont need url. Whent i do this:
myCanvas.setStyle("backgroundImage",bitmapImage);
I have an error.
How to set bitmap image in canvas background?

I am not sure if this is possible... You see, setStyle and getStyle in AS3.0 both work on CSS base. And in CSS there is nothing like Bitmap, just URLs, URIs, numeric, string and type values... Nothing for byte data.
So - either you use your Canvas wrong (don't use it at all maybe?), or, if you really need to use the setStyle method for this, you will have to use the URL... However, I think it might be possible to embed the file into the SWF... Not just with the Embed directive, but something like Flex project. It might be possible to address the file with local URL such as "myBitmap.png".

Related

How to change bitmapdata in AS3

I'm building a spritesheet class. Hopefully this will be low hanging fruit to someone, but I'm stumped.
I have a spritesheet (.png) that I've loaded at runtime and placed a section of it on the stage using this code from within the Spritesheet class .as file ouside of the constructor method:
private function onLoad(e:Event):void
{
var loaderBmp:Bitmap = Bitmap(_loader.content);
_bmpData.copyPixels(loaderBmp.bitmapData, new Rectangle(0,0,80,80),new Point(0,0));
}
That works fine. I get my slice of the .png file displaying nicely. In my case, the spritesheet is meant for animating a character, so I need to update the BitmapData and I'm not having any luck. Here is what I'm trying this within my Main class in a function I use to alter the frame of the animation depending on the state of the character:
c._thisSpriteSheet._loader.content.bitmapData.copyPixels(loaderBmp.bitmapData, new Rectangle(0,20,50,30),new Point(0,0));
loaderBmp is a variable who's value is var loaderBmp: Bitmap = Bitmap(_spriteSheet._loader.content);
c is a reference to the Runner object that is the character.
_spriteSheet is a property of the Runner class of type Spritesheet.
_loader is a property of the c._spriteSheet and is the Loader object used when the spritesheet was instantiated.
It doesn't throw an error, but it also doesn't replace the original bitmapData object with the new one. I thought maybe this meant that I need to create a new BitmapData object and use that in the copyPixels method, but that returned the same results (nothing). When I step through the code in debug mode, everything looks like it is working, but my display object does not update with the new bitmapData. What am I tripping on?
Thanks for looking!
Well, probably no one will read this since I'm answering it so quickly, but I literally spent 3 days trying to figure this out. Sometimes trying to ask the question in a concise way helps one answer their own question, and moments later, voila!
So in case anyone has a similar issue, what I was doing wrong was that I was trying to access the BitmapData object via the Loader that originally loaded it. Then it dawned on me that I could simply reference the BitmapData directly via that property of the SpriteSheet class I had made. I think this will be pretty confusing for someone else to follow. If a moderator sees this and thinks it's junk, I don't mind it getting erased, but thought I'd keep it up anyway. The new code looked like this:
c._thisSpriteSheet._bmpDSheet.copyPixels(loaderBmp.bitmapData, new Rectangle(0,20,50,30),new Point(0,0));
and _bmpDSheet is the bitmapdata property of the class.

WebGL - change mapAmbient material property in Three.js

I'm trying to update an image in a material of a pre-loaded .js model - i want it to have the same properties, whereas only the image is changed.
Was trying to use this post as a reference, but in the .js model file, the map appears as the "mapAmbient" property. I was thinking of somehow using the THREE.ImageUtils.loadTexture() function, but couldn't find where exactly it should be placed.
Moreover, the texture should be loaded using an Image() object generated using another canvas. Any help would be appriciated
*Edit:
Wasn't able to find actual way to change that property in runtime, but was able to change the image using base64 encoding:
//img is base64 encoded image
var tex = new THREE.ImageUtils.loadTexture(img);
currentMesh.material.materials[1].map = tex;

Live Video Keying with Flash (AS3)? How to do that?

For a new project, I want to take a video feed, filmed in a greenscreen room, and as you see it, do a color keying, to kill the green and show an alternative picture on the background.
Is there a way to do this with Flash, AS3?
optional question: If a button is clicked, the now new constructed Picture should be saved as a Jpg. Any Idea?
Thanks a lot for you help!
For this sort of thing you're going to need to use Pixel Blender: http://www.adobe.com/devnet/pixelbender.html and possibly Alchemy as well http://labs.adobe.com/technologies/alchemy/
Sorry I can't give you more info than that as I've never worked with them before.
To capture a screen grab, it's easier. Create a new BitmapData object the size that you want your final image. Use the draw() method on it to capture the stage (or holding clip etc). Grab the as3corelib from here: https://github.com/mikechambers/as3corelib and use the JPGEncoder or PNGEncoder class to create a jpg or png (personally I prefer png, as even though the filesize is bigger, it's much quicker to generate as you don't need to worry about compression).
Then, use the FileReference class ( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html) to save it out (JPGEncoder and PNGEncoder both return your image as a ByteArray so just pass that as the data to the FileReference.save() function).

Using img tag in an AS3 TextField without width and height attributes

I'm attempting to load HTML from the Shopify blog API into a TextField in Flash. The problem is that Shopify doesn't add width and height attributes to images that are in the blog posts. When I load these into Flash, the width and height of the image is ignored and the height of the TextField is incorrectl, which screws up my scrollbar among other things.
Is there any way to read the width and height of the images as they are loaded? I could possibly do this with PHP before it gets to Flash, but I'm not sure how.
Not sure about your original question about getting the image info in flash, but in PHP it wouldn't be much trouble, although it would slow down the process down somewhat.
Step 1: Setup a PHP proxy, which you call from your flash.
Step 2: In your PHP proxy, after grabbing the HTML, loop through all the img-tags. (You can do this easily, with e.g. PHP Simple HTML DOM)
Step 3: While looping, if the image dimensions are missing from the img-tag, download the image, check the image size and update the tag. (Also easy using PHP Simple HTML DOM)
Step 4: Echo the updated HTML to your flash movie.
If you use the BitmapData class you can get access to the width and height of images, along with other useful properties and methods.
if you load the image data (URLLoader in FlashPlayer or FileStream in AIR)
(FileStream would lets you do it synchronously)
with some effort you can parse the width and height of the image from the file HEADER synchronously.
if you want to display the image from the image data, throw it at loader.loadBytes for Adobe to decode it for you. sounds like you want it to show up in the htmlText though.
if you can manage to take a synchronous path to get all this data, your textfield can take into account the image height before the next frame so it won't look jittery.

How do you make a SWF resize inside a HTML page?

The stageHeight and stageWidth are read-write properties of the Stage class.
Is there any way to embed the swf so that when you set them to a different value, this is reflected in the HTML page? Possibly without calling a JS function via ExternalInterface to modify the embed's parameters?
The main idea is that I don't know what size my swf will be. I'm loading a video inside it and I want to resize the swf to match the size of the video.
We use
http://code.google.com/p/swfobject/
which allows for auto resizing in addition to some other nice features.
Your definitely going to need to call a JS function, the good news is it's really simple code, something like this:
function resizeIt(height)
{
document.getElementById("myDiv").height = height;
}
Using SWFObject in this case you can set the width and height to be 100%, so it'll resize with the containing DIV, so you're not modifying the embed paramerters, but just the css.
To my knowledge you can't do that. I can't actually fiddle around with it, 'cause i currently don't have access to flash.
It could work if you would insert the swf into a div, or whatever, that's "too big" for it in the first place, and then just try and resize it. What are you using to embed the swf, the basic thingie offered by the Flash IDE or something else, like swfobject?
I don't know, you might have to actually use ExternalInterface or something like that to get the job done. And if it's not terribly important to work the player into your web layout, i would just implement the whole thing in the flash movie.