Du flash dans le header

Messagepar johnhummer » Mer 30 Déc 2009, 12:37

Bonjour,

Il y a quelques posts (et même une doc sur le wiki http://www.oscss.org/wiki/doku.php?id=osc:flash), mais cela ne résout pas tous les problèmes.

En particulier, lorsque l'on inclus une animation flash dans l'en-tête (header), celle-ci est jouée à chaque fois que l'on navigue entre les pages, ce qui est normal car le header est inclus partout. C'est un effet parfois désiré (faire défiler des promotions), mais souvent franchement agaçant lorsque l'animation est complexe et n'a pour objet que de présenter le site. Le but recherché: jouer l'animation uniquement lorsque l'on est sur la page principale (index.php). Après plusieurs recherches, voici une solution: il faut connaître à tout moment la page consultée. Si le chemin menant à la page contient index.php et que le cPath n'est pas défini, alors on est sur la page principale et l'on peut lancer l'animation. Sinon, on remplace l'animation par une image. En réalité, l'astuce consiste à conditionner l'inclusion de l'objet flash uniquement dans le header de la page principale et pas de le header des autres pages. Une image de fond est définie par défaut via les css pour le header (elle est cachée par l'animation et est visible là où l'objet flash n'est pas inclus).

Voici le code à insérer dans votre template à l'endroit où est définie l'en-tête:

Code: Tout sélectionner
<div id="header">
                       
<?php // $_SERVER['PHP_SELF'] donne le chemin courant
 // $cPath contient une variable de lien (index.php?XXX)
 //
  // Si le chemin contient index.php et que la variable de lien n'est
       // pas définie, on est sur la page principale: on joue l'animation
  // Sinon, on ne place pas l'animation flash, c'est l'image définie
       //dans le css qui prend la place

      if (preg_match("[index.php]",$_SERVER['PHP_SELF']) && (!(isset($cPath) && tep_not_null($cPath))))
        {
        ?> <object classid="clsid:D27CDB6E-AE6D-11cf96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="785" height="225">
           <param name="movie" <?php echo 'value="' . DIR_WS_TEMPLATES . $template . DIR_WS_FLASH . 'banner.swf"'?> >
          <param name="quality" value="high">
           <param name="LOOP" value="false" >
         <embed <?php echo 'src="' . DIR_WS_TEMPLATES . $template . DIR_WS_FLASH . 'banner.swf"'?> quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="785" height="225"></embed>
          </object>
  <?php } ?>
</div>

Votre css doit définir une image de fond pour l'en-tête:
Code: Tout sélectionner
#header {
  float: left;
  width: 800px;
 height: 230px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
 background-image: url(img/header_bg.png);
 background-position: -7px 0px;
}

Si l'animation se termine par une image qui doit-être présente sur toutes les pages (le logo par exemple), il faut prendre pour image de fond du header la dernière image affichée par l'animation. Facile à dire, mais plus difficile à réaliser, surtout pour faire coïncider les deux...

Note: j'ai défini une variable DIR_WS_FLASH dans le configure.php (qui pointe sur un répertoire contenant les animations flash, celui-ci étant spécifique à un template), mais vous êtes libre de placer vos animations où bon vous semble... A vous d'adapter le code :)

En espérant que cela vous sera utile. En tout cas, cela fonctionne chez moi !
Dernière édition par johnhummer le Mer 30 Déc 2009, 12:44, édité 1 fois.
johnhummer
Membre actif
 
Messages: 34
Inscription: Mer 30 Déc 2009, 11:56

Messagepar j4k » Mer 30 Déc 2009, 13:29

Très utile effectivement, et cela est encore plus propre en utilisant la variable globale $page_content définie pour chaque page :

Code: Tout sélectionner
 if ($page_content=="index.php") {

Il est aussi très utile de glisser cette variable en Id dans le body afin de customiser chaque partie du site à partir de votre css.
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar cynic- » Mer 30 Déc 2009, 17:29

Bienvenue à toi johnhummer et merci pour cette technique (1er post en plus !)
On peut même être plus "propre" en appelant swfobject depuis l'en-tête
Code: Tout sélectionner
<script type="text/javascript" src="includes/swfobject.js"></script>

Puis on inclut le code du Flash comme ceci :
Code: Tout sélectionner
  <div id="animation">ici mon contenu alternatif</div>
  <script type="text/javascript">
   // <![CDATA[
    var so = new SWFObject("flash/MonFlash.swf", "test", "610", "260", "7", "#ffffff");
   so.addParam("wmode", "transparent");
    so.write("animation");
    // ]]>
  </script>

Ainsi on reste "valide" ;) A adapter bien sûr
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar johnhummer » Jeu 31 Déc 2009, 07:45

Merci pour ces précisions ! Je ne suis pas un pro du PHP et je ne connais pas encore bien les entrailles d'osCSS, alors toute remarque est la bienvenue, surtout venant des anciens ;)
johnhummer
Membre actif
 
Messages: 34
Inscription: Mer 30 Déc 2009, 11:56

Messagepar johnhummer » Sam 02 Jan 2010, 11:28

Mise à jour:

La méthode flash/javascript décrite ici fonctionne avec les versions 1.5 et antérieures de swfobject, mais plus avec les versions 2.1 et 2.2. Si vous utilisez swfobject 2.2, voici le code dynamique qui fonctionne:

Code: Tout sélectionner
<div id="header">
  <?php // $page_content contient la page courante
  //
  // Si la page courante est index.php, on est sur la page principale: on joue l'animation
 // Sinon, on ne place pas l'animation flash, c'est l'image définie dans le css qui prend la place

  if ($page_content=="index.php")
   { ?> 
    <p><strong>You need to upgrade your Flash Player !</strong></p>
   
    <script type="text/javascript">
      swfobject.embedSWF("banner.swf", "header", "785", "228", "9.0.0");
   </script>

 <?php
  }
 ?>
                       
</div>

Il existe aussi une méthode statique, mais elle impose une double définition des objets (voir http://egypte.olympe-network.com/swfobj ... es-swf-1-5).

Note: swfobject n'est pas inclus par défaut dans osCSS, il vous faudra le télécharger et mettre le fichier swfobject.js dans un répertoire (includes par exemple)
johnhummer
Membre actif
 
Messages: 34
Inscription: Mer 30 Déc 2009, 11:56

Messagepar oscim » Dim 03 Jan 2010, 13:39

Salut, juste pour rebondir...


Il me semble que avec l'utilisation, swfobject.js, il serait souhaitable de placer ce script dans le repertoire du template, et pas celui de l'include.

Je m'explique.

Les fichiers appelé via le js
Code: Tout sélectionner
<script type="text/javascript" src="includes/swfobject.js"></script>

precise le lieux ou est placer le fichier. Or le rep include et le repertoire sensible d'oscss.

Perso , je placerai les scripts systhematiquement dans le rep templates, afin de ne jamais rendre visible l'arboresnance du moteur..
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33

Messagepar johnhummer » Jeu 07 Jan 2010, 08:46

Bonjour,

Je vais me faire l'avocat du Diable: l'arborescence d'osCSS n'est-elle pas connue ? D'ailleurs, on conseille de renommer le répertoire admin sur le serveur de production. De plus, on peut interdire le listage des répertoires via le .htaccess (option -Indexes) et mettre un index.html vide...
johnhummer
Membre actif
 
Messages: 34
Inscription: Mer 30 Déc 2009, 11:56

Messagepar oscim » Jeu 07 Jan 2010, 23:14

Si, bien sur que l'arboresance est connue, cela dit, il est dans ce cas necessaires de detecter si ce n'est pas mentionné le moteur.

Pour un both, un chemin direct c'est plus simple.

D'autre part, effectivement je ne saurais trop conseiller l'utilisation des htaccess.

Mais je persiste a preferer donner un minimun d'information, et limiter l'appel des js a certain repertoire ciblé.
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33

Messagepar cynic- » Ven 08 Jan 2010, 14:09

oscim a écrit:Mais je persiste a préférer donner un minimum d'information, et limiter l'appel des js a certains répertoires ciblés.

Justement le fichier general.js se trouvant dans includes/ j'avais mis swfobject.js au même endroit.
Mais la logique voudrait effectivement de placer le flash dans mon template puisque c'est une fonctionnalité et un design propres à la charte graphique choisie pour ce site.
Dernière édition par cynic- le Ven 08 Jan 2010, 14:10, édité 1 fois.
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron