Tekstobjecten renderen

De Flash-tekstengine biedt een aantal fraaie optimalisaties. Bij talloze klassen is echter de weergave van één regel tekst vereist. Om deze reden vereist het maken van een bewerkbaar tekstveld met de TextLine-klasse een grote hoeveelheid geheugen en veel regels ActionScript-code. De TextLine-klasse wordt het best gebruikt voor statische en niet-bewerkbare tekst, waarvoor de rendering sneller gaat en minder geheugen vereist is.

Met de functie voor het in cache plaatsen van bitmaps kunt u vectorinhoud als bitmaps in de cache plaatsen om de renderprestaties te verbeteren. Deze functie is nuttig voor complexe vectorinhoud en ook wanneer deze wordt gebruikt met tekstinhoud waarvoor de verwerking moet worden gerenderd.

Het volgende voorbeeld toont hoe de functie voor het in cache plaatsen van bitmaps en de eigenschap opaqueBackground kunnen worden gebruikt om de renderprestaties te verbeteren. De volgende afbeelding toont een typisch welkomstscherm dat kan worden weergegeven wanneer een gebruiker wacht tot iets is geladen:

De volgende afbeelding toont de versnelling die programmatisch wordt toegepast op het TextField-object. De tekst neemt traag af van boven aan de scène tot het midden van de scène:

De volgende code maakt de versnelling. De variabele preloader slaat het huidige doelobject op om de prestaties schadende eigenschaplook-ups te minimaliseren:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
var destX:Number=stage.stageWidth/2; 
var destY:Number=stage.stageHeight/2; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(preloader.y-destY)<1) 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
}

De functie Math.abs() kan inline worden geplaatst om het aantal functieaanroepen te reduceren en de prestaties verder te verbeteren. U kunt het best het int-type gebruiken voor de eigenschappen destX en destY zodat u vaste-puntwaarden hebt. Als u het int-type gebruikt, kunt u de perfecte magnetische pixeluitlijning verkrijgen zonder dat u de waarden handmatig moet afronden met behulp van langzame methoden zoals Math.ceil() of Math.round() . Deze code rondt de coördinaten niet af op int, omdat het object niet vloeiend zou worden verplaatst als de waarden op constante wijze zouden worden afgerond. Het object kan schokkerige bewegingen vertonen, omdat de coördinaten op elk frame op het dichtstbijzijnde gehele getal worden uitgelijnd. Deze techniek kan echter handig zijn wanneer u een uiteindelijke positie instelt voor een weergaveobject. Gebruik de volgende code niet:

// Do not use this code 
var destX:Number = Math.round ( stage.stageWidth / 2 );  
var destY:Number = Math.round ( stage.stageHeight / 2); 

De volgende code is veel sneller:

var destX:int = stage.stageWidth / 2;  
var destY:int = stage.stageHeight / 2; 

De vorige code kan nog verder worden geoptimaliseerd door gebruik te maken van operators voor het bitsgewijze verplaatsen om de waarden te splitsen:

var destX:int = stage.stageWidth >> 1;  
var destY:int = stage.stageHeight >> 1;

Met de functie voor het in cache plaatsen van bitmaps kan de runtime eenvoudiger objecten renderen door gebruik te maken van dynamische bitmaps. In het huidige voorbeeld is de filmclip die het TextField-object bevat, in de cache geplaatst:

wait_mc.cacheAsBitmap = true;

Een aanvullende manier om de prestaties te verbeteren is door de alfatransparantie te verwijderen. Alfatransparantie is een bijkomende belasting voor de runtime bij het tekenen van transparante bitmapafbeeldingen, zoals in de vorige code. U kunt de eigenschap opaqueBackground gebruiken om dit probleem te omzeilen door een kleur als achtergrond op te geven.

Wanneer u de eigenschap opaqueBackground gebruikt, gebruikt het bitmapoppervlak in het geheugen nog steeds 32 bits. De alfaverschuiving wordt echter ingesteld op 255 en er wordt geen transparantie toegepast. Het resultaat hiervan is dat de eigenschap opaqueBackground het geheugenverbruik niet vermindert, maar dat de renderprestaties wel worden verbeterd wanneer de functie voor het in cache plaatsen van bitmaps wordt gebruikt. De volgende code bevat alle optimalisaties:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
  
// Set the background to the color of the scene background 
wait_mc.opaqueBackground = 0x8AD6FD; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
  
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
        e.currentTarget.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
}

De animatie is nu geoptimaliseerd en het in cache plaatsen van bitmaps is geoptimaliseerd door de transparantie te verwijderen: Denk eraan dat u de Stage-kwaliteit op LOW en HIGH kunt instellen tijdens de verschillende stadia van de animatie terwijl de functie voor het in cache plaatsen van bitmaps wordt gebruikt:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
wait_mc.opaqueBackground = 0x8AD6FD; 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth>>1; 
var destY:int = stage.stageHeight>>1; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(e.currentTarget.y-destY)<1) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
    } 
}

In dit geval wordt door het wijzigen van de Stage-kwaliteit de runtime gedwongen om het bitmapoppervlak op het TextField-object opnieuw te genereren zodat het overeenkomt met de huidige Stage-kwaliteit. Daarom wijzigt u best de Stage-kwaliteit niet terwijl de functie voor het in cache plaatsen van bitmaps wordt gebruikt.

Een handmatige aanpak van het in cache plaatsen van bitmaps had hier kunnen worden gebruikt. Om de eigenschap opaqueBackground te simuleren kan de clip op een niet-transparant BitmapData-object worden getekend. Dit dwingt de runtime niet om het bitmapoppervlak opnieuw te genereren.

Deze techniek werkt goed voor inhoud die niet verandert in de loop van de tijd. Als de inhoud van het tekstveld echter kan worden veranderd, kunt u een andere strategie overwegen. Beeld u bijvoorbeeld een tekstveld in dat constant wordt bijgewerkt met een percentage dat voorstelt hoeveel van de toepassing al is geladen. Als het tekstveld, of het weergaveobject dat het bevat, als bitmap in de cache is geplaatst, moet het oppervlak worden gegenereerd telkens als de inhoud wordt gewijzigd. U kunt in dit geval bitmaps niet handmatig in cache plaatsen, omdat de content van het weergaveobject constant verandert. Deze constante wijziging zou betekenen dat u de BitmapData.draw() -methode handmatig moet aanroepen om de bitmap in de cache bij te werken.

Houd er rekening mee dat vanaf Flash Player 8 (en AIR 1.0) een tekstveld waarvan de rendering is ingesteld op Anti-Alias voor leesbaarheid perfect anti-aliased blijft, ongeacht de waarde van de Stage-kwaliteit. Deze aanpak verbruikt minder geheugen, maar vereist meer processorverwerking en de rendering verloopt ook langzamer dan met de functie voor het in cache plaatsen van bitmaps.

De volgende code maakt gebruik van deze aanpak:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
    } 
}

Het gebruik van deze optie (Anti-Alias for Readability) voor tekst in beweging wordt niet aangeraden. Wanneer de tekst wordt geschaald, zorgt deze optie ervoor dat de tekst probeert uitgelijnd te blijven, wat een verplaatsingseffect veroorzaakt. Als de inhoud van het weergaveobject echter constant verandert en u geschaalde tekst nodig hebt, kunt u de prestaties in mobiele toepassingen verbeteren door de kwaliteit in te stellen op LOW . Wanneer de beweging is voltooid, schakelt de kwaliteit opnieuw om naar HIGH .

De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.