2012-02-09 106 views
3

我的客戶想要一個愚蠢的介紹頁面,其中onClick,倉庫的大門通向倉庫本身(重定向到網站)。我創建了一個1920 x 1174的SWF,可以做到這一點。可以看到here。您會注意到,倉庫和天空的背景都包含在SWF中。只是一個小問題:有沒有更好的方法來做到這一點?一個想法是從SWF中剪出天空,並縮小動畫,使其可以在介紹頁面上以CSS爲中心。然後讓背景圖像成爲天空。使用JavaScript調整SWF的大小

我的大問題是調整大小。我的(可能是無知的)假設是,如果我使SWF真的很大,它可以縮小不同的分辨率,並保持寬高比。

我在WWW aleosoft COM/flashtutorial_autofit.html試用過的建議,他們瘋狂地扭曲了我的SWF(由此可以看出here)。這是因爲我的發佈設置?

我轉向JavaScript的某種答案。現在我正在調整swf onload到屏幕寬度和高度,因爲窗口內部高度和內部寬度也會扭曲寬高比。我想它像WWW aleosoft COM/flashtutorial_autofitexample.html

var w = screen.width, h=screen.height; 
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="'+w+'" height="'+h+'">'); 
document.write('<param name="movie" value="movie.swf">'); 
document.write('<param name="scale" VALUE="exactfit">'); 
document.write('<embed src="movie.swf" width="'+w+'" height="'+h+'"></embed>'); 
document.write('</object>'); 

我打開使用對象/嵌入參數作爲溶液或JavaScript的工作。我寧願不使用jQuery,但我會在必要時使用。

+0

我不能發佈等環節,因爲沒有足夠的信譽使: 鏈接到建議如何自動調整一個SWF: http://www.aleosoft.com/flashtutorial_autofit.html 鏈接到我怎麼想它的工作: http://www.aleosoft.com/flashtutorial_autofitexample.html – 2012-02-09 16:12:16

+1

你不只是'愛'這些來自客戶的'偉大'的請求... – Pbirkoff 2012-02-09 16:19:59

+0

@Pbirkoff好,這是我自己的錯,因爲我最初談到當我們正在集思廣益時,關於原始版本的門 – 2012-02-09 16:22:11

回答

0

要實現最佳質量,您應該使用stage.fullScreenHeightstage.fullScreenWidth來確定窗口大小並處理窗口大小調整事件。 圖像和建築物的圖片應該是一個單獨的影片剪輯。 有一些AS3代碼來做到這一點(應該在影片的第一幀放):

import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.media.Sound; 
import fl.transitions.Tween; 
import fl.transitions.easing.*; 


var t:Tween; 
var u:Tween; 
var i:Tween; 



if(stage) init(null); 
else addEventListener(Event.ADDED_TO_STAGE, init); 

function init(e:Event){ 

    stage.scaleMode = StageScaleMode.NO_SCALE; //You don't want to scale anything 
    stage.align = StageAlign.TOP_LEFT; 
    resizeHandler(null); 
    stage.addEventListener(Event.RESIZE, resizeHandler); //function that will be executed at every window size change. 


    /* some animations. 
     new Tween(object, "property", EasingType, begin, end, duration, useSeconds); 
     property - This is the name of the property which will be animated, it must be specified as a string (between quotation marks). Example: "alpha", "scaleX", "scaleY", "x", "y". so you can calculate this vaules depending on the current window size 
    */ 

    logo_mc.logo1_mc.visible = false; 
    logo_mc.logo2_mc.visible = true; 
    t=new Tween(bg_top_mc, "height", Strong.easeOut, bg_top_mc.height, 341, 2, true); 
    u=new Tween(diamonds_mc, "y", Strong.easeOut, diamonds_mc.y, 208, 2, true); 
    i=new Tween(gradients_mc, "y", Strong.easeOut, gradients_mc.y, 221, 2, true); 


} 

function resizeHandler(e:Event):void { 

    var sw = stage.stageWidth; 
    var sh = stage.stageHeight; 

    //put a footer at the bottom of window 
    footer_bg_mc.width = sw; 
    footer_bg_mc.y = sh - footer_bg_mc.height; 

    //specify ALL elements positions depending on the window size, it is called liquid layout 
    copyright_mc.y = stage.stageHeight - copyright_mc.height - 8; 

    //center  
    logo_mc.x = stage.stageWidth - logo_mc.width - 40; 

    //you can also scale text size 
    var format:TextFormat = new TextFormat(); 
    format.size = Math.round(stage.stageWidth/20); 
    myTextField.setTextFormat(format); 

    gradients_mc.width = stage.stageWidth; 
    bg_top_mc.width = stage.stageWidth; 
    bg_site_mc.width = sw; 
    bg_site_mc.height = sh; 

    content_mc.x = 0; 
    content_mc.y = 0; 
    } 

在你的XHTML,你可以有:

... 
<head> 
<style type="text/css" media="screen"> 
     html, body { height:100%; background-color: #27262e;} 
     body { margin:0; padding:0; overflow:hidden; } 
     #flashContent { width:100%; height:100%; } 
     </style> 
... 
<body> 
<div id="flashContent"> 
<div id="flashContent"> 
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="index" align="middle"> 
      <param name="allowFullScreen" value="true" /> 
       <param name="movie" value="index.swf" /> 
       <param name="quality" value="high" /> 
       <param name="bgcolor" value="#e7e7e7" /> 
       <param name="play" value="true" /> 
       <param name="loop" value="true" /> 
       <param name="wmode" value="window" /> 
       <param name="scale" value="showall" /> 
       <param name="menu" value="true" /> 
       <param name="devicefont" value="false" /> 
       <param name="salign" value="" /> 
       <param name="allowScriptAccess" value="sameDomain" /> 
       <!--[if !IE]>--> 
       <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%"> 
       <param name="allowFullScreen" value="true" /> 
        <param name="movie" value="index.swf" /> 
        <param name="quality" value="high" /> 
        <param name="bgcolor" value="#e7e7e7" /> 
        <param name="play" value="true" /> 
        <param name="loop" value="true" /> 
        <param name="wmode" value="window" /> 
        <param name="scale" value="showall" /> 
        <param name="menu" value="true" /> 
        <param name="devicefont" value="false" /> 
        <param name="salign" value="" /> 
        <param name="allowScriptAccess" value="sameDomain" /> 
       <!--<![endif]--> 
        <a href="http://www.adobe.com/go/getflash"> 
         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
        </a> 
       <!--[if !IE]>--> 
       </object> 
       <!--<![endif]--> 
      </object> ... 

這種液體佈局並不可能最大解決方案,但您可以使用它來使文​​本適合窗口。你可以嘗試「讓這座建築漂浮起來」,雙方都可以充滿背景。這不是事實,如果你製作的所有東西都會使縮小的圖像看起來更好看,那就取決於算法。

你可以達到更好的效果堅持CSS和JavaScript。門可以留在SWF中。

+0

你能解釋一下AS3嗎?特別是顏色和電影剪輯進入舞臺的位置。 – 2012-02-10 01:23:30

+0

我將嘗試CSS方法。如果我這樣做,我不需要在AS3中進行任何調整。不過,我仍然覺得這個問題還沒有完全解答。你有任何鏈接的AS3調整大小技術?我顯然不是今天有效地使用谷歌搜索。 – 2012-02-10 18:38:43

+0

http://www.adobe.com/devnet/flash/articles/liquid_gui.html – Damian 2012-02-10 19:16:38

0

以下代碼(沒有JavaScript的需要)不變形(;火狐4.0,Windows XP中;在Firefox 10,Ubuntu的測試IE 6和8中,Windows XP):

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
<title>Platinum Buyer's Club</title> 
<style type="text/css"> 
html, body{ 
margin:0; 
padding:0; 
} 
</style> 
</head> 
<body> 
    <object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> 
    <param name="movie" value="http://www.example.com/example.swf"> 
    <param name="quality" value="high"> 
    <param name="wmode" value="transparent"> 
    <param name="SCALE" value="default"> 
    <embed width="100%" height="100%" src="http://www.example.com/example.swf" 
     quality="high" type="application/x-shockwave-flash" wmode="transparent" scale="default" 
     pluginspage="http://www.macromedia.com/go/getflashplayer"> 
    </object> 
</body> 
</html> 

但是它似乎仍然不能在MacOS瀏覽器上工作(不確定它是Flash插件還是瀏覽器問題)