Animera enstaka FlowElements i ett TextFlow PDF Skriv ut Skicka sidan
2011-11-08 12:58
Jump to English resume

Att arbeta med TLF (Text Layout Framework) innebär både för- och nackdelar. En av fördelarna är att man har mycket bättre kontroll över innehållsflödet. En nackdel är att det är svårt att animera fram innehåll. Om man t.ex. har en layout som innehåller en rubrik, en text som omsluter en bild, en underrubrik och ytterligare en text, så sköter TLF flödet i artikeln, eller vad vi ska kalla det, helt själv. Man bara lägger till de element man vill att flödet ska innehålla. Men om man vill att det ska animeras fram, ex. de olika elementen ska tonas in efter varandra, så blir det jobbigt och detta är ju ett vanligt scenario.

I nedanstående exemplel använder jag en text, sedan en bild och sist ännu en text. Alla i egna paragrafer.

// skapa textflödets alla komponenter
var tContainer:Sprite = new Sprite();
addChild(tContainer);

var tController:ContainerController = new ContainerController(tContainer, 970, 645);

var tFormat:TextLayoutFormat = new TextLayoutFormat();
tFormat.fontFamily = "HelveticaNeue";
tFormat.fontSize = 48;
tFormat.color = 0x646464;
tFormat.direction = Direction.LTR;
tFormat.verticalAlign = VerticalAlign.MIDDLE;
tFormat.textAlign = TextAlign.CENTER;

if (embedFonts)
{	
 tFormat.cffHinting = CFFHinting.HORIZONTAL_STEM;
 tFormat.fontLookup = FontLookup.EMBEDDED_CFF;
}
else
{	
 tFormat.cffHinting = CFFHinting.NONE;
 tFormat.fontLookup = FontLookup.DEVICE;
}

var tTextFlow:TextFlow = new TextFlow();
tTextFlow.hostFormat = tFormat;

tTextFlow.flowComposer.addController(tController);

var tParagraph1:ParagraphElement = new ParagraphElement();
tParagraph1.paddingBottom = 40;
tTextFlow.addChild(tParagraph1);

var tSpan1:SpanElement = new SpanElement();
tSpan1.text = pTexts[0];

// spara FlowElement
var tSpanElement1:FlowElement = tParagraph1.addChild(tSpan1);

var tParagraph2:ParagraphElement = new ParagraphElement();
tParagraph2.paddingBottom = 15;
tParagraph2.paddingLeft = 10;
tTextFlow.addChild(tParagraph2);

var tIGE:InlineGraphicElement = new InlineGraphicElement();
tIGE.source = new Logo() as Bitmap;

// spara FlowElement
var tImageElement:FlowElement = tParagraph2.addChild(tIGE);

var tParagraph3:ParagraphElement = new ParagraphElement();
tTextFlow.addChild(tParagraph3);

var tSpan2:SpanElement = new SpanElement();
tSpan2.text = pTexts[1];

// spara FlowElement
var tSpanElement2:FlowElement = tParagraph3.addChild(tSpan2);

tTextFlow.flowComposer.updateAllControllers();

// hämta objekt
var tText1:DisplayObject = getProxy(tSpanElement1);
var tImage:DisplayObject = getProxy(tImageElement);
var tText2:DisplayObject = getProxy(tSpanElement2);

// sätt alpha = 0 på objekt som ska animeras
tText1.alpha = tImage.alpha = tText2.alpha = 0;

// animera objekten
var tText1Tween:GTween = new GTween( tText1, 1.2, { alpha : 1 }, { ease : Exponential.easeOut } );
var tImageTween:GTween = new GTween( tImage, 1.2, { alpha : 1 }, { ease : Exponential.easeOut, delay : 1 } );
var tText2Tween:GTween = new GTween( tText2, 1.2, { alpha : 1 }, { ease : Exponential.easeOut, delay : 2 } );


getProxy funktion:
private function getProxy( recFlowElement : FlowElement ) : DisplayObject
{
 var tElement:FlowElement = recFlowElement;	
 if ( tElement == null )
 return null;	

 var tFlow:TextFlow = tElement.getTextFlow();
 if ( tFlow == null )	
 return null;	

 var tComposer:IFlowComposer = tFlow.flowComposer;	
 if ( tComposer == null )	
 return null;	

 var tPos:int = tElement.getAbsoluteStart();	
 var tLine:TextFlowLine = tComposer.findLineAtPosition( tPos );	

 return tLine.getTextLine( true );
}
 

Tack Måns Severin för ditt detektivarbete! :)

[English resume
Working with TLF (Text Layout Framework) does have its advantages, but there are some drawbacks as well. One of the pros is better textflow control. One of the cons is the disability to animate the content in the textflow as single objects. It´s not impossible, but it's a damn hard thing to do.

In the example above I have two texts and one image. Each one contained in its own paragraph element, where I fade in the elements sequetially.


Bedöm artikeln:
Skapad 2011-11-08 12:58 av Patric Jonsson

Visad 377 gånger än så länge.

Senaste artiklarna av Patric Jonsson


Senast uppdaterad 2011-11-08 16:28

Lägg till kommentar


Medlemmar


Members Online: 0

Senaste registrerade

LisaRaichand : 22 april 2012 19:55pilu : 31 januari 2012 09:58Gostship99 : 07 januari 2012 19:37Director : 18 november 2011 05:44Dahlback : 17 november 2011 16:28mikwonwheels : 14 november 2011 13:20Kviddis : 04 oktober 2011 19:53buddha1966 : 25 september 2011 14:22idesign : 20 september 2011 08:45TxT : 05 september 2011 11:07ApelG : 05 september 2011 11:04
Partners
Adobe user group
fdt5-logo
TechSmith
Lynda user group
Apress user group
O´reilly user group
Peachpit user group
Friends Of Ed
Manning user group


Senaste blogginläggen

Av: Danel
-20.02.2012
Av: Patric Jonsson
-27.01.2012
Av: Patric Jonsson
- 3.01.2012
Av: Patric Jonsson
-29.11.2011
Av: Danel
-26.11.2011
Av: Patric Jonsson
-14.11.2011
Av: Patric Jonsson
- 8.11.2011
Av: Danel
- 7.11.2011
Av: Patric Jonsson
-27.09.2011

Senaste kommentarer

Senaste trådarna

Av Hallon
- 08/05/2012
Av goldensebbe
- 06/04/2012
Av Hallon
- 29/03/2012
Av buddha1966
- 06/03/2012
Av buddha1966
- 29/02/2012
Av Wide Circle
- 20/02/2012
Av zocstyle
- 15/02/2012
Av ufoalf30
- 05/01/2012
Av peterdavidsson
- 08/12/2011
Av JohnPaulie
- 03/12/2011
Av coffaldo
- 17/11/2011
Av buddha1966
- 05/11/2011
Av buddha1966
- 03/11/2011

Blogkalender

  • 2012 (3)
  • 2011 (37)
  • 2010 (85)
  • 2009 (18)
  • Vem är online

    Vi har 28 besökare online
    RSS
    Patric Jonsson - flashguru.se
    RocketTheme Joomla Templates