BUILDING A SIMPLE GAME WITH FLASH PRO

More documents

Recommendations

Info

SKELETAL ANIMATIONS <strong>WITH</strong> DRAGON BONES Dragon Bones is an open source skeletal animation extension for Flash Pro that allows you to export your animations into 3 files – texture atlas (XML + PNG) and animation metadata. Install Dragon Bones extension (SkeletonAnimationDesignPanel.zxp) using Adobe Extension Manager and activate the panel in Flash Pro. Then select a MovieClip animation in the Library panel and click Import button in Dragon Bones. This will import the timeline animation and create a sprite sheet composed only of separate elements used within the animation, unlike frame-by-frame snapshots as in the pregenerated or dynamic spritesheet examples above. Using Dragon Bones is very memory efficient. The animations sequence for Dragon Bones has to be in a single MovieClip and each animation begins with a labeled frame (e.g. walk, jump, idle…). Once you are done, select the MovieClip (“allAnimations” in this case) in Library, open SkeletalAnimationDesignPanel and hit Import button. You should see this: Hit Export button and save the exported file as “PNG (XML merged)“, this will encode all animation information inside PNG, so you will have only a single file that defines assets and animations. Building a simple game with Flash Professional. MAX 2013 Lab by Tom Krcha (@tomkrcha) 14
In the code, embed the png this way: // Dragon Bones [Embed(source="../levels/herodb.png",mimeType="application/ octet-stream")] private var heroAnimBitmapAndXML:Class; And assign the hero.view property this way in the initialize function. If your game is running e.g. 60 fps and your animation was done within a lower frame rate (fps), you can adjust the animation speed via timeScale property as demonstrated below. /** SKELETAL ANIMATION **/ var armature:Armature; var factory:StarlingFactory = new StarlingFactory(); factory.addEventListener(Event.COMPLETE, function(event:Event):void{ armature = factory.buildArmature("allAnimations"); armature.animation.timeScale = 0.7; hero.view = armature; }); factory.parseData(new heroAnimBitmapAndXML()); DragonBones generated spritesheet looks like this, so you can see there are only elements that are being animated. The PNG file contains also XML file that describes the animations. ` Building a simple game with Flash Professional. MAX 2013 Lab by Tom Krcha (@tomkrcha) 15
Page 1 and 2: BUILDING A SIMPLE GAME WITH FLASH P
Page 3 and 4: BEGINNER’S TUTORIAL You are going
Page 5 and 6: LEVEL BUILDING TUTORIAL In this par
Page 7 and 8: Loading a level into your game In t
Page 9 and 10: ANIMATIONS’S TUTORIAL This tutori
Page 11 and 12: PREGENERATED SPRITE SHEETS Beginnin
Page 13: Embed the pregenerated sprite sheet

BUILDING A SIMPLE GAME WITH FLASH PRO

Create successful ePaper yourself

Delete template?

Save as template?