Difference between revisions of "Showing Shared Media at the right aspect ratio"

From Second Life Wiki
Jump to navigation Jump to search
(Created page with '{{KBmaster}} Shared Media is setup to show square media. However, you can change this to fit any aspect ratio. Doing so isn't instant and could probably be easier in the fut...')
 
Line 3: Line 3:
[[Shared Media]] is setup to show square media. However, you can change this to fit any aspect ratio. Doing so isn't instant and could probably be easier in the future. There are three key things you need to know and do:
[[Shared Media]] is setup to show square media. However, you can change this to fit any aspect ratio. Doing so isn't instant and could probably be easier in the future. There are three key things you need to know and do:


# The exact dimensions of the media.
# The media's exact dimensions in pixels.
# The offset alignment of the media — calculated with an '''Align''' button.
# The offset alignment of the media — calculated with an '''Align''' button.
# The aspect ratio of the media — easily calculated using a tool, as we'll see.
# The aspect ratio of the media — easily calculated using a tool, as we'll see.
Line 17: Line 17:
* data: URIs that fall under the above.
* data: URIs that fall under the above.


== Find the media's dimensions ==
Watch this video tutorial to see how it works in action, then as-needed, follow the text steps below:
 
 
== Finding and applying the media's dimensions ==


View the media in an external web browser.
View the media in an external web browser.
Line 23: Line 26:
* If it's an image, most browsers show the size in pixels (like <code>500x374</code>) in the title bar.
* If it's an image, most browsers show the size in pixels (like <code>500x374</code>) in the title bar.
* If it's Flash media or something else, try viewing the page source (usually available as a context menu option if you right-click the page). [http://lecs.welcome-island.secondlife.com.s3.amazonaws.com/video-1/index.html Try this example] and look for where it says <code>height="433" width="720"</code>.
* If it's Flash media or something else, try viewing the page source (usually available as a context menu option if you right-click the page). [http://lecs.welcome-island.secondlife.com.s3.amazonaws.com/video-1/index.html Try this example] and look for where it says <code>height="433" width="720"</code>.
Once you have those dimensions, in the Second Life Viewer:
# Right-click the prim and choose '''Edit'''.
# In the build tools that open, click the '''Texture''' tab.
# Click '''Select face'''.
# Near the bottom-right corner, click the gear icon.
# Under the MEDIA SETTINGS' '''General''' tab, ''uncheck'' '''Auto Scale Media on Face of Object'''.
# Enter the exact size in the '''Size''' fields.
# Click '''OK'''.
== Aligning the media ==
This is easy. Back in the '''Texture''' tab of the build tools, click '''Align'''. You should see the media wrap and "hug" the full face of the prim.
== Entering the aspect ratio ==
In your web browser:
# Open a calculator like the cleverly-named '''[http://andrew.hedges.name/experiments/aspect_ratio/ Aspect Ratio Calculator]''' or the '''[http://www.continuum2.com/js_ratio.php Continuum Javascript Ratio Calculator]'''.
# In one set of boxes, enter the pixel dimensions of the media you used earlier.
# In the other set of boxes, enter the desired dimensions of the prim (up to 10x10m for non-[[megaprims]]).
Back in Second Life:

Revision as of 13:03, 8 April 2010

Shared Media is setup to show square media. However, you can change this to fit any aspect ratio. Doing so isn't instant and could probably be easier in the future. There are three key things you need to know and do:

  1. The media's exact dimensions in pixels.
  2. The offset alignment of the media — calculated with an Align button.
  3. The aspect ratio of the media — easily calculated using a tool, as we'll see.


This example presumes you already know how to add Shared Media to an object and have the URL ready. This kind of content works (this isn't a complete list, just examples):

  • Direct links to a supported image type like an animated GIF, JPG, or PNG.
    • By the way, we used to need special converters to show animated GIFs in Second Life, and they'd appear at reduced quality. Now, you can show it as-intended.
  • Rich interactive media like Flash that's isolated on a page.
    • This technique doesn't directly work if there's a page with a Flash media embedded in the middle of whole bunch of other stuff, but usually works if the Flash media is the only thing on the page.
  • data: URIs that fall under the above.

Watch this video tutorial to see how it works in action, then as-needed, follow the text steps below:


Finding and applying the media's dimensions

View the media in an external web browser.

  • If it's an image, most browsers show the size in pixels (like 500x374) in the title bar.
  • If it's Flash media or something else, try viewing the page source (usually available as a context menu option if you right-click the page). Try this example and look for where it says height="433" width="720".

Once you have those dimensions, in the Second Life Viewer:

  1. Right-click the prim and choose Edit.
  2. In the build tools that open, click the Texture tab.
  3. Click Select face.
  4. Near the bottom-right corner, click the gear icon.
  5. Under the MEDIA SETTINGS' General tab, uncheck Auto Scale Media on Face of Object.
  6. Enter the exact size in the Size fields.
  7. Click OK.

Aligning the media

This is easy. Back in the Texture tab of the build tools, click Align. You should see the media wrap and "hug" the full face of the prim.

Entering the aspect ratio

In your web browser:

  1. Open a calculator like the cleverly-named Aspect Ratio Calculator or the Continuum Javascript Ratio Calculator.
  2. In one set of boxes, enter the pixel dimensions of the media you used earlier.
  3. In the other set of boxes, enter the desired dimensions of the prim (up to 10x10m for non-megaprims).

Back in Second Life: