[Doc] Menu en flash

Découvrez ici une liste de documents concernant phpBB: son installation, sa mise à jour et enfin son utilisation.
En bref, apprenez ici à vous servir de phpBB2!

Modérateur: Equipe

Règles du forum
A lire impérativement sur notre page : Règlement

[Doc] Menu en flash

Messagepar and1hotsauce » 07 Aoû 2006 à 12:06

» Sommaire
Ce tutorial va vous montrer comment faire un menu en flash pour phpBB

    I. Intro
    II. Les données phpbb à transmettre au flash
    III. Les techniques de transmissions/d' envoi de données au flash
      III.1 par paramètres
    IV. flash : Afficher les liens dont on a besoin.
    V. Adaptation avec phpBB & ses templates
    VI. Exemple
    VII. Aller plus loin

I. Intro

Ce tutorial à pour but de montrer comment on peut faire un menu dynamique (pour les données, et non pour l' affichage graphique) en flash.
Je ne suis pas expert en flash, mais je me débrouille quand j' en ai besoin. La/les technique(s) exposée(s) ici ne sont pas garanties les meilleures, bien que je n' ai pas trouvé d' autres solutions pour le moment ;-)


    Image Info: Ce tutorial n' est pas fait pour apprendre le flash, ni l' action script. Pour comprendre ce tutorial un minimum de prérequis est indispensable.


Les prérequis
  • Connaitre un minimum les fenêtres du programme.
  • Savoir faire un bouton en flash.

II. Les données phpbb à transmettre au flash

Les données nécéssaires au menu phpbb sont :

l' info "connecté ou non" :
Cela permet de savoir les liens à afficher.

Dans phpBB, après que le système de sessions soit lancé (au tout début du script), on peut connaître cette info avec la variable
Code: Tout sélectionner
$userdata['user_logged_in']


l' identifiant de session :
C' est ce qui apparait après sid= dans l' url.
Ca permet d' identifier la session qu' on utilise sur le moment pr la connexion au forum. Cette info est nécéssaire pour la déconnexion mais en général on la met pour chaque url de manière à garantir le maintient de la session ;-)

Encore une fois la variable $userdata va servir puisqu' on peut connaitre l' id de session avec :
Code: Tout sélectionner
$userdata['session_id']


III. Les techniques de transmissions/d' envoi de données au flash

    III.1 par paramètres

    C' est technique est assez simple.
    Elle consiste à passer en paramètre les données dont on a besoin à la manière de la méthode GET en php.
    Il suffit de faire comme suit :
    Code: Tout sélectionner
    mon_fichier.swf?var1=donnee1&var2=donnee2


    Dans le fichier flash, dans un calque que je nommerai "action", on pourra récupérer les infos avec le code actionscript :
    Code: Tout sélectionner
    _root.var1
    et
    Code: Tout sélectionner
    _root.var2


    Si le swf n' a pas reçu de paramètres, ces deux variables auront la valeur : undefined (sans guillemets)

    Donc pour chaque donnée que l' on passe en paramètre, on va la contrôler.

    Immaginons qu' on a :
    Code: Tout sélectionner
    mon_fichier.swf?logged=1&sid=d454e54de545166


    dans l' action du calque "action" on aura :

    Code: Tout sélectionner
    var logged = 0;
    var session_id = '';
    
    
    /*Si le paramettre logged est égal a 1 (signifie connecté) et si l' id a été transmise en paramètre*/
    if( parseInt(_root.logged) == 1 && (_root.sid != undefined) )
    {
         logged = 1;
         session_id = _root.sid;
    }


    en fonction de cette donnée, on saura quel lien à ou à ne pas afficher ;-).
    Nous verrons pas la suite comment gérer ces liens :)

    Avantages :
    • Simple d' utilisation
    Inconvéniants :
    • les données passées en paramètres sont visibles dans le code source. C' est un problème si on veut masquer au maximum les données envoyées



IV. flash : Afficher les liens dont on a besoin.

Une fois la donnée id récupérée (par l' une des méthodes présentées ci-dessus) on peut afficher les liens que l' on souhaite et masquer les autres.

Liens lorsqu' on est connecté :
Ce sont les liens vers :
  • la page de déconnexion
  • la page de messages privés
  • la page d' édition du profil


Liens lorsqu' on n' est pas connecté :
Ce sont les liens vers :
  • la page d' enregistrement
  • la page de connexion

Une première solution est d' utiliser deux frames.
Dans une frame on affiche les liens qui apparaitront lorsqu' on est connecté et dans l' autre les liens lorsqu' on est pas connecté.
Image
Comme dit précédement, le but de ce tuto n' est pas d' apprendre le flash, donc je pars du fait que vous savez faire cela (c' est la base du flash)

Une fois nos deux frames prêtes à être utilisées, on utilise un peu d' action script (vraiment les bases aussi ca) permet d' afficher les liens désirés :

Admettons qu' en frame 1, on affiche les liens lorsqu'on n' est pas connecté et en frame 2 les liens quand on est connecté.
Code: Tout sélectionner
if( logged == 1)
{
       goToAndPlay(1);
}
else
{
       goToAndPlay(0);
}



Ceci dit cette technique n' est pass toujours possible ou alors trop complexe à mettre en oeuvre par rapport au flash dans lequel on est (cela arrive quand le fichier flash à une structure compliquée avec beaucoup d' animations)

Il existe une autre technique que l' on peut, normalement, utiliser en toutes circontances.
Ca se fait sans trop de difficulté en actionscript :

on considère que les boutons sont créés et ont les noms d' occurences : profile, pm, login, logout, register
Code: Tout sélectionner
/*_alpha règle la transparence de l' objet
/_x et _y sa position par rapport au coin sup. gauche*/
if( logged == 1)
{
        register._alpha = 0;
        register._x = -300;
        login._alpha = 0;
        login._x = 300;
}
else
{
        profile._alpha = 0;
        profile._x = -300;
        logout._alpha = 0;
        logout._x = -300;
        pm._alpha = 0;
        pm._x = -300;
}


On masque donc les liens en les rendant transparant (alpha = 0).
Cela ne suffit pas car ils sont toujours la mais sont juste masqués !
On les déplacent donc en dehors de l' espace d' affichage flash.

V. Adaptation avec phpBB & ses templates

La partie flash étant terminée, il ne reste plus que la partie php/html ;-)

Dans phpBB, le fichier includes/page_header.php s' occupe de gérer le dessus du forum et templates/votre_template/overall_header.php s' occupe de la structure html.

    V.1 Avec la première technique
    Dans votre overall_header.tpl il faut mettre le code pour afficher l' header flash :
    Code: Tout sélectionner
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="..." height="...">
    <param name="movie" value="{U_SWF}">
    <param name="quality" value="high">
    <embed src="{U_SWF}" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="..." height="..."></embed>
    </object>

    Bien sur il faut mettre les bonnes valeurs à width et height ! ;-)
    Comme vous pouvez le constater, il y a la présence d' une variable template {U_SWF}. Elle est nécéssaire car le lien est dynamique (avec variable)

    onc il faut la déclarer dans page_header.php :
    il faut l' ajouter a l' endroit ou on déclare les variables templates c' est à dire cette portion de code :

    Code: Tout sélectionner
    //
    // The following assigns all _common_ variables that may be used at any point
    // in a template.
    //
    $template->assign_vars(array(
    	'SITENAME' => $board_config['sitename'],
    	'SITE_DESCRIPTION' => $board_config['site_desc'],
    	'PAGE_TITLE' => $page_title,
    	'LAST_VISIT_DATE' => sprintf($lang['You_last_visit'], $s_last_visit),
    	'CURRENT_TIME' => sprintf($lang['Current_time'], create_date($board_config['default_dateformat'], time(), $board_config['board_timezone'])),
    	'TOTAL_USERS_ONLINE' => $l_online_users,
    	'LOGGED_IN_USER_LIST' => $online_userlist,
    	'RECORD_USERS' => sprintf($lang['Record_online_users'], $board_config['record_online_users'], create_date($board_config['default_dateformat'], $board_config['record_online_date'], $board_config['board_timezone'])),
    	'PRIVATE_MESSAGE_INFO' => $l_privmsgs_text,
    	'PRIVATE_MESSAGE_INFO_UNREAD' => $l_privmsgs_text_unread,
    	'PRIVATE_MESSAGE_NEW_FLAG' => $s_privmsg_new,
    
    	'PRIVMSG_IMG' => $icon_pm,
    
    	'L_USERNAME' => $lang['Username'],
    	'L_PASSWORD' => $lang['Password'],
    	'L_LOGIN_LOGOUT' => $l_login_logout,
    	'L_LOGIN' => $lang['Login'],
    	'L_LOG_ME_IN' => $lang['Log_me_in'],
    	'L_AUTO_LOGIN' => $lang['Log_me_in'],
    	'L_INDEX' => sprintf($lang['Forum_Index'], $board_config['sitename']),
    	'L_REGISTER' => $lang['Register'],
    	'L_PROFILE' => $lang['Profile'],
    	'L_SEARCH' => $lang['Search'],
    	'L_PRIVATEMSGS' => $lang['Private_Messages'],
    	'L_WHO_IS_ONLINE' => $lang['Who_is_Online'],
    	'L_MEMBERLIST' => $lang['Memberlist'],
    	'L_FAQ' => $lang['FAQ'],
    	'L_USERGROUPS' => $lang['Usergroups'],
    	'L_SEARCH_NEW' => $lang['Search_new'],
    	'L_SEARCH_UNANSWERED' => $lang['Search_unanswered'],
    	'L_SEARCH_SELF' => $lang['Search_your_posts'],
    	'L_WHOSONLINE_ADMIN' => sprintf($lang['Admin_online_color'], '<span style="color:#' . $theme['fontcolor3'] . '">', '</span>'),
    	'L_WHOSONLINE_MOD' => sprintf($lang['Mod_online_color'], '<span style="color:#' . $theme['fontcolor2'] . '">', '</span>'),
    
    	'U_SEARCH_UNANSWERED' => append_sid('search.'.$phpEx.'?search_id=unanswered'),
    	'U_SEARCH_SELF' => append_sid('search.'.$phpEx.'?search_id=egosearch'),
    	'U_SEARCH_NEW' => append_sid('search.'.$phpEx.'?search_id=newposts'),
    	'U_INDEX' => append_sid('index.'.$phpEx),
    	'U_REGISTER' => append_sid('profile.'.$phpEx.'?mode=register'),
    	'U_PROFILE' => append_sid('profile.'.$phpEx.'?mode=editprofile'),
    	'U_PRIVATEMSGS' => append_sid('privmsg.'.$phpEx.'?folder=inbox'),
    	'U_PRIVATEMSGS_POPUP' => append_sid('privmsg.'.$phpEx.'?mode=newpm'),
    	'U_SEARCH' => append_sid('search.'.$phpEx),
    	'U_MEMBERLIST' => append_sid('memberlist.'.$phpEx),
    	'U_MODCP' => append_sid('modcp.'.$phpEx),
    	'U_FAQ' => append_sid('faq.'.$phpEx),
    	'U_VIEWONLINE' => append_sid('viewonline.'.$phpEx),
    	'U_LOGIN_LOGOUT' => append_sid($u_login_logout),
    	'U_GROUP_CP' => append_sid('groupcp.'.$phpEx),
    
    	'S_CONTENT_DIRECTION' => $lang['DIRECTION'],
    	'S_CONTENT_ENCODING' => $lang['ENCODING'],
    	'S_CONTENT_DIR_LEFT' => $lang['LEFT'],
    	'S_CONTENT_DIR_RIGHT' => $lang['RIGHT'],
    	'S_TIMEZONE' => sprintf($lang['All_times'], $l_timezone),
    	'S_LOGIN_ACTION' => append_sid('login.'.$phpEx),
    
    	'T_HEAD_STYLESHEET' => $theme['head_stylesheet'],
    	'T_BODY_BACKGROUND' => $theme['body_background'],
    	'T_BODY_BGCOLOR' => '#'.$theme['body_bgcolor'],
    	'T_BODY_TEXT' => '#'.$theme['body_text'],
    	'T_BODY_LINK' => '#'.$theme['body_link'],
    	'T_BODY_VLINK' => '#'.$theme['body_vlink'],
    	'T_BODY_ALINK' => '#'.$theme['body_alink'],
    	'T_BODY_HLINK' => '#'.$theme['body_hlink'],
    	'T_TR_COLOR1' => '#'.$theme['tr_color1'],
    	'T_TR_COLOR2' => '#'.$theme['tr_color2'],
    	'T_TR_COLOR3' => '#'.$theme['tr_color3'],
    	'T_TR_CLASS1' => $theme['tr_class1'],
    	'T_TR_CLASS2' => $theme['tr_class2'],
    	'T_TR_CLASS3' => $theme['tr_class3'],
    	'T_TH_COLOR1' => '#'.$theme['th_color1'],
    	'T_TH_COLOR2' => '#'.$theme['th_color2'],
    	'T_TH_COLOR3' => '#'.$theme['th_color3'],
    	'T_TH_CLASS1' => $theme['th_class1'],
    	'T_TH_CLASS2' => $theme['th_class2'],
    	'T_TH_CLASS3' => $theme['th_class3'],
    	'T_TD_COLOR1' => '#'.$theme['td_color1'],
    	'T_TD_COLOR2' => '#'.$theme['td_color2'],
    	'T_TD_COLOR3' => '#'.$theme['td_color3'],
    	'T_TD_CLASS1' => $theme['td_class1'],
    	'T_TD_CLASS2' => $theme['td_class2'],
    	'T_TD_CLASS3' => $theme['td_class3'],
    	'T_FONTFACE1' => $theme['fontface1'],
    	'T_FONTFACE2' => $theme['fontface2'],
    	'T_FONTFACE3' => $theme['fontface3'],
    	'T_FONTSIZE1' => $theme['fontsize1'],
    	'T_FONTSIZE2' => $theme['fontsize2'],
    	'T_FONTSIZE3' => $theme['fontsize3'],
    	'T_FONTCOLOR1' => '#'.$theme['fontcolor1'],
    	'T_FONTCOLOR2' => '#'.$theme['fontcolor2'],
    	'T_FONTCOLOR3' => '#'.$theme['fontcolor3'],
    	'T_SPAN_CLASS1' => $theme['span_class1'],
    	'T_SPAN_CLASS2' => $theme['span_class2'],
    	'T_SPAN_CLASS3' => $theme['span_class3'],
    
    	'NAV_LINKS' => $nav_links_html)
    );


    on rajoute à la fin, avant le
    Code: Tout sélectionner
    )
    );

    la déclaration de la variable :
    Code: Tout sélectionner
    ,'U_SWF' => 'header.php?logged=' . $userdata['session_logged_in']


    Et le tour est joué ;-)

    V.1 Avec la deuxième technique
    Dans votre overall_header.tpl il faut mettre le code pour afficher l' header flash :
    Code: Tout sélectionner
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="..." height="...">
    <param name="movie" value="header.swf">
    <param name="quality" value="high">
    <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="..." height="..."></embed>
    </object>


    ici header.swf reste fixe, donc pas besoin de variable template.

    Il reste a créer la page php dont on a parlé dans le point III.2 :)

    Code: Tout sélectionner
    <?php 
    define('IN_PHPBB', true); 
    $phpbb_root_path = './'; 
    include($phpbb_root_path . 'extension.inc'); 
    include($phpbb_root_path . 'common.'.$phpEx); 
    
    // 
    // Start session management 
    // 
    $userdata = session_pagestart($user_ip, PAGE_INDEX); 
    init_userprefs($userdata); 
    // 
    // End session management 
    //
    
    echo 'logged=' . $userdata['session_logged_in'];
    ?>
    



VI. Exemple
Pour que vous pigiez jusqu' au bout, je fais faire un petit exemple à l' aide de screen et avec la source en téléchargement.
Cet exemple a pour but de montrer la technique pour y arriver et non pas pour montrer un menu magnifique. Dans ce cas ci il sera tout simple de manière à faciliter la rédaction et la compréhension.

pour mon header je crée un nouveau document que je nommerai "menu_phpbb2". celui-ci fait 700px de largeur, 100px de hauteur.

  1. On crée les boutons
  2. On récupère les infos de phpbb.
  3. On s' occupe de l' affichage/masquage des liens
  4. On assigne les liens aux boutons
  5. Ajout dans le header

1. On crée les boutons
    Diverses posssibilités pour structurer son document sont possibles.
    Celle que je vais utiliser utiliser 3 calques et j' utiliserais la technique actionscript pr cacher les boutons (la deuxieme décrite dans le tuto, car elle posera rarament des problèmes ! ;-)

    mes 3 claques :
    1. Calque "connexion" qui aura les liens lorsqu' on est pas connecté.
      Pour rappel, il s' agit de : connexion, register
    2. Calque "deconnexion" qui aura les liens lorqu' on est connecté : deconnexion, profil, messages privés
    3. Calque "autre". Ce calque aura le reste de liens (lesquels sont indépendant de la connexion) : faq, liste des membres.
    Image

    Pour mon calque autre (je commence par celui la car lui reste statique).
    Je crée mes deux textes "faq" et "liste des membres" que je transforme tous les deux en bouton.

    Rappel : pour créer un bouton, cliquer sur le texte. Appuyer ensuite sur f8, rentrer le nom de l' élément valider.

    Ici, je donne par exemple comme nom à mon bouton faq : faq_bt
    Image

    pour mes deux boutons je rentre dedans (double cliquer sur le bouton pr rentrer dedans) et je définit une zone cliquable. Cette zone cliquable je la crée avec un rectange de fond blanc et sans bordure :
    Image

    Rem : si le fond des bouton n' est pas uni, on peut utiliser la propriété alpha pour mettre cette zone transparante :) mais je ne le détaille pas ici, une petite recherche sur l' ami google aidera suffisement :)

    Je ressors ensuite du bouton.

    Je procède de la même manière pour les autres claques "connexion" et "deconnexion" :
    Image Image

    De manière a réduire l' action script on va regrouper dans un clip les boutons lorsqu' on est connecté ensemble, et les boutons lorsqu' on est pas connecté ensemble également.
    Pour cela, on sélectionne les boutons du calque connexion :
    Image

    Ensuite il faut "marquer" de manière unique les boutons, pour pouvoir y accéder avec l' actionscript. On va donc leur donner un nom unique, appelé sous flash : nom d' occurence

    Rem : pour mettre un nom d' occurrence cliquez sur l' élement et dans la fenetre
    Image

    Faites de même pour les autres boutons ;-)

2. On récupère les infos de phpbb

    Ceci tout à déjà été vu, ca devrait donc aller tout seul :)

    Création du calque "action".
    Sur celui-ci partie action script je met le code qui récupère les infos : logged et sid :
    Image
    Comme vous le voyez j' ai aussi vérifié qu' il y avait pas d' erreur dans le script en cliquant sur le petit "V" bleu ;-)

3. On s' occupe de l' affichage/masquage des liens
    Pareillement, on a déjà vu ca plus haut, il faut utiliser les propriétés _x et _alpha.
    (voir screen du point VI.2)

4. On assigne les liens aux boutons
    Cliquez sur chacun des boutons et dans la partie action script mettez :
    Code: Tout sélectionner
    on (press) {
    	getURL('url de la page');
    }


    les urls des pages sont :

    faq => 'faq.php'
    liste des membres => 'memberlist.php'
    connexion => 'login.php'
    deconnexion => 'login.php?logout=true&sid=' + _root.session_id
    messages personnels => 'privmsg.php?folder=inbox
    profil => 'profile.php?mode=editprofile'
    s' enregistrer => 'register.php'



5. Ajout dans le header
    Le plus simple est de regarder dans l' archive le fichier overall_header.tpl :)

7. Conseils
    A la base, phpBB n' a pas besoin de flash. Le flash est donc un plus, une option supplémentaire. Il ne faut donc pas que ca devienne une entrave ! Autrement dit si un membre n' a pas le flash, il ne faut pas qu' il soit (trop) gêné. Or c' est le cas il n' y a que l' header flash comme moyen de naviguation .... !
    Je conseille donc de laisser un menu en html/php apparaître quelque part (dans le bas du forum par exemple) de telle manière à ce que l' utilisateur n' ayant pas flash puisse naviguer ;-)
    Biensûr plusieurs me diront "rare sont ceux qui n' ont pas flash".
    Je peux déjà donner deux exemples ou cela m' est arrivé :
    - A l' université quand le plugin est pas à jour, je ne savais pas voir l' header de mon site. Et je n' avais pas les droits suffisant pour le mettre à jour, j' étais donc bloqué

    - Certaines versions d' Ubuntu (distribution linux qui gagne chaque jours de nouveau utilisateurs) ont des problèmes quand à l' installation du plugin flash (notamment la dernière version 64 bits)

    Bref je pense que ca n' est pas à négliger ;-) :)
    De toute façon permettra à n' importe qui de naviguer sur son site est un signe de qualité :)

    Egalement, essayez d' éviter les header trop lourd. un forum est un programme dont les pages sont rechargées très souvent. Même si c' est mis en cache, un flash peut très vite alourdir une page ;-)

    Et enfin, éviter les animations "trop voyantes" ou trop longue car il ne faut pas oublier qu' a chaque rechargement de page l' animation sera remis à 0 ;-)

--> Le fichier menu_phpbb.fla, menu_phpbb.swf et le fichier overall_header.tpl sont disponibles dans l' archive rar : http://www.phpbb-fr.com/ftp/cdd/phpbb2/menu_phpbb.rar
ou en zip : http://www.phpbb-fr.com/ftp/cdd/phpbb2/menu_phpbb.zip



VII. Aller plus loin

Il y a moyen d' aller encore plus loin au niveau du flash.

On pourrait par exemple envoyer au flash, les textes des liens, de telles manière à ce que le flash ait les liens en anglais si la langue sélectionnée est l' anglais (par exemple).

Je ne vais pas le développer car vous disposez normalement de quasiment tout pour y arriver tout seul ;-)

Aide coté phpBB : Les variables accessibles dans le header qui contiennent les textes dans la language sélectées sont :
Code: Tout sélectionner
$lang['Register']
$lang['Profile']
$lang['Edit_profile']
$lang['Search']
$lang['Memberlist']
$lang['FAQ']

Il reste a les envoyer au flash et à les utiliser ;-)

Une autre amélioration est d' ajouter dans le flash, le nombre de MP non lus.
Aide coté phpBB :
Code: Tout sélectionner
$userdata['user_unread_privmsg']


Voilà, je pense que vous avez toutes les cartes en mains pour aller plus loin ;-)
Avatar de l’utilisateur
and1hotsauce
Grand-maître des floodeurs
Grand-maître des floodeurs
 
Messages: 3517
Enregistré le: 19 Oct 2003 à 14:58
Localisation: belgique, mons

Retourner vers [phpBB 2.0.x] Forum de documentation

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

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