Imprimer

[Yorigami]

Bonjour à tous.
Je travaille depuis quelque temps sur un projet de « visionneuse flash » qui permettra d’accéder à une base de données de documents (livres de comptes, documents administratifs, courriers et archives de 1850 à 1913) scannés.
Cette base de données sera accessible au travers d’un ou plusieurs fichiers XML.
Voici le lien de la première maquette.
VISIONNEUSE
 L’interface n’est pas super design, le site est un projet collaboratif ou les membres de l’association et les villages apprennent le maniement de l’ordinateur au travers de réalisations simples et concretes, ils sont totalement débutants. Mon travail est de m’assurer du bon fonctionnement de tout cela et répondre par mes connaissances techniques aux différents problèmes et idées rencontrées. les JPG en ligne ne sont pas les bons, les scans finaux sont en cours de réalisation.

Mon problème pour cette visionneuse est que je souhaiterais pouvoir proposer sur mon interface un premier menu (certainement par un composant « liste » sur la droite de la visionneuse) qui listera les différents types de documents, et une navigation simple qui permettra de naviguer de page en page, ou allez, soyons fous, directement en tapant le folio dans un champ.
Mes piètres connaissances en flash m’ont permis de créer une première partie de la visionneuse (des bouts de code volés à droite et à gauche), mais le menu reste pour moi un grand mystère quant à sa réalisation. L’interaction des deux éléments, menu et navigation sont également très flous, voir énigmatique dans la hiérarchisation de l’AS.
Vos conseils sont les bienvenus.

[RMistral (Wisi)]

Bonjour,

Ton problème ne peut être résolu qu'avec de la programmation AS. Pour taper le moins de code possible utilise le composant loader de flash qui permet de charger des photos avec une ligne de code. Pour ton menu il y a de nombreuses solutions. Suivant le nombre d'item du menu et le fait qu'il soit évolutif dans le temps ou pas. Je te propose une solution minimaliste sans xml avec un minimum de code

Tutorial :
Organisation des dossiers et des photos :
   Création d'un dossier par item de menu
   Stockage des photos dans le dossier correspondant. Nommage des photos suivant le principe
                partie fixe plus partie variable exemple : Photo1, Photo2,..... Photox
Organisation générale
   Dossier contenant tes fichiers Flash
   Sous Dossier contenant les photos de l’item 1 de ton menu
   Sous Dossier contenant les photos de l’item 2 de ton menu
   Etc…
Eléments nécessaire dans la bibliothèque Flash avant de commencer a coder :
   Un MovieClip boutonMenu
   Un MovieClip triangle
   Un composant Loader

Mode opératoire pour créer les éléments de ta bibliothèque :

Création du boutonMenu
   1.CTRL+ F8 pour créer un MovieClip nomme le boutonMenu
   2.Dessine un rectangle de 80 pixels sur 25 de haut position x =0, y=0 dans les propriétés
   3.Sur un nouveau calque fait une zone de texte dynamique couvrant la taille de ton rectangle.    Dans les propriétés règle 1 ligne, non sélectionnable, verdana 11 centré et donne-lui comme    nom d'occurrence texte_btn en minuscule.
Création triangle
   1.Ctrl+F8 pour créer un MovieClip nomme le triangle
   2.Dessine un triangle équilatéral dont la pointe est orientée vers la gauche
Composant Loader
   1.Affiche la bibliothèque des composants Ctrl+F7 et glisse à partir des UIInterface le    composant loader dans ta bibliothèque(F11)
 
Voilà nous sommes en état d’assembler sur la scène nos éléments.
   1.Glisse le composant loader sur la scène et règle sa taille pour pouvoir afficher tes photos
   2.Dans les propriétés nomme-le : affichage en minuscule
   3.Sur un nouveau calque glisse le MovieClip boutonMenu et nomme-le : bouton1_btn
   4.Sur un nouveau calque glisse le MovieClip triangle et nomme-le : gauche_btn
   5.Sur le même calque glisse le MovieClip triangle retourne le par Modification, Transformer,    retournement horizontal et nomme-le : droite_btn

Nous sommes maintenant parés pour écrire le code ActionScript
   1.Sur un nouveau calque clic droit sur la seule image clé et action
   2.Tape maintenant le code suivant en respectant scrupuleusement les majuscules minuscules

Code: [Sélectionner]

//------------------------------ Fonction -------------------------------------------------------------------------
//Fonction pour afficher la photo
affichePhoto=function(CheminActuel :String,NumeroPhotoActuelle :Number) :Void{
//Affiche la photo dans le composant Loader
affichage.contentPath= CheminActuel  +’’/Photo‘’+ NumeroPhotoActuelle
}
//------------------------------ Initialisation ---------------------------------------------------------------------
//Texte devant être écrit sur le bouton
bouton1_btn. texte_btn.text = ‘‘le texte que tu souhaite voir sur ton bouton de menu’’
//------------------------------- Gestion des boutons ----------------------------------------------------------
//Gestion du bouton 1 du menu
bouton1_btn.onRelease=function(Void) :Void{
/*Change si besoin la valeur par le nombre exact des photos
de ton dossier de l’item sur lequel tu travaille*/
var totalPhotoItem:Number=10
//Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
var nomDossierItem:String = ‘‘vacances’’
//Compteur de photo
var compteur:Number=1
//Appel a la function d’affichage
affichePhoto(nomDossierItem,compteur)
}
//Gestion du triangle droit
droite_btn.onRelease=function(Void) :Void{
//augmente le compteur de 1
compteur++
//Test si nous sommes inférieur au nombre total de photo du dossier
if(compteur<= totalPhotoItem){
//Appel fonction affichage
affichePhoto(nomDossierItem,compteur)
}else{
/*Nous avons dépassé le nombre de photo du dossier donc ne rien faire
C'est-à-dire que la dernière photo reste affiché*/
}
}
//Gestion du triangle gauche
gauche_btn.onRelease=function(Void) :Void{
//diminue le compteur de 1
compteur--
//Test si nous sommes supérieur a 0
if(compteur> 0){
//Appel fonction affichage
affichePhoto(nomDossierItem,compteur)
}else{
/*Nous sommes sur la première photo  donc ne rien faire
C'est-à-dire que la première photo reste affiché*/
}
}Voilà bon courage...

[Yorigami]

Houch la vache, ça c'est de la réponse.
Merci RMistral.
Bon je vais regarder ça attentivement et je vais commencer à préparer tous les éléments pour la Visionneuse.

[RMistral (Wisi)]

Encore lui .....

J'ai oublié de te dire que les lignes suivantes moyennant adaptation peuvent servir a générer les autres boutons s'il ne sont pas trop nombreux sinon faut faire une boucle.

Code: [Sélectionner]

//Gestion du bouton 1 du menu
bouton1_btn.onRelease=function(Void) :Void{
    /*Change si besoin la valeur par le nombre exact des photos
     de ton dossier de l’item sur lequel tu travaille*/
    var totalPhotoItem:Number=10
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    var nomDossierItem :String = ‘‘vacances’’
    //Compteur de photo
    var compteur:Number=1
    //Appel a la function d’affichage
    affichePhoto(nomDossierItem,compteur)
    }A adapter pour le bouton suivant après avoir glissé sur la scene, sur le calque contenant le premier bouton du menu, une nouvelle occurrence du movieClip boutonMenu et l'avoir nommer bouton2_btn

Code: [Sélectionner]

//Texte devant être écrit sur le bouton
bouton2_btn. texte_btn.text = ‘‘le texte que tu souhaite voir sur ton bouton de menu’’

//Gestion du bouton 1 du menu
bouton2_btn.onRelease=function(Void) :Void{
    /*Change si besoin la valeur par le nombre exact des photos
     de ton dossier de l’item sur lequel tu travaille*/
    var totalPhotoItem:Number=20
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    var nomDossierItem:String = ‘‘loisirs’’
    //Compteur de photo
    var compteur:Number=1
    //Appel a la function d’affichage
    affichePhoto(nomDossierItem,compteur)
    }Bien sur il faut penser à l'aspect graphique mais là j'ai pas le temps.....

[Yorigami]

J'en suis toujours à la première partie

Tout est OK sauf que le lien ne semble pas fonctionner.

J’ai ce message d’erreur :
Erreur d'ouverture de l'URL 'file:///Macintosh%20HD/Users/yorigami/Desktop/Flash/Photo/Photo1'

Mais le chemin est correct sauf que le nom du fichier est suivi de l’extension .jpg

Mon dossier principal contient le SWF et un Dossier « Photo » qui lui, contient les Photo1.jpg ; Photo2.jpg ; etc.

Quelque chose m’échappe mais je vois pas quoi.

[RMistral (Wisi)]

Bien essaye de faire un trace dans la fonction d'affichage

Code: [Sélectionner]

trace(CheminActuel  +’’/Photo‘’+ NumeroPhotoActuelle) juste avant
affichage.contentPath= CheminActuel  +’’/Photo‘’+ NumeroPhotoActuelleEnregistre aussi ton travail car si ton FLA n'est pas enregistré le fichier swf est créé dans un dossier temporaire qui n'est pas au bon emplacement par rapport au dossier photo.

Le problème peut aussi venir de l'extension dans un tel cas ajoute +".jpg" comme ça :

Code: [Sélectionner]

affichage.contentPath=CheminActuel +"/Photo"+ NumeroPhotoActuelle +".jpg"

[Yorigami]

Cool ça avance.
Avec .jpg la première image est bien chargée quand je clique sur le bouton menu.

Mais, quand je clique sur le triangle j'ai ce message.
Erreur d'ouverture de l'URL 'file:///Macintosh%20HD/Users/yorigami/Desktop/Flash/undefined/PhotoNaN.jpg'

Si je rajoute le "trace"
la première image s'affiche aussi, mais quand je clique sur le triangle j'ai ce message :

dossierphoto/photo1 [j'ai changé le non du dossier "photo" en "dossierphoto", c'est plus simple à comprendre pour moi]
undefined/photoNaN
Erreur d'ouverture de l'URL 'file:///Macintosh%20HD/Users/yorigami/Desktop/Flash/undefined/PhotoNaN.jpg'

puis à chaque clique sur le triangle.
undefined/PhotoNaN

Voici le code, ou ai-je fait une erreur ?

Code: [Sélectionner]

//------------------------------ Fonction -------------------------------------------------------------------------
//Fonction pour afficher la photo
affichePhoto=function(CheminActuel :String,NumeroPhotoActuelle :Number) :Void{
    //Affiche la photo dans le composant Loader
trace(CheminActuel  +"/photo" + NumeroPhotoActuelle)
    affichage.contentPath= CheminActuel  +"/Photo"+ NumeroPhotoActuelle +".jpg"
}
//------------------------------ Initialisation ---------------------------------------------------------------------
//Texte devant être écrit sur le bouton
bouton1_btn. texte_btn.text = "Photo"
//------------------------------- Gestion des boutons ----------------------------------------------------------
//Gestion du bouton 1 du menu
bouton1_btn.onRelease=function(Void) :Void{
    /*Change si besoin la valeur par le nombre exact des photos
     de ton dossier de l’item sur lequel tu travaille*/
    var totalPhotoItem:Number=4
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    var nomDossierItem:String = "dossierphoto"
    //Compteur de photo
    var compteur:Number=1
    //Appel a la function d’affichage
    affichePhoto(nomDossierItem,compteur)
    }
//Gestion du triangle droit
droite_btn.onRelease=function(Void) :Void{
//augmente le compteur de 1
    compteur++
//Test si nous sommes inférieur au nombre total de photo du dossier
    if(compteur<= totalPhotoItem){
        //Appel fonction affichage
        affichePhoto(nomDossierItem,compteur)
    }else{
        /*Nous avons dépassé le nombre de photo du dossier donc ne rien faire
        C'est-à-dire que la dernière photo reste affiché*/
    }
}
//Gestion du triangle gauche
gauche_btn.onRelease=function(Void) :Void{
//diminue le compteur de 1
    compteur--
//Test si nous sommes supérieur a 0
    if(compteur> 0){
        //Appel fonction affichage
        affichePhoto(nomDossierItem,compteur)
    }else{
        /*Nous sommes sur la première photo  donc ne rien faire
        C'est-à-dire que la première photo reste affiché*/
    }
}

[RMistral (Wisi)]

L'erreur vient de moi !!!! je me baffe !!!!!! Pour ma défense j'ai fais ce code sans avoir Flash à portée de main.

Quand une variable est déclarée dans une fonction sa portée c'est a dire son utilisation ne dépasse pas le cadre de cette fonction.

Dans le code actuel je dis la variable totalPhotoItem et la variable nomDossierItem n'existe que dans le bouton du menu donc quand tu clique sur les triangles les valeurs des 2 variables sont :

undefined pour la variable nomDossierItem qui est de type chaine de caractère.
NaN (Not a Number) pour la variable totalPhotoItem.

Il suffit de faire les modifs suivantes dans la partie initialisation :

Code: [Sélectionner]

//Texte devant être écrit sur le bouton
bouton1_btn. texte_btn.text = ‘‘le texte que tu souhaite voir sur ton bouton de menu’’
//Ici pour le prochain bouton
bouton2_btn. texte_btn.text = ‘‘le texte que tu souhaite voir sur ton bouton de menu’’
//Etc... pour les autres boutons
//Déclaration des variables de portée globale une seule fois
var totalPhotoItem:Number=0
var nomDossierItem:String = ""
var compteur:Number=0Maintenant remplace dans le code gérant le bouton :

Code: [Sélectionner]

var totalPhotoItem:Number=10
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    var nomDossierItem:String = "vacances"par :

Code: [Sélectionner]

totalPhotoItem=10
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    nomDossierItem= "vacances"
   compteur = 1Normalement ça marche.....

[Yorigami]

je suis vraiment une buse en code. :rolleyes:
Merci pour ton aide.

J'arrive pas à trouver, c'est sans doute super évident mais je tourne en rond, j'ai ce message après le clic sur le triangle.

Erreur d'ouverture de l'URL 'file:///Macintosh%20HD/Users/yorigami/Desktop/Flash/dossierphoto/PhotoNaN.jpg'

[RMistral (Wisi)]

Ne te décourage pas !!!

Tu progresse. Le seul problème qu'il te reste est le numéro de la photo qui est toujours sur NaN.
Il a manifestement trouvé le dossier puisque dans ton message il y a bien
.....Flash/dossierphoto/

Essaye comme çà

Code: [Sélectionner]

//------------------------------ Fonction -------------------------------------------------------------------------
//Fonction pour afficher la photo
affichePhoto=function(CheminActuel :String,NumeroPhotoActuelle :Number) :Void{
    //Affiche la photo dans le composant Loader
   affichage.contentPath= CheminActuel  +"/Photo"+ NumeroPhotoActuelle +".jpg"
}
//------------------------------ Initialisation ---------------------------------------------------------------------
//Texte devant être écrit sur les boutons
bouton1_btn. texte_btn.text = "Photo"
bouton2_btn. texte_btn.text = "Vacances"
bouton3_btn. texte_btn.text = "Loisirs"
var totalPhotoItem:Number = 0
var nomDossierItem:String = ""
var compteur:Number = 0
//------------------------------- Gestion des boutons ----------------------------------------------------------
//Gestion du bouton 1 du menu
bouton1_btn.onRelease=function(Void) :Void{
    /*Change si besoin la valeur par le nombre exact des photos
     de ton dossier de l’item sur lequel tu travaille*/
    totalPhotoItem=4
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    nomDossierItem = "dossierphoto"
    //Compteur de photo
    compteur=1
    //Appel a la function d’affichage
    affichePhoto(nomDossierItem,compteur)
    }
//Gestion du bouton 2 du menu
bouton2_btn.onRelease=function(Void) :Void{
    /*Change si besoin la valeur par le nombre exact des photos
     de ton dossier de l’item sur lequel tu travaille*/
    totalPhotoItem=10
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    nomDossierItem = "dossierphotovacances"
    //Compteur de photo
    compteur=1
    //Appel a la function d’affichage
    affichePhoto(nomDossierItem,compteur)
    }
//Gestion du bouton 3 du menu
bouton3_btn.onRelease=function(Void) :Void{
    /*Change si besoin la valeur par le nombre exact des photos
     de ton dossier de l’item sur lequel tu travaille*/
    totalPhotoItem=10
    //Change si besoin le texte entre guillemets par le nom du dossier contenant tes photos
    nomDossierItem = "dossierphotoloisirs"
    //Compteur de photo
    compteur=1
    //Appel a la function d’affichage
    affichePhoto(nomDossierItem,compteur)
    }

//Gestion du triangle droit
droite_btn.onRelease=function(Void) :Void{
//augmente le compteur de 1
    compteur++
//Test si nous sommes inférieur au nombre total de photo du dossier
    if(compteur<= totalPhotoItem){
        //Appel fonction affichage
        affichePhoto(nomDossierItem,compteur)
    }else{
        /*Nous avons dépassé le nombre de photo du dossier donc ne rien faire
        C'est-à-dire que la dernière photo reste affiché*/
    }
}
//Gestion du triangle gauche
gauche_btn.onRelease=function(Void) :Void{
//diminue le compteur de 1
    compteur--
//Test si nous sommes supérieur a 0
    if(compteur> 0){
        //Appel fonction affichage
        affichePhoto(nomDossierItem,compteur)
    }else{
        /*Nous sommes sur la première photo  donc ne rien faire
        C'est-à-dire que la première photo reste affiché*/
    }
}Il est possible de faire plus cours en utilisant les variables tableaux et les boucles mais bon commence déjà par comprendre et adapter le code puis nous verrons la suite éventuellement....

Courage...

[Yorigami]

Super, ça marche.
Ce soir je vais essayer d’intégrer le code du zoom de ma première version avec ton code.
En attendant, je vais essayer de comprendre où est la modification qui a réparé le problème dans le code.

Merci pour ton aide précieuse.

[kriztho]

Juste pour la beautée du geste et du codeur , il est plus rigoureux de finir les lignes s'instruction par un point virgule ;

[Yorigami]

Super Extra génialissime. :cool:
Le zoom et le menu par bouton fonctionnent après une toute petite prise de tête.
Je vais essayer de préparer plus proprement le .fla ainsi que le résultat SWF, plus dossiers exemples avec les images pour demain. Je le posterai sur le forum pour ceux que ça intéresse.
Merci encore RMistral pour ton aide et promis Kriztho, je n’oublierais pas les ;  
Bonne soirée.

[PomZed]

Whouaaaa.... !!!! :cool:
Bin, ça ! C'est une sacrée discussion et une aide rondement menée !!!!!

Félicitation et merci de ton dévouement, RMistral !

[Zeb]

ah ouais impressionnant ! RMistral !!