We just launched Widgetic! Add beautiful HTML5 widgets to your website. See Widgets >
LOGIN Don't have an account yet?   Register

Forgot password?
 
16Feb2011

How to embed a Flabell component in your HTML webpage


I’ll try to explain this process step by step so you’ll notice how easy it is. It applies to every Flabell component except the website templates, which, of course, are built to fill the whole browser display area.

The folder you’re interested in, mostly, is our deploy folder, because that’s where you’ll find the SWF file and everything it needs to work.

Step 1

Copy or upload the deploy folder in the same folder your HTML webpage is.

Step 2

Open the index.html file you’ll find in the deploy folder. Every Flabell component has one. Just open it with your favorite HTML editor. If you don’t have one, use a text editor like Notepad.

Step 3

Copy everything between the <body> HTML tags. See the body tag highlighted in the following image.

Body HTML element highlighted

Step 4

Paste the copied code in your HTML page, the one you want the component to be displayed in. Where exactly? Well, in the <div> or <table> you want the component to appear. I’m going to give you an example. Let’s say you have a big “wrapper” div that contains other three divs called “header”, “content”, “footer” and you want the component to be displayed in the “content” area. Just paste the copied code under these HTML tags: <div id=”content”></div>.

Step 5

Adjust the paths to the files in the code you have copied. They have to be correct, relative to your HTML webpage. So if you copied the deploy folder in the same folder your webpage is, these are the lines you’ll need to adjust:

<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swfmacmousewheel.js"></script>
flashvars.pathToFiles = "banner/";
swfobject.embedSWF("preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params, attributes);

become

<script src="deploy/js/swfobject.js" type="text/javascript"></script>
<script src="deploy/js/swfmacmousewheel.js" type="text/javascript"></script>
flashvars.pathToFiles = "deploy/banner/";
swfobject.embedSWF("deploy/preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "deploy/js/expressInstall.swf", flashvars, params, attributes);

You might not have the second line in our index.html. We use the swfmacmousewheel.js file only when a scrollbar is involved. (Edit: We might not use this script, even if there’s a scrollbar involved).

Important Note!

You may notice other flashvars that contain paths to files (they may be named xmlPath or contentPath). They usually point to an XML file that contain the content or settings for the component. Those paths should be relative to the pathToFiles flashvar. Also, if any of those XML files contain other paths, they should be relative to the pathToFiles flashvar too.

The <table> HTML element we used is for displaying the component centered in our index.html webpage. If you don’t need it, just delete that element and leave just the <div> that’s inside that <td> element. It’s important to leave that <div> in the place you want the component to be displayed.

That’s it! The component will work on your webpage and we hope you’ll enjoy it.

This post has 130 comments | Post your comment

menia

March 25, 2012 at 10:52 pm

I use this player http://www.flabell.com/flash/Mp3-Player-for-Adobe-Flash-29
I installed it, eveything goes fine! :)
I tried to give url links for my mp3s from my host. I mean instead of giving “content/…/…mp3″ I give “http://host/……mp3″.
But… I can’t listen anything! The problem is that when I add a song from my hard disk to test it , can’t listen anything too!! What am I doing wrong?

Could u please help me?

Reply
 

corneliu.chitanu

March 26, 2012 at 1:16 am

Hello,

Note that if you work with the component on a web server, accessing resources from another server might be restricted. You’d need to have a crossdomain.xml file on the root of the hosting server. This article explains this:

http://kb2.adobe.com/cps/142/tn_14213.html

The following article will help you create the XML file:

http://curtismorley.com/2007/09/01/flash-flex-tutorial-how-to-create-a-crossdomainxml-file/

If you can’t get it to work, please buy a support ticket (if you don’t have one already; you get one for free, if you buy anything from Flabell) and share a link to your component. We’ll take a look and find a solution faster. You can contact us at support@flabell.com, but please use the email assigned to your Flabell account. This way we’ll be able to check for your account and the support ticket.

Jason

May 4, 2012 at 6:02 pm

If I wanted to put the 360 View Image Rotator on an ecommerce page, or any php generated page, such as wordpress (personally I am using OpenCart) Where does the deploy folder go, in general? Where the PHP files are? I’m confused, and not very good at this kind of stuff.

Thanks

Reply
 

corneliu.chitanu

May 7, 2012 at 3:31 am

Hello Jason,

You’ll just need to use the code we already written in the index.html page, like this tutorial explains. You can put the deploy folder wherever you want. However, depending on its location, you’ll need to adjust all the paths that are used in your code.

The 360 View Image Rotator does not use any PHP, and our components rarely do, but you’ll just need to add the code in the webpage you need. If you need our help, please buy a support ticket and share a link to your component by sending an email at support@flabell.com. Thanks!

Michael

July 23, 2012 at 9:40 pm

When you say we need to add “deploy/preview.swf” in place of “preview.swf”, how is this done? When this file is opened, it takes me to the rotator(or an example of the rotator I assume) not a code that can be copied into the rest of the HTML. Do I need to open some kind of source view of this file somehow?
(same issue with “deploy/js/expressInstall.swf”)

Reply
 

corneliu.chitanu

July 24, 2012 at 5:51 am

Hello Michael,

At step 3 you need to copy the code from index.html file to your webpage. In your webpage, at the lines you just copied, you need to look for the lines I wrote about at step 5 (they include the path to the “preview.swf” file). You’ll just need to set that path with the “deploy” folder in front of it: “deploy/preview.swf” (it’s exemplified at step 5).

That’s what you need to do. It has nothing to do with the files. It’s just about how you set the path to the files in your code.

Michael

July 24, 2012 at 11:43 am

Whenever I try and publish my rotator, I get the “In order to view this object you need Flash Player 9+ support!” button in it’s place, my flash player is up to date, so I don’t know what’s wrong.

Reply
 

corneliu.chitanu

September 6, 2012 at 10:42 pm

Hello Michael,

You’ll just need to make sure that the path to the swfobject.js file is correct. Also, you’ll need to make sure that the id you gave to the flash object, in these lines:

var attributes = {};
attributes.id = ‘FlabellComponent’;
attributes.name = ‘FlabellComponent’;

are the same with the div id:

<div id=”FlabellComponent”>

This div will be replaced by the SWF object using the JavaScript code we shared with you in the index.html.

Generally, if you set the paths correctly, the components will work. If you still have trouble with the rotator, please buy a support ticket (if you don’t have one already) and write us an email at support@flabell.com. Please share a link to your rotator too. We’ll find a solution faster.

Michael

August 8, 2012 at 1:12 pm

Hello, how exactly would you set a path to the file “deploy/banner/”? This is not a file, it is it’s own folder. Thus it contains multiple other files.

Reply
 

corneliu.chitanu

September 27, 2012 at 4:42 am

I don’t think I said the “deploy/banner” is a file. If I did, I’m sorry, of course it’s a folder. This is the pathToFiles flashvar. It’s not the path to a file. It’s a path to the (necessary) files. All the other paths to the files are relative to this folder. It’s a convention we work with on Flabell from different reasons.

Adam

September 26, 2012 at 1:24 pm

Is there a way that I can just put this in using ADOBE FLASH PRO CS5 ? I want to embed it BEFORE I publish the site, sorry for being a noob

Reply
 

corneliu.chitanu

September 27, 2012 at 4:44 am

Hello Adam,

Yes, you can embed it into an existing Flash project. Please check this tutorial:

http://www.flabell.com/blog/1641/embed-a-flash-component-in-your-flash-project

It will help you out.

Keiler

November 23, 2012 at 11:33 am

Hey, i follow you instructions and the scrollbar on the site i’m working disappears! Can you help!

Reply

Keiler

November 24, 2012 at 4:49 am

Hey now i have another problem when i tried to put a large image. i altered the vars to this values “stageW = 864; var stageH = 374;” and this “flashvars.componentWidth = 864; flashvars.componentHeight = 374;” now it cut a chunk of my image to the left side. it appears in white (the chunk that was cut)

Reply
 

corneliu.chitanu

December 6, 2012 at 7:37 am

Hello!

I’m not sure what component you’re using. Please send us a message from this webpage:

http://www.flabell.com/contact

Let us know what component you’re using and, if you can, please share a link to your component as well. We’ll be able to find out what the problem is faster.

Most certainly there is a problem is with the file paths.

Thanks!

T lee

December 3, 2012 at 1:14 am

Hi, I can’t get this player to display on my site this is the code I’m using

//code removed

I followed the directions and made the change to the path but it still don’t work.

Reply
 

T lee

December 3, 2012 at 1:15 am

sorry this is the html code I had embed into my site

//code removed because it was too long

T lee

December 3, 2012 at 1:46 am

In order to view this object you need Flash Player 9+ support! this message keep coming up

Reply
 

corneliu.chitanu

December 6, 2012 at 7:30 am

Hello,

From the code you pasted is not clear what the problem is. It’s the exact code you find in our index.html example file.

Please share a link to your webpage, we’ll be able to tell what the problem is. The files you upload to your server need to be at the correct server path.

eytan

January 3, 2013 at 2:24 pm

Hello
I followed the instructions and I was finally able to place the component on the site.
Where can I see the instructions for operating the component?
Is it possible to install it in several different pages with different songs?

Thank you

Reply
 

bobocel

January 24, 2013 at 4:10 am

Hi there Eytan. Yes, you can install it in different websites, with different content.

nani

February 23, 2013 at 5:31 am

hi how play mp3 from link
ex:
http://dl.yazd-music5.info/Single/1391/Bahman/25/0mid%20Naderzadeh%20-%20Delvapasam%5B1%5D.mp3

not play in script whay?

flashvars.artistName = “Busta Rhymes”;
flashvars.songName = “Break Ya Neck”;
flashvars.songURL = “http://dl.yazd-music5.info/Single/1391/Bahman/25/0mid%20Naderzadeh%20-%20Delvapasam%5B1%5D.mp3″;

Reply
 

Andrei Potorac

April 14, 2013 at 8:31 am

Please check this article:
http://www.flabell.com/blog/765/using-the-pathtofiles-variable

EDD

March 6, 2013 at 10:18 pm

Is there a way we can make this thing work on a wix (www.wix.com) html5 website?

Reply
 

Andrei Potorac

April 14, 2013 at 8:30 am

I’m afraid not.

 

Andrei Potorac

September 5, 2013 at 12:21 am

EDD, for Wix integration, please try some of our players on Blogvio.com. These work beautifully as the only thing required is to copy the embed code, as you would do with a YouTube player.

willian

January 26, 2014 at 10:25 pm

is possible the flabell mp3 player flash adobe run / work on blogger / without own domain

if possible

can host any files

gallery.xml
settings.xml
jsobject.js
prevew.sfw

in tertiary server

as it works to
  put on blogger

to do so have to buy the ticket or pass? for y’all doing?

Reply
 

Andrei Potorac

March 11, 2014 at 2:31 am

Hi William. This is not possible, but this is the reason we build a service called Blogvio, where we host the files. Please check it out at http://www.blogvio.com.


Leave a Reply

blog entries RSS Feedproducts RSS Feed

Categories


Warning: Invalid argument supplied for foreach() in /nfs/c03/h01/mnt/55300/domains/flabell.com/html/app/webroot/blog/wp-content/plugins/flabell/flabell.php on line 272

Popular Files


Download the plugin above
Read more about Flabell WordPress plugin

Archives

Search the blog