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 :)
Related
I have SWF vector shape, how to get access to control points of this shape? I want to move some points of this shape with as3 code. SWF created with flash professional CS5, code in flash develop.
Other way to create some Sprites in CS5, and move them with as3, but how to tie them with shape control points?
Employ readGraphicsdata() to read the GraphicsPath of your shape, it contains commands and control/anchor points. You can then parse that vector to find out the point you want to alter, then you change it, then you feed the path back into your shape via graphics.clear(); graphics.drawPath(path);, or use drawGraphicsData() instead to draw the complete set of graphics shape.
The manual on readGraphicsData()
The manual on GraphicsPath class format
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.
I'm making an animation of a 2D character that can walk, run, jump, bend,...
Would it be better to load one big 'spritesheet' with all the animations and just use a mask, or would loading separate files (walk, run,...) be better because you're not using a mask on such a big image every frame?
I'm not using the Stage3D features with a framework like Starling because I think the normal flash display API is fast enough and has much less bugs than the relatively new GPU frameworks.
Blitting just the character (using lock(),copyPixels(),unlock()) works pretty well.
private function updatePixels():void{
//update sprite sheet copy position based on the frame placements ons prite sheet
position.x = spriteSourceData[currentFrame].x + offset.x;
position.y = spriteSourceData[currentFrame].y + offset.y;
//draw into the bitmap displayed
displayData.lock();
displayData.fillRect(displayData.rect, 0x00FFFFFF);//clear
displayData.copyPixels(sourceData, spriteData[currentFrame], position);//copy new frame pixels
displayData.unlock();
}
//a bit about vars:
position:Point
spriteSourceData:Vector.<Rectangle> - from parsed Texture Packer data
offset:Point - front view and side view animations weren't always centred, so an offset was needed
displayData:BitmapData - pluging into a Bitmap object displayed
sourceData:BitmapData - the large sprite sheet
currentFrame:int - image index on the sprite sheet
I've done this on an older project writing a custom class loosely following what I've learned from Lee Brimelow's tutorial series Sprite Sheets and Blitting (Part 1,Part 2, Part 3)
In short, you'd use two BitmapData objects:
a large sprite sheet
a small image to display just the character (size of the largest character bounding box) to copy pixels into
In my project I had a character with front and side animations and for the sides I've used one set of animations and used the Matrix class to flip(scale and translate) the side animation accordingly. I've used TexturePacker to export the image sequence as a sprite sheet and the frame data as well as a JSON object. There is native JSON support now, so that's handy. Texture Packer isn't free but it's really worth the money (affordable, fast and does the job perfectly). I haven't used Flash CS6 yet but I imagine it's also possible to import your image sequence and export a spritesheet with the new feature.
In my experience the rule "the simpler the display list the better the performance" generally applies. Which means you should use the most specific display object that will do the job (don't use a Sprite when a Shape would be sufficient or favor Bitmaps over vectors where it makes sense).
The most extreme version of this is to only have one Bitmap display object on the stage and use copyPixels to draw all game objects into it every time you want to update the screen. It doesn't really matter what the source in the copyPixel call is, it could either be a large BitmapData acting as a sprite sheet or a small BitmapData objects representing a single frame in an animation. This method is really fast and you could easily have many hundreds of objects on screen at the same time. But using copyPixels means you can't scale or rotate a game object, so for those cases you would have to fall back to the much slower draw() method. Of course this single Bitmap method is not suitable for games where you need to attach mouse events to specfic objects in the game, but works well for shoot'em ups or platform games.
To answer your question, I think you will get better performance by using a single Bitmap display object to represent the player and a collection of BitmapData objects for all the animation frames. Then you can just change the Bitmap's bitmapData property to the frame you want to display. You can still load a large spritesheet png and then plit it up into a series of BitmapData objects during the initialization of the game.
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.
I am making a flash app where I want to have a user defined viewport like the stage in the flash IDE which the user can use to define objects that have a starting postition somerwhere off or on the stage and an ending position either or on or off the stage with the object then tweening between the two points.
My question is this: I want the user to be able to define a curved path for the object to tween along. Is there a library of code that I can use to define curved paths for the app?
Ideally I would like something similar to the functionality available in Flash, so a bezier curve sort of path that is subdivided into handles that can be dragged to define the path of the tween.
If there isn't an existing library, then do you know of the functions that I would need to define (mathematical equations related to drawing curves etc)?
Many thanks
You could use TweenMax with the BezierPlugin
Or define the path elsewhere and use LinePath2D