Does anyone know where I could find a nice tutorial/guide/info on making radial skills bars like the one shown in this website?
After some further investigation of the source on the page I found it's made with raphael.js.
Yes look at the polar clock it's really simple. It's not a tutorial though.
I would suggest http://anthonyterrien.com/knob/ as a good starting point
Raphaël.js (a fantastic vector image library) is used for that effect.
If you want a more simple and easy to implement (but not as flashy) solution, you can also check out jQuery Knob.
Since you are asking for tutorials or how-tos, you should probably go with the latter if possible, since Raphael is a bit more advanced (and much more powerful). However Raphael does have some tutorials available if you google around a bit.
Related
everyone. This isn't as much of an specific technical question as it is about asking for some guidance on which steps should I follow.
The thing is I haven't worked with Flash in general for over a year and I'm very rusty, but now, here at work, I need to create an app that takes a picture, detects the face in said picture and then applies a certain animation effect. For example a slap to the face, so the detected face would shake from side-to-side or maybe something similar to the Fatify app, where it takes the pic, makes the person look fat and then you can touch it anywhere to see it animate. You get the idea.
So, my main problem is, that even after doing some extensive research, I'm still not clear on what the best method is or which would be the best tools to accomplish the animation effects on the detected face. I have read about Joa Ebert's Image Processing Library, but that seems to have been forgotten for quite a while and seeing as I have been out of the loop from the world of Flash for quite a while, I don't know if there's any novelty that could be what I'm looking for. I have also looked at countless image manipulation blog posts and tutorials, but most of it is simple stuff that doesn't really apply to what I need.
So, in summary, I would really apreciate it if anyone could point me to resources or topics that I should look into, that might prove useful for what I need to accomplish.
Thanks.
You should be using OpenCV. The library is quite extensive and has been ported to operate in many languages. OpenCV has an api for facial tracking. We've used it in our studio before for simple face tracking games.
These links are kind of dated, but should put you on the right track.
http://www.francois-tarlier.com/blog/marilena-opencv-port-to-actionscript-3-as3-flash/
http://www.marcpelland.com/2009/03/16/face-detection-opencv-in-as3/
I've discovered ways to transform css shapes using animations like the ones demonstrated here: http://matthewlein.com/ceaser/
Does anyone know if it is possible to get more advanced with CSS or other non-flash code, to create animations more complex - even along the lines of the effect you see when minimizing or maximizing windows on Mac OS toolbar?
Is that possible or out of the realm of possibility using css?
Thanks,
This should be enough to get you started:
http://jsfiddle.net/9BTPy/
Notice that I only made a sample for Firefox for simplicity. Otherwise the code would get too big. It is also not the effect from your question, but you should get the idea.
Also see the following links for documentation and other examples:
http://css3please.com/
http://www.w3schools.com/cssref/css3_pr_keyframes.asp
http://www.w3schools.com/cssref/css3_pr_animation.asp
Additional Notes:
If you really have to do it this way, you are off way better with jQuery-Animations. The support over the different browsers is better, and it may be even simpler to do the effect you describe. It's also way nicer to maintain. :)
Right guys,
I have been looking all over the internet for a tutorial to which will show me how to re-create this effect on images...
http://flash-effects.com/tutorial-image-transition-flying-tile-3d/
I dont want to install these 3rd party components, because the project I am working on at present, may in future need to be edited by other designers/developers.
Is there anyway to do this just via scripting???
Any feedback would be appreciated, im ideally looking for a tutorial...
Most of what you're looking for is here. Then download the Bitmap.zip example and look through it. Although I will reiterate what the page says, you really should buy the book. It's quite good and teaches a lot about Flash in general, not just game programming.
You'd still have to figure out how to randomize the height and width of the pieces, add an onClickListener, and then move the pieces. From the example you provided it looks like they're just moving them back and forth in a z-dimension.
Hope this helps.
I'm working on a paint application with canvas, and trying to make some better tools.
now i have one tool that only connects lines while following the mouse movement.
can you think of a good tutorial or a good idea for other tools like spary, or brush?
thanks
You might find the following resources useful:
Create a Drawing App with HTML5 Canvas and JavaScript
Create a Paint Bucket Tool in HTML5 and JavaScript
Overview of JavaScript Application Development - Case CanvasDraw
Presentation - Intro to HTML5 Canvas
Feel free to contact me if you need more specific pointers. I think those above should at least help you to get started. :)
Please have a look at this code project article.
it may be useful to you.
http://www.codeproject.com/Articles/427422/Paint-Brush-Application-Using-HTML5-Canvas
thanks
I don't have a tutorial, but I think you should simply use thicker lines to create a brush tool.
A spray tool could draw random points in a circle with random alpha(that's quite easy to implement), but that might be extremely slow on some browsers. Drawing using pre-generated images would be much better but harder to implement.
I have searched the web and found no answer. I want to draw lines on an HTML5's canvas element but having a texture that is not solid, rather custom. Just like brushes in Photoshop if you know them. For example, to have a line that looks like it was drawn with chalk or artist paint brush. Do you know a way to do it?
Why don't you use croquis.js?
It has neat brush implementation like photoshop :)
And here is Demo which is using croquis.js.
Have you considered using libraries such as Processing.js or Fabric.js?
You can also take a look at this blog entry that might be interesting for you:
http://rhyolight.posterous.com/new-brushes-for-harmony-canvas-app
If you want to develop everything from scratch you should put a lot of effort into it!