I am drawing three circles in my flex application, using actionscript. But these circles are now pure 2D images, which is not looking good. How can I make it look like 3D using some shadows or shades inside the shape.
Cheers,PK
If you want some 3D-ish effects, you should look into the usage of the bevelFilter. I have found some links that show you how you can use this filter:
http://www.republicofcode.com/tutorials/flash/as3filters/
http://wonderfl.net/c/6AxW
http://www.flashactionscripttutorials.com/?p=projects&actionscript-functie=applyFilter
If you want genuine 3D-objects, you should use a 3D-library (I would recommend Away3D).
Related
is it possible to create the following shape using pure CSS3 - in a single layer i.e.
<div class="nav-bg">...</div>
I'm currently using the traditional slice the curve apart and add it as a bg-image. I'm just curious and i couldn't find anything on the internet about a CSS only method of creating this.
I also gave this a shot, How do I combine a background-image and CSS3 gradient on the same element?, no bueno.
Raphael.js may help you in creating curve lines and straight lines and many other things w/o using an image.
I am building the basic Set card patterns. I can do colours, numbers and fillings, and I have the diamond and oval shapes. Please see my progress in this fiddle.
The last piece of the puzzle is to build a squiggle class for the "squiggle" shape. How can I do the squiggle shape using CSS?
I'm pretty sure you'll have to resort to SVG for shapes like that.
SVG might also make your life easier for those other shapes too. On my Safari 6.0.2 I see a few small CSS rendering artifacts:
In particular, the spacing of the striped diamond due to how transform works (texture mapping) produces something that doesn't quite look completely uniform. You'll need to scale up this screenshot to see the artifacts at the corners of the diamond.
Basically, CSS is not meant for drawing shapes. SVG is meant for drawing shapes. Therefore since you are trying to draw shapes, there's a much higher chance you'll succeed with SVG.
Good job with the diamonds, though. (Note also SVG ought to work on platforms not supporting CSS3 3D; it is a neat trick to skew/scale square to make a diamond but at the end of the day its more or less a hack)
Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.
Trying to achieve something like this
http://attasi.com/labs/ipad/ which uses CSS transforms.
but using the Canvas object for greater compatibility.
Does anyone know if this is possible?
Take a look at three.js, it can render 3D using mainly WebGL, but it supports a subset of stuff with <canvas>, SVG and even the plain DOM - check this demo that uses the DOM renderer.
Here are demos using canvas. Some guy made this which shows it can do textured, animated game-like 3D with canvas.
Also, you may want to check out a particle engine and a tweening engine to go with that, plus stats like FPS.
I want to develop an image editing application in Flex 4. My initial requirement is to draw various shapes like Line, Rectablge, Triangle, Circle, Star etc in appication. I want to facilitate user to draw shapes using rubber banding like professional applications do.
All shapes would be vector and should look smooth in an size. So, can't use bitmap and scale them.
What are better methods to achieve this?
if you don't want to start from scratch with the basic shapes, there is this framework called degrafa: http://www.degrafa.org/
they have plenty of parametric shapes & curves and advanced features to organize them together.
Make shape editor with some control points. Control points are draggable sprites (circles or squares as you like). When control point is moved, editor must be updated - it may be resize or move action. On resize, draw your vector shape according to new size. The easiest way to make sprite draggable is startDrag() function - you can also set limits there (to stay in editor area or to disable negative sizes).
I have done such editors based on Sprites, added into Flex application with rawChildren.addChild, but you can try to use Canvases instead of Sprites if you wish.