Forums Développement Multimédia

Aller au contenu

Flex4, TLF, embed font enAS3

CODE Actionscript

1 réponse à ce sujet

#1 morgan.eveno

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 21 February 2011 - 11:03 AM

Bonjour à tous,

Cela fait plusieurs jours que je me casse les dents sur ce problème. Et je me dis que la solution est toute proche... mais bien cachée.
Vous avez peut-être déjà traité du sujet, mais j'avoue que je n'ai rien trouvé lros de mes recherches.

Voilà le soucis :

Pour l'un de mes projet ( flex4 ), je dois embedder une font.
Pour une partie de l'interface, j'utilise les composants Flex4 ( RichText, Label etc... ), et aucun soucis, le textLayout rempli son office, la font est bien affichée.

Malheureusement, une bonne partie de mon interface doit générer du texte dynamique en se passant des composants Flex ( je plaque les textes dans un matérial de texture papervision ).

J'ai tout d'abord cru que papervision était le soucis.
Que nenni.

Si vous avez la moindre info, idée, je suis preneur, j'avoue que je suis complètement démuni ! ( TLF me parait bien compliqué )

Voici le soucis reproduit dans un petit mxml de test : ( le projet pour FB4 en pièce jointe )


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           minWidth="955" minHeight="680"
                           creationComplete="creationCompleteHandler(event)"
                           >
        <fx:Declarations>
                <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
        </fx:Declarations>
        <fx:Style>
               
                @namespace gallery "components.gallery.*";
                @namespace leftColumn "components.leftColumn.*";
                @namespace tlf "flashx.textLayout.elements.*";
               
                @font-face {
                        src: url("VAGROUNDED-BOLD.TTF");
                        font-family: BoldEmbedded;
                       
                        font-weight: bold;
                        embedAsCFF:true;
                }
                               
                @font-face {
                        src: url("VAGROUNDED-BOLD.TTF");
                        font-family: BoldEmbeddedNOCFF;
                        font-weight: bold;
                        embedAsCFF:false;
                }
                               
                .fontBold{
                        font-family: BoldEmbedded;
                        font-weight: bold;
                        cff : true;    
                }
               
                .fontBoldNOCFF{
                        font-family: BoldEmbeddedNOCFF;
                        font-weight: bold;
                       
                }
               
               
        </fx:Style>
       
        <fx:Script>
                <![CDATA[
                        import flash.text.engine.CFFHinting;
                        import flash.text.engine.FontLookup;
                        import flash.text.engine.FontPosture;
                        import flash.text.engine.FontWeight;
                        import flash.text.engine.Kerning;
                        import flash.text.engine.RenderingMode;
                       
                        import flashx.textLayout.compose.ISWFContext;
                        import flashx.textLayout.container.ContainerController;
                        import flashx.textLayout.conversion.TextConverter;
                        import flashx.textLayout.elements.Configuration;
                        import flashx.textLayout.elements.ParagraphElement;
                        import flashx.textLayout.elements.SpanElement;
                        import flashx.textLayout.elements.TextFlow;
                        import flashx.textLayout.formats.TextAlign;
                        import flashx.textLayout.formats.TextLayoutFormat;
                       
                        import mx.core.FlexGlobals;
                        import mx.core.IVisualElement;
                        import mx.events.FlexEvent;
                       
                         
                       
                        private var formatText : TextLayoutFormat = new TextLayoutFormat();
                           

                        protected function creationCompleteHandler(event:FlexEvent):void
                        {
                               
                        //      use namespace mx_internal;
                               
                               
                                var textContainer:Sprite = new Sprite();
                                var exampleContainerWidth : uint = 700;
                               
                                var text:String = '<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">';
                                text += '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
                                text += '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>';
                                text += '</TextFlow>';

                               
                               
                                var format:TextLayoutFormat = new TextLayoutFormat();
                                format.fontFamily = "fontBold";
                                format.fontWeight = FontWeight.BOLD;
                       
                                format.fontSize = 32;
                                format.color = 0x000000;
                                format.renderingMode = RenderingMode.CFF;
                                format.fontLookup = FontLookup.EMBEDDED_CFF;
                               
                               

               
                                var textFlow:TextFlow = TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT);
                                textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
                                textFlow.renderingMode = RenderingMode.CFF;
                                //textFlow.flowComposer.swfContext = ISWFContext(getFontContext("BoldEmbedded", false, false, FontLookup.EMBEDDED_CFF));
                                textFlow.format = format;
                               
                               
                                                       
                                textFlow.whiteSpaceCollapse = flashx.textLayout.formats.WhiteSpaceCollapse.PRESERVE;
                                textFlow.flowComposer.addController(new ContainerController(textContainer, exampleContainerWidth, NaN));
                                textFlow.flowComposer.updateAllControllers();
                               


                                bloc.addChild(textContainer);
                       
                               
                               
                        }

                ]]>
        </fx:Script>
       
        <s:layout>
                <s:VerticalLayout paddingTop="50" paddingLeft="50" gap="100"/>
        </s:layout>
       
        <s:RichText id = "titleText"
                               
                                fontWeight="bold"
                                styleName="fontBold"
                                lineHeight = "28"
                                text="font embeddée... VAG ROUNDED BOLD"
                                fontSize="32"
                                renderingMode = "cff"
                />
        <mx:UIComponent id="bloc"/>
</s:Application>
 

Fichier(s) joint(s)



#2 deuxsucres

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 115 messages

Posté 27 October 2011 - 10:09 AM

Bonjour,

Je vois deux problèmes dans votre code. Le premier concerne le nom de la police fourni à la propriété fontFamily de l'instance de TextLayoutFormat. Vous ne pouvez pas utiliser le nom de classe CSS, vous devez spécifier le nom de la police (ou de son alias), soit BoldEmbedded.

Ensuite, il faut effectivement fournir à l'objet TextFlow le contexte dans lequel il trouvera les contours de police. Pour cela, j'utilise une méthode quelque peu bourrine mais efficace. Je recherche si des polices sont embarquées. Je récupère le contexte de la première que je trouve et le fournit à l'instance de TextFlow :


var fonts:Array = Font.enumerateFonts() ;
if(fonts.length > 0) {
  var embedFont:Font = Font(fonts[0]) ;
  var isBold:Boolean = embedFont.fontStyle == FontStyle.BOLD || embedFont.fontStyle == FontStyle.BOLD_ITALIC ;
  var isItalic:Boolean = embedFont.fontStyle == FontStyle.ITALIC || embedFont.fontStyle == FontStyle.BOLD_ITALIC ;
  textFlow.flowComposer.swfContext = mx_internal::getFontContext(embedFont.fontName, isBold, isItalic, FontLookup.EMBEDDED_CFF) ;
}
 

Pour que cette méthode fonctionne, il faut que la police soit embedAsCFF.

J'ai eu pas mal de problèmes pour embarquer certaines polices, qu'elles soient disponibles dans mes applications. J'ai découvert l'outil fontswf disponible dans le dossier bin du SDK Flex. Il permet de convertir une police ttf ou otf en swf et si fontswf arrive à convertir la police, alors elle pourra être embarquée. Depuis, plus de problème !



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)