Wings X Forum

Hallo Wings X-Anwender,

der Radareffekt in der PRO-Version hat mich auf die Idee gebracht, Bilder radial ein-, aus- und umzublenden. Realisiert habe ich das Ganze ausschließlich mit Masken und Bildfeldern. Für Video-Enthusiasten mit entsprechenden Effekt-Bearbeitungsprogrammen mag das „kalter Kaffee“ sein, aber die weiter unten beschriebene „Dreiviertel-Variante mit Bildfeld“ geht halt bloß in Wings... (Zwar mit aufwändigem, jedoch äußerst kreativem Einsatz...)

Hinweis:
Meine Screenangaben in nachfolgender Beschreibung beziehen sich auf SXGA+ Auflösung (Canon XEED SX50), d.h. Format 4x3 mit 1400 x 1050 Pixel.


Grundfunktion (360°-Einblendung)

Das radial einzublendende Bild wird mithilfe von zwei Bildfeldern (Ausfüllen) in zwei Hälften aufgeteilt. Ein Bildfeld hat dann naturgemäß die halbe Größe des Screens (700 x 1050 px). Der linke Rand des linken Bildfelds (BF links) schließt mit dem linken Rand des Screens ab (Koos: Links 0/Oben 0), der rechte Rand des rechten Bildfelds (BF rechts) mit dem rechten Rand des Screens (Koos: Links 700/Oben 0).

Das Bild wird jeweils in einem Bildobjekt in zwei Spuren direkt übereinander platziert, dem oberen wird BF links zugeordnet, dem unteren BF rechts. Damit jeweils der richtige Bildausschnitt zu sehen ist, müssen die Bilder innerhalb der Bildfelder entsprechend verschoben werden: Oben plus die halbe BF-Breite (350 px), unten minus die halbe BF-Breite (-350 px).

Im Screenshot unten sieht man zunächst schon mal die Anordnung der (gleichen) Bilder („Windmühle2“), die Pos/Zoom-Eigenschaften jeweils rechts daneben.


Als nächstes erstellt man die TIF-Masken, am besten exakt in der Screengröße. Bei der MaskeLinks ist die rechte Hälfte opak schwarz, die linke Hälfte transparent. Der Rand muss absolut scharf sein, also keine „weiche Kante“. Die MaskeRechts ist entsprechend seitenverkehrt.
Wie im Screenshot oben zu sehen, wird MaskeLinks direkt über das Bild mit BF links und MaskeRechts direkt über das Bild mit BF rechts platziert.

Damit alles rund läuft, sind bei den Masken spezielle Einstellungen notwendig:
Um beim Drehen auch alle Bildecken abzudecken, wird jede Maske auf 200% gezoomt. In der Praxis hat sich gezeigt, dass zwischen den Masken ein senkrechter Spalt entsteht, minimal, aber sichtbar. Deswegen wird MaskeLinks um 1 Pixel nach rechts verschoben und MaskeRechts um 1 Pixel nach links (-1).
Nun versieht man die Masken in den Eigenschaften mit dem Maskierungs-Modus Maske & rendern, die Bilder darunter mit Content-Stapel.

Und jetzt kommt das Wesentliche:
Die Masken erhalten jeweils eine Rotationsspur (Eigenschaften > Steuerspuren > Rotation: Spur aktivieren). Die einzelnen Werte für die Z-Rotation der Keyframes muss ich nicht näher erläutern, sie sind aus dem Screenshot zu ersehen (X- und Y-Rotation ist immer 0 Grd).
Wichtig: Damit der Ablauf ohne Beschleunigen oder Abbremsen vonstattengeht, dürfen die Keyframes keine SmartMoves enthalten.

Beim Ablauf passiert nun Folgendes:

Zwischen Marker M1 und M2

• wird mit MaskeRechts das rechte Bildfeld komplett abgedeckt
• zugleich dreht sich MaskeLinks im Gegenuhrzeigersinn, gibt sozusagen im „Radarmodus“ die linke Bildhälfte frei und bleibt bei -180° um 6Uhr stehen

Zwischen Marker M2 und M3

• ist die linke Bildhälfte bereits sichtbar
• dreht sich MaskeRechts ebenfalls im Gegenuhrzeigersinn, gibt so die rechte Bildhälfte radial frei und bleibt bei 12Uhr stehen

Ab M3 ist das vollständige Bild zu sehen.

Für einen gleichmäßigen Verlauf ist darauf zu achten, dass die Zeiten zwischen M1 und M2 und zwischen M2 und M3 identisch sind.


Dreiviertel-Variante (270°-Einblendung mit Bildfeld in Q1)

Die Idee dieser Variante ist eine 270°-Einblendung eines Bildes mit einer daran anschließenden, sozusagen fortlaufenden Alpha-Wipe-Öffnung eines anderen Bildes im Bildfeld Quadrant Eins.
Im Prinzip ist die Anordnung dieselbe wie in der Grundfunktion, nur dass der Öffnungswinkel hier nicht die volle Umdrehung, sondern nur -270° beträgt. Außerdem wird in einer weiteren Spur unterhalb das Bild platziert, das in Quadrant Eins erscheinen soll.

Dazu wird ein Bildfeld Quadrant Eins erzeugt (halbe Breite/halbe Höhe des Screens):

• Modus Ausfüllen
• Clipping Aktiv
• Links 700 px, Oben 0 px
• Breite 700 px, Höhe 525 px

Die Winkeldaten der Keyframes in den Rotationssteuerspuren und die weiteren Details sind aus dem nächsten Screenshot ersichtlich:


Beim Ablauf dieser Variante passiert Folgendes:

Zwischen Marker M4 und M5 (ist identisch M1>M2)

• wird mit MaskeRechts das rechte Bildfeld komplett abgedeckt
• zugleich dreht sich MaskeLinks im Gegenuhrzeigersinn und gibt sozusagen im „Radarmodus“ die linke Bildhälfte frei und bleibt bei -180° um 6Uhr stehen

Zwischen Marker M5 und M6

• ist die linke Bildhälfte bereits sichtbar
• dreht sich MaskeRechts ebenfalls im Gegenuhrzeigersinn um -90°, gibt so das rechte Bildfeld unten zur Hälfte radial frei und bleibt bei 3Uhr stehen

Zwischen Marker M6 und M7

• ist nun das dreiviertelte Bild „Windmühle2“ statisch zu sehen
• wird das Bild im BF Quadrant Eins per AlphaWipe (Breite 0, Richtung 90°) eingeblendet.

Für einen gleichmäßigen Verlauf ist darauf zu achten, dass die Zeiten zwischen M5 und M6 (Viertelrotation) und zwischen M6 und M7 (AlphaWipe-Einblendung) jeweils die Hälfte der Zeit zwischen M4 und M5 betragen.

Während der Standzeit der Bilder kann man z.B. das Hintergrundbild ändern, im Screenshot wird vom Bild „Weitblick“ auf „Karte“ umgeschaltet und dann das Ganze rückwärts abgespult. Die Keyframedaten dazu sind wieder aus dem Screenshot ersichtlich.


Variante mit zwei Halbkreisen

Hier werden anstatt eines Bildes graphische Formen mit Transparenz (TIF-Dateien) verwendet, im Beispiel hier ein einfacher (roter) Kreis. Das kann man z.B. verwenden, um in einem Bild bestimmte Ausschnitte oder auf einer Karte ein Gebiet zu markieren („einzukreisen“).

Es werden zwar die gleichen Masken verwendet wie beim radialen Einblenden, jedoch keine Bildfelder. Anstatt dessen wird der Kreis in zwei Bilder aufgeteilt (linker/rechter Halbkreis). Der Ablauf funktioniert genauso wie bereits unter der Grundfunktion beschrieben. Die Anordnung der Bildhälften und der Masken und die Werte der einzelnen Keyframes zeigt folgender Screenshot:


Wegen des auch hier wieder entstehenden Spalts zwischen den Bildhälften werden MaskeLinks und HalbkreisLinks um einen Pixel nach rechts (+1 px) und MaskeRechts und HalbkreisRechts um einen Pixel nach links (-1 px) verschoben (siehe Eigenschaften im Screenshot rechts der Bildobjekte).

Wenn man die zwei Masken und Halbkreisbilder gruppiert, kann man sie mit einem Klick selektieren und kopieren. Mit ISE lässt sich so eine komplette Gruppe problemlos zusammen(!) an eine beliebige Stelle im Bild oder in einer Karte verschieben. Dieser „Einkreis-Effekt“ lässt sich sicherlich mehrmals in einer Show wiederholen, ohne ermüdend zu wirken.

Anstatt eines Kreises kann man sich z.B. in Photoshop beliebige Formen (Rechtecke, Ovale etc.) kreieren.


Wer sich das Ergebnis schnell mal angucken möchte, hier ein kurzes Video:
(Hinweis: Funktioniert nur mit "Herunterladen", direktes Gucken ist leider nicht möglich )
https://magentacloud.de/s/7gAksbjWAmG6sXm

Wer die Pro-Version (min. Version 2.8.2) hat, kann sich das Musterprojekt gerne hier herunterladen:
https://magentacloud.de/s/Gwdm8MRw7fMM2Y8

Sämtliche oben beschriebenen Aktionen lassen sich allesamt bereits mit der Advanced-Version durchführen. Die Variante mit den zwei Halbkreisen habe ich bereits mit Wings Platinum 5 Advanced realisiert. Die Projektdatei kann allerdings nicht mit der Advanced-Version geöffnet werden, aber die Bilder und Masken lassen sich problemlos verwenden. Die Bildobjekte in der Timeline lassen sich leicht anhand der Screenshots nachbasteln.

Zum Schluss noch Tipp:
Ich habe mir ein mittlerweile recht umfangreiches Muster-Projekt als Vorlage mit den entsprechenden Bildfeldern, diversen Steuerkurven, Effekten usw. zusammengestellt.
Zusätzlich zur Haupt(Arbeits-)Timeline gibt es eine weitere "Vorlagen"-TL. In dieser sind „Makros“ wie die hier beschriebenen Radialblenden (inkl. Masken), „Text mit Schatten“ usw. hinterlegt. Die müssen dann nicht jedes Mal mühsam neu erstellt werden, sondern werden einfach von der Vorlagen-TL in die Arbeits-TL kopiert und dann entsprechend modifiziert.

Die oben geschilderten Abläufe sind Anregungen und lassen sich natürlich vielfältig modifizieren. Wer sich die Mühe machen möchte, das Ganze oder Teile daraus nachzubauen: Viel Spaß dabei!
Gerhard

Vielen Dank für diese sehr ausführliche Erklärung einer kreativen Überblendung!

Hallo zusammen,

habe in den letzten Tagen weiter mit radialen Blenden herumexperimentiert und dabei festgestellt, dass es unzählige Möglichkeiten gibt, mit rotierenden Masken raffinierte Überblendungen zu kreieren.
Zwei, die mir besonders gut gefallen haben, möchte ich hier nochmals beschreiben (dann ist aber Schluss, möchte hier nicht nerven...).


Bogenvariante

Das ist nur eine leichte Abwandlung der im ersten Beitrag vorgestellten Grundvariante. Dabei werden beide Masken (MaskeLinks und MaskeRechts) zeitgleich verdreht, und zwar MaskeLinks um -90° und MaskeRechts um +90°. Zusätzlich bekommen die beiden Masken jeweils eine Steuerspur Position/Zoom. Sobald sich die Masken nun (gleichzeitig) um 90° gedreht haben, werden sie zusammen um die halbe Bildhöhe (1050/2 = 525 px) nach unten verschoben und somit das ganze Bild sichtbar gemacht, für einen gleichmäßigen Verlauf idealerweise in der gleichen Zeitdauer der 90°-Drehung. Das Resultat ist eine bogenförmige Einblendung, die man vorzugsweise für vertikale Objekte verwenden kann (Wasserfall, Geysir, Turm usw.).

Wie das in der Timeline aussieht, zeigt nachfolgender Screenshot:
(Die Eigenschaften der einzelnen Keyframes für Position/Zoom sind gelb markiert.)


Im Anschluss (in der Timeline zu sehen) noch eine etwas abgewandelte Version, wo die Verschiebung schon nach der halben Zeitdauer der 90°-Drehung einsetzt, da ist noch mehr Dynamik drin.


Scheibenwischer

Eine ganz spezielle Blende ist der „Scheibenwischer“. Dazu benötigt man eine (TIF-)Maske mit der doppelten Höhe des Screens, also 1400 x 2100 px, wobei die obere Hälfte schwarz („durchsichtig“) ist und die untere transparent („deckend“).

Zur Realisierung dieser Überblendung benötigt man 3 Spuren

• in der oberen Spur die Maske (Maske & rendern)
• in der mittleren die maskierten Bilder (Content-Stapel)
• die untere ist eine normale Bildspur

Maskiert wird also nur eine Bildspur, die dann abwechselnd mit der „normalen“ Bildspur sichtbar wird.

Die Maske wird nun so platziert, dass die Schnittstelle durchsichtig/deckend exakt am unteren Screenrand zu liegen kommt, also Y-Position = 525 px.
Um die Maske im Screen wirklich 1:1 darzustellen, müsste sie auf 200% gezoomt werden. Da wegen der Eckenabdeckung beim Rotieren der Zoomfaktor doppelt so groß sein sollte, muss letztendlich bei Zoom 400% eingetragen werden.

Zum Schluss bekommt die Maske eine Steuerspur Rotation. Dort werden im zeitlichen Abstand der gewünschten „Wischfrequenz“ die Keyframes gesetzt, und zwar abwechselnd mit den Werten 0° und 180°. Wenn man hier mit SmartMove arbeitet, erzielt man eine recht wirklichkeitsnahe Wischerbewegung.

Der Bildwechsel geschieht schnittartig, also Überblendzeit=0. Die Bilder im Content-Stapel wechseln jeweils bei 180°, die Bilder in der normalen (unteren) Spur jeweils bei 0°. Sollen zwischen den Wischvorgängen Pausen eingefügt werden, müssen entsprechend immer zwei Keyframes mit denselben Werten gesetzt werden.

Wie das Ganze in der Timeline aussieht, zeigt folgender Screenshot:


Diese beiden Überblendungen kann man sich wieder in einem kurzen Video angucken, leider wieder nicht direkt, sondern nur über den Download:
https://magentacloud.de/s/K5NmGkBY5bCj7y4

Viele Grüße
Gerhard

Hallo Gerhard,

ich sag mal vielen lieben Dank für Deine Anregungen und die genaue Beschreibung!

Für mich als Anfänger in WingsX eine sehr abwechslungsreiche Möglichkeit mich - über die durchaus hilfreichen Tutorials hinaus - mit Bildfeldern und dynamischen Masken vertraut zu machen! Deine Videos kann ich gut als "Lösungsheft" gebrauchen um zu testen ob ich Deine Gedanken richtig interpretiert und die Tutorials noch richtig in Erinnerung habe....

... also: von mir aus musst Du noch lange nicht Schluss machen!
Liebe Grüße
WuLi

Hallo Gerhard,

ich schließe mich dem Vorredner bzw. -schreiber WuLi an. Solche Anregungen aus der Praxis regen die Kreativität an und öffnen Türen, weitere Möglichkeiten in den Tiefen von WingsX auszuprobieren.
Leider schaffe ich es (noch) nicht, Deine Beispieldatei zu öffnen, trotz Pro-Version 2.8 … aber das wird schon noch klappen, spätestens, wenn das 3.0-er Update erscheint.

Dionys Asenkerschbaumer

Hallo WuLi,

herzlichen Dank für Dein positives Feedback, habe mich sehr darüber gefreut!
Falls Du weitere Fragen hast oder sonst etwas unklar ist, melde Dich gerne...

Viele Grüße
Gerhard

Hallo Dionys,

Danke für die lobenden Worte!
Du bist jetzt der Erste, der sich meldet, dass das Musterprojekt nicht zu öffnen ist. Die Ursache ist schnell erklärt:
Nachdem bei mir Wings 2.8.2 bei jeder Aktion mit einem Video augenblicklich abgestürzt ist, hat mir Christoph dankenswerterweise eine Spezialverision zur Verfügung gestellt, damit ich weiter arbeiten kann. Das Muster-Projekt habe ich mit dieser Version abgespeichert. Habe jetzt mal schnell wieder 2.8.2 aufgespielt und das Projekt damit abgespeichert (nachdem dort keine Videos vorkommen, hat's funktioniert).

Ich habe den Link im ersten Beitrag abgeändert und ein neues Musterprojekt zum Download eingestellt. Jetzt solltest Du das Projekt öffnen können...
(Danke für den Hinweis !)

Viele Grüße
Gerhard

… wie durch ein Wunder kann ich das Projekt jetzt öffnen …

Ich hatte mir so etwas schon gedcht, da ich die Sache mit der Spezialversion hier im Forum mitverfolgt habe.
Besten Dank jedenfalls

Dionys

Hallo Gerhard,

sehr schön, dass du uns an deinen Entwicklungen für Shows teilhaben läßt. Das ist gut für uns alle! Danke dafür.

Ich war sicherheitshalber wieder auf 2.7 zurückgegangen, da ich mir nicht sicher war, ob Entwicklungen, die ich mit den Betaversionen 2.8. und 2.8.2 mache später in 3.0 noch laufen. Deshalb war ich davon ausgegangen, dass ich dein Projekt nicht zum Laufen bekam, es an meiner 2.7 Version liegt.

Da ein Wechsel zwischen den Versionen doch recht schnell geht, bin ich gerade mal wieder auf 2.8.2 hochgestiegen.

Die Mac-Anwender sollten beachten, dass sie die Dateien Windmühle1/2 ersetzen müssen, da die Umlaute im Namen zwischen Windows und Mac nicht identisch sind.

Achim