Skip to main content
Z
Ziv Huang
Participant
February 22, 2019
Answered

facebook playable ads

  • February 22, 2019
  • 2 replies
  • 1576 views

Just wondering if it is possible to use animate CC to create a simple facebook playable ads,

I've found many game engine that support export file as facebook playable ads, but what my project need is not that complicated.

Just need to fit some specific spec requirements on Facebook.

https://www.facebook.com/business/help/412951382532338?helpref=faq_content

my questions listed as below:

1. A single file for playable ad that contains all assets as part of that single HTML file and assets should be data uri compressed. (Javascript, CSS, images, sounds).

==>What can I do if I export my HTML5 file to meet their spec requirement?

2.Playable should have a responsive design because it needs to support multiple types of devices which have different resolutions.

==>I know that animate CC can set it's canvas to responsive but not sure if it's okay to many other devices...

If there's anyone got experience making facebook playable ads, please please share it to me. I'm really appreciate it.

    This topic has been closed for replies.
    Correct answer kdmemory

    Hi Ziv

    I can't give you a complete recipe for Facebook's ads. Though, maybe I can help to get started if you still need a kickstart into the right direction.

    The are some File -> Publishing Settings... important:

    First and foremost:

    Under the HTML/JS tab select Include JavaScript in HTML... - self explanatory

    Then you will have to uncheck either under Basic or Image Settings: Export document as texture.

    This makes sure that all you shapes you compose with tools in Animate (lines, rectangles, circles, elipses whatever) are kept as shapes in coded form

    Now about images (raster) which are normally external in an images folder:

    Here you'll have to incorporate the data uri compression technique. Which means base64 encryption. Contained in you one flat HTML document. Information can be found in many places on the web. For a start: Data URIs | CSS-Tricks . There is a base64 converter for JPEG, JPG, GIF, PNG, SVG files : Image to base64 data-URI converter .

    Further regarding the base64 code sections, you might look into the DOMElement Class from EaselJS. Basically use this to place base64 sections into <div>s in the dom_overlay_container and push them dynamically above you canvas. That's a broad subject matter, you will have to do your research.

    The last topic I want to mention is text. Many use in HTML5 Canvas documents web fonts like Google or Adobe fonts. For a flat approach you can't do that. I would try to keep text to a reasonable small amount and work only with static text. With the setting Export document as texture unchecked (as mentioned before) texts will become coded shapes. That's relatively expensive, though, 2MB file size limit is relatively generous.

    This is all I can tell

    Klaus

    2 replies

    kdmemory
    kdmemory
    Inspiring
    February 24, 2019

    Hi again

    I forgot one topic.

    Under normal, unflat circumstances, each HTML exported from a Animate HTML5 document would include this script link

    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

    That's the necessary createJS Library to drive all this HTML5 Canvas stuff. Of course not possible in the flat scenario, goes it against this rule: "No dynamic asset loading through external network is permitted."

    I will have to uncheck in File -> Publish Settings... -> HTML/JS -> Hosted Libraries. This copies on first publish the library script (createjs-2015.11.26.min.js) to a libs folder within your project. As long as you are working on your project just leave it there. Once finished and ready to be finalized for the delivery to Facebook, copy the code of the library file (≈191 KB) and paste it in place of the above script link.

    Klaus

    Z
    Ziv HuangAuthor
    Participant
    February 26, 2019

    Appreciated of your help!!

    I am starting to create facebook playable ads now~

    wish I could fix all the problem that I might need to cope with.

    kdmemory
    kdmemoryCorrect answer
    Inspiring
    February 24, 2019

    Hi Ziv

    I can't give you a complete recipe for Facebook's ads. Though, maybe I can help to get started if you still need a kickstart into the right direction.

    The are some File -> Publishing Settings... important:

    First and foremost:

    Under the HTML/JS tab select Include JavaScript in HTML... - self explanatory

    Then you will have to uncheck either under Basic or Image Settings: Export document as texture.

    This makes sure that all you shapes you compose with tools in Animate (lines, rectangles, circles, elipses whatever) are kept as shapes in coded form

    Now about images (raster) which are normally external in an images folder:

    Here you'll have to incorporate the data uri compression technique. Which means base64 encryption. Contained in you one flat HTML document. Information can be found in many places on the web. For a start: Data URIs | CSS-Tricks . There is a base64 converter for JPEG, JPG, GIF, PNG, SVG files : Image to base64 data-URI converter .

    Further regarding the base64 code sections, you might look into the DOMElement Class from EaselJS. Basically use this to place base64 sections into <div>s in the dom_overlay_container and push them dynamically above you canvas. That's a broad subject matter, you will have to do your research.

    The last topic I want to mention is text. Many use in HTML5 Canvas documents web fonts like Google or Adobe fonts. For a flat approach you can't do that. I would try to keep text to a reasonable small amount and work only with static text. With the setting Export document as texture unchecked (as mentioned before) texts will become coded shapes. That's relatively expensive, though, 2MB file size limit is relatively generous.

    This is all I can tell

    Klaus

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices