Crée ta Galerie

Sur cette page, tu trouveras :

Crée une catégorie

Dans l’activité Galerie, tu vas créer différentes images avec Vizcom, puis les organiser dans des catégories de ton choix (habitations, décors, personnages de manga imaginaires, animaux inventés, pièces de maison, etc.).

Pour chaque catégorie :

  • Importe une première image afin de créer un nouveau sprite.
  • Renomme ensuite ce sprite avec le nom de ta catégorie.
  • Dans l’onglet Costumes de ton sprite, ajoute les autres images en les important.
Chaque sprite correspondra ainsi à une catégorie contenant plusieurs images.

Crée un bouton

Actuellement, toutes tes catégories sont affichées en même temps. Or, pour rendre la galerie plus lisible, une seule catégorie doit être visible à la fois.

Nous allons donc créer un bouton pour chaque catégorie.

Lorsqu’un bouton est cliqué, il affiche les images de sa catégorie et masque les autres.

 

Dans l’exemple ci-contre, il y a trois catégories :

  • Personnages
  • Décors
  • Objets
 

Il y a donc trois boutons correspondants.

Quand tu cliques sur un bouton :

  • sa catégorie s’affiche
  • les deux autres se cachent

Le code

Pour faire fonctionner les boutons, nous allons utiliser un système de messages. Chaque bouton envoie un message différent lorsqu’on clique dessus. Ensuite, chaque sprite de catégorie réagit à ces messages pour s’afficher ou se cacher.

Principe de fonctionnement

  • Quand tu cliques sur un bouton, il envoie un message.
  • Les sprites de catégories reçoivent ce message.
  • En fonction du message reçu, ils s’affichent ou se cachent.

Chaque bouton doit envoyer un message correspondant à sa catégorie.

Exemple : Quand ce sprite est cliqué → envoyer le message Personnage

Code d’un bouton

Code d’une sprite de catégorie

Améliorer sa galerie

Bien placer ses images

Dans le sprite d’une catégorie, il est important de bien organiser l’affichage des images pour que la galerie soit agréable à utiliser.

Actuellement, deux problèmes peuvent apparaître :

  • Les images ne sont pas bien centrées
  • Les images passent devant les boutons

Dans le sprite d’une catégorie :

Certaines images peuvent être décalées et ne pas s’afficher correctement au centre de l’écran. Pour corriger cela, demande-leur d’aller en position (x : 0, y : 0) dans une boucle infinie. Ainsi, elles resteront toujours bien placées.

Second souci : parfois, les images peuvent se placer devant les boutons, ce qui empêche de cliquer dessus. Pour éviter ce problème, on utilise la même boucle pour les envoyer en arrière-plan.

Des boutons qui s’effacent

Dans le sprite d’un bouton :

Les boutons sont actuellement visibles en permanence sur l’image. C’est pratique pour cliquer dessus, mais ce n’est pas toujours très esthétique.

Nous allons donc ajouter un code pour les rendre presque invisibles lorsque la souris n’est pas dessus, et bien visibles quand on les survole.

Retour en haut