Grouper des boutons actifs

 Tuto  Commentaires fermés
fév 182011
 

Boutons actifs-inactifs groupés

Les boutons actifs/inactifs peuvent être groupés pour qu’un seul d’entre eux soit actif à chaque instant. Lancez l’animation flash ci-dessus pour comprendre l’intérêt de la chose.

1. Création des boutons

Chaque bouton est de type interactif avec l’option actif/inactif. Pour éviter de resaisir le texte du bouton dans chaque page correspondant à un état différent, on synchronise le texte (à l’aide de la palette contenu partagé) : ainsi un changement de texte dans les blocs placés ici sur la page 1 mais qui devraient se trouver en dehors de la page modifiera instantanément le texte dans chaque état du bouton tout en conservant ses attributs spécifiques couleur, ombre, opacité… la mise en page du premier bouton est dupliquée x fois pour obtenir les autres avec moins de travail à réaliser.

2. Intégration dans l’animation flash

Les boutons sont rassemblés sur la maquette de l’animation pour se retrouver sur chaque page et groupés pour en faire un groupe de boutons actifs. Sélection du groupe dans la palette interactif, on lui donne un nom et comme type d’objet, on choisit simplement « Groupe de boutons ». Étant donné que l’action des boutons est la même sur chaque page (afficher une page particulière) c’est aussi dans la maquette qu’on attribue à chacun une action « Afficher page » via l’onglet « Événement » de la palette Interactif.

3. Activer/Désactiver.

Le fait d’avoir des boutons dans la maquette de l’animation créera par défaut une copie de chacun des boutons sur chaque page. A chaque fois, il faudra attribuer au bouton concerné un statut « Actif » dans sa page, c’est tout.

Comme vous le constatez, aucun script n’a été nécessaire, et un minimum d’actions sont attribuées. Rapide …et eficace !

Une présentation rapide

 Tuto  Commentaires fermés
fév 072011
 

Vous venez de faire une charte graphique et désirez la présenter à votre client sous forme d’une présentation animée, faites-le en 2 temps 3 mouvements sans quitter QuarkXPress ! (Cliquez l’illustration ci-dessus pour avoir un aperçu, sauf depuis iOS bien sur). Commencez par dupliquer votre mise en page et changez son type en « Interactif » de type « Présentation ». Affichez la maquette de la mise en page et créez-y un bloc couvrant toute la surface de la page, dans la palette « Interactif », donnez-lui un nom et sous l’onglet « Événement », attribuez à la valeur « Cliquer, relacher » l’attribut « Exécuter un script », dans le sous-menu choisissez un des scripts existants « Go to next ». Allez ensuite à l’onglet scripts, on va un peu modifier ce script qui par défaut passe à la page suivante pour que sur la dernière page, il nous ramène au début de notre document.

Ajoutez une action de type « Contrôle » : If page (indiquez dans le champ le numéro de votre dernière page) est en cours et passez cette commande en tête de liste. Choisissez un type de transision qui vous convient pour la commande « Afficher page suivante », puis dupliquez-la et modifiez en « Afficher première page », glissez-la en seconde position. Dupliquez la commande « If » et changez-la en « Else », passez-la en troisième position. Dupliquez la encore une fois et changez-la en « End if ».

Il ne vous reste plus qu’à exporter votre présentation en flash pour la visualiser sur votre ordinateur, l’envoyer par email l’intégrer dans une page web ou la mettre en ligne telle quelle sur votre serveur.

Un panorama avec quarkXpress

 Tuto  4 réponses »
jan 102011
 


L’idée est de créer un panorama, ici un intérieur composé de quatre murs mais ça pourrait tout aussi bien être une photo de panorama assemblé et divisé en quatre images.

La mise en page

Commencez par créer une mise en page interactive de type « Présentation », puis insérez-y 4 blocs consécutifs contenant les 4 images du panorama. Ajoutez ensuite 2 blocs contenant une flèche (droite et gauche) avec un fond blanc pour masquer le début et la fin du panorama.

L’interactivité

Ouvrez la palette « Interactif » et nommez les blocs (ici, nord, sud, est et ouest), nommez ensuite les blocs contenant les flèches (ici navdroite et navgauche). Cliquez dans la palette sur l’onglet « Script », puis sur l’icône « + » pour ajouter un script.
Par défaut, notre script contient une action nommée « Aucune action », sélectionnez-la et dans le menu déroulant, choisissez « Expression/Définir… » cliquez le bouton à droite du champ en dessous pour ouvrir l’éditeur d’équations. Nous allons tout d’abord créer les 4 variables chargées de recueillir les coordonnées en x de nos 4 blocs. Cliquez le bouton « Variables : Créer/Modifier » et avec l’icône du « + », ajoutez 4 variables de type entier (ici coord_nord, coord_sud, etc.). Dans le champ d’équations, tapez « coord_est=est.GetX() » pour attribuer les coordonnées en x du bloc « est » à la variable « coord_est ». Utilisez le bouton « Dupliquer l’action » pour répéter l’opération pour les autres variables en modifant à chaque fois le bloc et la variable.
Ajoutez à la suite de ces 4 lignes une action « Glisser objet » avec pour options objet : est ; méthode : décalage (x,y) ; décalage x : 500 (la largeur du bloc). Répétez pour les 3 autres blocs.
Maintenant nous allons déplacer les blocs au fur et à mesure qu’ils dépasseront la mise en page par la droite. Ajoutez une action de type « Contrôle » ; action : IF ; expression : (ouvrez l’éditeur) « coord_est>=1000″, si la condition est remplie, nous voulons déplacer le bloc à gauche de notre mise en page, avant qu’il ne puisse apparaître : pour celà, on ajoute une action « Définir position objet » de type « Position (x,y) avec « -500″ pour x et « 186″ pour y (la hauteur du point supérieur des blocs).
puis une action de type « Contrôle » « End if » pour fermer notre boucle. Répétez les 3 lignes pour chaque bloc, notre script est terminé, vérifiez que vous avez bien 20 lignes.
Pour la navigation vers la gauche, on va simplement dupliquer notre script et changer le décalage des blocs à -500 au ieu de 500, la condition à <0 au lieu de >=1000 et le déplacement final à 1000 au lieu de -500. Ça va plus vite à faire qu’à écrire ;) .
Pour utiliser nos scripts, nous allons cliquer sur l’onglet « Événements » et sélectionner « navdroite » pour lequel on choisira « Cliquer (relacher) » auquel on attribuera l’action « exécuter script » et le script de déplacement à droite, la même chose pour le bloc navgauche avec l’autre script.
Un clic sur l’icone en forme de fleche en bas de votre mise en page lancera le fichier flash ainsi créé (cliquez sur l’image ci-dessus pour voir le résultat).