This page helps you build a HTML5 creative using Adobe Animate CC (2023).

1. Open Adobe Animate CC and click Create new.
   
2. Under the Ads tab, select the size of your ad.
   

Publish Settings

1. Download the AdGear-Template.html file.

2. In the upper-left hand corner, click File and select Publish Settings.
3. Under the Basic tab:
   1. Make sure the Output name is index or ends with /index. This ensures that the output HTML5 file will be named index.html.
   2. Make sure the Loop Timeline checkbox is not ticked.
      
4. Under the HTML/JS tab, click Import New… and browse to either AdGear - Template.html.
5. Make sure the Overwrite HTML file on publish checkbox is ticked and click OK.
   

Click Button

Option 1: Create a Full size button (transparent)

1. Create a new layer on your timeline for your button.
2. Place this layer on top of any layers with symbols or visual element to ensure no element prevents the click that button. Make sure this layer is the same key frame for the entire timeline.
3. Select the Rectangle tool on the left menu, then click and drag on the scene to draw a rectangle of the size of your ad (ex: 300x250).
   

4. Right-click the rectangle and select Convert to Symbol.
   
5. In the Convert to Symbol window, select Button in the Type drop-down list.
   
6. Double-click that symbol (i.e., the rectangle) to edit it.
   
7. In the timeline, drag the key frame in the Up column and move it to the Hit column.
8. Return to the main Scene by either double-clicking outside the stage, or clicking the Scene 1 label in the top left of the stage.
   

Option 2: Small button

If you want to only have a small button clickable, you can create your button using images and shapes.

1. Create a new layer on your timeline for your button.
2. Import the images and shapes you want to be clickable.
3. We highly recommend you to use the Position and Size properties box to precisely change their width (W) and height (H), as well as their location on the X and Y axes.
   
4. Right-click the image/shape and select Convert to Symbol.
   
5. In the Convert to Symbol window, select Button in the Type drop-down list.
   

Adding code to the button

1. Select the symbol (i.e., imported image/shape) and change the instance name (in the Properties box on the right) to clickButton.
   
2. Add a new layer in your timeline. Make sure this layer is the same key frame for the entire timeline.
3. Right-click the first frame and select Actions.
   
4. Include this code snippet in the text box:
   

this.clickButton.on("click", function() { ADGEAR.html5.clickThrough("clickTAG"); });
        this.clickButton.cursor = "pointer";

Complete the code

See HTML5 Javascript Library to create more sophisticated ad executions by leveraging the extent of the AdGear HTML5 JavaScript API.

Publish (Output)

Once ready, you can publish your creative to import it to Samsung DSP.

1. In the upper-left hand corner, click File and select Publish.
   

2. Zip all the HTML, JavaScript, CSS, and image files that Adobe Animate outputs. No need to include the .fla file in the zip.

Examples

Convert AS3 file to HTML5

1. To convert an AS3 file to HTML5, open your .fla file in Adobe Animate.
2. Go to File then hover over Convert to to select HTML5 Canvas.
   
3. Save your file.
   

Using previous Adobe Animate version

1. To convert an AS3 file to HTML5, open your .fla file.
2. Go to Commands and click Convert to Other Document Formats.
   

3. Select HTML5 Canvas and click OK. This will build a new .fla file in the Adobe HTML5 Canvas format. You can then publish it as HTML and JavaScript files.