I was wondering how to draw over a video like this.
http://www.bannerblog.com.au/2009/06/burger_king_sharpie.php
I'm not sure that in the example is drawing process over video. As for me It's a 3d model with video background. And you could sync prerecorded states with 3d object transformations (position, rotation, mesh transformations), or create well textured object.
Here for your tutorial how to draw over the 3D objects
Easy! Use Adobe After Effects (or any number of other compositing programs).
Related
Im building an iOS AIR app using AS3/Flash builder.
The app grabs the camera stream into a video object and then draws that to a BitmapData. The camera stream is 1280x720px and the container is 2208x1242px (iPhone 7+) so I need to scale the footage. I also need to rotate it around the center point:
mat.identity();
mat.translate(-video.width/2,-video.height/2);
mat.rotate(Math.PI/2);
mat.translate(video.height/2,video.width/2);
mat.scale(deviceSize.height/cam.width,deviceSize.width/cam.height);
I have timed the drawing operation with matrix:
videoBitmapData.draw(video,mat); //9-11ms
And without matrix:
videoBitmapData.draw(video); //2-3ms
Clearly the transformation is slowing me down.
Is there a faster way to do this? Maybe drawing first, then applying the matrix somehow?
Pre-rotating something?
Leveraging native scaling/rotation?
Can I skip using the video object somehow? Accessing the camera data in a more raw form?
I see no difference using render mode GPU vs CPU.
Thanks!
Edit:
I managed to get down to about half by doing this:
1. Put the video object inside a Sprite
2. Transform the Sprite.
3. Draw the Sprite to the BitmapData.
(5-6ms)
Suprisingly, this was more consistent than this:
1. Put the video object inside a Sprite
2. Transform the video object inside the Sprite
3. Draw the sprite to the BitmapData
(5-12ms)
Bonus:
I only needed part of the pixels from the camera (full width x 100px of the height). When realizing I could use clipRect with the .draw command I managed to get down to 0-1ms.
Thanks to Organis
I'm new to AS3 and I'm trying to create a simple game with it.
So far, I have been able to draw images like this:
[Embed(source = 'C:/mypath/myimage.png')]
public static var myImageClass:Class;
private var myImage:Bitmap = new myImageClass();
and then render myImage.
but that draws only a picture with no animation.
What I want is to import this picture:
and then cut the image to series of subimages and draw an animation out of them, rather than a single image. How may I do this?
Thanks!
This is called "Blitting". You could accomplish it with fairly decent results, depending on your deployment target and how many animations you require, using BitmapData.copyPixels(), but it's more ideal to use the Starling Framework, which employs Stage3D hardware acceleration.
More here:
Introducing the Starling Framework (Video tutorial)
Starling documentation
What you are looking for is SpriteSheet support. You can easily write this yourself or use existing libraries (like Starling for instance).
The idea is to draw an area of the image at each frame to actually create the animation. Depending on the format of your sprite sheet, you may have to add another file to describe the positions of each rectangle to draw.
This page explains how to implement it.
We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.
What is getContext() method and what is drawing context exactly? why we always pass the string 2d to the getContext() method?
Context is a way to choose what you are going to do with your canvas.
For moment you can use getContext for 2d (2dcanvas) or for 3d (WebGL).
HTML5 Specification say's about getContext :
"Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API. Subsequent arguments are handled by that API."
You can find specifications for each API there :
https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-getcontext
It is also good to know that "webgl" is the correct name for API but for moment, as it is experimental you should use "experimental-webgl" to start creating WebGL content
In Computer graphics, a drawing context is an abstraction (class/object) that encapsulates how you are going to draw stuff.
At a 100k foot level, computer graphics is about converting drawing commands to pixels (image). How you go from commands to pixels is what the graphics pipeline is all about (very broad and deep subject). A drawing context exposes drawing methods and properties to achieve this.
Example of a drawing commands: drawLine, drawPath, drawRect (you get the idea).
Example of drawing properties: fill color, stroke color, stroke style, font size, clipping region etc
In the context (pardon the pun) of web, you have two drawing contexts - canvas for 2d drawing and and webgl for 3d drawing.
my current situation maybe akin to me painting myself into a corner.
i have many vector shapes drawn with the Flash Professional CS5 IDE, which have been converted into sprite objects and exported to actionscript. for example, here are 3 shapes:
i want to programatically fill each shape with a bitmap from my library. i realize i can fill these shapes with library bitmaps in the IDE, but i need to scale the bitmaps at runtime as well as swap them out for others.
how is it possible to programatically bitmap-fill shapes drawn within the IDE at runtime without having to also programatically redraw them?
what about using your shapes as masks rather than going through a painful on the fly drawing process ?
it would go like :
bitmap.mask = shape;
as long as shape is a DisplayObject, it should work.
otherwise you can still use a JSFL to export your shapes, store them as arrays of points and draw them at runtime.
here's a basic JSFL export tool
http://ericlin2.tripod.com/bugwire/bugwiret.html
here's an advanced JSFL tool:
http://www.lidev.com.ar/?p=192
here's a ( shamelessly self-promoting :) ) example of an application:
http://en.nicoptere.net/?p=1331
[EDIT]
NB when compiled, your vector shapes are turned into opcode, a set of instructions that you can't read easily.
it remains possible though: http://wahlers.com.br/claus/blog/hacking-swf-1-shapes-in-flash/ but still it's a bit complex if the same result can be achieived with masks :)