Can anyone recommend a decent tutorial, add-on or approach to creating a page rip off effect in flash?
I want to create a notepad where each page can be ripped off to reveal further content.
Thanks
Paul
are you looking for a pageFlip with a tearing feature? if so it does exist even though I can't find the link (anyway it was AS2).
if you want more flexibility, you can take a look at a cloth simulation ; derschmale did a great example and pixelero did sort of the same with linked lists (=faster)
there's also this particle physics engine called Traer that have been ported from java and that allows you to get the cloth behaviour with fewer lines of code and some fine tuning (stiffness, damping a.s.o. ).
the general idea is to subdivide the displayObject you want to tear off into a series of triangles, take a snapshot of that object in a BitmapData, then redraw the distorted grid with the drawTriangles() method.
I think it is how they do the thing in the cloth examples.
Related
I'm developing some platform-like game in Flash using AS3. Everything is quite clean. The whole code is class based etc.
I've already done the most of the mechanics, and now I need to do some main character animations. I've already designed it, and it's waiting to be animated as a vector graphics.
A the problem starts here... What is the proper way of doing that? I would like to use bone tools to make it smooth. But as far as I tried to find any materials about it on the Internet everybody just do some simple animations and play it separately one after another. How about playing legs animation simultaneously arms and other parts of the body? Maybe some tricky usage of state machine... I don't know.. Is there any ready solution for that?
More tips is better here, or even some tutorials - just anything.
This tutorial by Chris Georgenes seems to be exactly what your looking for: http://www.adobe.com/devnet/flash/articles/character_animation_ik.html. Chris teaches the reader while animating a simple character. Having a strong overall knowledge of the bone tool will allow you to get the nice crisp animations you seek. I sincerely wish you the best of luck with your project.
I'm researching the following problem:
Let's say I have a glass of some fluid (water for example). The fluid is completely transparent and I don't have to render it at all.
However a ink drop is dropped in the glass and it's spreading in the water.
The whole thing should be 3D and user should be able to rotate the camera and see the spreading in real time.
I have researched a couple of way to approach this problem, but it turned out that most of them are dead end.
Тhe only approach that has some success was to use enormous amount of particles which form the skeleton of the "inc spread". The physics simulation of the process of spreading is far form perfect, but let's say it's not a problem.
The problem is the rendering part.
As far as I know I'll not be able to speed up the z-sort process greatly by using the flash GPU acceleration, because the upload of those particles to the GPU memory every frame is quite slow?
Can somebody confirm that please?
The other thing that I'm struggling with is the final render. I tried a whole bunch of filters in combination with "post process" techniques to create smooth lines and gradients between the dots, but the result it terrible. If somebody know some article that could help me with that I'll be very grateful.
Overall if there is another viable approach tho the problem please let me know.
Thanks in advance.
Cheers.
You should probably look at Computational Fluid Dynamics in general to get a basic understanding. This should make it easy to play with actionscript implementations like Eugene's Fluid Solver, either in 2D or 3D, tweaking fluid properties to get the look and feel you're after
paper.js
EaselJS
fabric.js
KineticJS
Hello guys I am new in html5 canvas development and I am lost in choosing canvas frameworks. There are so many of them that I can't find out what to use. So here I am! I want your help to choose which one is better for my needs. There are my needs
1) I want the framework used Vector graphics, I know canvas is not DOM, I realy don't care about it but what I mean is I want to manipulate with objects after its creation, PaperJS has this feature I don't know about others. If advanced mouse events will be available it would be better.
2) I want to use the framework for images, I will load image and animate them with canvas, move, animate some colors...
3) I want the framework to be fast because of my needs (image animation should be smooth)
4) I want the framework to have good community because I know I will need some help.
So what do you think which one is better for me? and please if you can write down from my list which are the strength and weakness for each framework?
HTML5 canvas is still very fresh environment. You can get impression there is a lot of tools already available, they are often quite immature though.
My answer will cover only part of your question because I used only KineticJS and EaselJS.
You can start from reading opinions at this page (mine is the last one at the bottom).
Speaking shortly KineticJS has lower entry barrier. It's simple drawing library and has some support for mouse events too. At the time I was trying to use it it was barely extendable. I found it really hard to customize for my needs.
EaselJS is a bit harder to start with, but it's more advanced too. Now it's part of other libs set known all together as CreateJS. It seems that lot of development going around there.
Both Kinetic and Easel supports mouse event. I don't remember
well the Kinetic, sensing 'onMouseOver' is costy with Easel though.
Also both mentioned libs allows objects manipulation. You can find
here TweenJS also useful as addition.
Again both Kinetic and Easel allows this. Easel also has support for
sprites - 'animated images' well known for web game developers.
I'm not sure about Kinetic as I haven't reached animation part of my
project before I dropped it (the lib, not the project). With Easel
speed is tricky. It has some optimization methods implemented like
for example objects cache or snapToPixel flag. Examples seems to run
really well. However for my project using Easel smoothness still is
an issue despite quite a lot of effort put in optimization. Maybe I
misused the API or there is still place for more optimalization I
haven't noticed.
Both libs are quite young but seems to be actively developed.
Authors are rather responsive. Community still isn't big, but I
guess CreateJS as more complete set of tools for creating games will
grow faster.
If you want to check here is the project I mentioned. It's a web page made with usage of EaselJS + TweenJS. Still needs some minor tweaking though.
I'm searching for Depth map algorithm for action scrip 3 (or some other language).
My goal is to generate depth map for static image on run time.
I have fount this example http://kode80.com/2009/06/29/papervision-zbuffer-and-dof/, i didn't have the time to investigate it's code but i have the filling its working only with 3d models.
Worst viable option is server side technology that does the work.
Extended description:
I have a task to develop flash application where 3d rotation of a head is simulated by a 2d image uploaded by the user.
There are some japan guys that have managed to do that (http://hairtry.jp/), but the technology that they are using is server side. It generates swf fail with precisely coped eyes and image for the depth map of the uploaded picture. I can't find out what is the sever side technology that they are using so I'm searching for any posible workarounds.
Thanks in advance.
Cheers,
Chavdar Slavov
your easiest solution would be to use a 3d engine, Paper vision seems to be getting out dated, theres a lot of documents on how to use, and tutorials but again not much has been happening with them lately. i suggest Away3d "www.away3d.com" they seem up to date.
for what your asking it is possible to do this 100% in flash but to create a 3d head at runtime and fill the face with hieght maps this is possible, you would need to look at bitmap manipulation.i dont think this is an easy task, what you should learn first is how to add an image to a spheric surface dynamically than look into height mapping by converting certain coulours from the image into different levels of depth i must say im sure this is advanced stuff, i manged to animate a globe that was this same method it looks dodgy but it gives you some source code in the FLA
http://www.ffiles.com/flash/animations/globe_animation_3496.html
The above link will allow you to download my source files, the animation it self is a scrolling image but i used Actionscript to give the globe depth and a sheric look
I'm working with a few programming buddies to create an AS interface to the kinect and one problem we're running into is image differencing. We need to be able to throw out image data that doesn't change from image to image so we can pin-point only things that are moving(i.e. people).
Anyone have any experience with this or a direction we can go?
I would consider creating a pixel bender shader to find the difference and also do any other math or tracking. Pixel bender gets its own thread outside of the normal flash player so you can get some more horse power for your setup. Pixel Bender shaders can be applied to bitmaps, vectors, or video so I think it is perfect for this project. Good Luck!
http://www.adobe.com/devnet/flash/articles/pixel_bender_basics.html
And is is a full collection of shaders including difference
Take a look at the threshold method on BitmapData.
It'll allow you to do this stuff. Their docs have a simple example so check that out.
It might be a long shot, and this is just me rambling, but in sound theory (strange how I'm relating it to image cancellation, but here goes...) the concept of cancellation is when you take a wave sample and add its inverse. It's how you make acapellas from instrumentals + originals or instrumentals from acapellas + originals.
Perhaps you can invert the new image and "normalize" the two to get your offsets? I.e. the first image is 'black on white' and the second image is 'white on black', and then detect the differences for the bitmap data. I know I did a similar method of finding collisions with AS3 a few years back. This would, in theory, cancel out any 'repeating' pixels and leave you with just the changes from the last frame.
With BitmapData your values are going to be from 0 to 255, so if you can implement a cancellation (because a lot of parts of the image are going to stay the same from frame t frame) then you can easily find the changes from the previous frame.
Just a thought! Whatever your solution is it's going to have to be quick in order to beat the flash runtimes' slow speeds. Your Kinect read FPS rate will be greatly hindered with bad code.
Here is some frame differencing code I wrote awhile back. It uses bitmapData: http://actionsnippet.com/?p=2820
I also used this to capture moving colors in a video feed: http://actionsnippet.com/?p=2736