Flex 4 – Implementing Bezier Curve – Part 2

Here is a link to Step 1: Flex 4 – Skinning Intro – Part 1 if you missed it.

Application – Source

Step 2: Implementing Bezier Curve over the Application Background Skin

Now that you have your application background working, we can work on adding a layer on top of this. We will be adding a shape with a Cubic Bezier curve for a bottom border on top of the background creating a banner. To ensure that our Bezier curve is visible, we need to place it on top of the background (beneath the Rectangle in our code). s:Path is used to be given data to create a shape. Inside of the data property is where we define our shape. First off we have to set the data cursor to start at the X and Y values of 0,0 which would be the top left of the application. Now we make a line from 0,0 to 600,0 by using “l 600,0”. “l” stands for line. It is important to remember that these coordinates are based off of 0,0 being the last coordinates you left off on, not 0,0 being the top left of the application. Next, we need to create the rightmost border of our shape using 0,100. Again, think of this as saying, move horizontally from this location 0 pixels, move vertically from this location 100 pixels.

Now we are to the cubic Bezier curve. This part is a little tricky. To create a cubic Bezier curve and utilize control points, we use “c”. This takes 6 parameters, but you need to think of them as pairs, so three pairs of xy values. The last pair is the destination, so that part is easy. We will want our curve to reach the left side of the application, so the x value is -800, but we want our curve to end up a little lower on the left side, so we will give it a value of 50. The first two pairs are control points. Remember that our cursor is currently at the bottom right of our shape (800,100 in relation to the application). We now need to draw our curving line 300 pixels to the left, but up about 25 pixels. We do this by making our first control point -300, -25. Next we would like to draw our curving line 300 pixels to the left, but up about 50 pixels. We do this by making our other control point -300, 50. We already have our last coordinates set at -800,50. Our finished code for our cubic Bezier curve is, c -300 -25 -300 50 -800 50. To close up the left border of our shape all we have to do is use z which closes our path.

Finally, now that we have our shape, all we have to do is fill it. Just like the last step, we use s:Fill and inside of that we use s:RadialGradient to specify how to fill and s:GradientEntry to specify the colors.

Application – Source

1 comment on this post.
  1. raj:

    Was wondering if there could be a way to draw a bezier curve between 2 points programmatically? Any pointers on that?

Leave a comment