Wie macht man einen Flash-Film zu skalieren proportunatly zu div Breite?

Question

Ich habe eine Reihe von Beispielseite, die mein Problem beschreibt

Meine Website wird einen Hauptwrapper haben, der auf eine max-width-Eigenschaft für kompatible Browser eingestellt ist. Es wird auf 940px über bei max strecken. Wenn skaliert unten möchte ich die SWF proportional mit ihm skalieren. Wie ein Bild mit Breite Prozent angewendet. Der Flash-Film hat die Abmessungen von 940 × 360 Pixel.

Ich kann nicht herausfinden, welche Attribute dem Embed-Tag hinzugefügt werden müssen, damit es dies tut.

Ich verwende derzeit jquery flash embed, bin aber offen für andere Optionen, obwohl dies mein Ideal ist.

Im Beispiel habe ich den Blitzhintergrund auf Schwarz gesetzt.

Wenn ich die Größe des Browserfensters ändere, wird der Flash-Film nicht proportional zum Div skaliert, sondern nur das Foto, so dass eine leere Leinwand (schwarz) zurückbleibt, während die Div-Höhe gleich bleibt. Ich kann keinen Höhenwert im CSS hinzufügen.

Wie kann ich diese Skala richtig einstellen? Das Hinzufügen eines noscale-Parameters beschneidet nur das Bild. Die Höhe der SWF skaliert auch nicht.

Mein gesamter Code kann in der verlinkte Beispiele Quelle .

Answer 1

Vielen Dank an George Profenza für die Bereitstellung aller Actionscript-Codes. Es gab zu viel Flimmern, und ich kenne mich nicht gut genug mit Actionscript aus, um zu wissen, wie man das beheben kann. Großes Lob dafür, dass Sie so viel zusammengetragen haben.

Ich habe eine Lösung mit Jquery erstellt. Es ist sehr einfach.

Zuerst bette ich den Flash-Film mit der maximal möglichen Höhe ein, für Leute mit deaktiviertem Css. Es wird immer noch mit der Breite skalieren, aber wird Leinwand Hintergrund wie in den verlinkten Beispielen zeigen.

$(selector).flash({
    src: swf,
    width: '100%',
    height: '360',
});

//get ratio from native width and height
var nativeWidth = 940;
var nativeHeight = 360;
var ratio = nativeWidth/nativeHeight;

var containerWidth = $(selector).width();
var containerHeight = containerWidth/ratio;
$(selector+' embed').height(containerHeight);

//resize flash movie
$(window).resize(function() {
    containerWidth = $(selector).width();
    containerHeight = containerWidth/ratio;
    $(selector+' embed', selector+' object').height(containerHeight);
    $(selector).height(containerHeight);
});

Dann wird die Größe des Films in etwa so geändert, wie die Größe des Browserfensters geändert wird, und die Höhe wird aus der neuen Breite geteilt durch das ursprüngliche Seitenverhältnis berechnet. Dieser Code könnte viel aufgeräumt werden, aber ich hoffe, er hilft jemandem, stundenlangen Ärger zu vermeiden.

Answer 2

Dieser Artikel wird Ihnen hoffentlich die nötigen Informationen liefern: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ . Es ist auch reines CSS!

Answer 3

Ich hatte mehrere Ideen, die von Aufruf und Actionscript-Funktion von Javascript mit ExternalInterface ging, um FlashVars an die swf nur damit die swf wissen, was die Größe des div ist, um eine einfache Idee.

los geht's.

Sie haben 1 MovieClip als Hintergrund und 1 MoveClip mit dem Kopf.

Ich denke, das Beste wäre die Option "Dies ist der Flash-Film oben" aus Ihrem Beispiel. Am besten wird die Einstellung

stage.scaleMode = StageScaleMode.NO_SCALE;

o

stage.scaleMode = StageScaleMode.SHOW_ALL;

Die Idee ist, den Inhalt proportional zu skalieren.

Dann würden Sie einen Ereignis-Listener für das Größenänderungsereignis hinzufügen und den Hintergrund skalieren/neu zeichnen.

stage.addEventListener(Event.RESIZE, stageResizeHandler);

function stageResizeHandler(event:Event = null):void{
   //assuming your background is called "background"
   background.width = stage.stageWidth;
   background.height = stage.stageHeight;
   //if content needs recentering, assuming "content" is the name used
   content.x = (stage.stageWidth - content.width) * .5;
   content.y = (stage.stageHeight - content.height * .5;
}

Ich habe einen Standardwert für das Argument des Ereignishandlers festgelegt, so dass Sie die Funktion auch ohne diese Funktion aufrufen können. ein Ereignis auszulösen

z.B..

stageResizeHandler();

anstelle von

stage.dispatchEvent(new Event(Event.RESIZE));

Möglicherweise müssen Sie diese Funktion beim Initialisieren aufrufen, ich bin mir nicht sicher.

Außerdem müssen Sie die Größe des Inhalts je nach Größe der Bühne proportional anpassen. Hier ist also ein Code, den ich getestet habe:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, stageResizeHandler);

stageResizeHandler();

function stageResizeHandler(event:Event = null):void{
    //resize bg
    bg.width = stage.stageWidth;
    bg.height = stage.stageHeight;

    //scale proportionally
    if(content.width > stage.stageWidth || content.height > stage.stageHeight){
        var ratio:Number = getRatio(content);
        if(stage.stageWidth > stage.stageHeight){
            content.height = stage.stageHeight;
            content.width = content.height * ratio;
        }else 
        if(stage.stageWidth < stage.stageHeight){
            content.width = stage.stageWidth;
            content.height = content.width / ratio;
        }
    }else {
        content.scaleX = content.scaleY = 1;
    }

    //centre
    content.x = (stage.stageWidth - content.width) * .5;
    content.y = (stage.stageHeight - content.height) * .5;
}

function getRatio(target:MovieClip):Number{
    var ratio:Number; 
    target.width > target.height ? ratio = (target.width / target.height) : ratio = (target.height / target.width);
    return ratio;
}

Leider habe ich bei bestimmten Größen ein gewisses Flackern festgestellt. Ich vermute, dass die Skalierung und die Tatsache, dass das Verhältnis ändert sich oft je nachdem, wie Sie die Größe ändern.