CODEWITHSUNDEEP
facebookactionscript-3flashfacebook-canvas
TicketToRide
TicketToRide

Reputation: 97

Flash movie position in Facebook canvas

I have a little trouble regarding the positioning of a flash movie in the facebook canvas.

The flash movie has a size of 760x600 px. So i have set the facebook app advanced setting of the canvas width to fixed(760 px) and height to fixed (800 px).

The problem is, that i get a horizontal scroll bar and only 750 px of the flash movie are shown, because the flash movie seems to be aligned at canvas.x = 10 px and not at x = 0 px.

Is there a way to set the position of the flash movie? Preferably in Flash-As3?

Thanks in advance!

Update

Thanks for the input Niraj! Unfortunately i have never done anything with CSS. Here is my "index.html", would you tell me how to integrate your example into the html code? 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <!-- Include support librarys first -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
</head>
<body>
    <div id="fb-root"></div><!-- required div -->
    <div id="flashContent">
        <h1>You need at least Flash Player 10.2 to view this page.</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <script type="text/javascript">
        //This example uses dynamic publishing with swfObject. Login is handled in the swf

        //Note we are passing in attribute object with a 'name' property that is same value as the 'id'. This is REQUIRED for Chrome/Mozilla browsers           
        swfobject.embedSWF("example.swf", "flashContent", "760", "600", "10.1", null, null, null, {name:"flashContent"});

        // redirect
        function redirect(id,perms,uri)
        {
            var params =
            window.location.toString().slice(window.location.toString().indexOf('?'));
            top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
        }       
    </script>
</body>
</html>

Thanks alot!

Upvotes: 1

Views: 310

Answers (1)

Niraj Shah
Niraj Shah

Reputation: 15457

You problem lies in your Flash Page. You should remove margins from the HTML page that embeds the flash and use the Javacript SDK to resize the page using setAutoGrow() function. The overflow: hidden will remove the scrollbars too.

Example CSS:

body {
  margin: 0;
  overflow: hidden;
}

Edit:

In the <head> tag of your page, add in:

<style type="text/css">
    html, body {
      margin: 0;
      overflow: hidden;
    }
</style>

Upvotes: 1

Related Questions