[GastForen Archiv Adobe Flash & ActionScript Hintergrundbild an Browserfenster anpassen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

Hintergrundbild an Browserfenster anpassen

nutzfaktor
Beiträge gesamt: 257

15. Dez 2007, 23:58
Beitrag # 1 von 8
Bewertung:
(6621 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ich möchte eine Flashseite bauen, in der sich das jeweilige Hintergrundbild immer dem Browserfenster anpasst wie hier http://www.bubo.ws/


Stichworte stage listener und onresize,
kann mir jemand verraten, wie das gehen soll?

danke
X

Hintergrundbild an Browserfenster anpassen

nutzfaktor
Beiträge gesamt: 257

16. Dez 2007, 00:23
Beitrag # 2 von 8
Beitrag ID: #327376
Bewertung:
(6613 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hiermit klappt es schon mal ganz gut.
Mir wäre eine Actionscript Lösung lieber und eine Lösung, die das Bild nicht verzerrt.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<style type="text/css">
<!--
* { margin: 0;
padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
top: 0;
left: 0;
z-index: 2;
overflow: auto;
width: 100%;
height: 100%;
text-align: center;}


//-->
</style>
</head>
<body>
<img id="bgImg" src="hintergrund.jpg" width="100%" height="100%">

</div>
</body>
</html>


als Antwort auf: [#327375]

Hintergrundbild an Browserfenster anpassen

ganesh
Beiträge gesamt: 1981

16. Dez 2007, 12:28
Beitrag # 3 von 8
Beitrag ID: #327399
Bewertung:
(6579 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Code
var stageListener:Object = new Object(); 

function expand() {
bg_mc._width = Stage.width + 10;
bg_mc._height = Stage.height +10;
}

stageListener.onEnterFrame = expand;
stageListener.onResize = expand;

Stage.scaleMode = "noScale";
Stage.addListener(stageListener);
Stage.align = "TL";
fscommand("fullscreen", true);
Stage.showMenu = false;

bg_mc.onEnterFrame = function() {
bg_mc._width = Stage.width + 10;
bg_mc._height = Stage.height +10;
this.onEnterFrame = null;
}



http://livedocs.adobe.com/...m?href=00002689.html

Nicht vergessen, bei publish-Optionen auf 100% Grösse zu stellen, nicht fixe px-Angaben (fürs HTML).


als Antwort auf: [#327376]

Hintergrundbild an Browserfenster anpassen

nutzfaktor
Beiträge gesamt: 257

16. Dez 2007, 17:45
Beitrag # 4 von 8
Beitrag ID: #327423
Bewertung:
(6553 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Danke für den AC Code, der funktioniert soweit gut.
Nur leider wird das Bild damit immer verzerrt, ich suche aber nach einer Lösung, die die Proportionen beibehält wie in diesen Beispiel zu sehen ist.
http://www.bubo.ws.

Kann mir noch jemand helfen?
Vielen Dank im Voraus.


als Antwort auf: [#327399]

Hintergrundbild an Browserfenster anpassen

ganesh
Beiträge gesamt: 1981

16. Dez 2007, 18:45
Beitrag # 5 von 8
Beitrag ID: #327432
Bewertung:
(6543 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Nicht jeder Monitor hat dasselbe Seitenverhältnis (Höhe/Breite). Man muss möglichst grosse Bilder verwenden und bei der entspr. AS Funktion einfach anhand der Stage-Höhe die neue Bildgrösse berechnen. Meistens wird dann halt auf der einen Seite ein Bereich abgeschnitten. Du kannst natürlich auch mit xscale/yscale arbeiten, statt fixe px-Werte anzugeben.

Was die JPG-Qualität angeht: in der Library auf "properties" gehen und "allow smoothing" anklicken, damit's nicht so "pixelig" aussieht beim skalieren.


als Antwort auf: [#327423]
(Dieser Beitrag wurde von ganesh am 16. Dez 2007, 18:46 geändert)

Hintergrundbild an Browserfenster anpassen

nutzfaktor
Beiträge gesamt: 257

16. Dez 2007, 19:27
Beitrag # 6 von 8
Beitrag ID: #327444
Bewertung:
(6530 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Vielen Dank für Deine Antwort. Leider ist mir damit immer noch nicht geholfen.

Also, die Publish Einstellungen sind auf 100 Prozent gesetzt.

in meinen konkreten Fall habe ich ein Bild mit einer Auflösung von 1024 x 768 px.
Wenn das Browserfenster kleiner als eben diese Größe wird, sollen nur die entsprechenden Teile des Bildes verdeckt bzw. abgeschnitten werden und nur wenn ich das Browserfenster größer mache, wird das Bild proportional größer.

http://www.uniqlo.jp/uniqlock/

ist noch ein anderes Beispiel...Warte, bis die mädels erscheinen.
Auch dort wird in diesen Beispiel das Video erst ab einer bestimmten Größe größer.

ich hoffe, Ihr versteh, was ich meine und könnt mir weiterhelfen.
besten Dank.


als Antwort auf: [#327432]

Hintergrundbild an Browserfenster anpassen

ganesh
Beiträge gesamt: 1981

16. Dez 2007, 23:38
Beitrag # 7 von 8
Beitrag ID: #327464
Bewertung:
(6505 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
nun ja, dann baue halt einfach eine if/else Weiche rein
if(Stage.width >1024) {
// xscale/yscale oder Umrechung in px
}


als Antwort auf: [#327444]
(Dieser Beitrag wurde von ganesh am 18. Dez 2007, 10:05 geändert)

Hintergrundbild an Browserfenster anpassen

nutzfaktor
Beiträge gesamt: 257

17. Dez 2007, 22:59
Beitrag # 8 von 8
Beitrag ID: #327581
Bewertung:
(6445 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hab jetzt die lösung gefunden. hiermit klappts bestens!

Stage.scaleMode = "noScale";
Stage.align = "TL";
meinListener = new Object();
meinListener.onResize = function() {
_root.scalefactor = (_root.bg._width)/(_root.bg._height);
_root.stagescale = (Stage.width)/(Stage.height);
if (_root.stagescale>_root.scalefactor) {
_root.bg._width = (Stage.width);
_root.bg._height = (Stage.width)/_root.scalefactor;
} else {
_root.bg._width = (Stage.height)*_root.scalefactor;
_root.bg._height = (Stage.height);
}
_root.bg._x = (Stage.width/2)-(_root.bg._width/2);
_root.bg._y = (Stage.height/2)-(_root.bg._height/2);
_root.tt._y = Stage.height-120;
_root.tt._x = Stage.width-120;
};
Stage.addListener(meinListener);


als Antwort auf: [#327464]
X