Advertisement
  1. Code
  2. Effects
Code

Forever Blowing Bubbles With the FLiNT Particle Engine

by
Difficulty:IntermediateLength:QuickLanguages:

In the tutorial, we will learn how to create a dynamic, bubbling photo displayer using the FLiNT particle engine and flash.

This application will randomly select images from an array and place them into floating bubbles. We will also add an interactive background to the image with FLiNT particle physics.


Final Result Preview

Let's take a look at the final result we will be working towards:


Step 1: Setting up the IDE

Let's begin.Open up your favorite version of Adobe Flash (needs to work with AS3). I will be using Flash CS5 in this tutorial, but you won't need to. Create a new AS3 Document and make sure the settings are as below:

Flash FLiNT photo bubbles tutorial

Step 2: Getting FLiNT

Now let's set up the FLiNT engine. If you haven't already, download it from github.com. Then unzip the contents into the root directory of your project.

If you want to get caught up on FLiNT usage, I'd recommend you check Create a Sparkling Bomb Mouse Cursor with FLiNT Particles out. It's great for people who are just starting off with the engine.


Step 3: Document Class

Now go into Flash's properties panel. Set Document Class to "Main". Open up your favorite actionscript editor. Create a new class file in the directory that your FLA is in. Set its name to "Main". Here is all you should have at the moment:


Step 4: Imports

Add the following import statements to your code underneath the package {This will import the necessary .as files into your program for its use.

Whew! I know that's a ton of files, we can thank FLiNT for their wonderful organization on this one :)


Step 5: Drawing the Background

Now let's open up the Flash IDE. It is up to you to create a 800x600 gradient box as your background. The main purpose of this tutorial isn't to learn any new flash drawing skills, but I can show you what I drew in my own application. This background is also included in the source of the tutorial.

Flash FLiNT photo bubbles tutorial

Step 6: Our Images

Now we can select the images that we want our application to display. The good part about the design of the application is that it can work with as many images as you want, as long as you mention them in the application's array... But we can get to that later.

For now, let's just select four images from the internet. Here are the four images that I have selected:

Flash FLiNT photo bubbles tutorial

Now drag each one onto the stage. Push F8 to create a MovieClip. Here are the settings that you should choose for each MovieClip. Now just replace the "1" with the number of the image in each case.

Flash FLiNT photo bubbles tutorial

Once you've chosen a number of images that satisfies you, move ahead to the next step :)


Step 7: Our Image Array

Now let's create a list of all of our images inside our Main class. Add the highlighted line of code to your class


Step 8: Our Bubble Mask

Let's make an object that will mask the image selected by our program. This will just be a black circle which is the shape we want our images to take. If you want, you can do something more creative like a star... It all works.

Draw the circle, select it, and push F8 to create a new MovieClip. Make sure to set the registration point to the top right corner. Also set the class name to MaskMC. Now delete the object from the stage. Here is a screenshot of what the object can look like:

Flash FLiNT photo bubbles tutorial

Step 9: Countdown Variable

Place this variable above the constructor. This variable will be used as a countdown timer to check when to make a new bubble:


Step 10: ENTER_FRAME Event Listener

Now let's add an ENTER_FRAME event listener and a function for it to call. Add the following code to your constructor.

Now we can create this function for our event listener to link to:


Step 11: Countdown Loops

Now that we've set our event listener up, we can modify our function to have to do something every time the counter reaches zero. Modify your function to look like this:

Now we can just insert the right bubble making code into the function and we'll be all set!


Step 12: enterFrame() Part 1

Let's do the next part of our enterFrame() function. In this step, we shall be creating the bubble MovieClip. Add the following into your function:

This is how your function should look now:


Step 13: enterFrame() Part 2

And now we can add the finishing touches to our enterFrame() function. Here are the things to add underneath what we did earlier:

Here is a snapshot of what your enterframe function should be looking like:


Step 14: Bubble's ENTER_FRAME Handler

If you remember from our last step, we added another enterframe event listener to our new bubble. Add this function to your main class so that the bubbles move:

You may find that this reduces your SWF's performance. If so, try adding each bubbles to an array when it's created, and moving each bubble in the array up by 7 pixels in the enterFrame() function.


Step 15: Killing Bubbles

We have yet to make our bubbles pop with the FLiNT engine, but we can at least remove them and save some memory. Here is what we can add to our bubble's ENTER_FRAME handler to delete our objects from the stage and remove the event listener attached to them.

Here is what your bubbleFrameEnter function should look like:

If you're using an array, you'll need to remove the bubble from the array here.

Congratulations on finishing Part One of our application! Now we need to add some FLiNT effects to our program to make it more realistic and fun to watch!


Step 16: Background Bubble Design

Now let's add some background bubble effects to our scene. To do this we need to design a MovieClip to use with FLiNT. Make sure the following settings are set in your new MovieClip:

Flash FLiNT photo bubbles tutorial

Draw a bubble that you would like to use. Note that this is different from the photo bubbles we've been dealing with. I have chosen the following image below (zoomed 8 times). The size doesn't matter as long as it is small enough to multiply a few times and still look good.

Flash FLiNT photo bubbles tutorial

Step 17: Renderer and Emitter

We can now get started with the FLiNT engine. To begin, we need to create our Emitter and Renderer. Add the following code above the constructor of your document class.

From the emitter, we can attach all of the correct properties to the bubbles to make them behave like we want them to. The renderer will be drawing the bubbles onto the stage.


Step 18: Emitter Customization

Now that we have created our emitter, we can go ahead and attach all of the actions and properties we want to it to make it behave just how we want it to. To do this, add the following code anywhere inside your constructor.

Nice job on making some awesome particle effects with FLiNT. Oh wait... you can't see them... Looks like we'll have to cover that in the next step :)


Step 19: Displaying Our Masterpiece

And now *drumroll* comes the final puzzle piece in this puzzle. (erm) I mean tutorial. Now all we have to do is render our particle effects with our emitter. To do this, add the following code to the bottom of our constructor:


Step 20: Bubble Explosions

In Step 15 we left a blank spot in our code for explosions when our image bubbles left the stage. Now it is time to add some FLiNT effects to the mix to make it look like the bubbles are really popping.

Let's begin by drawing our explosion particle. Go into the Flash IDE and create a new darker, smaller bubble and (Select + F8) it. Now set the class name to "bubble_mc2".

Flash FLiNT photo bubbles tutorial

Modify your bubbleFrameEnter() function to look like the below. Check out the comments for an in-depth explanation of what we are doing:


Conclusion

Congratulations on using FLiNT to make a dynamic image displayer. Now that you've created this, you can start using the techniques showed in this tutorial for your own personal projects to create something truly unique with FLiNT.

Thanks for reading, and I hope the tutorial was useful for you :)

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.