Forums Développement Multimédia

Aller au contenu

Css, StyleSheet et Police Embarquée

Où est lerreur ? CODE Actionscript

2 réponses à ce sujet

#1 draad

  • Members
  • PipPipPipPipPipPipPipPip
  • 654 messages

Posté 26 April 2013 - 14:33 PM

Bonjour tout le monde,

Pour l'une de mes applications mobile, je souhaite embarquer plusieurs polices. J'ai donc récupéré de jolies polices, créé une feuille de style CSS et un ensemble de TextField utilisant ce styleSheet.

Mon problème est que, jusqu'à présent, il m'est impossible d'avoir un fonctionnement correct sur ces polices. Soit qu'elles semblent ne pas s'embarquer, soit que les textField deviennent complètement transparents. Votre aide me serait donc très utile, voici un extrait de mes classes :

Mon Css :

@font-face
{
src              : url('../fonts/biblio.ttf');
fontFamily        : 'Bibliotheque';
fontStyle          : normal;
fontWeight        : normal;
embedAsCFF        : true;
advancedAntiAliasing  : true;
}
@font-face
{
src              : url('../fonts/mrb.ttf');
fontFamily        : 'Mr.B';
fontStyle          : normal;
fontWeight        : normal;
embedAsCFF        : true;
advancedAntiAliasing  : true;
}
@font-face
{
src              : url('../fonts/devinneswash.ttf');
fontFamily        : 'Devinne Swash';
fontStyle          : normal;
fontWeight        : normal;
embedAsCFF        : true;
advancedAntiAliasing  : true;
}

Title
{
font-family:Devinne Swash;
font-size:110px;
text-align:center;
color:#000000;
}
SubTitle
{
font-family:Mr.B;
font-size:90px;
text-align:center;
color:#ff9e2b;
}
PopupTitle
{
font-family:Devinne Swash;
font-size:90px;
text-align:center;
color:#ff9e2b;
}
PowerupTitle
{
font-family:Mr.B;
font-size:70px;
text-align:center;
color:#ff9e2b;
}
ShopPrice
{
font-family:Mr.B;
font-size:80px;
text-align:center;
color:#ff9e2b;
}
ShopAmount
{
font-family:Bibliotheque;
font-size:100px;
text-align:center;
color:#C2F1FE;
}
Timer
{
font-family:Bibliotheque;
font-size:60px;
text-align:center;
color:#af1212;
}
Refill
{
font-family:Devinne Swash;
font-size:50px;
text-align:center;
color:#C2F1FE;
}
 

Declaration de mes plocies dans l'application

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          frameRate= "24"
       
          backgroundColor="0x555555"
          fontFamily = "Mr.B,Bibliotheque,Devinne Swash"
          creationComplete="startup(event)">

</s:Application>
 


Classe Context qui charge, entre autre, mon style Css

public static var CSS    :StyleSheet;
public function startUp():void
{
cssLoader = new URLLoader ();
cssLoader.load(new URLRequest("style.css"));
cssLoader.addEventListener(Event.COMPLETE, onStyleCssLoaded);
}
private function onStyleCssLoaded (e:Event):void
{
public static var CSS :StyleSheet;
CSS = new StyleSheet ();
CSS.parseCSS(e.target.data);
cssLoader.close();
}
 


Classe Locale qui me fournis des TextField finaux :

public static var FONT_TITLE    :String  = 'FONT_TITLE';
  public static var FONT_SUBTITLE       :String  = 'FONT_SUBTITLE';
  public static var FONT_SHOP_PRICE   :String    = 'FONT_SHOP_PRICE';
  public static var FONT_SHOP_AMOUNT   :String   = 'FONT_SHOP_AMOUNT';
  public static var FONT_POPUP_TITLE   :String   = 'FONT_POPUP_TITLE';
  public static var FONT_POWERUP_TITLE  :String  = 'FONT_POWERUP_TITLE';
  public static var FONT_TIMER  :String  = 'FONT_TIMER';
  public static var FONT_REFILL :String  = 'FONT_REFILL';
public static function getLocale(target:String, size:String):String
  {
   var text : String = target;
 
   switch (size)
   {
        case FONT_TITLE:
         text = '<Title>' + text + '</Title>';
         break;
        case FONT_SUBTITLE:
         text = '<SubTitle>' + text + '</SubTitle>';
         break;
        case FONT_SHOP_PRICE:
         text = '<ShopPrice>' + text + '</ShopPrice>';
         break;
        case FONT_SHOP_AMOUNT:
         text = '<ShopAmount>' + text + '</ShopAmount>';
         break;
        case FONT_POPUP_TITLE:
         text = '<PopupTitle>' + text + '</PopupTitle>';
         break;
        case FONT_POWERUP_TITLE:
         text = '<PowerupTitle>' + text + '</PowerupTitle>';
         break;
        case FONT_TIMER:
         text = '<Timer>' + text + '</Timer>';
         break;
        case FONT_REFILL:
         text = '<Refill>' + text + '</Refill>';
         break;
   }
 
   return text;
  }
public static function getTextField(text:String, width:int, height:int):TextField
  {
   var textField:TextField = new TextField ();
 
   textField.styleSheet = Context.CSS;
   textField.text       = text;
   //textField.embedFonts       = true;
   textField.multiline   = true;
   textField.width   = width;
   textField.height  = height;
   textField.wordWrap     = true;
   textField.selectable = false;
   return textField ;
  }
 


Vous remarquerez que dans la fonction getTextField de la classe Locale , textField.embedFonts = true a été commenté, et pour cause, si je dé-commente cette ligne, les textFields deviennent invisible ! Cependant il me semble que cette ligne est nécessaire au bon fonctionnement des polices embarquées dans le textField...

Voici ma hiérarchie au cas où le problème vienne d'un erreur de chemin :
*src
-package par default
> Main.mxml
> style.css
-fonts
> biblio.ttf
> devinneswash.ttf
> mrb.ttf


J'ai essayé plusieurs choses, utiliser des fonts TrueType, des fonts OpenType, modifier le chemin de mes fonts, n'utiliser qu'une seule font au lieu de plusieurs, changer de stratégie pour inclure les font dans un swc et utiliser des TextFormat à la place... je suis perdu.

Merci d'avance pour vos conseils.

#2 draad

  • Members
  • PipPipPipPipPipPipPipPip
  • 654 messages

Posté 26 April 2013 - 16:57 PM

PS: bien sur, lorsque j'appelle ma fonctiongetTextField, je lui passe un string qui a ete prealablement traite par la fonction getLocale.

#3 draad

  • Members
  • PipPipPipPipPipPipPipPip
  • 654 messages

Posté 27 April 2013 - 03:20 AM

Bon, pour ceux qui auraient le même problème que moi, j'ai finalement résolu ceci en créant un SWC qui inclue mes fonts. Ne pas oublier de cocher la case "exporter dans l'image", sinon ça ne marche pas.

Merci a tous.



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

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

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP