Edge Animate Graphics?

Beaver Builder
1

I’m having a little trouble incorporating graphics made in edge animate in my page.
What’s the best way to embed an oam file?

2

Hi Mohammad,

Using the Sample files from the Adobe Edge site as an example, upload the complete ‘Final’ folder to your wp-content/uploads folder.

  • place a BB Text Module where you want the Edge animation to appear, or anything else that takes a text string.
  • create an iFrame and enter the above path as the src, e.g.

<iframe src="http://localhost/wordpress/wp-content/uploads/2015/10/final/index.html" width="600" height="400"></iframe>

  • of course, substitute your actual folder name and path between the set of double quotes for the src= and adjust the width and height values as needed.

Cheers!
Lyle

3

I’m sorry, I’m still struggling. I’m think I’m mostly confused about how to upload a folder to my uploads folder, and then how I’d go about finding the url of the html to paste in the iframe…

4

Hey Mohammad,

Just wanted to chime in here. To find the URL of the specific file, go to Media > Library > Select a file and you should see the URL displayed inside a text box as shown on the screenshot below.

Thanks!

KC

5

Hi Mohammad,

Not really sure if there is another way to upload an entire folder but you should be able to do it via FTP. You can use an FTP client like FileZilla but I think it’s best if you ask your hosting company. They might have one they recommend.

Ben

6

Cool. I get how to upload and get the url of the HTML, but how to I sync it up with the CSS and JS?

I’ve been playing around with a plugin called wp oam renderer which allows you to upload the OAM file from edge, which is like a zip file of all the HTML, CSS, and JS, and it gives you an embed tag that looks like [oam id=“702” width=“1920” height=“655”] which you can paste in any text field or in the html module, and it seems to work well, but I still can’t seem to make it 100% width.
If only there was a way to put this oam ID tag in the row background or something…

On the bright side, it seems to be scaling to fit at 100% on mobile!

7

Hey Mohammad,

Sorry but I’ve really no experience with that. Try checking the thread below and see if you can find something.
http://forum.wpbeaverbuilder.com/support/q/adobe-edge-animate/

You may also want to post on the FB Group or the Slack channel.

Ben

8

Erm…Still not finding much. I’ve tried uploading all the files in the media library and pasting the iframe in the HTML and the text modules but to no avail. From everything I’ve been reading, I should just be able to upload the files, but I don’t understand how they’re able to “communicate” or know where each other are once the file structure has been broken…

9

Hey Mohammad,

Not really sure but based on Lyle’s reply above, there should be an index.html file so I’m going to assume that is where all your assets are being called. Again, we’ve litle to no experience with Edge Animate so I’d suggest hitting up the FB Group or the Slack channel as someone in the community might.

Ben

10

The OAM renderer works with the video module too if you put it in the embed section, but the video module can’t go to 100% page width, and as far as I can tell, there’s no option to use an embed code when selecting the video option for the row background, which would be 100%…

11

I THINK I GOT IT!
I used the OAM renderer ( https://wordpress.org/plugins/wp-edge-animate-renderer-oam/ )
and I added the width and height tags to the embed section of the video module, and everything seems to be working! : D

12

Awesome that you figured it out! And thanks for sharing! Have fun! :slight_smile:

Ben