Share to EffectHub.com

You can earn money or coins from your share:)

Tips: you can use Sparticle for uploading away3D effects.

Tips: you can download Sparticle for uploading effects.

Tips: The ActionScript editor is supporting Away3D, Starling, Dragonbones and Flex frameworks.

Tips: paste the web page URL then click button:)

EffectHub.com: Your Best Source for Gaming
Login    or

DragonBones Getting Started Guide

Table of Contents

What is DragonBones?

DragonBones is an open source project for 2D skeletal animation. It has a skeletal animation design panel named "DragonBonesDesignPanel" and a 2D skeletal animation library based on ActionScript.


Since the Design Panel is essentially an extension for Flash Pro, it makes possible for designers to build 2D skeletal animation based on the timeline workflow that designers are familar with, and build it with efficiency


Features

  • The animation is based on traditional timeline animation workflow.

  • Binding bones improves the quality of the animation and make it more accurate and natural. All bones can be controlled by the program dynamically.

  • Setting the scale and the delay of the animation time for a single bone is possible. This means a living and complex animation can be accomplished with less key frames.

  • The whole animation is made up of several pieces and each piece has its own tween effect. This structure will have much less bitmap and memory consumption comparing to "sprite sheets, sequence frames based" animation approach.

  • The view part and the logic part of the skeletal animation are separate. And the view part of the skeletal animation can be changed dynamically without any impact on the animation playback.

  • Animation by the project can be easily used in traditional DisplayList, the Starling framework and other technologies for 2D applications.

Download and installation setup

The project address: http://dragonbones.github.com

  • Get the Adobe Flash Pro 5.5 or above version from here

  • Download the latest release version of DragonBones to get and install the Design Panel, an extension for Flash Pro called "SkeletonAnimationDesignPanel.zxp" , and get the AS3 skeletal animation library in folder SkeletonAnimationLibrary.

  • In following tutorial, we will guide you how to design and implement the animation.

Download the source code of tutorials

Next we will introduce how to use DragonBones with several simple examples.

Please download the related source code from here.

Tutorial 1: For designers Use DragonBones to create skeletal animation in Flash Pro

As a designer, all you need to do is to prepare all the parts of the cartoon character. Then, in the Flash Pro timeline editing view , assemble them properly,and set the key frames and use the design panel of DragonBones to get everything done.

  1. After download and install the design panel, start the Flash Pro and open the "DragonBones_tutorial_Start.fla" file in source code package.

  2. Open the library panel in Flash Pro and you can see the related symbols for this example.

    The "parts" folder contains all the elements that the animation "Dragon" is made up of. You can guess which part of the dragon it is by reading the name of each element. Naming a element clearly is a good practice, isn't it? :)

  3. Double click the MovieClip "Dragon" in the library panel to enter the edit mode. We need to understand how this animation is structured, which can help edit the skeletal animation later.

    Pay attention to the name of each layer in the timeline because we name them as the related part of the skeleton. The design panel of DragonBones will recognize all the parts of the skeleton automatically according to the name of layers.

    You should also note the layer named "label", where we add the label "walk" to indicate the motion of current timeline. If there are more than one motions, you will need to add more labels in corresponding position of the start frame. Label layer should be always on the top. This is very important! The design panel will read and set motions by these labels.

    Y...

    You must Sign up as a member of Effecthub to view the content.

1005 views    2 comments

You must Sign up as a member of Effecthub to join the conversation.

Chenguang Liu 2014-08-04
LeeManTak 2014-08-02

Thank you for offering introduction of dragon bones, but i have a problem why i can't find Other Panels>SkeletonAnimationDesignPanel in flash cs6? i really installed design panel, who can tell me why? thanks`!

Since you are using FP CS6, you need to make sure your Adobe extension Manager is CS6 instead of CC. Please double click the zxp and check your extension manager version

LeeManTak 2014-08-02

Thank you for offering introduction of dragon bones, but i have a problem why i can't find Other Panels>SkeletonAnimationDesignPanel in flash cs6? i really installed design panel, who can tell me why? thanks`!

Join Effecthub.com


Or Login with Your Email Address:

Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character