Fullscreen Flashpage | MC ausrichten

Für alle die schon länger mit Flash arbeiten, komplexere Tutorials.
Antworten
Benutzeravatar
Danjo
Beiträge: 18
Registriert: Mi 9. Jan 2008, 19:52
Kontaktdaten:

Fullscreen Flashpage | MC ausrichten

Beitrag von Danjo » Mo 28. Jan 2008, 19:06

Wenn Ihr Eure Homepage als Fullscreen Flashpage anlegen möchtet, könnt Ihr die MovieClips nach Euren Bedürfnissen positionieren.

Eure index.html-Datei sieht dann in den Grundzügen so aus:

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Schlüsselwörter Eurer Page hier eintragen..." />
<meta name="description" content="Beschreibung der Webseite hier eintragen..." />
<title>Titel der Webseite hier eintragen...</title>
<link href="css/EuerStylesheet.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="/swfobject.js"></script>
<link rel="shortcut icon" href="favicon/EuerFavicon.ico"  />
</head>

<body>
<div id="flashcontent"><h1>Überschrift der Page</h1>

    You need <a href="http://www.adobe.com/download">Adobe Flash Player 8</a> and a browser with Javascript enabled to be able to view this site.
</div>
	<script type="text/javascript">
		var so = new SWFObject("EuerFlashfilm.swf", "Euer Titel", "100%", "100%", "8", "#0e100f");
		so.write("flashcontent");
	</script>	
	
</body>
</html>

Vergesst nicht das SWFObject in Euer Verzeichnis auf dem Server zu legen:
Download und Informationen dazu gibt es hier: http://www.powerflasher.de/sites/blog/swfobject/



Wie Ihr nun die MovieClips ausrichtet seht Ihr in folgendem Beispiel:
ausrichten.fla
(532.5 KiB) 241-mal heruntergeladen
Das ActionScript ist einfach nachzuvollziehen:

Code: Alles auswählen

Stage.scaleMode = "noScale";
//Skalierung für die ganze Bühne abschalten.
Stage.align = "TL";
//Die aktuelle Ausrichtung der SWF-Datei im Player oder Browser. In diesem Fall TL(Top-Left). 
lstrn = new Object();
//Listener erstellen.
lstrn.onResize = function() {
  //Beim verändern der Bühnengröße...
    MChintergrund._x = Stage.width/2;
  //den zu skalierenden MovieClip in die Mitte des Flash Films setzen.
    MChintergrund._y = Stage.height/2;
    //den zu skalierenden MovieClip in die Mitte des Flash Films setzen.
    MChintergrund._width = Stage.width;
    //die Breite des MovieClip = die Breite der Bühne.
    MChintergrund._height = Stage.height;
    //die Höhe des MovieClip = die Höhe der Bühne.
    MCmitte._x = Stage.width/2;
    //den MovieClip der nicht skaliert werden soll, in die Mitte des Flash Films setzen.
    MCmitte._y = Stage.height/2;
//den MovieClip der nicht skaliert werden soll, in die Mitte des Flash Films setzen.
	
	
	
	MCuntenrechts._x = Stage.width-(MCuntenrechts._width/2);
	 //den MovieClip der nicht skaliert werden soll, rechts unten anordnen.
    MCuntenrechts._y = Stage.height-(MCuntenrechts._height/2);  
//den MovieClip der nicht skaliert werden soll, rechts unten anordnen.
	 
	 
	 
	MCuntenlinks._x = MC._width/2;
	//den MovieClip der nicht skaliert werden soll, links unten anordnen.
    MCuntenlinks._y = Stage.height-(MCuntenlinks._height/2);  
  //den MovieClip der nicht skaliert werden soll, links unten anordnen.
	 
	MCobenlinks._x = MCobenlinks._width/2;
	//den MovieClip der nicht skaliert werden soll, links oben anordnen.
    MCobenlinks._y = MCobenlinks._height/2;  
	//den MovieClip der nicht skaliert werden soll, links oben anordnen.
	 
	 
	 MCobenrechts._x = Stage.width-(MCobenrechts._width/2);
	//den MovieClip der nicht skaliert werden soll, rechts oben anordnen.
     MCobenrechts._y = MCobenrechts._height/2; 
	//den MovieClip der nicht skaliert werden soll, rechts oben anordnen.
	   
	 MCmittig._x = Stage.width/2;
	//den MovieClip der nicht skaliert werden soll, mittig anordnen.
     MCmittig._y = Stage.height/2; 
	 //den MovieClip der nicht skaliert werden soll, mittig anordnen. 
	
	  
	 MCmittigrechts._x = Stage.width-(MCmittigrechts._width/2);
	 //den MovieClip der nicht skaliert werden soll, mittig rechts anordnen.
     MCmittigrechts._y = Stage.height/2; 
	//den MovieClip der nicht skaliert werden soll, mittig rechts anordnen.
	 
	  MCmittiglinks._x = MC._width/2;
	 //den MovieClip der nicht skaliert werden soll, mittig links anordnen.
      MCmittiglinks._y = Stage.height/2; 
	 //den MovieClip der nicht skaliert werden soll, mittig links anordnen.
	 
	 
	  MCobenmittig._x = Stage.width/2;
	//den MovieClip der nicht skaliert werden soll, mittig oben anordnen.
      MCobenmittig._y = MCobenmittig._height/2; 
	//den MovieClip der nicht skaliert werden soll, mittig oben anordnen.
	 
	 
	  MCuntenmittig._x = Stage.width/2;
	 //den MovieClip der nicht skaliert werden soll, mittig unten anordnen.
      MCuntenmittig._y = Stage.height-(MCuntenmittig._height/2); 
	 //den MovieClip der nicht skaliert werden soll, mittig unten anordnen.
	 
	   
	 
	   

};
Stage.addListener(lstrn);
//Listener der Bühne hinzufügen.
lstrn.onResize()
//sofort die Funktion aufrufen.  



Hier seht Ihr das Ergebnis:
http://www.tutorials4flash.de/ausrichten.html


Der Hintergrund skaliert sich mit. Er befindet sich in dem Movieclip "MChintergrund".


In der Bibliothek der Fla.-Datei findet Ihr in die MovieClips, die mit den entsprechenden Instanznamen benannt wurden.

Beispiel aus dem ActionScript: MCmittigrechts._x = Stage.width-(MCmittigrechts._width/2);
:arrow: "MCmittigrechts" ist in diesem Fall der Instanzname vom MovieClip "mittigrechts".

Viel Spass damit!
:dance

Benutzeravatar
enbe
Beiträge: 58
Registriert: Mi 9. Jan 2008, 04:47
Wohnort: Berlin
Kontaktdaten:

Re: Fullscreen Flashpage | MC ausrichten

Beitrag von enbe » Mo 9. Mär 2009, 09:44

Die verwendete Version von SWFObject in obigem Beispiel ist 1.5. Diese ist nicht kompatibel zu der neuen Version von SWFObject 2.0. Damit obiges Beispiel funktioniert, müsst ihr euch deshalb Version 1.5 hier downloaden: http://blog.deconcept.com/swfobject/

Man kann natürlich auch Version 2.0 verwenden, allerdings muss dann der HTML Code entsprechend der Anweisungen hier - http://blog.powerflasher.de/swfobject2/ - angepasst werden.

Antworten