Images externes avec coins dynamiques

 

On se propose de montrer par script comment charger des images externes depuis un répertoire du serveur mais aussi de placer dynamiquement 2 coins.
Un script PHP sera utilisé pour lire le répertoire. Pour le reste, c'est essentiellement du script et une bonne compréhension de programmation est nécessaire.
La méthode setInterval sera utilisée.

Remarques :
Je ne me suis pas embarrassé à tester le chargement des images (un script élaboré le devrait)
D'autre part, les images situées dans le répertoire test utilisé ont toutes les mêmes dimensions.
Ce qui simplifie bien la tâche. Dans la démo, cliquez sur la scène pour changer d'image. Vous pouvez même accélérer en effectuant un double-clic.

⇒ animation ⇐

Les différentes étapes vont être décrites maintenant.

Création des Objets

1 - Définissez les dimensions générales 640x480 (couleur du fond #000033).
Prenez un Frame Rate égal à 100.
Assurez vous que dans l'onglet Export, Mask off-stage objects soit coché.

2 - On va créer un bouton virtuel qui aura la taille de la scène.
On verra dans le script comment des clics successifs permettent de changer d'image.
Vous allez d'abord créer un rectangle de taille 640x480 totalement transparent avec pour point d'ancrage le coin haut gauche. Nommez le comme indiqué.
Observez bien les images suivantes :

transform   hot spot

3 - Vous allez tracer une ligne verticale comme l'indiquent les figures :

transform   target

puis une autre :

transform   target

4 - Vous allez tracer une ligne horizontale comme l'indiquent les figures :

transform   target

puis une autre :

transform   target

5 - Vous allez maintenant tracer le coin supérieur. Ce coin sera constitué d'un rectangle extérieur coloré et d'un rectangle intérieur qui aura la même couleur que le fond de scène.
Tracez d'abord le rectangle extérieur :

coin haut   

puis le rectangle intérieur (couleur de fond #000033)

coin haut   

Groupez le tout. Nommez le CoinH. Target coché.

6 - Vous allez maintenant tracer le coin inférieur. Ce coin sera constitué d'un rectangle extérieur coloré et d'un rectangle intérieur qui aura la même couleur que le fond de scène.
Tracez d'abord le rectangle extérieur :

coin haut   

puis le rectangle intérieur (couleur de fond #000033)

coin haut   

Groupez le tout. Nommez le CoinB. Target coché.

7 - Vous insérez maintenant un sprite que vous nommerez Conteneur. Il va servir de réceptacle aux images.

Script PHP

Attention :
Cet exemple utilise un script PHP éxécutable coté serveur.
Alors, pour tester votre création, il vous faut :
- soit un serveur Apache sur votre ordinateur (avec les modules PHP installés )
- soit mettre les fichiers sur votre site, à condition que votre hébergeur accepte les scripts PHP.

Avec un éditeur de texte, vous allez entrer le texte suivant :

Sauvegardez ce fichier sous le nom readir.php. Il faudra le placer sur le serveur.

Explications :
On balaie le répertoire /imageflash. Tant qu'il y a des fichiers dans ce répertoire, on récupère la largeur et la hauteur des images pour n'avoir au final que la plus petite largeur et la plus petite hauteur.
Dans notre exemple, toutes les images sont de taille identique et dans la réalité, ce sera plus compliqué car il faudrait récupérer la taille de CHAQUE image.
Le contenu des variables nb_total_image , largeur_min_image , hauteur_min_image , fini va être récupéré dans le script de SwishMax.

Scripts SwishMax.

Voici le script général de Scene_1

Le script du bouton virtuel b_virt :

on (press)
{ (compteur%2 == 0) ? go2() : go1(); }

Si le reste de la division par 2 de compteur est nul ( compteur = nombre pair ) alors on exécute go2 qui lance le retour en arrière des coins.
Comme compteur est incrémenté, la fois suivante le reste sera différent de 0 donc go1 est lancé et les coins se déplacent vers l'image.

Autre astuce :
Dans le cas précédent, on risque théoriquement un débordement de la variable compteur.
(En pratique non, car cela supposerait un trés grand nombre de clics)
Pour les puristes, on ferait de la façon suivante :
- On déclare la variable compteur comme étant booléenne, et dans onLoad de Scene_1
- On met compteur=false;
- On remplace compteur++; et compteur--; par compteur= ~compteur;
(ce qui revient à faire le complément à 1)

Enfin, pour le bouton virtuel, on mettrait

on (press) { if (compteur) go2(); else go1(); }

L'avantage de setInterval , c'est qu'on peut accélérer le processus par des clics successifs.

A vous maintenant de vous compliquer la tâche avec des images de taille différente, mais là, c'est une autre affaire car çà va se compliquer.

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.004 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

vers Google