Exemples et Tutoriaux Animation Flash avec swishmax1 Album photos images importées

Album photos avec images importées

On se propose de créer un diaporama avec des images importées à la volée depuis un répertoire dans l'animation.
Cet exemple utilise des scripts assez complexes. Je suppose connu les fonctions de création sur lesquelles je n'insisterai pas.
D'autre part, je ne répondrai à aucun mail concernant cet exemple. A vous de faire l'effort, je pense avoir suffisamment détaillé les explications.
Si vous n'avez aucune connaissance en programmation, bon courage.

⇒ animation ⇐

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.

Tout d'abord, téléchargez le fichier contenant 15 images.
Décompressez le fichier dans un répertoire que vous nommerez imageflash.

Objectifs

Dans une animation 320x240, on va placer des séries de 4 images.
Volontairement, j'ai mis 15 images JPG 120x90 dans le répertoire pour compliquer la tâche.
Ce qui fait que l'on aura 4 pages, mais la dernière n'aura que 3 images.
2 boutons permettront de passer d'une page à l'autre en avant ou en arrière.
Dés que l'on clique sur une image, celle-ci est agrandie à la taille de la scène.
Un bouton permet de revenir à la page avec les 4 images.

Remarques :
320 / 240 = 120 / 90 = 4/3 , ceci pour zoomer correctement.
Il est à noter que Swishmax refuse les images gif en mode dynamique alors que celles-ci sont acceptées en mode statique. (bug?)

Création des Objets

1 - Définissez les dimensions générales 320x240 ainsi que la couleur du fond #CC9900.
Prenez un Frame Rate quelconque.

2 - Créez maintenant un rectangle de couleur #666600, nommé rect1.
Vous devez avoir, par exemple :

Rectangle Transform

Ce rectangle va servir d'ombre à une image.
La position et la taille ont peu d'importance. Seuls comptent le nom, la case Target cochée et le point d'ancrage Top Left.

3 - Créez ensuite 3 autres rectangles : rect2, rect3, rect4
La position et la taille ont peu d'importance. Seuls comptent le nom, la case Target cochée et le point d'ancrage Top Left.

4 - Insérez un Sprite; nommez le Sprite1.
Vous devez avoir, par exemple :

Sprite Transform

Ce sprite va héberger une image.
La position et la taille ont peu d'importance. Seuls comptent le nom et le point d'ancrage Top Left.

5 - Insérez de la même façon 3 autres sprites : Sprite2, Sprite3, Sprite4
La position et la taille ont peu d'importance. Seuls comptent le nom et le point d'ancrage Top Left.

6 - Insérez un bouton; nommez le Button1.
Vous devez avoir, par exemple :

Bouton Transform

Ce bouton va permettre de zoomer une image.
La position et la taille ont peu d'importance. Seuls comptent le nom, la case Target cochée et le point d'ancrage Top Left.

7 - Insérez de la même façon 3 autres boutons : Button2, Button3, Button4
La position et la taille ont peu d'importance. Seuls comptent le nom, la case Target cochée et le point d'ancrage Top Left.

8 - Créez un texte Page précédente de couleur verte.
Convertissez le en bouton, que vous nommerez Prev

Bouton Transform

Vous pouvez agrémenter les états Over, Down, Up.

9 - Créez un texte Page suivante de couleur verte.
Convertissez le en bouton, que vous nommerez Next

Bouton Transform

Scene

Vous pouvez agrémenter les états Over, Down, Up.

10 - Créez un texte Retour de couleur bleue.
Convertissez le en bouton, que vous nommerez Retour

Bouton Transform

Scene

Vous pouvez agrémenter les états Over, Down, Up.

Dans Timeline, mettre Place en Frame 10 du bouton Retour.

Outline

Outline doit ressembler à

Outline

Script 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.
( En fait, peu importe dans notre exemple, car toutes les images sont identiques )
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

// Copyright 2004 - Jean-Paul Molina 
onLoad () 
{   // exécute le script php / runs php script
    loadVariablesNum("readir.php",0);
    // Taille de l'espace du bas /  Size of bottom space 
    taille_bas = 20;
    
    // rectangles / shadows
    imgArray = new Array;
    imgArray[1] = rect1;
    imgArray[2] = rect2;
    imgArray[3] = rect3;
    imgArray[4] = rect4;
    // sprites
    sprArray = new Array;
    sprArray[1] = Sprite1;
    sprArray[2] = Sprite2;
    sprArray[3] = Sprite3;
    sprArray[4] = Sprite4;
    //boutons / buttons
    btnArray = new Array;
    btnArray[1] = Button1;
    btnArray[2] = Button2;
    btnArray[3] = Button3;
    btnArray[4] = Button4;
    // init alpha 0
    for (i=1; i<5; i++ )  
    {
        imgArray[i]._alpha = 0;
        sprArray[i]._alpha = 0;
        btnArray[i]._alpha = 0;
    }
    // décalage x,y / offset x,y for shadow
    dx = 3;
    dy = 3;
    // stocke taille boutons / stores buttons size
    W_Next_b = Next._width;
    H_Next_b = Next._height;
    W_Prev_b = Prev._width;
    H_Prev_b = Prev._height;
    // page1 au démarrage / page at start
    current_page = 1;
}
////////////////////////
function isLoaded(x)
{
    percentLoaded = int(sprArray[x].getBytesLoaded()/sprArray[x].getBytesTotal() * 100);
    if (percentLoaded == 100 ) return 1;
    else return 0;
}
/////////////////////////////////////////////////////
// il peut y avoir moins de 4 images dans la 
// dernière page
// voir n_per_page dans la fonction load4images
//
// we might get less than 4 images in a page
// see function load4images
/////////////////////////////////////////////////////
function is4Loaded()
{
    checksum = 0;
    for (i = 1; i < n_per_page+1; i++)     
        checksum += _root.isLoaded(i);     
}
///////////////////////////////////////////////////////////////////////
// les variables issues du script php sont des textes
// il faut les convertir en nombres entiers
//
// Variables we got from the php script have gotten 'string' type
// so we have to transtype to 'int'
///////////////////////////////////////////////////////////////////////
function initSize()
{
    for (i = 1; i < n_per_page+1; i++) 
    { 
        imgArray[i]._width = int(largeur_min_image);
        sprArray[i]._width = int(largeur_min_image);
        btnArray[i]._width = w_button;
        
        imgArray[i]._height= int(hauteur_min_image);
        sprArray[i]._height = int(hauteur_min_image);
        btnArray[i]._height = h_button;
        // X,Y position = top left image
        if (i%2 == 0) X = w_button + 2*space_X;
        else          X = space_X;   
        imgArray[i]._X = X+dx; // ombre / shadow
        sprArray[i]._X = X;
        btnArray[i]._X = X;
 
        if (i>2) Y = h_button + 2*space_Y;
        else     Y = space_Y;      
        imgArray[i]._Y = Y+dy;
        sprArray[i]._Y = Y;
        btnArray[i]._Y = Y;
    
        imgArray[i]._alpha = 100;
        sprArray[i]._alpha = 100;
        btnArray[i]._alpha = 100;
   }   
}
/////////////////////////////////////////////////
// importe 4 images ou moins dans une page
//
// import 4 images or less in a page
/////////////////////////////////////////////////
function load4images(current)
{
   n_per_page = 0; 
   first = 1 + (4*(current-1));
   j = 1;
   for (i = first; i < first+4; i++) 
    { 
        if ( i < int(nb_total_image)+1 )
        {
            pathname = "imageflash/Image" add i add ".jpg";
            sprArray[j].loadMovie(pathname); 
            n_per_page++;
            j++;
        }
    } 
}
//////////////////////////////////////////
function unload4images(current)
{
   for (i=1; i<5; i++ )  
    {
        _root.imgArray[i]._alpha = 0;
        _root.sprArray[i]._alpha = 0;
        _root.btnArray[i]._alpha = 0;
        _root.btnArray[i]._width = 0;
        _root.btnArray[i]._height = 0;
    } 
   n_per_page = 0; 
   first = 1 + (4*(current-1));
   j = 1;
   for (i = first; i < first+4; i++) 
    { 
        if ( i < nb_total_image+1 )
        {
            
            sprArray[j].unloadMovie(); 
            n_per_page++;
            j++;
        }
    } 
}
/////////////////////////////////////////////////////////////
// on attend que le script php soit fini d'exécuter
// pour aller en frame 4
//
// has php script finished up ? Then let's go to frame 4
/////////////////////////////////////////////////////////////
onFrame(1)
{
 if (fini==1) 
        gotoSceneAndPlay("<current scene>",4);  
}
/////////////////////////////////////////////////////
// script php non terminé : retour frame 1
//
// php script not yet finished : back to frame 1
////////////////////////////////////////////////////
onFrame(3) 
{  
    gotoSceneAndPlay("<current scene>",1);
}
onFrame(4) 
{   // 4 images
    _root.load4images(current_page);
}
onFrame(5) 
{   
    _root.is4Loaded();
}
///////////////////////////////////////////////////////////
// si toutes les images dans une page ne sont pas
// chargées on retourne en frame 5
//
// if images in a page have not all been loaded
// back to previous frame
//////////////////////////////////////////////////////////
onFrame(6) 
{      
    if ( checksum!= n_per_page ) prevFrameAndPlay();
    
    // bouton / button size
    w_button = int(largeur_min_image) + dx;
    h_button = int(hauteur_min_image) + dy;
    // espace entre images / space between images
    space_X = int((_root._width - (2*w_button))/3);
    space_Y = int((_root._height - taille_bas - (2*h_button))/3);
    // nombre de pages / number of pages
    nb_page = Math.ceil(nb_total_image/4);

_root.initSize();     
}
onFrame (9) 
{
    stop();
}
//////////////////////////////////////////////////////////
// rappel : en Frame 10 on a placé le bouton Retour
// voir Timeline
//
// reminder : at Frame 10, we set Retour button
// see Timeline
//////////////////////////////////////////////////////////
onFrame (10) 
{
    for (i=1; i<5; i++ )  
    {
        _root.imgArray[i]._alpha = 0;
        _root.imgArray[i]._width = 0;
        _root.imgArray[i]._height = 0;
        _root.btnArray[i]._alpha = 0;
        _root.btnArray[i]._width = 0;
        _root.btnArray[i]._height = 0;
        _root.sprArray[i]._alpha = 0;
        Next._width = 0;
        Next._height = 0;
        Prev._width = 0;
        Prev._height = 0;
    } 
    Next._alpha = 0;
    Prev._alpha = 0;
    // Zoom definitions
    sprArray[current_image]._width = _root._width;
    sprArray[current_image]._height = _root._height;
    sprArray[current_image]._alpha = 100;
    sprArray[current_image]._X = 0;
    sprArray[current_image]._Y = 0;
}
onFrame (15) 
{
    stop();
}

Voici le script de Button1

Recopiez ce script pour Button2, Button3, Button4 en adaptant
rectK, spriteK, current_image = K avec K = 2 , 3 , 4.

Voici le script du bouton Prev

Voici le script du bouton Next

Voici le script du bouton Retour

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Album photos avec images importées