Embeber imágenes

Buenas, a ver si alguien me puede ayudar con un problema que tengo.

He declarado lo siguiente en mi <s:Application para embeber una imagen y poder reutilizarla en otras partes del código.

Código Flex :

[Embed(source="assets/pic/foto.jpg")]
         [Bindable]
         public var fotoImage:Class;

En el mismo Application luego he definido un componente image

Código Flex :

<s:Image id="tdkPrincipal" includeIn="menu" width="268" height="128" horizontalCenter="0"
          source="{fotoImage}" verticalCenter="0"/>

y sin problemas. Me funciona OK.

El problema viene cuando quiero hacer uso de esa imagen embebida en un fichero donde defino un skin <s:SparkSkin
Me tira el error 1120: Access of undefined property fotoImage.
Estoy intentando hacer lo mismo

Código Flex :

<s:BitmapFill source="{fotoImage}" />

¿Se os ocurre donde puede estar el problema?

Muchas gracias.

fotoImage debería ser una propiedad pública del hostComponent de tu skin para que pudiera tomarla

Jorge

Jorge, lo primero gracias por contestar.

He cambiado la ubicación de mi definición

Código Flex :

[Embed(source="assets/pic/foto.jpg")]
         [Bindable]
         public var fotoImage:Class;

pasándola a mi fichero CustomApplicationSkin.mxml que es donde defino mi <s:SparkSkin.
Ahora en este fichero no me aparece el error pero cuando desde mi fichero principal que arranca la aplicación (el que tiene <s:Application) y ahora es aquí es donde me aparece el mismo error.

Pensaba que declarándola como pública en el Application sería visible en todos sitios. ¿Dónde tendría que realizar entonces la declaración de mi variable fotoImage para que sea accesible desde cualquier sitio.

Muchas gracias por anticipado.

Buff! Estoy intentando de todo y no consigo hacer que funcione.

El contenido de mi fichero CustomApplicationSkin.mxml es el siguiente:

Código Flex :

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:mx="library://ns.adobe.com/flex/halo"
          xmlns:s="library://ns.adobe.com/flex/spark">
   
   <fx:Metadata>
      [HostComponent("spark.components.Application")]
   </fx:Metadata>
   
   <fx:Script>
      <![CDATA[
         [Embed(source="assets/pic/foto.jpg")]
         [Bindable]
         public var fotoImage:Class;
         
         public function CambiarFondo(fondo:String):void{
            myFondo.source="fondo";
         }
      ]]>
   </fx:Script>
   
   <s:states>
      <s:State name="normal" />
      <s:State name="disabled" />
   </s:states>
   
   <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
      <s:fill>
         <s:BitmapFill id="myFondo" source="{fotoImage}" />
      </s:fill>
   </s:Rect>
   
   <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:SparkSkin>

Si os fijais tengo declarado como públicas

Código Flex :

public var fotoImage:Class;
         
         public function CambiarFondo(fondo:String):void{
            myFondo.source="fondo";
         }

la variable fotoImage y la función CambiarFondo.

Sin embardo si intento acceder desde mi fichero principal obtengo errores. ¿No se puede hacer esto entonces?

Un skin no existe en el scope del hostComponent, por lo menos no de la forma que lo estas haciendo. Se aplica y listo. Si lo que quieres es poder cambiar los fondos de la aplicación, decláralo en la aplicación misma.
Para usar skin tenes que basarte en un componente, por ejemplo supongamos que quiero hacer un skin de un dropdown, voy a File->New->MXML Skin y en create as a copy of pongo el componente base. Esto es porque los skins necesitan cumplir con ciertas reglas del layout que sino ser[ia muy dif[icil escribir desde cero.
Para hacer un skin de una aplicación, se suele separar en componentes, por ejemplo
aquí un skin de un proyecto grande, quito la ruta delas clases y otras cosas porque no estoy seguro que a mi cliente le guste encontrarse esto:

Código ActionScript :

package com.siliconpublishing.view.document.implementations
{
   import  ...... un monton de clases de mi proyecto   
   import spark.components.BorderContainer;
   import spark.components.Group;

   public class AppMain extends BorderContainer {
      
      [SkinPart(required="false", type="myDomain.DocumentView")]
      public var docView:DocumentView;
      
      [SkinPart(required="false", type="myDomain.ZoomControls")]
      public var zoomControls:ZoomControls;
      
      [SkinPart(required="false", type="myDomain.PageNavControls")]
      public var pageNavControls:PageNavControls;
      
( ...)      
      [SkinPart(required="false", type="spark.components.Group")]
      public var handleLayer:Group;
      
      [SkinPart(required="false", type="myDomain.View3DComponent")]
      public var view3DComponent:Resizable3DView;
      
      override protected function partAdded(partName:String, instance:Object):void
      {
         super.partAdded(partName, instance);
      }
   }
}

Mira que ya el skin parte de BorderContainer y declara todos los componentes que a su vez tienen su skin.

En sintesis, el mecanismo de skin es muy completo, pero tiene una complejidad que no amerita simplemente cambiar una imagen de fondo

Jorge

Ufff! Muchas gracias por contestar aunque me he quedado un poco que no sé por donde tirar ...
Si me creo un skins para la aplicación ¿no estaría con mi mismo dilema?
Quería poner un fondo dependiendo de un evento determinado. Mi aplicación arranca con un state determinado y quiero que ahí no tenga el fondo y que cuando pulse sobre un botón sea cuando cargase la imagen.

Le echo un vistazo a ver.

Thanks!

Cuando digo que lo uses directamente, digo usas un componente image y lo cargas, así de simple, no amerita meterse con la arquitectura de skin a menos que realmente necesites skinnear todos los elementos

Jorge

OK thanks!