mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 13:28 Benutzername: Passwort: Auto-Login

Thema: [tutorial] weiches zentrieren in flash vom 22.04.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> [tutorial] weiches zentrieren in flash
Autor Nachricht
Falk Wussow
Threadersteller

Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht: Männlich
Verfasst So 22.04.2007 13:39
Titel

[tutorial] weiches zentrieren in flash

Antworten mit Zitat Zum Seitenanfang

vorrede
eine flash-seite belegt das komplette browserfenster (breite und höhe sind 100%). wenn man nun die größe des browserfensters ändert, bewegt sich der inhalt - nach kurzer verzögerung - wie von geisterhand in die mitte. und zu allem überfluß auch noch in einer schön abbremsenden bewegung. sehr schick...

für mein neuestes projekt wollte ich genau diesen effekt nachahmen aber - da mir für die google-suche nicht die passenden suchbegriffe einfielen - war (wie beim letzten tutorial auch) eigene denkleistung angesagt. nach acht stunden und fünf tassen heißem zitronen-granulat-tee war es endlich soweit...


0. das vorhaben
normalerweise wird ein movieclip generell mittig auf der bühne platziert. im grunde wäre das tutorial jetzt schon fertig aber wir wollen ja eine flüssigen zentrierung. und die funktioniert so:

1. der hauptfilm
der hauptfilm (der den preloader enthalten sollte) wird ganz normal hergestellt und als swf-datei veröffentlicht (hier: site.swf). wichtig ist nur, daß in ihm kein befehl "Stage.align" vorkommen darf - dieser würde das ganze vorhaben zerstören. im ersten bild sollte lediglich
Code:
Stage.scaleMode = "noScale";
stehen, damit bei der größenänderung nicht skaliert wird. außerdem sollte man sich die abmessungen des hauptfilms merken (die daten müssen im fullscreen-actionscript eingetragen werden).

3. der fullscreen-film
nun wird der fullscreen-film (braucht keinen preloader - ist nur 2kb groß) erstellt, der dann den hauptfilm enthält. in diesem zusammenhang möchte ich gleich mal auf dieses tutorial verweisen, mit dem das valide einbinden von flash in html beschrieben ist...

ins erste (und einzige) bild fügen wir folgendes actionscript ein:
Code:
// Film anhalten
stop();

// Variablen festlegen
mc_site_breite = 800; // Breite des Hauptfilms (px)
mc_site_hoehe = 600;  // Höhe des Hauptfilms (px)
mc_move_speed = 20;   // Bewegungsgeschw.: größer = langsamer (ms)
mc_move_wait = 500;   // Zeitraum bis Bewegung startet (ms)
mc_move_factor = 10;  // Abstand der Bewegung: größer = feiner (Faktor)

// Skalierungs-Schutz bei Größenänderung und
// Positionierung der Bühne oben links
Stage.scaleMode = "noScale";
Stage.align = "TL"

// Container für den Hauptfilm erstellen und
// Einfügen des Hauptfilms in diesen Container
var mc_site:MovieClip = createEmptyMovieClip("mc_site", 999);
loadMovie("site.swf", mc_site);

// Abfragen, wann eine Größenänderung passiert und
// Aufrufen der Zentrierungs-Funktion
var stageResizeCheck:Object = new Object();
Stage.addListener(stageResizeCheck);
stageResizeCheck.onResize = function() {
   BeiResize();
}

// Definieren der Zentrierungs-Funktion und
// erster Aufruf direkt nach dem Start
function BeiResize() {
   jetzt = getTimer();
   starten = jetzt + mc_move_wait;
   counter = 0
   
   zentrum_x = Math.floor((Stage.width - mc_site_breite) / 2);
   zentrum_y = Math.floor((Stage.height - mc_site_hoehe) / 2 - 20); // -20 für die optische Mitte!

   clearInterval(IntervalID);
   IntervalID = setInterval(Bewegung, mc_move_speed);
}
BeiResize();

// Definieren der Bewegungs-Funktion und
function Bewegung() {
   if (mc_site._x == zentrum_x && mc_site._y == zentrum_y || counter >= 30) {
      clearInterval(IntervalID);
   } else {
      if (starten <= getTimer()) {
         abstand_x = mc_site._x - zentrum_x;
         abstand_y = mc_site._y - zentrum_y;

         mc_site._x = Math.round(mc_site._x - abstand_x / mc_move_factor);
         mc_site._y = Math.round(mc_site._y - abstand_y / mc_move_factor);

         counter++
      }
   }
}


dann einfach nur noch den film exportieren. fertig. viel spaß...


zu den variablen
mc_site_breite gibt die breite des hauptfilms an. ginge auch per abfrage aber war mir zu schwer.
mc_site_hoehe ist die höhe des hauptfilms. genau das selbe problem wie bei der breite.
mc_move_speed ist die geschwindigkeit. alle x millisekunden wird der hauptfilm zur nächsten "zwischenposition" bewegt.
mc_move_wait ist die wartezeit in ms, wann die bewegung starten soll.
mc_move_factor gibt den faktor an, wie fein die bewegung ablaufen soll.

anmerkungen zum script
jetzt ist eine hilfsvariable, um den start der bewegung zu errechnen. es wird ein timerwert genommen und mit der wartezeit mc_move_wait zum startwert starten verrechnet. erst, wenn bei der if-abfrage die erneut erfragte zeit mit starten übereinstimmt, läuft die bewegung los.

zentrum_y ist die vertikale mitte der bühne. wie wir mediengestalter ja wissen, ist aber die optische mitte nicht immer die rechnerische mitte. deshalb wird der movieclip 20 pixel nach oben geschoben. zentrum_x und zentrum_y werden aus der hälfte der bühnengröße ermittelt. weil sich dabei aber nicht immer ganzzahlige werte ergeben, wird das ganze noch gerundet. damit werden pixelschriften aus dem hauptfilm ebenfalls ganzzahlig positioniert und nicht weichgezeichnet.

der IntervalID wird zwar nach jeder bewegung gelöscht aber aus unerfindlichem grund wird nach jeder bewegung die framerate größer und die bewegung immer schneller, bis es irgendwann nur noch ein springen ist. erst seit das IntervalID auch nochmal direkt vorm "setInterval" gelöscht wird, bleibt die framerate gleich. daran habe ich 1 stunde gerätselt!

counter verwende ich, weil bei der bewegungs-funktion dividiert wird. nicht immer werden dabei ganze zahlen raus und deshalb können mc_site._x und mc_site._y nicht immer mit zentrum_x und zentrum_y übereinstimmen. ich habe teilweise abweichungen bis zu 9 pixel erlebt aber das ist unmerklich. weil sonst jedoch das intervall ständig weiterlaufen würde, wird nach ertesteten 30 zyklen abgebrochen. mehr zyklen braucht man eigentlich nur, wenn man das browserfenster auf einen schlag um 2000 pixel verbreitern würde ... tut aber sicher keiner...

last words
wie immer: ich bin "anfänger"! verbesserungsvorschläge sind gern gesehen und auch eure lobhudelei, wenn ihr das script verwendet Lächel


edit: hab noch "flash" in den titel eingetragen ... schneller sein als der mod, ist die devise Grins


Zuletzt bearbeitet von Falk Wussow am So 22.04.2007 13:42, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
phihochzwei
Moderator

Dabei seit: 08.06.2006
Ort: Mülheim an der Ruhr
Alter: 46
Geschlecht: Männlich
Verfasst So 22.04.2007 15:33
Titel

Antworten mit Zitat Zum Seitenanfang

Wieso nimmst Du nicht den MovieClipLoader zum Laden ? Dann kannst Du das ganze über einen Event triggern.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
 
Ähnliche Themen Flash in Dreamweaver zentrieren ...
Flash-Film im Vollbildmodus zentrieren
[Flash] Movieclip Rotationspunkt zentrieren
cs3 tutorial für flash 8 bentzen
Flash Seifenblasen Tutorial
Flash einsteiger tutorial
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.