Kleines Rechenexempel - Timeline

[Utopian]

Schönen Guten Morgen !

Habe eine Frage bei der ich nicht ganz weiterkomme. Ich habe eine Sequenz von Bildern welche horizontal in einer ScrollPane angeordnet, den temporären Verlauf einer Videosequenz zeigen sollen. Hierzu setze ich eine Art "Zeiger" ein. D.h. der Zeiger (horizontaler Strich) soll veranschaulichen bei welchem Part sich das Video gerade befindet. Quasi wie in einer PostProduction Software a la Final Cut oder After Effects.

Die Bilder lassen sich per + und - vergrößern und verkleinern, was ein zusätzliches Problem darstellt. Der Zeiger soll von Links nach Rechts über jedes Bild bewegt werden, wobei jedes einzelne Bild das im Scroller dargestellt ist die gleiche Größe hat, den Zeiger aber je nach Dauer der VideoSequenz unterschiedlich über jedes einzelne Bild wandern lässt.

Nun komplett verwirrt? Gut, hier die Daten:

X:162 --> Die X-Position des Bildes...[veränderbar]
W:152 --> Die tatsächliche Größe des Bildes... [veränderbar]
ST:49.117 --> Die Start Zeit des Screenshots im Video [Millisekunden]
D:1.772 --> Die Dauer dieser Sequenz im Video [Millisekunden]

Meine Frage: Wie kann ich aus diesen Daten ableiten, wo der Zeiger zum Zeitpunkt X auf dem Bild Y (welches einen Abschnitt im Video von ST mit der Dauer D) stehen muss.

Meine Überlegung bisher:
ST + D stellt 100% für die Position des Zeigers da.
Nun muss ich die zeitl. Komponente auf X Koordinaten übertragen wobei:
X + W = 100% und X = 0% darstellen.

Folglich müsste dann...

X = ST --> Anfängliche X-Koordinate
X + W = ST + D --> Ende X-Koordinate

des ganzen sein. Wenn jemand von euch Rechnen kann bzw. mir ein paar Denkanstösse gibt wäre das echt super.

Gruß Christian

[bryan.fury]

was noch zu klären ist: wie ermittelst du den zeitpunkt X? (verwenden wir lieber 'Z' denn 'X' ist schon belegt)

ansonsten ist das nicht so schwer:

PHP-Code:

//Z = zeitpunkt zwischen ST und D;
var Z:Number = ...;
var ratio:Number = Z/D;
var zPos:Number = W*ratio + X;
Zeiger._x = xPos; 


edit:korrektur

[Utopian]

Zitat von bryan.fury

was noch zu klären ist: wie ermittelst du den zeitpunkt X? (verwenden wir lieber 'Z' denn 'X' ist schon belegt)

ansonsten ist das nicht so schwer:

PHP-Code:

//Z = zeitpunkt zwischen ST und D;
var Z:Number = ...;
var ratio:Number = Z/D;
var zPos:Number = W*ratio + X;
Zeiger._x = xPos; 


edit:korrektur

Hi !

Super, danke erstmal. Dachte schon mein Gequassel würde hier niemand verstehen, aber anscheinend doch.

Der Zeitpunkt Z liegt in Millisekunden genau bis auf Neun stellen hinter dem Komma vor. Werde deinen Vorschlag mal ausprobieren und dir sagen ob es funktioniert hat. Was jedoch noch zu Bedenken wäre ist das meine Liste nicht aus einem Bild besteht sondern aus sehr vielen die jeweils 10 Pixel Abstand zueinander haben.

Allerdings ist ST1 + D1 auch gleichzeitig ST2. D.h. Startzeit + Dauer des ersten Bildes ist gleichzeitig auch Startzeit des zweiten darauffolgenden Bildes. Wobei man den Zwischenraum von 10 Pixeln ignorieren kann.

Gruß Christian

[bryan.fury]

so mal überschlagsmäßig würde ich vorschlagen ein array mit deinen startzeiten zu erstellen.

PHP-Code:

var stArray = new Array (ST1, ST2, ST3, etc...) 


wenn du dann den gesamt-zeitpunkt 'gesZ' hast dann kannst du 'Z' folgendermaßen ermitteln.

PHP-Code:

for (var i=0; i<stArray.length; i++) {
  if (gesZ > stArray[i]){
    Z = gesZ - stArray[i]
    // wenn alle bilder gleich groß sind
    X = W*i + 10*(i-1);
    // schleife beenden
    break;
  }
} 


[Utopian]

Hi !

Da blicke ich jetzt nicht ganz durch.
Was soll gesZ und Z für einen Wert darstellen?

Gruß Christian

[bryan.fury]

'Z' ist ja nur der wert zwischen ST und D, d.h. der zeitpunkt innerhalb einer sequenz. 'gesZ' ist der zeitpunkt im gesammten video. ich nehme an, das (gesZ) ist der wert den du zur verfügung hast...



edit: in dem code oberhalb gehört "break" statt "return" (hab's schon ausgebessert)

edit: rechtschreibung

[Utopian]

Danke nochmal, habs nun endlich lösen können:

// Z  = CurrentTime in MS
// ST = StartTime in MS
// D  = Duration in MS
// W  = actualSize of Frame in PX
// X  = xPosition of Frame in PX

for(var i=0; i<SlideLoaded.length; i++){
	if(parseFloat(_root.CurrTimeContainer.text) > parseFloat(SlideLoaded[i].StringStartTime)){
		_root.slide.text = "Slide "+i;
		
        var Z:Number = parseFloat(_root.CurrTimeContainer.text) -  parseFloat(SlideLoaded[i].StringStartTime);
		
        var ST        = parseFloat(_global.SlideLoaded[i].StringStartTime);
        var D         = parseFloat(_global.SlideLoaded[i].StringDuration);
        var W         = parseFloat(_global.dS.sc1.content["slide"+i]._xscale) / 100 * 152; 
        var X         = parseFloat(_global.dS.sc1.content["slide"+i]._x);
	    
		X = (W*i + 10*(i-1)) +10;
	}
}

var ratio:Number = Z/D;
var xPos:Number = W*ratio + X;
_global.dS.sc1.content.Zeiger._x = xPos;

Läuft prima!

Gruß Christian

[Utopian]

Winziges Problemchen noch:

Beim Verkleinern und Vergrößern der Bilder läuft der Zeiger nicht mehr Synchron.
Ich denke es liegt daran:

X = (W*i + 10*(i-1)) +10;

Schließlich sind die Abstände nicht immer gleich 10 sondern je nach Größe der Slides auch kleiner.

Nachtrag beim Verkleinern geschieht:

Größe proportional von 100% um jeweils -10% ändern:

_global.dS.sc1.content["slide"+i]._xscale = _global.dS.sc1.content["slide"+i]._xscale -10;
_global.dS.sc1.content["slide"+i]._yscale = _global.dS.sc1.content["slide"+i]._yscale - 10;

X-Position:

_global.dS.sc1.content["slide"+a]._x + _global.dS.sc1.content["slide"+i]._xscale * 1.6;

Gruß Christian

[bryan.fury]

hmmmm,

das verstehe ich nicht:

PHP-Code:

var W         = parseFloat(_global.dS.sc1.content["slide"+i]._xscale) / 100 * 152; 


warum nicht einfach so:

PHP-Code:

var W         = parseFloat(_global.dS.sc1.content["slide"+i]._width) 


re: abstände (10)
die frage ist: soll der abstand zwischen den slides immer gleich sein?
wenn nicht, dann würde ich nicht die einzelnen slides verkleinern, sondern nur "_global.dS.sc1.content". dann könntest du einfach eine

var scale:Number=100;

einfügen, die du beim verkleinern änderst. dann kannst du die slides so ändern:

_global.dS.sc1.content._xscale = _global.dS.sc1.content._yscale = scale;

und dann:

X = ((W*i + 10*(i-1)) +10)*(scale/100);
break; // <--- das muss drinnen stehen, sonst wird der if-loop nicht unterbrochen!!!


noch'n paar tips:
1. nicht so viele _global's verwenden
2. für referenzen, die in einem code-block mehrmals vorkommen eigene variablen verwenden.
z.B:
var slide = _global.dS.sc1.content["slide"+i];
slide._xscale = slide._xscale -10;
slide._yscale = slide._yscale - 10;