<script src="/files/spine-player/4.2/spine-player.js"></script>
<link rel="stylesheet" href="/files/spine-player/4.2/spine-player.css">
<div class="units-row-end">		
	<div class="unit-100">
		<div class="examples-header">
			<div class="units-row">
				<div class="unit-60">
					<div id="player"></div>
				</div>
				<div class="unit-40">
					<div class="examples-header-info">
						<div class="examples-header-info-tags">
							<span>Tags:</span>
							<p>Essential, Frame-by-frame</p>
						</div>
						<div class="examples-header-download">[example-download:dragon]</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
	jsonUrl: "/files/examples/4.2/dragon/export/dragon-ess.json",
	atlasUrl: "/files/examples/4.2/dragon/export/dragon-pma.atlas",
	animation: "flying",
	viewport: {
		x: -383,
		y: -313,
		width: 779,
		height: 712
	},
	backgroundColor: "#555555FF",
	fullScreenBackgroundColor: "#555555FF"
});
</script>

!!
# Dragon
The dragon project is a simple example of basic Spine animation and traditional frame-by-frame animation in Spine.

## Setup
The `right-wing` [slot](/spine-basic-concepts#Slots) contains nine [region attachments](/spine-regions), one for each each frame of the traditional frame-by-frame wing animation.

![](/img/spine-examples/dragon/dragon-01.jpg)

The same setup is used for the dragon's other wing.

## Animation
To animate the wings, the visibility of the region attachments is [keyed](/spine-key-frames#Attachments) using the order and timing they should be shown.

![](/img/spine-examples/dragon/dragon-02.jpg)

<div class="toc-home"><p><a href="/spine-examples">Spine Example Projects</a></p></div>