{"id":2934,"date":"2021-04-08T11:09:30","date_gmt":"2021-04-08T09:09:30","guid":{"rendered":"https:\/\/vielhuber.de\/?p=2934"},"modified":"2021-06-09T15:11:09","modified_gmt":"2021-06-09T13:11:09","slug":"adobe-animate-apng-export","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/","title":{"rendered":"Adobe Animate APNG Export"},"content":{"rendered":"\n<p>Der <a href=\"https:\/\/caniuse.com\/apng\" target=\"_blank\" rel=\"noreferrer noopener\">Browser-Support<\/a> f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit <a href=\"https:\/\/www.adobe.com\/de\/products\/animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Animate CC<\/a> angefertigt wurden, mit einfachen Mitteln zu APNG exportiert und dann in einem simplen &lt;img&gt;-Tag in eine Webseite eingebaut werden k\u00f6nnen. Dies stellt eine einfache und qualitativ gute Alternative zum Ver\u00f6ffentlichungsweg in Animate CC, der JavaScript erzeugt, dar. Nachfolgend sind die Schritte beschrieben, die man dazu tun muss.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Zun\u00e4chst exportiert man die *.fla-Datei in einzelne PNGs. Dazu geht man in Animate CC auf <strong>Exportieren &gt; Video\/Medien exportieren...<\/strong> und w\u00e4hlt die folgenden Einstellungen:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"587\" height=\"549\" src=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png\" alt=\"\" class=\"wp-image-2948\"\/><\/figure><\/div>\n\n\n\n<p>Ben\u00f6tigt man Transparenz, aktiviert man zus\u00e4tzlich die Option <strong>B\u00fchnenfarbe ignorieren (Alphakanal erzeugen)<\/strong> und w\u00e4hlt bei Voreinstellung <strong>PNG Sequence with Alpha (Match Source)<\/strong> statt <strong>PNG Sequence (Match Source)<\/strong> aus. Nun k\u00f6nnen wir die PNGs mit Hilfe von apngasm kombinieren. Dazu installieren wir zun\u00e4chst die neueste Version:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"2.md\">13dbdbc4733c2b99696c0d267d9721fa<\/p>\n\n\n\n<p>Schlie\u00dflich f\u00fcgen wir die einzelnen Dateien zusammen:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"3.md\">13dbdbc4733c2b99696c0d267d9721fa<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Die Geschwindigkeit sowie die Anzahl der Wiederholungen der Animation k\u00f6nnen \u00fcber die Parameter <strong>delay<\/strong> und <strong>loops<\/strong> gesteuert werden. Um eine Animation r\u00fcckw\u00e4rts zu exportieren, f\u00fchren wir vor dem Merge zus\u00e4tzlich folgenden Befehl aus, der die Dateien in umgekehrter Reihenfolge ablegt:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"4.md\">13dbdbc4733c2b99696c0d267d9721fa<\/p>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln zu APNG exportiert und dann in einem simplen &lt;img&gt;-Tag in eine Webseite eingebaut werden k\u00f6nnen. Dies stellt eine einfache und qualitativ gute Alternative zum Ver\u00f6ffentlichungsweg in Animate CC, der JavaScript erzeugt, dar. Nachfolgend sind [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-2934","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Adobe Animate APNG Export &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adobe Animate APNG Export &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln zu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-08T09:09:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-09T13:11:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Adobe Animate APNG Export\",\"datePublished\":\"2021-04-08T09:09:30+00:00\",\"dateModified\":\"2021-06-09T13:11:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/\"},\"wordCount\":226,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-25.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/\",\"name\":\"Adobe Animate APNG Export &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-25.png\",\"datePublished\":\"2021-04-08T09:09:30+00:00\",\"dateModified\":\"2021-06-09T13:11:09+00:00\",\"description\":\"Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln zu\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-25.png\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-25.png\",\"width\":587,\"height\":549},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/adobe-animate-apng-export\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adobe Animate APNG Export\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Adobe Animate APNG Export &#060; Vielhuber David","description":"Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/","og_locale":"de_DE","og_type":"article","og_title":"Adobe Animate APNG Export &#060; Vielhuber David","og_description":"Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln zu","og_url":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/","og_site_name":"Vielhuber David","article_published_time":"2021-04-08T09:09:30+00:00","article_modified_time":"2021-06-09T13:11:09+00:00","og_image":[{"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png","type":"","width":"","height":""}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Adobe Animate APNG Export","datePublished":"2021-04-08T09:09:30+00:00","dateModified":"2021-06-09T13:11:09+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/"},"wordCount":226,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png","articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/","url":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/","name":"Adobe Animate APNG Export &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#primaryimage"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png","datePublished":"2021-04-08T09:09:30+00:00","dateModified":"2021-06-09T13:11:09+00:00","description":"Der Browser-Support f\u00fcr animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln zu","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#primaryimage","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-25.png","width":587,"height":549},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/adobe-animate-apng-export\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Adobe Animate APNG Export"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts\/2934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/comments?post=2934"}],"version-history":[{"count":10,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts\/2934\/revisions"}],"predecessor-version":[{"id":2989,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts\/2934\/revisions\/2989"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/media?parent=2934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/categories?post=2934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/tags?post=2934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}