Smoothing von Text (CS5 / AS3) / An ssandner

Indium1 · 19.01.2011

Hallo ssandner,

ein frohes neues Jahr wünsche ich Dir nachträglich und hoffe dass wenigstens Du genial rein gekommen bist und schön gefeiert hast! Mein start ins neue Jahr ist leider aufgrund einer schweren Erkältung, bei langweiligem Fernsehprogramm, im Bett verlaufen. Jetzt geht es mir wieder gut und ich kann mich erholt erneut den Kampf mit Flash stellen

.

Bezüglich Deiner Scrollbar (AS3 / CS5) bräuchte ich nochmals Deine Unterstützung und hoffe dass Du mir ein wenig unter die Arme greifen kannst.

Folgendes Vorhaben:

Ich möchte gerne dass beim Textscrollen ein Smooth Effekt erscheint. Hierbei soll, wenn gescrollt wird, der Inhalt des Textfensters (nicht das gesamte Textfenster) leicht nachlaufen. Ich hoffe Du weißt was ich meine. Wenn nicht, hier ein Beispiel:

Die Tutorials die ich gefunden habe beziehen sich aber immer auf eine Maske. Da mein Textfeld aber eine feste Höhe von 271 hat, diese Höhe auch beim Veröffentlichen so angezeigt wird, das Textfeld Dynamisch ist und per MySQL (XML) befüllt wird, kann ich es nicht nachvollziehen das hier noch Maskiert werden soll, da ja auch Deine Scrollbar sowie auch das Scrollen mit dem Mausrad ohne Maskierung funktioniert.

Also habe ich mal versucht dem Tut von Lee Brimelow zu folgen aber ohne Maske. Hierbei habe ich festgestellt dass der Smooth sich nicht auf den Text selbst sondern auf das gesamte Textfenster beläuft.

Wie kann ich es schaffen nur den Inhalt (also den Text) und nicht das gesamte Textfenster anzusprechen? Ich hoffe Du hast da eine Lösung parat.

Vielen Dank im Voraus für Deine Antwort.

Liebe Grüße nach Hermannsburg sendet Dir,

Indium1

ssandner · 19.01.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo Indium1.
Hab mir gerade das Tut von Lee Brimelow angeschaut. Kannte ich noch nicht - sehr gut erklärt. Sein Ansatz über tween per actionscript kam mir auch gleich in den Sinn. Habe so etwas schon mal mit einem Panel gemacht. Ich werde mal rumprobieren, wie man dies auf einen Text umsetzen kann. Bin am Ball, kann aber ein bisschen dauern (muss ja auch etwas für mein Geld tun - wenn ich Luft habe, beschäftige ich mich damit). Meld mich wieder.

Indium1 · 19.01.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo ssandner,

das ist sehr nett von Dir, vielen Dank!

Ich habe auch schon rumprobiert aber, wie schon geschrieben wurde das gesamte Textfeld getweent und nicht der Text selbst!

Hier mein letzter versuch, ruckelt zwar ein wenig und das gesamte Textfeld springt beim ersten Tween zwei Zeilen nach oben aber man bemerkt schon einen Smooth Effekt. Vielleicht kannst Du ja was damit anfangen:

PHP:

var bounds:Rectangle=new Rectangle((info_textfenster.scrollbalken_eins.x,457),info_textfenster.scrollbalken_eins.y,0,250);
var scrolling:Boolean=false;

var yOffset:Number;
var yMin:Number = 39;
//var yMax:Number = info_textfenster.scrollbalkenhintergrund_eins.height - info_textfenster.scrollbalken_eins.height;
var yMax:Number = 289;

stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
stage.addEventListener(Event.ENTER_FRAME, enterHandler);
info_textfenster.scrollbalken_eins.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
info_textfenster.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OVER,overF);
info_textfenster.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OUT,outF);
//info_textfenster.foto_beschreibung.multiline=true;
//info_textfenster.foto_beschreibung.wordWrap=true;

function startScroll(ev:MouseEvent):void
{
 scrolling=true;
 info_textfenster.scrollbalken_eins.startDrag(false,bounds);

stage.addEventListener(MouseEvent.MOUSE_MOVE, smooth);
yOffset = mouseY - info_textfenster.scrollbalken_eins.y;
}

function stopScroll(ev:MouseEvent):void
{
 scrolling=false;
 info_textfenster.scrollbalken_eins.stopDrag();

stage.removeEventListener(MouseEvent.MOUSE_MOVE, smooth);
}

function smooth(ev:MouseEvent):void
{
info_textfenster.scrollbalken_eins.y = mouseY - yOffset;
if(info_textfenster.scrollbalken_eins.y <= yMin)
info_textfenster.scrollbalken_eins.y = yMin;
if(info_textfenster.scrollbalken_eins.y >= yMax)
info_textfenster.scrollbalken_eins.y = yMax;
var sp:Number = info_textfenster.scrollbalken_eins.y / yMax;

Tweener.addTween(info_textfenster.foto_beschreibung, {y:(-sp*(info_textfenster.foto_beschreibung.height-info_textfenster.scrollbalken_eins.height)), time:1});

ev.updateAfterEvent();
}

Liebe Grüße,

Indium1

ssandner · 20.01.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Tja - längst nicht so einfach, wie ich dachte. Meine Idee mit dem Tweening klappt auch nicht, auch mir wandert das Textfeld und nicht der Text. Mit deinem script habe ich mich noch nicht beschäftigt, dazu müsste ich das erst nachbauen. Nach längerer Recherche gestern, habe ich auf jeden Fall etwas fertiges im Netz gefunden, vielleicht kannst du das ja verwenden und an deine Anforderungen anpassen:

(ich bin noch nicht ganz durch den Code durchgestiegen, die Hauptarbeit liegt bei diesem Beispiel in der Datei scrollbar.as im Ordner as3).
Ich bleibe aber auch noch am Ball, hab da noch eine Idee (vielleicht kann man ja eine Beschleunigung/Verzögerung selbst scripten, die dann unseren ursrünglichen Ansatz mit scollV und maxScrollV unterstützt).

ssandner · 20.01.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Update!!
Tweening geht doch, aber nicht mit der Tween-Klasse von Flash. Ich habe mir mal diese caurina tweening angeschaut, die Lee Brimelow in seinem Tutorial verwendet.
Dort kann man nämlich beliebige Eigenschaften eines Objektes tweenen.
Die Tween-Klasse gibt es hier:

Ich beziehe mich jetzt auf die ursprüngliche Steuerung des Textfeldes mit scrollV, wie wir sie letztes Jahr erarbeitet haben:

Die Klassen kopiert man in sein Projektverzeichnis (Bsp. Ordner "caurina", Unterordner "transitions")

Dann die Klassen in der fla importieren:

Code:

import caurina.transitions.*;

In der Funktion die das Scrollen steuert habe ich dann folgenden Code hinzugefügt:

Code:

Tweener.addTween(this.text_mc.scrollText_txt,{scrollV:+1, time:1, transition:"easeOutQuart"});

und siehe da, der Text läuft sanft nach, wenn man die Scrollbar betätigt.
Jetzt muss man nur noch mit den Properties rumspielen (Art der Transition, Zeit usw.)

Ich hoffe das hilft dir weiter,.

Indium1 · 21.01.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Guten morgen ssandner,

EIN FETTES DANKESCHÖN AN DICH!!!

Ich werde mich am Wochenende damit mal eingehend beschäftigen und gebe Dir dann die nächsten Tage bescheid!

Liebe Grüße,

Indium1

Indium1 · 30.01.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hi ssandner,

aus einem Wochenende ist jetzt gleich eine ganze Woche geworden aber leider bin ich immer noch nicht viel weiter gekommen.

Als erstes habe ich mir das flash-scrollbar-component von www.flafolder.com angeschaut und dabei festgestellt dass auch hier mit einer Maske gearbeitet wird. Zudem ist der AS Code ziemlich überladen und für meine wenigen Gehirnzellen viel zu Komplex!

Also wagte ich mich an Deinen zweiten Beitrag ran (Tween Klasse von Caurina).
Den Tweener habe ich dann nach und nach in allen drei functions ausprobiert:

PHP:

  1. info_textfenster.scrollbalken_eins.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
  2. stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
  3. stage.addEventListener(Event.ENTER_FRAME, enterHandler);

Folgendes ist dabei herausgekommen;

Funktion 1. (startScroll):

PHP:

  function startScroll(ev:MouseEvent):void
  {
   scrolling=true;
   
   Tweener.addTween(this.info_textfenster.foto_beschreibung,{scrollV:+1, time:1, transition:"easeOutQuart"});
   
   info_textfenster.scrollbalken_eins.startDrag(false,bounds);
  }

Normales Scrollen (rauf/runter) funktionierte. Ein Smooth-Effekt trat aber erst ein wenn auf den Scroller das zweite Mal draufgeklickt wurde. Hierbei rollte der Text komplett nach oben zum Anfang zurück.

Funktion 2. (stopScroll):

PHP:

  function stopScroll(ev:MouseEvent):void
  {
   Tweener.addTween(this.info_textfenster.foto_beschreibung,{scrollV:+1, time:1, transition:"easeOutQuart"});
   
   scrolling=false;
   info_textfenster.scrollbalken_eins.stopDrag();
  }

Normales Scrollen (rauf/runter) funktionierte. Ein Smooth-Effekt trat aber erst ein wenn man den Scroller losließ. Auch hier rollte der Text komplett nach oben zum Anfang zurück.

Funktion 3. (enterHandler):

PHP:

  function enterHandler(event:Event)
  {
   
  Tweener.addTween(this.info_textfenster.foto_beschreibung,{scrollV:+1, time:1, transition:"easeOutQuart"});
   
   if (scrolling==true)
   {
    info_textfenster.foto_beschreibung.scrollV = Math.round(((info_textfenster.scrollbalken_eins.y - bounds.y)/250)*info_textfenster.foto_beschreibung.maxScrollV);
   }
  }

Normales Scrollen (rauf/runter) war zwar möglich, aber wenn man stehen blieb (mit gedrückter Maustaste) ruckelte der Text permanent auf und ab. Lies man dann die Maustaste los, rollte der Text komplett nach oben zum Anfang zurück.

Also versuchte ich den Tweener im IF unterzubringen um zu schauen welche Reaktion dort stattfindet:

PHP:

  function enterHandler(event:Event)
  {
   if (scrolling==true)
   {
    info_textfenster.foto_beschreibung.scrollV = Math.round(((info_textfenster.scrollbalken_eins.y - bounds.y)/250)*info_textfenster.foto_beschreibung.maxScrollV);
   
  Tweener.addTween(this.info_textfenster.foto_beschreibung,{scrollV:+1, time:1, transition:"easeOutQuart"});   
   }
  }

Auch hier das gleiche Ergebnis. Normales Scrollen (rauf/runter) war zwar möglich, aber wenn man stehen blieb (mit gedrückter Maustaste) ruckelte der Text permanent auf und ab. Lies man die Maustaste los, rollte der Text komplett nach oben zum Anfang zurück.

Nach diesem Versuchen habe ich mir das Tut von Lee Brimelow noch mal angeschaut und versucht Deinen Code darin zu Implementieren! Nach mindestens 50 Versuchen hier mein letzter:

PHP:

  var yOffset:Number;
  var yMin:Number = 39;
  var yMax:Number = info_textfenster.scrollbalkenhintergrund_eins.height - info_textfenster.scrollbalken_eins.y;
   
  info_textfenster.scrollbalken_eins.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
  stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
  stage.addEventListener(Event.ENTER_FRAME, enterHandler);
   
  function startScroll(ev:MouseEvent):void
  {
   scrolling=true;
   
  stage.addEventListener(MouseEvent.MOUSE_MOVE, smooth);
  yOffset = mouseY - info_textfenster.scrollbalken_eins.y;
   
   info_textfenster.scrollbalken_eins.startDrag(false,bounds);
  }
   
  function stopScroll(ev:MouseEvent):void
  {
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, smooth);
   
   scrolling=false;
   info_textfenster.scrollbalken_eins.stopDrag();
  }
   
  function smooth(ev:MouseEvent):void
  {
  info_textfenster.scrollbalken_eins.y = mouseY - yOffset;
  if(info_textfenster.scrollbalken_eins.y <= yMin)
  info_textfenster.scrollbalken_eins.y = yMin;
  if(info_textfenster.scrollbalken_eins.y >= yMax)
  info_textfenster.scrollbalken_eins.y = yMax;
  var sp:Number = info_textfenster.scrollbalken_eins.y / yMax;
   
  Tweener.addTween(info_textfenster.foto_beschreibung, {scrollV:(-sp*(info_textfenster.foto_beschreibung.scrollV-info_textfenster.scrollbalkenhintergrund_eins.y)), time:1});
   
  ev.updateAfterEvent();
  }

Auch hier ist das Ergebnis nicht das erwünschte.
Den Scroller kann man nicht bis nach unten ziehen, beim Scollen wird der Text zwar ab und zu gesmootht aber nur wenn man nach unten zieht. Der Smootht wirkt sich aber in die Gegenrichtung aus. Scrollt man zum Anfang zurück dann wird der Anfang des Textes aber nicht angezeigt. Nur wenn man nochmals auf den Scroller klickt, springt der Text zum Anfang.

Ich hoffe Du kannst etwas damit anfangen was ich geschrieben habe und hast ein paar Vorschläge parat. Mit dem scrollV und/oder dem maxScrollV sind wir jedenfalls auf dem richtigen Weg!

Liebe Grüße,

Indium1

Indium1 · 19.02.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo ssandner,

ich würde Dir ja gerne die fröhliche Nachricht überbringen das es geklappt hat aber die Realität sieht leider anders aus. Nach meinem letzten Thread und weiteren 20 Tagen Erfolglosigkeit bin ich wirklich am ende meiner Kräfte. Da ich von Dir bis jetzt nichts mehr gehört habe, gehe ich davon aus, dass auch Du keine weiteren Vorschläge mehr in petto hast.

Folgendes kann ich Dir aber Berichten: Ein Tween kommt zustande!

Wenn ich den Scrollbalken von unten nach oben ziehe dann ist der Tween einigermaßen angenehm. Hier tweent er den Text von oben nach unten! Er verliert zwar manchmal den Startpunkt 0 des Textes aber das ist ja jetzt erst einmal nicht das Problem.

Sobald ich aber den Scrollbalken von oben nach unten ziehe, dann scrollt der Text von unten nach oben was auch richtig ist. Beim stoppen des Scrollens wird der Text aber nach unten getweent. Das darf er aber nicht.

Ich glaube das liegt irgendwie an der If Schleife aber auch hier habe ich schon rumexperimentiert wie blöde.

Schau Dir bitte mal nachfolgenden Code an:

PHP:

  var yOffset:Number;
  var yMin:Number = 0;
  var yMax:Number = info_textfenster.scrollbar_eins.scrollbalkenhintergrund_eins.height - info_textfenster.scrollbar_eins.scrollbalken_eins.height;
   
  info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
  stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
  stage.addEventListener(Event.ENTER_FRAME, enterHandler);
  info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OVER,overF);
  info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OUT,outF);
   
  function startScroll(ev:MouseEvent):void
  {
   scrolling=true;
   stage.addEventListener(MouseEvent.MOUSE_MOVE, smooth);
   yOffset = mouseY - info_textfenster.scrollbar_eins.scrollbalken_eins.y;
   info_textfenster.scrollbar_eins.scrollbalken_eins.startDrag(false,bounds);
  }
   
  function stopScroll(ev:MouseEvent):void
  {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, smooth);
   scrolling=false;
   info_textfenster.scrollbar_eins.scrollbalken_eins.stopDrag();
  }
   
  function smooth(ev:MouseEvent):void
  {
   info_textfenster.scrollbar_eins.scrollbalken_eins.y = mouseY - yOffset;
   if(info_textfenster.scrollbar_eins.scrollbalken_eins.y <= yMin)
   info_textfenster.scrollbar_eins.scrollbalken_eins.y = yMin;
   if(info_textfenster.scrollbar_eins.scrollbalken_eins.y >= yMax)
   info_textfenster.scrollbar_eins.scrollbalken_eins.y = yMax;
   var sp:Number = info_textfenster.scrollbar_eins.scrollbalken_eins.y / yMax;
   Tweener.addTween(info_textfenster.foto_beschreibung, {scrollV:(-sp*(info_textfenster.foto_beschreibung.maxScrollV-info_textfenster.foto_beschreibung.height)), time:1});
   ev.updateAfterEvent();
  }

Vielleicht fällt Dir ja noch irgendetwas auf was falsch sein könnte!

Vielen Dank und liebe Grüße,

Indium1

ssandner · 21.02.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo Indium,
du hattest richtig vermutet, mir ist auch noch keine neue Idee gekommen. Hatte allerdings auch wenig Zeit, nich darun zu kümmern. Ich schau mir dein script heute mal an, vielleicht fällt mir etwas ein. Ich meld mich.

P.S. Vielleicht hat ja noch jemand hier im forum eine Idee.

Nachtrag:

Also formal kann ich in deinem Script keinen Fehler entdecken, allerdings kann ich es nicht testen, da es sich nur um einen Teil deines Scriptes handelt, selbst wenn ich die Elemente auf der Bühne anlege, hagelt es Fehlermeldungen.Fangen wir noch mal von vorne an. Hier mein script mit smooth, welches zumindest bei mir funktioniert:

Code:

import caurina.transitions.*;

var someText:String="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.";


var bounds:Rectangle=new Rectangle(this.info_textfenster.scrollbar_eins.scrollbalken_eins.x,this.info_textfenster.scrollbar_eins.scrollbalken_eins.y,0,200);
var scrolling:Boolean=false;
this.info_textfenster.foto_beschreibung.scrollText_txt

stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
stage.addEventListener(Event.ENTER_FRAME, enterHandler);
this.info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
this.info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OVER,overF);
this.info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OUT,outF);
this.info_textfenster.foto_beschreibung.addEventListener(MouseEvent.MOUSE_WHEEL, moveScrollbar);
this.info_textfenster.foto_beschreibung.scrollText_txt.text=someText;
this.info_textfenster.foto_beschreibung.scrollText_txt.multiline=true;
this.info_textfenster.foto_beschreibung.scrollText_txt.wordWrap=true;

if (this.info_textfenster.foto_beschreibung.scrollText_txt.numLines<=10)
{
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.visible=false;
}
function startScroll(event:Event)
{
	scrolling=true;
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.startDrag(false,bounds);
}

function stopScroll(event:Event)
{
	scrolling=false;
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.stopDrag();
}
function moveScrollbar(event:MouseEvent)
{
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.y=bounds.y + (this.info_textfenster.foto_beschreibung.scrollText_txt.scrollV * 200/this.info_textfenster.foto_beschreibung.scrollText_txt.maxScrollV);
}
function enterHandler(event:Event)
{
	if (scrolling==true)
	{
		this.info_textfenster.foto_beschreibung.scrollText_txt.scrollV = Math.round(((this.info_textfenster.scrollbar_eins.scrollbalken_eins.y - bounds.y)/200)*this.info_textfenster.foto_beschreibung.scrollText_txt.maxScrollV);
		Tweener.addTween(this.info_textfenster.foto_beschreibung.scrollText_txt,{scrollV:+1, time:1, transition:"easeOutQuart"});
	}
}

function overF(event:MouseEvent)
{
	Mouse.cursor="hand";
}
function outF(event:MouseEvent)
{
	Mouse.cursor="auto";
}

Indium1 · 24.02.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo ssandner,

ein herzliches Dankeschön für Deine Antwort!

Die letzten drei Tage war ich auch viel unterwegs und daher konnte ich mich erst eben mit Deinem Vorschlag beschäftigen. Um es kurz zu machen, leider ist das Ergebnis, trotz Deines Codes alle Instanzen mit .this anzusprechen, dass gleiche wie schon am 30.01.2011 berichtet (siehe: Funktion 3. (enterHandler) / PHP Teil 2 ):

Normales Scrollen (rauf / runter) war zwar möglich, aber wenn man stehen blieb (mit gedrückter Maustaste) ruckelte der Text permanent leicht auf und ab. Lies man die Maustaste los, rollte der Text (mit Smooth Effekt) komplett nach oben zur allerersten Zeile zurück.

Wie ist es denn bei Dir wenn Du die Maustaste los lässt? Rollt der Text dann auch komplett zum Anfang mit Smooth oder Smootht er wirklich nur eine Zeile vor oder zurück? Würde mich mal Interessieren wie das bei Dir ist!

Ach ja, fast vergessen!
Die Texte kommen bei mir aus einer MySQL Datenbank und werden auf einer XML ausgegeben. Textfeldausgabe in AS3 und Flash ist htmlTEXT.

PHP:

  info_textfenster.foto_beschreibung.htmlText = butterfly_foto_xml.bild[xml_variablen_anzeigen].tbild.toString();

Zum Testen habe ich mehrere Textlängen verwendet. U. a. ist da auch eine megalange aus dem Internet gezogene deutsche AGB dabei. Diese habe ich mit vielen Absätzen und Stichworten unterteilt. Für mich als nicht Lateiner ist es einfach übersichtlicher und man findet schneller einen Fehler als mit lateinischen Blocksatz!

Freue mich auf Dein Statement!

Liebe Grüße,

Indium1

ssandner · 28.02.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo Indium,

du hast recht ist mir noch nicht aufgefallen, auch bei mir ruckelt der Text bei gedrückter Maustaste-ich habe immer nur auf das Tweening geachtet.
Aber ich glaube, ich habe eine Lösung gefunden: man muss überprüfen, ob sich die Position des Scrollbalkens (oder auch des Textes) bei gedrückter Maustaste verändert hat und nur dann die Bewegung ausführen.
Ich habe das folgendermaßen gelöst:
- Anlegen einer Zwischenvariable "temp_pos":

Code:

var temp_pos:int=0;

- bei startScroll befüllen der Zwischenvariable mit der Position des Scrollbalkens:

Code:

function startScroll(event:Event)
{
	scrolling=true;
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.startDrag(false,bounds);
	temp_pos=this.info_textfenster.scrollbar_eins.scrollbalken_eins.y;
}

- Im enterHandler wird der text nur bewegt, wenn sich die Position geändert hat (Zur Sicherheit habe ich auch noch die maximale Position mit reingenommen, damit der Text am Ende auch nicht ruckelt):

Code:

function enterHandler(event:Event)
{
	if (scrolling==true&&temp_pos!=this.info_textfenster.scrollbar_eins.scrollbalken_eins.y)
	{

		if (this.info_textfenster.foto_beschreibung.scrollText_txt.scrollV<this.info_textfenster.foto_beschreibung.scrollText_txt.maxScrollV)
		{

			this.info_textfenster.foto_beschreibung.scrollText_txt.scrollV = Math.round(((this.info_textfenster.scrollbar_eins.scrollbalken_eins.y - bounds.y)/200)*this.info_textfenster.foto_beschreibung.scrollText_txt.maxScrollV);
			Tweener.addTween(this.info_textfenster.foto_beschreibung.scrollText_txt,{scrollV:+1, time:1, transition:"easeOutQuart"});
		}
	}
}

Probiers mal aus, bei mir klappt es.

Indium1 · 01.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Guten morgen ssandner,

Deine Geduld das Problem zu lösen ist sehr lobenswert aber irgendwie habe ich momentan das Gefühl das wir aneinander vorbei reden.

Du fragst Dich jetzt bestimmt wie ich darauf komme, dann schaue mal bitte:

1. Lade Dir zuerst einmal das ZIP File (oopscroll1.zip) von Lee Brimelow herunter:

http://gotoandlearn.com/files/oopscroll1.zip

In der ZIP Datei befindet sich eine Datei die sich prototype.swf nennt.

Diese machst Du mit dem Adobe Flash Player auf, scrollst mal langsam, sowie auch schnell, rauf und runter und lässt die Maustaste los.

Den Tween und Stopp Effekt (in allen Scroll Richtungen) prägst Du dir jetzt ein, denn so sollte es nämlich nachher im Textfenster von Flash dargestellt werden.

2. Jetzt nimmst Du Dein Script und ersetzt den lateinischen Text in der var someText:String mit nachfolgendem Text (alle Absätze bitte beibehalten und wohlmöglich das Textfeld als htmlText deklarieren). Achte mal bitte auf den ersten Satz bevor Du runterscrollst:

PHP:

Hallo ssandner, wenn Du nach dem Scrollen diese Begrüßung wieder siehst
dann läuft irgendetwas falsch! 
   
Die Allgemeinen Geschäftsbedingungen, auch AGB genannt, sorgen vor 
Vertragsabschluss für klare Verhältnisse im täglichen Geschäftsverkehr. 
Allzu oft aber befinden sich keine oder unzureichende AGB auf einer 
Webseite. Gerade für Online-Shops, aber auch für Anbieter von 
werbefinanzierten Content-Websites sind rechtssichere AGB unerlässlich.
   
Da es sich auch im Internet keineswegs um einen rechtsfreien Raum 
handelt, sollte ein Unternehmen ständig aktuelle AGB besitzen und diese 
einsetzen.
   
Damit schwarze Schafe nicht unrechtmäßig vorgehen, hat der Gesetzgeber 
zum Schutze der Vertragspartner das AGB-Gesetz geschaffen, welches seit 
2001 in das Bürgerliche Gesetzbuch integriert wurde. Formulierungen 
werden hier sehr genau definiert, d. h. um eigene wasserdichte AGB auf der 
Webseite zu präsentieren, muss man in der Regel einen Anwalt 
beauftragen.
   
Und genau hier sind wir für Sie da. Wir stellen Ihnen auf dieser 
Internetplattform kostenlos, unverbindlich und werbefrei, vorformulierte 
aktuelle AGB-Textbausteine für Ihre Webseite zur Verfügung. Sie können 
die Inhalte selbst stets den neuesten Urteilen und aktuellen juristischen 
Entwicklungen anpassen. Wir informieren Sie über wichtige Änderungen 
und Urteile automatisch, so dass Sie dann Ihre AGB selbst entsprechend 
anpassen können. So sparen sich Zeit, Geld und Nerven.
   
Wichtiger Hinweis: Das kostenlose Angebot von agb.de beinhaltet 
ausschließlich vorformulierte Muster AGB-Textbausteine, sowie 
Informationen per Newsletter über Urteile und evtl. gesetzliche Änderungen. 
Dieses Angebot ist für die meisten Online-Shops und Webmaster 
ausreichend. Individuelle Rechtsberatung, wie z.B. eine automatische 
Anpassung Ihrer AGB dürfen wir Ihnen aus gesetzlichen Gründen nur über 
unseren Vertragsanwalt anbieten.

Die komplette Einbindung der AGB Vorlagen in Ihre Homepage ist einfach 
und schnell und bedarf keiner großen Kenntnisse in der Programmierung 
von HTML-Seiten.";

Vielleicht läuft bei mir ja auch irgendetwas bei der Programmierung schief. Hast Du die Möglichkeit Deine SWF zu veröffentlichen oder zum Download anzubieten? Wenn nicht dann richte ich mal eine E-Mail ein, dann könntest Du Deine SWF mal senden.

Liebe Grüße,

Indium1

ssandner · 01.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Okay.Now I got it. Der Fehler tritt bei mir auch auf, ist mir bei meinem lateinischen Blocksatz nur nicht aufgefallen. Ich bin schon mal soweit, dass der Fehler im Tween-Befehl

Code:

Tweener.addTween(this.info_textfenster.foto_beschreibung.scrollText_txt,{scrollV:+1, time:1, transition:"easeOutQuart"});

liegt. Ich werde mich nochmal damit beschäftigen und unser "Werk" mit dem von Lee Brimelow vergleichen

Indium1 · 01.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo ssandner,

tja, die bösen bösen Blocksätze sind wieder einmal Schuld! :lol:

Nein, mal im ernst. Ich glaube, wenn ich einen Blocksatz in Deutsch veröffentlicht hätte, wäre mir das auch passiert!

Das der Fehler im Tween-Befehl liegt halte ich auch für sehr nahe liegend. Dennoch habe ich auch das Gefühl das der Tween-Befehl alleine nur mit +1 nicht ausreicht. Das sieht man sehr gut an dem Tut von Lee Brimelow weil hier mit If’s gearbeitet wird. Irgendwie muss man vorher die aktuelle Position des Scrollbalkens sowie die Position des Textes (nicht das gesamte Textfenster sondern nur der reine Text) speichern und dann berechnen wie weit der Text beim Scrollen oder Scrollstopp nach oben oder unten getweent werden darf.

Für Versuche nimmst Du am besten die Original FLA (das Actionscript) von Lee Brimelow, vielleicht kommst Du damit besser zurecht als mit dem Code den ich hier veröffentlicht habe.

Liebe Grüße,

Indium1

ssandner · 04.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Ich glaube, ich habe es!!
Ich bin nochmal von vorne angefangen und habe alles neu gescriptet-als Anleitung habe ich das Tut von Lee Brimelow genommen-bei mir scheint es zu funktionieren:

Code:

import caurina.transitions.*;

var someText:String="<p>Hallo ssandner, wenn Du nach dem Scrollen diese Begrüßung wieder siehst dann läuft irgendetwas falsch!</p><p>Die Allgemeinen Geschäftsbedingungen, auch AGB genannt, sorgen vor Vertragsabschluss für klare Verhältnisse im täglichen Geschäftsverkehr. Allzu oft aber befinden sich keine oder unzureichende AGB auf einer Webseite. Gerade für Online-Shops, aber auch für Anbieter von werbefinanzierten Content-Websites sind rechtssichere AGB unerlässlich.</p><p>Da es sich auch im Internet keineswegs um einen rechtsfreien Raum handelt, sollte ein Unternehmen ständig aktuelle AGB besitzen und diese einsetzen.</p> <p>Damit schwarze Schafe nicht unrechtmäßig vorgehen, hat der Gesetzgeber zum Schutze der Vertragspartner das AGB-Gesetz geschaffen, welches seit 2001 in das Bürgerliche Gesetzbuch integriert wurde. Formulierungen werden hier sehr genau definiert, d. h. um eigene wasserdichte AGB auf der Webseite zu präsentieren, muss man in der Regel einen Anwalt beauftragen.</p><p>Und genau hier sind wir für Sie da. Wir stellen Ihnen auf dieser Internetplattform kostenlos, unverbindlich und werbefrei, vorformulierte aktuelle AGB-Textbausteine für Ihre Webseite zur Verfügung. Sie können die Inhalte selbst stets den neuesten Urteilen und aktuellen juristischen Entwicklungen anpassen. Wir informieren Sie über wichtige Änderungen und Urteile automatisch, so dass Sie dann Ihre AGB selbst entsprechend anpassen können. So sparen sich Zeit, Geld und Nerven.</p><p>Wichtiger Hinweis: Das kostenlose Angebot von agb.de beinhaltet ausschließlich vorformulierte Muster AGB-Textbausteine, sowie Informationen per Newsletter über Urteile und evtl. gesetzliche Änderungen. Dieses Angebot ist für die meisten Online-Shops und Webmaster ausreichend. Individuelle Rechtsberatung, wie z.B. eine automatische Anpassung Ihrer AGB dürfen wir Ihnen aus gesetzlichen Gründen nur über unseren Vertragsanwalt anbieten.</p><p>Die komplette Einbindung der AGB Vorlagen in Ihre Homepage ist einfach und schnell und bedarf keiner großen Kenntnisse in der Programmierung von HTML-Seiten.</p>";


var yOffset:Number;
var yMin:Number = 0;
var yMax:Number = this.info_textfenster.scrollbar_eins.scrollbalkenhintergrund_eins.height;
this.info_textfenster.foto_beschreibung.scrollText_txt.htmlText=someText;
this.info_textfenster.foto_beschreibung.scrollText_txt.multiline=true;
this.info_textfenster.foto_beschreibung.scrollText_txt.wordWrap=true;
stage.addEventListener(MouseEvent.MOUSE_UP, thumbUp);
this.info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.MOUSE_DOWN, thumbDown);
this.info_textfenster.foto_beschreibung.addEventListener(MouseEvent.MOUSE_WHEEL, wheelScrollbar);
this.info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OVER,overF);
this.info_textfenster.scrollbar_eins.scrollbalken_eins.addEventListener(MouseEvent.ROLL_OUT,outF);

function thumbDown(e:MouseEvent):void
{
	stage.addEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
	yOffset = mouseY - this.info_textfenster.scrollbar_eins.scrollbalken_eins.y;
}
function thumbUp(e:MouseEvent):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
}

function thumbMove(e:MouseEvent):void
{
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.y = mouseY - yOffset;
	if(this.info_textfenster.scrollbar_eins.scrollbalken_eins.y <= yMin)
		this.info_textfenster.scrollbar_eins.scrollbalken_eins.y = yMin;
	if(this.info_textfenster.scrollbar_eins.scrollbalken_eins.y >= yMax)
		this.info_textfenster.scrollbar_eins.scrollbalken_eins.y = yMax;
	var sp:Number = this.info_textfenster.scrollbar_eins.scrollbalken_eins.y / yMax;
	Tweener.addTween(this.info_textfenster.foto_beschreibung.scrollText_txt,{scrollV: (sp*this.info_textfenster.foto_beschreibung.scrollText_txt.maxScrollV), time:0.5, transition:"easeOutQuart"});
	e.updateAfterEvent();
}

function wheelScrollbar(event:MouseEvent)
{
	this.info_textfenster.scrollbar_eins.scrollbalken_eins.y=this.info_textfenster.scrollbar_eins.scrollbalkenhintergrund_eins.y + (this.info_textfenster.foto_beschreibung.scrollText_txt.scrollV * 200/this.info_textfenster.foto_beschreibung.scrollText_txt.maxScrollV);
	event.updateAfterEvent();
}
function overF(event:MouseEvent)
{
	Mouse.cursor="hand";
}
function outF(event:MouseEvent)
{
	Mouse.cursor="auto";
}

Evt. musst du die Variable yMax anpassen, ich hatte Probleme bei mir, weil mein Registrierungspunkt der Scrollbar nicht wie bei brimelow oben sondern in der Mitte war.
Deshalb heisst es bei mir

Code:

var yMax:Number = this.info_textfenster.scrollbar_eins.scrollbalkenhintergrund_eins.height;

Nach Brimelows Tut müsste es eigentlich

Code:

var yMax:Number = this.info_textfenster.scrollbar_eins.scrollbalkenhintergrund_eins.height - this.info_textfenster.scrollbar_eins.scrollbalken_eins.height;

heissen, aber da ist bei mir die scrollbar bei Mousedown in die Mitte gesprungen. Teste es aus, bei Bedarf kann ich dir auch meine fla zur Verfügung stellen.

Gruß

Stephan

Indium1 · 05.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo Stephan (hoffe das ich Dich so anreden darf),

wollte Dir nur mal kurz Bescheid geben das es bis jetzt noch nicht so funktioniert wie es sein sollte. Es wäre nett von Dir wenn Du Deine FLA und/oder SWF Datei mal bereitstellen könntest. Vielen Dank!

Im Übrigen, mein Name ist Michael und ich wünsche Dir jetzt ersteinmal ein erholsames Wochenende.

Gruß,

Michael

ssandner · 07.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Ich kenne keinen free webspace, wo man flash-dateien hochladen kann. Am besten schickst du mir eine PN mit einer email-adresse, an die ich meine Fla-Datei schicken kann.
Gruß Stephan

Indium1 · 10.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Hallo Stephan,

nochmals vielen Dank für die Zusendung der fla-Datei und Deiner Tatkraft das Problem in den Griff zu bekommen!

Nach langen ausprobieren mit den 41 Transitions vom Tweener komme ich auf das Ergebnis dass beim Scrollen von Zeile zu Zeile gesprungen wird. Dies wird zwar durch den Smooth leicht abgebremst aber ein flüssiges Scrollen mit Smooth wie bei der SWF Datei von Lee Brimelow kommt nicht zustande. Also habe ich den Zeilenabstand von 2 auf 0 und auch das Verhalten von Mehrzeilig auf Einzeilig gesetzt aber auch hier ist ein flüssiges Scrollen mit Smooth nicht möglich. Wie weit man das Textfeld jetzt noch mit AS3 Konfigurieren kann, das kein Springen zustande kommt, kann ich nicht sagen. Ich glaube aber dass es hier kaum noch Möglichkeiten gibt dies irgendwie abzustellen.

Man könnte vielleicht den Text als Bitmap ausgeben aber dann könnte niemand mehr den Text markieren und/oder kopieren. Also fällt diese initiative schon mal weg.

Tja, jetzt stehen wir wieder am Anfang und müssen wohl oder übel das ganze Textfeld mit Maskierung Scrollen (wie bei Lee Brimelow) damit ein vernünftiger Smooth ersichtlich wird. Hierbei tritt aber ein neues Problem mit der Programmierung auf! Wie Du schon weißt erhalte ich die Texte mit unterschiedlicher Länge aus einer XML (MySQL Basiert).
Was also muss dann passieren?:

1. Das Textfenster hinter der Maskierung muss sich in der Höhe am Text anpassen;
2. Der Scroller muss aber auch mit diesen Werten irgendwie zurechtkommen.

Aber vielleicht hast Du noch andere Ideen wie man dem Problem zu Leibe rücken kann falls Du Zeit und Interesse daran hast!

Gruß,

Michael

ssandner · 11.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Okay neue Herausforderung. Aber du musst zugeben dass wir es geschafft haben, ein dynamisches Textfeld zu tweenen oder ;-))

Ohne flash jetzt aufgemacht zu haben, denke ich mir das wir wie folgt vorgehen müssten:
- Auf der Bühne eine Movieclip mit Maske wie bei Brimelow, der mit scrollbar bewegt wird und ein smooth-Verhalten hat.
- in diesem Movieclip befindet sich das dynamische Textfeld, welches deinen externen Text darstellt.
- damit das scrollen klappt, muss sich die Höhe des movieclips an die Länge des geladenen Textes anpassen.
(Irgendwie mit

Code:

movieclip_mc.height=textfeld_txt.textHeight

oder

Code:

movieclip_mc.height=textfeld_txt.numLines mal Umrechnungswert (pt in px)

(siehe hier ESX.ch - pt-px-em Umrechner)

ssandner · 11.03.2011

AW: Smoothing von Text (CS5 / AS3) / An ssandner

Also ich habe was rausgefunden: Wenn man ein textfeld in einen movieclip einbindet und dann den movieclip an die Größe des textfeldes anpasst, wird der text nochmals skaliert und wird viel zu groß.
Wenn an aber das textfeld per script erzeugt, dann klappt es. Ich habe dir mal meine fla per mail geschickt, da ich doch einiges umbauen musste und die Erklärung hier zu lange dauert. Für alle interessierten Mitleser poste ich am Montag mal eine Erklärung.

Schönes Wochenende