I am using ActionScript 3.0 to capture image from users webcam ,It is working fine , however the problem is that the size of image is too big for my liking . Can I make it small , I tried changing coordinates of Bitmap Data.
Can anybody suggest me the solution.
Thanks
When you capture the webcam you have to provide a matrix. This matrix can handle a rescaling.
var output:BitmapData = new BitmapData(camera.width * scaleFactor, camera.height * scaleFactor, false);
var matrix:Matrix = new Matrix();
matrix.scale(scaleFactor, scaleFactor);
output.draw(camera, matrix, null, null, null, true);
Sometimes the smoothing of this method is not really satisfying. A solution would be to use an intermediate:
var capture:BitmapData = new BitmapData(camera.width, camera.height, false);
capture.draw(camera);
//or with a newer compiler
//camera.drawToBitmapData(capture);
var intermediate:Bitmap = new Bitmap(capture);
intermediate.scaleX = intermediate.scaleY = scaleFactor;
output.draw(intermediate);
capture.dispose();
Prefer the first method if you are okay with the smoothing.
Related
For an Actionscript 3 "drawing application", I want to be able to chose a Texture and set it's transparency.
Therefore I try to set the alpha-transparency of a texture.
But it's not working.
What I do:
At first I use graphics.linestyle() to set the lines thickness and ALPHA-value.
After that I (a) load a png, (b) read it's bitmapData and (c) then use it with lineBitmapStyle.
Result:
When drawing lines (with moveTo, lineTo, etc) the lines use the texture, but IGNORE THE "Alpha" which was set with lineStyle.
What am I doing wrong?
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, setTexture);
setTexture(e:Event):void
{
e.currentTarget.removeEventListener(e.type, arguments.callee);
//Try 1: Trying to set the Alpha-Trasparency with "lineStyle"-Command:
myDrawContainer.graphics.lineBitmapStyle(5, 0xFF0000, 0,6);
//Try 2: Trying to set the Alpha-Transparency by changing the Alpha-Value of the loaded content:
myLoader.content.alpha = 0.6;
//Getting the BitmapData of the Image:
BitmapDataOfMyTexture = Bitmap(LoaderInfo(e.target).content).bitmapData
//"Using" the TBitmapData as "Color/Texture" for my Drawing:
myDrawContainer.graphics.lineBitmapStyle( BitmapDataOfMyTexture );
//Test-Drawing:
myDrawContainer.graphics.moveTo( 0, 0 );
myDrawContainer.graphics.moveTo( 500, 500 ); //-> RESULT: Textured Line WITHOUT Transparency!
}
RESULT: I get a line which uses the texture but WITHOUT Transparency.
(Update) THE SOLUTION: (Thanks to DodgerThud)
For setting/changing the Alpha-Channel of a loaded image, you don't use "lineStyle" but...
Create a NEW colorTransform-object
Then set it's "alphaMultiplier"-attribute to the specific alphaChannel
And then apply this newly created colorTransform-Object to the loaded BitmapData, by using the "colorTransform"-Method of the loaded BitmapData.
BUT :
This does NOT work with images that don't have an alpha-Channel or don't have their alpha-channel activated. Those images only get DARKER when lowering the alpha-Channel. In those cases you have to do this:
At FIRST I create NEW BitmapData-Object with "new", set its width and height to the width and height of the loaded Image and set it 3rd Argument to TRUE (= transparency: ON). So you got a "Container" which has transparency ACTIVATED.
Then you use "copyPixels" on this "Container"-Object to fill it with the pixels of the LOADED BitmapData-Object.
And right after this the above approach with the "colorTransform"-Object brings the expected result.
So HERE'S THE WORKING CODE:
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, setTexture);
setTexture(e:Event):void
{
e.currentTarget.removeEventListener(e.type, arguments.callee);
//Getting the BitmapData of the Image:
BitmapDataOfMyTexture = Bitmap(LoaderInfo(e.target).content).bitmapData
//Create an ADDITIONAL BitmapData-Object with 3rd
//argument set to TRUE and with same width and height
//as the LOADED image:
var BMDContainerWithAlphaActivated:BitmapData;
BMDContainerWithAlphaActivated = new BitmapData(BitmapDataOfMyTexture.width, BitmapDataOfMyTexture.height, true, 0xFFFFFF);
//Copy the pixels of the loaded image into the newly created
//"BitmapData-Container with activated AlphaChannel":
BMDContainerWithAlphaActivated.copyPixels(BitmapDataOfMyTexture, new Rectangle(0, 0, BitmapDataOfMyTexture.width, BitmapDataOfMyTexture.height), new Point(0,0))
//Modify the Alpha-Value (of the NEW BitmapData-Object):
var colorChanges:ColorTransform = new ColorTransform();
colorChanges.alphaMultiplier = 0.3;
BMDContainerWithAlphaActivated.colorTransform(new Rectangle(0, 0, BitmapDataOfMyTexture.width, BitmapDataOfMyTexture.height), colorChanges);
//"Using" the (NEW) BitmapData as "Color/Texture" for my Drawing:
myDrawContainer.graphics.lineBitmapStyle( BMDContainerWithAlphaActivated );
//Test-Drawing:
myDrawContainer.graphics.moveTo( 0, 0 );
myDrawContainer.graphics.moveTo( 500, 500 ); //-> RESULT: Textured Line WITH Transparency 0.3!
}
Ah I see, this is a bit more complex than I initially thought.
Alright, looking at the documentation for lineBitmapStyle shows me that the function expects the following parameters: lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false)
Now, matrix, repeat and smooth will not help us here (matrix is used here for transformation, i.e. positioning, rotation etc.), but bitmap:BitmapData might. What we need to do is manipulate the BitmapData of the loaded PNG file before passing it to lineBitmapStyle. Sadly we cannot set the alpha value directly on the BMD, so we can try to colorTransform it.
This is untested code, but I think it is the right approach:
..
//store the bitmapdata in a seperate local variable
var bmd:BitmapData = LoaderInfo(e.target).content;
//create a ColorTransform Object to change the values of the BMD
var cTransform:ColorTransform = new ColorTransform();
//now here I am unsure, manipulating the alpha value of the BMD
cTransform.alphaMultiplier = 0.6;
//defining the rectangle dimensions of the bmd, we want it to be over the entire texture
var rect:Rectangle = new Rectangle(0,0,bmd.width,bmd.height);
//apply the colorTransformation on the BMD
bmd.colorTransform(rect,cTransform);
...
//the now manipulated BMD gets set as lineBitmapStyle
myDrawContainer.graphics.lineBitmapStyle(bmd);
And now that I think about it, maybe we can workaround setting the alpha value on the BMD, by creating a Bitmap first, set the alpha value there and use the bitmapdata of the Bitmap instead. Like this:
var bmd:BitmapData = LoaderInfo(e.target).content;
var bm:Bitmap = new Bitmap(bmd);
bm.alpha = 0.6;
myDrawContainer.graphics.lineBitmapStyle(bm.bitmapData);
Alright, the first snippet from above seems to be the way to do it, but the transparent value of the BitmapData needs to be true. Given that you do not directly create the BitmapData yourself and the value is false, we have quite a tricky situation here.
Another approach would be to create an additional bitmapdata that allows for transparancy and draw() the bitmapdata of the loaded image on it:
var bmdSource:BitmapData = LoaderInfo(e.target).content;
var bmd:BitmapData = new BitmapData(bmdSource.width, bmdSource.height,true,0xffffffff);
var cTransform:ColorTransform = new ColorTransform();
cTransform.alphaMultiplier = 0.6;
var rect:Rectangle = new Rectangle(0,0,bmd.width,bmd.height);
bmd.colorTransform(rect,cTransform);
//now we have a completely white bitmapdata bmd, with an alpha value of 0.6
//we draw the contents of the bmdSource onto bmd, the alpha value effect should carry over
bmd.draw(bmdSource);
I am using gestouch library on github.https://github.com/fljot/Gestouch
zoomall is my movieclip, I am able to zoom in and out at a specific point.
here is my code,
import org.gestouch.events.GestureEvent;
import org.gestouch.gestures.ZoomGesture;
var zoom: ZoomGesture*;
zoom = new ZoomGesture(zoomall);
zoom.addEventListener(org.gestouch.events.GestureEvent.GESTURE_BEGAN, onGesture);
zoom.addEventListener(org.gestouch.events.GestureEvent.GESTURE_CHANGED, onGesture);
function onGesture(event: org.gestouch.events.GestureEvent): void {
const gesture: ZoomGesture = event.target as ZoomGesture;
var matrix: Matrix = zoomall.transform.matrix;
var transformPoint: Point = matrix.transformPoint(zoomall.globalToLocal(zoom.location));
matrix.translate(-transformPoint.x, -transformPoint.y);
matrix.scale(gesture.scaleX, gesture.scaleY);
matrix.translate(transformPoint.x, transformPoint.y);
zoomall.transform.matrix = matrix;
}
Here I want to restrict the zoom in and out to specific scale.
And I also want to pan the movieclip(zoomall) and it should not pan outside the device screen.
If you want to try what flash is all ready built with these are great and simple tutorials that may help you out.
Pan tutorial
http://www.republicofcode.com/tutorials/flash/as3pangesture/
Pinch/Zoom
http://www.republicofcode.com/tutorials/flash/as3pinchzoom/
Hope this helps
You realize that by calling matrix.scale(B, B) you simply do A * B = C,
where A is current scale and C is resulting scale?
So if you don't want C to be bigger than maximum maxC, you should limit B:
B = Math.min(B, maxC / A)
Same for minimum minC:
B = Math.max(minC / A, B)
So you will have:
// assuming you keep the scale ratio
var minS:Number = MIN_SCALE / zoomall.scaleX;
var maxS:Number = MAX_SCALE / zoomall.scaleX;
var s:Number = Math.max(minS, Math.min(gesture.scaleX, maxS));
matrix.scale(s, s);
I've been looking for the solution for some time and haven't yet found it. One of the functions of my app is to load an image and then to change its shape - e.g. I load a normal rectangular image, and then there are 2-3 buttons - change the image to a circle, triangular or some other shape. Is sth like that even possible with Bitmaps? I found a lot of interesting things about Nokia imaging SDK, but all the shape stuff i found was LensBlurEffect, which isn't exactly what i need.
If someone could point me in the right direction, I would be really grateful!
Thank You in advance for help!
Best regards,
Roman
I'm working on filters that draws shapes using Nokia Imaging SDK. To solve your problem, I created sample project that uses Nokia Imaging SDK's blend filter and my custom shape filters.
Actually you can do the same thing with shape image as David refers (background is black, foreground white) instead of using my custom filters (EllipseShapeFilter above example code).
Here is sample code;
var ellipseImage = new WriteableBitmap(1024, 768);
Rect origin = new Rect(new Point(512, 384), new Size(512, 384));
uint white = 0xff000000 | (255 << 16) | (255 << 8) | 255;
var image = LoadFromResources(new Uri(#"/BlendImageSample;component/Assets/Sample.jpg", UriKind.Relative));
using (var ellipseSource = new BitmapImageSource(ellipseImage.AsBitmap()))
using (var ellipse = new EllipseShapeFilter(ellipseSource, white, origin))
{
ellipseImage = await new WriteableBitmapRenderer(ellipse, ellipseImage).RenderAsync();
}
ImageViewer.Source = ellipseImage;
using (var backgroundSource = new BitmapImageSource(ellipseImage.AsBitmap()))
using (var foregroundSource = new BitmapImageSource(image.AsBitmap()))
using (var filterEffect = new FilterEffect(backgroundSource))
{
using (BlendFilter blendFilter = new BlendFilter())
{
blendFilter.ForegroundSource = foregroundSource;
blendFilter.BlendFunction = BlendFunction.Darken;
filterEffect.Filters = new[] { blendFilter };
var OutputBitmap = new WriteableBitmap(image.PixelWidth, image.PixelHeight);
var result = await new WriteableBitmapRenderer(filterEffect, OutputBitmap).RenderAsync();
ImageViewer.Source = result;
}
}
Github - BlendImageSample
Well the bitmap is always going to be rectangular, there is nothing you can do about that.
What you can do is make some pixels transparent, thus making the bitmap appear of a different shape.
One way to do this using the Nokia Imaging SDK is to use the BlendFilter to blend a transparent image (I suggest just a ColorImageSource) over the original image. You can provide different masks to create different "shapes."
I've searched but haven't found anyone wanting to do this with a bitmapData object.
I'm using the following code:
matrix.identity();
matrix.translate(pan.x, pan.y);
matrix.translate(-zoomPoint.x, -zoomPoint.y);
matrix.scale(scale, scale);
matrix.translate(zoomPoint.x, zoomPoint.y);
// later my draw call
this.bitmapData.draw(srcBitmap, matrix, null, null, null, true);
pan is a Point containing translation values
scale contains 0..1
zoomPoint is a Point containing a mouse click
Panning works, but using this method scale does not scale around my mouse. Has anyone done this successfully?
Thanks.
The matrix will translate the scale first, so you might have to take that into account when you set the translation. I needed to scale and select an area previously, and came up with this: BitmapData - scale and select area in one matrix?
This Works:
var scale:Number = 0.32;
var matrix:Matrix = new Matrix();
matrix.scale(scale, scale);
var smallBMD:BitmapData = new BitmapData(bigBMD.width * scale, bigBMD.height * scale, true, 0x000000);
smallBMD.draw(bigBMD, matrix, null, null, null, true);
var bitmap:Bitmap = new Bitmap(smallBMD, PixelSnapping.NEVER, true);
I have build a mixer and save all the sequence in an array and then play it again, now I want to save the mix as an MP3, I have looked for any way to save the mix and the answer is to load the sounds as byteArrays (sound.extract) I have acomplish that but I don't really know how to store all the sounds in just one ByteArray in order to save it as MP3, I got this code just for example, loading 2 audio files and store them in separate ByteArrays, and play each sound, does any body know how to store the 2 byteArrays in just one?
var mySound:Sound = new Sound();
var sourceSnd:Sound = new Sound();
var urlReq:URLRequest = new URLRequest("Track1.mp3");
sourceSnd.load(urlReq);
sourceSnd.addEventListener(Event.COMPLETE, loaded);
function loaded(event:Event):void
{
mySound.addEventListener(SampleDataEvent.SAMPLE_DATA, processSound);
//mySound.play();
}
var mySound2:Sound = new Sound();
var sourceSnd2:Sound = new Sound();
var urlReq2:URLRequest = new URLRequest("Track2.mp3");
sourceSnd2.load(urlReq2);
sourceSnd2.addEventListener(Event.COMPLETE, loaded2);
function loaded2(event:Event):void
{
mySound2.addEventListener(SampleDataEvent.SAMPLE_DATA, processSound2);
mySound2.play();
mySound.play();
}
function processSound(event:SampleDataEvent):void
{
var bytes:ByteArray = new ByteArray();
sourceSnd.extract(bytes, 8192);
event.data.writeBytes(bytes);
}
function processSound2(event:SampleDataEvent):void
{
var bytes:ByteArray = new ByteArray();
sourceSnd2.extract(bytes, 8192);
event.data.writeBytes(bytes);
}
been working on a similar system for a while, I'll do my best to give you some direction:
Your example code is not really mixing the MP3's - it's creating 2 more sounds to playback the loaded MP3's via the SampleDataEvent. What you need to do is create just one "output" Sound file that will hold/playback the resulting mixed sound. You can easily save that data as it happens and subsequently save that file as a new WAV/MP3/what-have-you.
real/psuedo-code (read:lazy) :
output = new Sound();
output.addEventListener( SampleDataEvent.SAMPLE_DATA , mixAudio );
song1 = new Sound / load the first mp3
song2 = new Sound / load the second mp3
// a byteArray for "recording" the output and subsequent file creation
recordedBytes = new ByteArray();
either wait until both mp3's are completely loaded, or run an enter-frame to determine when both Sounds are no longer buffering (Sound.isBuffering )
when the mp3's are ready:
// numbers to store some values
var left1:Number;
var right1:Number;
var left2:Number;
var right2:Number;
// bytearrays for extracting and mixing
var bytes1:ByteArray = new ByteArray( );
var bytes2:ByteArray = new ByteArray( );
// start the show
output.play();
function mixAudio( e:SampleDataEvent ):void{
//set bytearray positions to 0
bytes1.position = 0;
bytes2.position = 0;
//extract
song1.extract( bytes1, 8192 );
song2.extract( bytes2, 8192 );
// reset bytearray positions to 0 for reading the floats
bytes1.position = 0;
bytes2.position = 0;
// run through all the bytes/floats
var b:int = 0;
while( b < 8192 ){
left1 = bytes1.readFloat(); // gets "left" signal
right1 = bytes1.readFloat(); // gets "right" signal
left2 = bytes2.readFloat();
right2 = bytes2.readFloat();
// mix!
var newLeft:Number = ( left1 + left2 ) * .5;
var newRight:Number = ( right1 + right2 ) * .5;
// write the new stuff to the output sound's
e.data.writeFloat( newLeft );
e.data.writeFloat( newRight );
// write numbers to the "recording" byteArray
recordedBytes.writeFloat( newLeft );
recordedBytes.writeFloat( newRight );
b++;
}
}
Yes - you should really cap the possible output at -1/1. Do it. This is extremely un-optimized!
Ok. so that's the easy part! The tough part is really converting the final byteArray to MP3. The audio exists within Flash as PCM/uncompressed data, MP3 is obviously a compressed format. This "answer" is already way too long and all this info I've gleaned from several very smart folks.
You can easily adapt 'MicRecorder' to be a generic Sound data recorder:
http://www.bytearray.org/?p=1858
converting to MP3 will be a bitch: Thibault has another post on ByteArray.org - search for LAME MP3.
Excellent example/resource:
http://www.anttikupila.com/flash/soundfx-out-of-the-box-audio-filters-with-actionscript-3/
Look up Andre Michelle's open source 'Tonfall' project on Google code.
Look up Kevin Goldsmith's blog and labs - he's got great example on utilizing Pixel Bender with all this madness.
hope this helps!
PS - taking a cue from Andre, the optimal length of the audio buffer should be 3072. Give it a try on your machine!
If I understand your question properly, you need read the floating point data for each sample, sum them, and write the resulting value into your new audio stream. This would give a stright 50/50 mix.
I don't have access to a machine with a compiler right now, but it should be something like this (assuming bytes1 and bytes2 are two ByteArray objects of equal length):
for (int bcnt = bytes1.size(); bcnt; bcnt--)
bytes1.setByte(bcnt - 1, bytes2.getByte(bcnt - 1) + bytes1.getByte(bcnt - 1));
Of course, you would probably want to do some sort of overflow check, but that should be enough to put you on the right track.
if you have uncompressed audio, you can just add up the values of individual array elements in your ByteArray's. But you also have to handle capping for max/min values (no overflows). Pretty sure there is nothing equivalent for mixing MP3s - so you might have to decode, mix, and encode to MP3 again.