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.

    You may ask why there isn't any tween in the timeline? Yes, all you need to do is to set key frames on the timeline and the rest of the work will be accomplished by the design panel.

    As a designer, you may have added the tween in your animation, no worry, the design panel can import the animation as what it is designed. (The current version of DragonBones only supports classictween. New kinds of tween will be supported in later version)

  4. After getting all of the requirements above ready, you can click Window>Other Panels>SkeletonAnimationDesignPanel in the Flash Pro menu to open the design panel. We will explain the details about the usage of design panel in following steps.

  5. Click the "import" button in this panel, then you will see the following pop up window:

    In the "Import" window you can set the layout of the texture, texture size and texture padding. In the "Import" option you can import the selected elements in library, or all the elements in symbol library , or the PNG/SWF/ZIP files exported by the design panel.

    Select the MovieClip "Dragon" in library panel, then choose "Selected Items" item in design panel , and Finally click the "OK" button.

  6. After importing the MovieClip "Dragon" to the design panel you will see the updated UI like following:

    Armature List: List of imported movieClip. Each element in this list has the same name with the corresponding MovieClip in library and the program will use this name to create the animated object. Each MovieClip containing motions is called "Armature" in DragonBones.

    Behavior List: Motion/Behavior names of corresponding animated objects. The name are got from the label name in the MovieClip and will be used by programs to play motions.

    Bone Tree: The skeleton structure of animated objects. The name of each item is same with the name of related layer in the MovieClip.

    Texture List: The texture name that is associated with each bone.

  7. For each motion, you can also set the preferences like this:

    Total Times: Duration of the selected motion. The larger the number is, the slower the motion goes.

    Blending Times: Number of tween frames needed to switch from one motion to another. For example, there is a motion called "going down" which has only 1 frame in timeline, but if you set this parameter into 6, then the program will add addtion 6 frames long tween to make the switch more natural when there is a switch from one motion to the "going down" motion.

    Keyframe Ease: The ease value between key frames within a motion.

    Loop: Decide if the current motion should be played repeatly. Such as the "walk", "run" motions of a character.

  8. After setting the parameters above, you can see the updated animation in the preview window which is in the bottom left of the design panel.

    The button located at the bottom left corner of the preview window can scale the object to view it conveniently.

  9. OK, now we will set the subordination relations between bones in Bone Tree . From the graph below we can see that in default bone tree view, all bones have no relationship with each other:

    At the top right of the panel you can set the highlight color of the selected bone in the preview window.

    In the list we can attach one bone as a child to the other bone by dragging it. As you see below, we set the body as the major bone and the head, tail, upper limb and lower limb as the children of major bone. The upper limb contains upper arm and lower arm as its children at the same time. By the tree structure we can see directly the subordination relation between bones.

  10. We can set the motion parameters for each bone individually. Just select the bone you want to modify in the "BoneTree" panel and set these parameters:

    Total Frames Scale: Set the scale of the total frames of current bone relative to the total frames of the motion

    Play Delay: Set the delay of current bone get started , relative to the motion it belongs to

    Be careful for these two parameters. After fine tuning of these two parameters, you will find that even there are only 2 key frames in the timeline, the motion of the character can be very complicated.

    In this example, we set the "Tween Delay" parameter of the tail to the number -10, and the tail tip to the number -50. Then you can find that the dragon's tail wag along the motion of body naturally. :)

  11. After adjusting the skeletal animation well, you can click the button "export".

    There are many kinds of file format for export to meet your project requirement at the pop up list of "Export".

    SWF (XML Merged): SWF file format that contains the skeletal animation data with the type of XML. If you need vector based the skeletal animation , you can choose this type of format. Of course, the original format of your assets must be the vector based. PNG(XML Merged): PNG file format that contains the skeletal animation data with the type of XML.

    Zip(XML and SWF): Export the XML file and SWF file packed into a Zip file to store the skeletal animation and the visual resource individually.

    Zip(XML and PNG): Export the XML file and PNG file packed into a Zip file to store the skeletal animation and the visual resource individually.

    Zip(XML and PNGs): Export the XML file and PNG files packed into a Zip file to store the skeletal animation and the visual resource individually. There would be an individual PNG file for each bone.

    In this example, we choose "PNG (XML Merged)" and click "OK" to export the file "DragonWalk.png" into a selected directory.

    Notice that there is only a single PNG file get exported? Yes. Because we choose the export form that combines both XML data and skeletal data, so this PNG file contains all the data needed by the skeletal animation.

    In Export Scale dropdown box, you can set the scale of exported texture atlas to provide assets with different dimension for devices with different resolution.

    Till now, as a designer, you have done all your work !

Tutorial 2: For programmers Use skeletal animation in ActionScript project

After designers export related assets and data into a predefined format file such as PNG or SWF, developers can use the skeleton animation library to import the file to program and control the characters to play. It is a very easy task with only a few steps! Following you will start to study how to use the skeletal animation library to render characters with traditional flash DisplayList or GPU base starling framework.

Download the Skeleton Animation Library, and import this project into your project. Let’s understand some basic concepts about skeletal animation before coding.

Factory: This is the basis for building skeletal animation. It is responsible for parsing the data from the imported file and preparing resources to create skeleton container, which is Armature.

Armature: We can consider it as a container which corresponds with a MovieClip exported from design panel in Flash Pro. Armature is responsible for skeleton management and playing animation.

Now let's check out an example about how to create characters with traditional Flash DisplayList using skeleton animation library. Open the source code DB_Tutorial_Walk_DisplayList.as.

  1. Firstly, import assets into your project.

    ?

    [Embed(source = "../assets/Dragon1.swf", mimeType = "application/octet-stream")] 
    private static const ResourcesData:Class;

    This asset is exported from Flash Pro skeleton animation design panel, merged with png data and XML data. Of course you can also dynamic import it after application launched.

  2. Create factory and parse resource data from function "fromRawData", then do other things in callback function "textureCompleteHandler".

    ?

    factory = new BaseFactory();
    factory.addEventListener(Event.COMPLETE, textureCompleteHandler);
    factory.parseData(new ResourcesData());
  3. In textureCompleteHandler, you need to create Armature with function "buildArmature":

    ?

    armature = factory.buildArmature("Dragon");

    Add "armature.display" to stage.

    ?

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

    1291 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