Location: PHPKode > scripts > Animated PNG Creator > animated-png-creator/documentation/documentation.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="en">
  <meta name="description" content="Animated PNG Creator v1.2 documentation">
  <meta name="keywords" content="animation, png, apng, documentation">
  <style type="text/css">
    table td {
      padding: 16px;
	  text-align: center;
	  vertical-align: middle;
	  border: 1px solid #FF6060;
    }
    table {
      border-collapse:collapse;
	  width: 800px;
    }
	thead {
		background-color: #a06060;
		color: #FFa0a0;
		font-weight: bold;
		letter-spacing: 2px;
	}
	table a {
		text-decoration: none;
	}
	.underline {
		text-decoration: underline;
	}
  </style>
  <title>Animated PNG Creator v1.2 documentation</title>
</head>

<body>
<div>
<h1>Animated PNG Creator v1.2 documentation</h1>
<div>
<ul>
<li><a href="#fields">Field summary</a></li>
<li><a href="#methods">Method summary</a></li>
<li><a href="#detailed">Detailed informations</a></li>
<li><a href="#buffer">What is the buffer?</a></li>
</ul>
</div>
<a name="fields"></a><h2>Field summary</h2>
<div>
<table style="width: 960px; padding: 8px;">
<tr><td style="text-align: center;">public <b>$play_count</b> = <b class="value">0</b></td><td>Defines the number of plays. 0 indicates infinite playing.</td></tr>
<tr><td style="text-align: center;">public <b>$save_alpha</b> = <b class="value">true</b></td><td>The flag to save the alpha channel information. Defines whether to save the alpha channel or not.</td></tr>
<tr><td style="text-align: center;">public <b>$save_time</b> = <b class="value">false</b></td><td>The flag to save the creation time to the file (tIME chunk).</td></tr>
<tr><td style="text-align: center;">public <b>$background_color</b> = <b class="value">array(255, 255, 255, 127)</b></td><td>The default background of the animation frames. It is useful when the default image if smaller than the buffer.</td></tr>
</table>
</div>
<a name="methods"></a><h2>Method summary</h2>
<div>
<table style="width: 960px; padding: 8px;">
<tr><td style="text-align: center;"><a href="#add_image">public function <b>add_image($img, $position, $delay, $dispose_op, $blend_op, $part_of_anim)</b></a></td><td>TRUE on success, FALSE if $img is not a valid GD resource</td></tr>
<tr><td style="text-align: center;"><a href="#save">public function <b>save($filename)</b></a></td><td>Returns TRUE on success and FALSE on failure</td></tr>
<tr><td style="text-align: center;"><a href="#destroy_images">public function <b>destroy_images()</b></a></td><td>Destroys all of the images added to the the animation using the GD imagedestroy() function.</td></tr>
</table>
</div>
<a name="detailed"></a><h2>Detailed informations</h2>
<div>
<a name="add_image"></a><h3>public function add_image($img, $position = "MIDDLE_CENTER", $delay = 1000, $dispose_op = 0, $blend_op = 0, $part_of_anim = true)</h3>
Adds a new image to the animation.<br><br>
<p class="underline">Parameters:</p>
$image => the image that will be added to the animation<br><br>
$position => the position of the frame according to the buffer. It can be given as an array containing the x and y offsets of the frame, or as a string using the following positioning phares:<br><br>
<img src="./positioning.png" alt="Position phares"><br><br>
$delay => the delay before displaying the next frame. Can be set in milliseconds or in seconds as a fraction in numerator / denominator form<br><br>
<p class="underline">Example:</p>
<i>
$animation->add_image($image1, "MIDDLE_RIGHT", 500);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the delay is set to 500 milliseconds<br>
$animation->add_image($image1, "MIDDLE_RIGHT", array(1, 2));&nbsp;&nbsp;// the delay is set to (1 / 2) seconds - the same results
</i><br><br>
$dispose_op => specifies how the output buffer should be changed at the end of the delay (before rendering the next frame). There are 3 options:
<br><br>
<table>
<thead><tr><td>Value</td><td>Option name</td></tr></thead>
<tr><td>0</td><td>APNG_DISPOSE_OP_NONE</td></tr>
<tr><td>1</td><td>APNG_DISPOSE_OP_BACKGROUND</td></tr>
<tr><td>2</td><td>APNG_DISPOSE_OP_PREVIOUS</td></tr>
</table>
<ul><li> APNG_DISPOSE_OP_NONE: no disposal is done on this frame before rendering the next; the contents of the output buffer are left as is.
</li><li> APNG_DISPOSE_OP_BACKGROUND: the frame's region of the output buffer is to be cleared to fully transparent black before rendering the next frame.
</li><li> APNG_DISPOSE_OP_PREVIOUS: the frame's region of the output buffer is to be reverted to the previous contents before rendering the next frame.
</li></ul>
$blend_op => specifies whether the frame is to be alpha blended into the current output buffer content, or whether it should completely replace its region in the output buffer. There are 2 options:<br>
<br>
<table>
<thead><tr><td>Value</td><td>Option name</td></tr></thead>
<tr><td>0</td><td>APNG_BLEND_OP_SOURCE</td></tr>
<tr><td>1</td><td>APNG_BLEND_OP_OVER</td></tr>
</table>
<br>
To understand this property, see the following example:<br><br>
<table>
<thead><tr><td>APNG_BLEND_OP_SOURCE</td><td>APNG_BLEND_OP_OVER</td></tr></thead>
<tr><td><img src="./APNG_BLEND_OP_SOURCE.png" alt="APNG_BLEND_OP_SOURCE"></td><td><img src="./APNG_BLEND_OP_OVER.png" alt="APNG_BLEND_OP_OVER"></td></tr>
</table><br>

Booth the $dispose_op and $blend_op parameters can be passed either as a numeric value or as a string.<br><br>
$part_of_anim => defines whether the default image is part of the animation or not. It is ignored in case of the other images.
<p class="underline">Examples:</p>
<i>$animation = new APNG_Creator();<br>
$animation->add_image($image1, null, 1000, 0, 0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// delay is set to 1 ms, offset is calculated as "MIDDLE_CENTER"<br>
$animation->add_image($image2, array(4, 4), 1000, 0, 0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// delay is set to 1 ms, offsets are 4px, 4px<br>
$animation->add_image($image3, null, array(1, 1000), 0, 0);&nbsp;&nbsp;&nbsp;// delay is set to 1 ms, but in the fraction form</i><br>
<a name="save"></a><h3>public function save($filename = "")</h3>
Saves the animation to a PNG file.<br>
<p class="underline">Parameters:</p>
$filename => the name of the output file (including the path)
<a name="add_image"></a><h3>public function destroy_images()</h3>
Destroys all of the images added to the animation using the GD imagedestroy() function.<br>
<p class="underline">Paremeters:</p>
No parameters.
</div>
<a name="buffer"></a><h2>What is the buffer?</h2>
According to the <a href="./APNG_Specification.html">APNG specification</a>:<br><br>
The "output buffer" is a pixel array with dimensions specified by the width and height parameters of the PNG `IHDR` chunk. Conceptually, each frame is constructed in the output buffer before being composited onto the canvas. The contents of the output buffer are available to the decoder. The corners of the output buffer are mapped to the corners of the canvas.<br><br>
The width of the buffer will equal to the maximum width dimension in the collection of frames.<br>
The height of the buffer will equal to the maximum height dimension in the collection of frames.<br>
All the frames are positiones according to this buffer. The following drawing will explain how a frame is positioned:
<br><br>
<img src="./buffer_frame.png" alt="Buffer and frame positioning"><br>
BUFFER.width = max(image1.width, image2.width, ... , imageN.width);<br>
BUFFER.height = max(image1.height, image2.height, ... , imageN.height);
<div>
<br><br>
<a id="sendmail" href="mailto:enable-hide@address.com">Send feedback</a>
<script type="text/javascript">
var mail = document.getElementById('sendmail');
mail.href = 'mailto:';
mail.href += 'apng@';
mail.href += 'zoznam.sk';
mail.href += '?subject=';
mail.href += encodeURIComponent('Animated PNG Creator v1.2 documentation - Feedback');
</script>
</div>
</div>
</body>
</html>
Return current item: Animated PNG Creator