66 Technique

01 Copy the disc fi les to your computer and open the Step 1 folder. Test the Flash fi le to check everything is working. You’ll notice in the Properties panel that I have linked the CA_Ribbons class to the Flash fi le, and have set everything up for you.

Flash CS3 or later

Create organic 3D ribbon effects

Go with the fl ow to generate a series of stunning, colourful Flash patterns, writes Stewart Hamilton-Arrandale Free-fl owing ribbon effects have been given a fresh lease of life through ActionScript 3.0, enabling designers to create organic effects that react to user interaction and display as clear, crisp and bright colour ribbons. Dozens of online and TV-based ad campaigns have been reintroducing these elements to sell everything from cars to PCs, so it’s a trend on the rise and a skill worth having in your tool box. In this tutorial I’ll be showing you how to create these organic ribbon visuals using some of Flash Player 10’s new drawing functions – but nothing we’ll be doing will be Flash Player 10 specifi c. I’ve set up the parameters already, and we’ll run through them, explaining what each does, so that you can use the fi les as a template for creating your own ribbon effects (and at the same time learn some of the new data types and the new improved drawing API in Flash Player 10).

Stewart Hamilton-Arrandale

The award-winning freelance digital designer has produced Flash solutions for the likes of Crown paints and Original Source, and delivered motion graphics pieces for Liverpool Capital of Culture ‘08. To fi nd out more see www.creativewax.co.uk

On the discThe fi les you need to complete this tutorial can be found in DiscContents\Resources\Ribbon

Time needed1 hour

Skills ActionScript

animations Basic

ActionScript 3.0 Use of Flash

graphics

Computer Arts December 2009 www.computerarts.co.uk

ART169.tut_flash 66 21/10/09 10:12:16 am

67

02 Take a look at the RibbonParticle class in the com\creativewax\ribbons folder. You’ll notice that this is a very simple class, the sole purpose of which is to act as a pointer to a virtual position, storing a few variables to let the ribbon system know how to draw the ribbons.

05 In the moveParticles method, we set a reference to the first particle in our ribbon and then update its position closer to the sprite it’s following. We then loop through the rest of the particles and add forces and friction to its velocity, updating its X and Y positions. Then we check the distance between the current particle and the one before it.

04 In the Constructor, set the variables and initialise the __drawCommands vector. The createParticles method loops through the maximum amount of particles set and then creates them. We can also increment the radius of the particles and then store a reference in our particles vector. Below this is the render method that moves the particles and then draws around them to create the ribbon effect.

03 Now open the Ribbons.as from the same folder. You can see all our variable declarations on lines 8-37. The particles:Vector<RibbonParticle> line is an Array that only excepts the data type we specify, while __drawCommands and __drawCoords are two vectors that are used via the new drawing commands in Flash 10.

www.computerarts.co.uk Computer Arts December 2009

08 The next method – setMidPoints – sets a point at a position based halfway between the two points passed in Steps 1 and 2. Between the information generated in this and the setRadiusPoints methods, we now have enough data to draw the current ribbon segment with a nice flowing curve.

07 In setRadiusPoints method, we work out two virtual points around the particle passed in. This is based on the particle’s virtual radius and its current angle, which is offset by the pAngle variable we set up. We end up with two virtual points both sitting at 90-degree offsets.

06 In the drawRibbon method, we loop through the all the particles and get a reference to the current particle. Calculate the midpoint of the ribbon by finding the halfway value between the first and last virtual points. Next, add the drawing point values to the __drawCoords vector, then draw this ribbon segment out.

Go bite-sized When faced with a coding problem that seems too big to tackle, always try to break it down into smaller, logical parts that are more manageable. This way, even the most difficult tasks are easily accomplished.

ART169.tut_flash 67 21/10/09 10:12:17 am

68

Computer Arts December 2009 www.computerarts.co.uk

13 Now look at the CA_Ribbons.as fi le in the Final folder. You’ll notice a couple of variables: getRandomPoint is called in the Constructor and uses the TweenMax class to animate the __follower sprite to a random position on a Bezier curve, creating the ribbon effect.

11 Next in createRibbons, we loop through the __total variable to create our ribbons. For this tutorial I have set up random parameters for the ribbons. When creating the ribbon, I have set its start position off stage and then stored a reference to it in the __ribbons vector to add it to the display.

10 When we repeat Step 1 we see a vector holding the Ribbon classes we have created. In the Constructor, call the __resize method to set the stage width and height variables, create the ribbons, set up the Timer to once every 30th of a second, and add the main sprite to the display.

15 Open and export the CA_Ribbons.fl a to test it. Now we’ve run through the fi le, have a mess around with the parameters on the ribbons to create your own. By tweaking the code slightly you could turn the ribbons into a music visualiser or even add multiple follower sprites. Have fun experimenting!

12 The fi nal methods are very simple. The render method updates the fake camera movement and ribbons; moveCamera updates the forces that are supplied to the ribbons, and updates the __follower sprite position based on the mouse position; updateRibbons applies the new forces to each ribbon before rendering; and the resize method updates the stage width and height references.

09 CheckParticleDistance sets the distance and angle between two particles. If the distance is greater than the maximum value we set earlier, the particle is repositioned based on its neighbour’s position and angle. Set the velocity and tolerance quite high to give the ribbons an elastic feel.

14 The last update is the moveCamera method, which tracks the position of the __follower sprite. Forces are worked out with the difference between the __follower’s current and previous positions, and then the previous position point is updated to generate the random ribbon effects.

ART169.tut_flash 68 21/10/09 10:12:19 am