Wednesday, 5 December 2018

Fast Way To Preview Animations in HTML

It might be that you have missed this feature but DragonBones offers a beautiful way to preview animations. And it's as simple as 1 button click !

Egret Preview Button
Find the red outlined icon on the navbar of your project. If you click on it DragonBones will open up your browser.


Alternatively you can press Ctrl+Enter which does the same action


Now in your browser window you will have the entire project with all the animations included.
What the Egret Preview actually does it to export your project from DragonBones as HTML and then open this in your default browser for the preview.


Egret Preview html 
Now you have couple of controllers on the right side. You can select any armatures, animations, set up animation speeed, change background color and even preview on your mobile phone.

Click on the armature to play next animation in the list

If you click on the armature or the character itself it will play the next animation in the list. You can
see that the animations change every time the robot is clicked.

Duplicate armature within html

There is a way you can have mutliple copies of the armature on the html preview . Here is the trick.
First enable "Show Bones"


Then press the [ ALT ] key and try to drag the armature. That will give you another instance of the same armature


And then you can have fun playing around with it :)







in

5 comments:

  1. Unknown29 March 2019 at 07:15

    Hi. I'm unable to preview animations in DragonBones 5.6.2. Nothing happens when I click the preview icon. Same with pressing ctrl+enter. DB doesn't open my browser at all. I've also tried Export to HTML Preview/Publish, same result. Do I need to enable something first or maybe I need a plugin to use this feature?

    ReplyDelete
  2. Hamza Cavus29 March 2019 at 15:26

    Try to Register / Log in into DragonBones and then try again. If that does not help you can do it manually with exporting your project as html file and then simply open this html file. Hope this helps.

    ReplyDelete
  3. Unknown29 March 2019 at 16:11

    Exporting manually to HTML doesn't do anything. Clicking the Finish button just closes the Export window. I don't get a "Export Successful" dialog box nor a HTML file. Relogging in doesn't work either. Something odd though I can still access the Export feature even if i'm logged out. I've also tried reinstalling DB, restarting my PC but the problem still persists :(

    ReplyDelete
  4. Hamza Cavus29 March 2019 at 16:49

    Try to track down the issue.

    Can you preview other projects? DB comes with example projects. For instance you can open the sheep project and try preview that. If the issue persists then it is a bug. If it doesn't then the issue must be caused by your project at some point.

    When exporting as HTML you got 2 options "preview" and "publish". Select preview, make sure you have chosen a save location and then click finish.

    If none of above helps you can upload your project somewhere and share a link with me so I might check it out.

    ReplyDelete
  5. Unknown29 March 2019 at 20:01

    Yeah tried it with the projects that came with DB like the Rooster, SHeep, Ubbie, etc. preview still doesn't work. I've already sent a bug report to the devs 2 days ago, still waiting for an answer.
    Anyways thanks a lot for taking the time to help me, Hamza.

    ReplyDelete