Navigation

Tools

Sponsored Links

Random Affiliates

Featured Tutorial

Slow motion bullet shot effect
 Slow motion bullet shot effect

Added: 11/27/2008
by: photoshoptalent
Views: 166 | view tutorial >

Directory Statistics

Total Tutorials Indexed: 912

Total Active Users: 13
Guests: 11
Members: 2

Sponsored Links

Bobble Head Characters - Hilarious, Interactive and Customizable

Bobble Head Characters - Hilarious, Interactive and Customizable

Category: Flash > Interactivity
Added: 08/12/2007 by: Pixel Hive Design
Site:
Views: 25071 | view tutorial >

1


Ever wanted to make your own bobble head?
In this tutorial, I will walk you through how to create an interactive custom bobble head character in Adobe Flash. All of the animation and interactivity will be accomplished using Actionscript. Coding the animation effects allows us to easily swap out the example graphics to create additional bobble head characters.

Custom Flash Bobble Head Character Features:

  • Click, Drag and Release Bobble Head and it will bobble back into place.
  • Click, Hold and swing your mouse around to control the bobbling effect.
  • Click anywhere and hold to attract the head to your mouse.
  • Suprised Face on click.
  • Idling animation when not in use.
  • Easily swap graphics out to create your own characters!
Pane Dots

Step 1 : Create your character graphics

To show off the effect, I decided to make the Paris Hilton Bobble Head character. So I searched Google Images for 'Paris Hilton' and picked a good head shot image, got to love that expression, and another of her sidekick, Tinkerbell just to add for fun. Then I searched for 'Bobble Heads' and found a good bobble head body for her. After some photoshop work I had the two components of any bobble head, the body and the head. Since this is a Flash tutorial and not Photoshop, I'm going to supply you with the graphics below: (Save each into your work folder) You can always swap the graphics out later with your own.

Pane Dots

Step 2 : Document Setup

Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 490 x 540 (Size of my example)
Frame Rate: 30 fps
Background: White

Pane Dots

Step 3 : Preparing Bobble Body for Actionscript

Import the supplied paris_body.jpg onto the Stage.
File > Import > Import to Stage...

With the image selected use the Align Pane to position it. Make sure the "To Stage" button is down, then click the two align options below:
Window > Align

Align Pane

The bobble head body should now be centered horiztonally and vertically.

With the paris_body.jpg selected on stage, convert it into a MovieClip symbol.
Modify > Convert to Symbol
Name: bobble_body

The Bobble Head Body

Double click the bobble_body MovieClip

In the Timeline Pane, rename 'layer 1' to 'Body'.

Bobble Body Layer

Click the Body graphic and drag it until the MovieClip reference point is centered on the body's neck (see image below). Our actionscript will reference this point to draw the neck from here to the head.

Align Neck
Pane Dots

Step 4 : Creating the Neck and User Interaction Code

While inside the bobble_body movieclip, create 1 new layer by clicking Insert Layer, Insert Layer.
Rename the new layer 'Actionscript' and select frame 1:

Layer Setup

Now we'll add actionscript to generate the neck and control user interaction. The main animation code will be added to the bobble_head in the coming steps.

Open the ActionScript Window.
Window > Actions

Copy & Paste the following code: ( All explained in my comments )

    // ------------------------------
    // Bobble Head Neck
    // ------------------------------
    // Neck is drawn dynamically using Actionscript.
    // Create empty movieclip to contain the neck.
    bobble_neck = this.createEmptyMovieClip('bobble_neck',1);
     
    // Swap the neck with the head depths.
    // Otherwise the neck would appear above the head.
    bobble_head.swapDepths(bobble_neck);
     
    // Function to draw the neck from the body to the head.
    // Called in the Head Movieclip in its animation code.
    function animate_neck(){
      with(bobble_neck){
        // Clear the last line drawn.
        clear();
       
        // The Neck Line Style (width, color, alpha)
        lineStyle(10,0xfab277,100);
       
        // Reset start location to Head location.
        moveTo(bobble_head._x,bobble_head._y);
       
        // Draw a curved line to the body's neck location.
        curveTo(0,-75,0,0);
      }
    }
     
    // ------------------------------
    // User Interaction with Mouse
    // ------------------------------
    myMouse = new Object();
    myMouse.onMouseDown = function(){
      // Let animation function know user is dragging.
      bobble_head.dragging = true;
     
      // Show Suprised Face.
      bobble_head.gotoAndStop(2);
    }
    myMouse.onMouseUp = function(){
      // Let animation function know user is NOT dragging.
      bobble_head.dragging = false;
     
      // Show Normal Face.
      bobble_head.gotoAndStop(1);
    }
    // Add the listener Object to the Mouse.
    Mouse.addListener(myMouse);
     
Pane Dots

Step 5 : Preparing the Bobble Head for Animation

Import the supplied paris_head.png onto the Stage.
File > Import > Import to Stage...

With the paris_head.png selected on stage, convert it into a MovieClip symbol.
Modify > Convert to Symbol
Name: bobble_head

The Bobble Head

With the new 'bobble_head' Movieclip selected, give it an instance name of 'bobble_head' in the properties panel.

The Bobble Head Instance

Now, double click the bobble_head MovieClip

In the Timeline Pane, rename 'layer 1' to 'Head'.

The Bobble Head Layer

Click the paris_head.png and drag it until the MovieClip reference point is centered on the mouth (see image below). The actionscript will reference this point to draw the neck from here to the body.

Align Head

Now we'll add the additional surprised face for when the user clicks on the bobble head. It's a nice added touch.

Click on Frame 2 on the bobble_head movieclip and insert a new keyframe:
Insert > Timeline > Keyframe

The Bobble Head

Import the supplied paris_head.png onto the Stage.
File > Import > Import to Stage...

Align the mouth with the reference point

The Bobble Head

Now we are ready to add the main bobble head animation code.

Pane Dots

Step 6 : Writing the Head Animation Code

While still inside the bobble_head movieclip, create 1 new layer by clicking Insert Layer, Insert Layer. Rename the new layer 'Actionscript' and select frame 1:

Layer Setup

Now we'll add actionscript to animate the bobble head.

Open the ActionScript Window.
Window > Actions

Copy & Paste the following code: ( All explained in my comments )

    // -------------------------------
    // Custom Interactive Bobble Head
    // Author: Maxwell Langdon
    // Co-Founder: TutorialQuest.com
    // Personal Site: www.PixelHiveDesign.com
    // -------------------------------
     
    // Initialize Constants.
    springiness = .2; // Springiness of the Head.
    friction = .9;    // Friction Component.
    ax = ay = 0;   // X and Y Acceleration.
    vx = vy = 0;    // X and Y Velocity
    default_x = 0;      // X location to return head to.
    default_y = -50;    // Y location to return head to.
    dragging = false; // Keeps track of user interaction.
     
    // Animate the Bobble Head every frame.
    this.onEnterFrame = function(){
      // Check if user is dragging the head.
      if(!dragging){
        // Return Head to Default Location.
        ax = (default_x - this._x + Math.random()*5) * springiness;
        ay = (default_y - this._y) * springiness;
      } else {
        // Head follows Mouse Location.
        ax = (_parent._xmouse - this._x + Math.random()*5) * springiness;
        ay = (_parent._ymouse - this._y) * springiness;
      }
     
      // Add acceleration to current Velocities.
      vx += ax;
      vy += ay;
     
      // Apply Friction the current Velocities.
      vx *= friction;
      vy *= friction;
     
      // Reposition the Head based on current Velocities.
      this._x += vx;
      this._y += vy;
     
      // Warp Head Depending on Acceleration.
      this._xscale = 100 - Math.abs(ax)*2;
      this._yscale = 100 - Math.abs(ay)*2;
     
      // Rotate the Head Depending on X acceleration.
      this._rotation = ax*2;
     
      // Animate the Neck to new Head location.
      _parent.animate_neck();
    }
    // Stops this Movieclip from moving to the next frame.
    // Without it the normal and suprised face will flash back and forth.
    stop();
Pane Dots

Conclusion: Custom Interactive Bobble Head

That concludes the custom bobble head tutorial. Beyond swapping out the character graphics, you can experiment with the code. If your new to Actionscript, start by changing the constant variables like springiness and friction (small changes have big effects). Advanced users might add in additional expressions, a more complex idle animation or allow users to pick up the bobble head. As always, if you have any questions feel free to contact me on my personal site, PixelHiveDesign.com. You will find more of my tutorials here.

Tutorial Author: Maxwell Langdon
Co-founder: TutorialQuest.com
Owner: PixelHiveDesign.com

Post a comment

Tutorial Quest