Add a form to Flash

September 9, 2019

UPDATE: Since December 31, 2020, Adobe has stopped supporting Flash and effectively retired the product.

There are a few ways to get a JotForm integrated into a Flash based website. This guide explains how to create a lightbox effect in which your Form is shown when a user clicks a button in your Flash website. It is for Actionscript 3 versions of Adobe Flash.

1. In my Flash movie, I need to create a new button which when clicked will display my JotForm form. 
From the Insert menu, select New Symbol 

In the Create New Symbol Dialog, give your button a name and ensure the symbol is of Type: ‘Button‘.

Create your button in the Flash editor.

2.  Once your button is created, add it to the your flash movie and give it an instance name, I have called mine: ‘alert_btn

3.  We need to attach an action to this button.

Create a new layer on your Flash movies’ timeline. I am calling my new layer ‘as3‘. When the layer has been created, right click on the first frame of this layer and select ‘Actions‘ to open the Actionscript code editor for this layer. 

The code we need to add is as follows:

function callJS(event:MouseEvent):void {

ExternalInterface.call(“JotForm_Show”);

}

alert_btn.addEventListener(MouseEvent.CLICK, callJS);


NOTE: Change alert_btn to whatever name your used for the instance of your button in step 2.

This bit of Actionscript will try to call and execute a javascript function ‘JotForm_Show’ from the webpage in which the Flash object is embeded when a user clicks the button, ‘alert_btn‘ .

—-

Thats us done configuring our button in our flash movie. 

After you have published your Flash movie, we need to make a few changes to the default HTML provided by Adobe Flash to get our button working. 

4. Open this HTML file in your text editor. 

5. Firstly, I want to add two CSS classes that I will use to create my lightbox effect and another to hold my form content. This the code I have used:


.overlay {

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.form_content {

display: none;

position: absolute;

/* CENTER FORM ON SCREEN */

top: 50%;

left: 50%;

width: 650px;               /* width of form */

margin-left:-325px;     /* half width of form */

height: 450px;              /* height of form */

margin-top:-225px;     /* half height of form */

/* padding: 16px; */

border: 8px inset orange;

background-color: white;

z-index:1002;

overflow: auto;

}


NOTE: In the CSS class .form_content  , you will need to use the dimensions of your own form to generate the values for the width, margin-left, height & margin-top attributes. 

6.  We need to make two changes to default object embed code generated by Flash for our .swf file.

Change the two references to ‘wmode’ from ‘window’ to ‘opaque’.

 7.  We need add our lightbox & form content, so after flashContent div, just before the closing tag, 

add the following code:




NOTE: You change the highlighted script embed code to whatever the embed code of your form is. Your embed code is retrievable in JotForm by clicking on the Setup & Embed toolbar, selecting Embed Form and clicking the Embed icon. 

I have included an image in this code that when clicked closes the lightbox when it is clicked. 

8. All we need to do now is add the Javacript function that gets called when a user clicks our JotForm button.

I have added the following code under the new content, again just before the closing tag:


9. Thats it! Save your HTML document, upload it and your .swf file to your webserver. 

 

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact JotForm Support: https://www.jotform.com/contact/

Send Comment:

JotForm Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: