Forums Développement Multimédia

Aller au contenu

Création d'un gabarit / layout

CMS Silex

4 réponses à ce sujet

#1 devpix-web

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 06 November 2011 - 17:55 PM

Bonjour à tous,

Le devkit de Silex ayant complètement changer. Quelqu'un pourrait-il expliquer comment créer un nouveau gabarit pour silex ?

Merci :)

#2 Pol - Silex

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 178 messages

Posté 07 November 2011 - 17:13 PM

Salut, en fait il faut que tu te fournisses le SILEX_DESIGN_KIT
dans ce repertoire tu trouveras un sous-répertoires <layouts> à la racine duquel tu trouveras des docs FLA

Bon courage
Pol

ps : n'hésite pas à envoyer l'url de tes tests

#3 devpix-web

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 22 November 2011 - 19:04 PM

Après une petite absence, je reviens sur ce sujet.

J'ai effectivement trouvé le fla dans le design kit mais il y a beaucoup de calque et je ne sais pas ce que je dois touché etc.
J'aimerais recréer un layout alpha_fixe mais beaucoup plus lent. Je suis donc reparti de la source que l'on peut retrouver sur exchange.silex ici : http://exchange.silexlabs.org/?p=396

Mais là encore je ne comprends pas comment à été créé le gabarit.

Un peu d'aide ? :mrgreen:

#4 Roi valeureux

    Ceinture Blanche

  • Members
  • Pip
  • 6 messages

Posté 13 June 2013 - 14:02 PM

Bonjour, j'ai retrouvé ce doc dans mes archives, j'espère qu'il vous sera utile.
J'espère aussi qu'il est toujours d'actualité.

Les gabarits d animation

Les gabarits d’animation permettent à la fois de gérer la structure des calques mais également les animations (ouverture / fermeture / transitions). Ils regroupent en effet :

- le nombre de calque-enfant pour un calque-parent,

- la profondeur et l’ordre des calques-enfants,

- les types de transitions d’ouverture et/ou de fermeture des calques,

- les animations de chargement des calques.

Outre le fait de vous permettre d’animer naturellement et simplement votre site, les gabarits d’animation servent à masquer les temps de chargement des différents composants présents dans votre site. Il existe 4 type d’animations distincts.

* Animation de preload : chargement des données XML.
* Animation show : chargement des composants contenus dans le calque en cours d’ouverture.
* Animation de transition : ouverture d’un calque-enfant.
* Animation close : fermeture d’un calque-enfant.

Où trouver les sources ?

Dans le Devkit de Silex, vous trouverez les fichiers fla dans le répertoire <layouts>.

Exemple de gabarits d’animation existants

Le gabarit « minimal » est le gabarit par défaut. Il possède un seul calque-enfant par calque-parent et l’ouverture de ses calques-enfants se fait au-dessus des calques-parents. Les transitions animées sont des fondus.

Le gabarit « minimal plus » possède deux calques-enfants : <Over> (1er plan) et <Under> (arrière plan). Si vous ajoutez un calque-parent B sur un calque enfant d’un calque-parent A, alors chacun des calques-enfants de B s’ouvrent entre les calques-enfants de A. Attention l’organisation des calque dans la boîte à outils <Calques> ne correspond pas au rendu de publication.

=> Exemple : sur le calque start, une icône ouvre le calque-enfant diaporama et sur l calque diaporama, une icône ouvre le calque enfant contact.

La boîte à outils <Calques> affiche :
start [Over]
start [Under]
diaporama [Over]
diaporama [Under]
contact [Over]
contact [Under]

En réalité l’ordre de profondeur des calques est :

start [over] => 1er plan
diaporama [Over]
contact [Over]
contact [Under]
diaporama [Under]
start [Under] => arrière plan

Personnalisation

* Pour modifier le nombre de calque-enfants pour un calque-parent, pour le fichier <minimal_plus.fla> par exemple, dans le Clip nommé <show> vous trouverez un calque <calque 3> qui correspondent au calque-enfant de Silex.
Pour ajouter des calques-enfants vous devez créer un nouveau calque sur Flash. Il vous faut également dupliquer l’élément <contentContainer_mc> qui se trouve dans la bibliothèque de Flash <anims/assets/contentContainer_mc> et nommer le <contentContainer_mc2>. Enfin glissez cet élément sur le calque précédemment créé et publier votre gabarit. Vous pouvez constater sur Silex que vous avez maintenant deux calques-enfants. Pour ajouter un troisième calque-enfant, procédez de la même manière en renommant par <contentContainer_mc3>, et <contentContainer_mc4> pour un quatrième calque-enfant.

* Pour modifier la profondeur et l’ordre des calques-enfants, quel que soit le gabarit de Silex, il vous suffit de modifier l’ordre des calques sur la timeline de Flash. Le calque qui se trouve au-dessus des autres sera au premier plan des calques-enfants de Silex. Un calque positionné au-dessous du premier plan sera au second plan dans les calques-enfants de Silex. Et ainsi de suite…

* Pour les types de transitions d’ouverture et/ou de fermeture des calques, vous pouvez modifier l’animation d’apparition d’un calque sur le Clip nommé <show> de la bibliothèque Flash. Vous pouvez également modifier l’animation de fermeture du calque sur le Clip nommé <close>.

* Pour modifier les animations de chargement des calques, sur le Clip <transition> et <transition_close>, personnalisez l’animation du loader qui se déclenche au début et à la fin du chargement du calque.

Où publier les gabarits d’animation ?

Votre fichier modifié doit être publié ou exporté en swf dans le répertoire <layout/> de votre serveur Silex. Pour ce faire, vous devez simplement préciser le répertoire dans les paramètres de publication depuis l’onglet fichier de Flash.

Il est possible de compiler votre fla en swf grâce aux logiciels Mtask et haXe.

Pour appliquer votre gabarit d’animation à votre publication Silex, dans l’onglet <gabarits> des propriétés avancées du manager, cliquer sur l’icône du dossier pour parcourir vos répertoires et charger votre fichier swf.

Il est possible également d’appliquer un gabarit d’animation à un calque en particulier. Vous devez alors préciser le nom exact du fichier swf (exemple : gabarit.swf) dans la <Navigation> de la boîte à outils <Propriétés> de Silex.

#5 Roi valeureux

    Ceinture Blanche

  • Members
  • Pip
  • 6 messages

Posté 13 June 2013 - 14:31 PM

http://www.silexlabs...-silex/layouts/



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

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