Ressources numériques en sciences humaines et sociales OpenEdition Nos plateformes OpenEdition Books OpenEdition Journals Hypothèses Calenda Bibliothèques OpenEdition Freemium Suivez-nous

[DEV] Créer une carte animée avec actionscript, php et mysql

par · Publié · Mis à jour

La carte ci-dessus, réalisée en flash dynamique avec actionscript, représente l’évolution de la population mondiale de 1950 à 2015 (projection). A chaque date, par l’intermediaire d’une requete à une base de donnée mysql, la population de chaque pays est représentée par un cercle proportionnel. En même temps que la population, la taille des cercles varie au cours du temps. Pour rendre fluide l’animation, une interpolation géométrique est réalisée automatiquement entre chaque année. Au final, on observe que seuls quelques pays concentrés en europe de l’Est ont une population décroissante sur l’ensemble de la periode.

worldpop

Je mets à disposition les code source ci-dessous. Le code ne prend pas du tout en compte le dessin du fond de carte et le graphisme. Il sert uniquement à gérer l’interpolation entre des cercles en fonction des valeurs contenues dans la base de donnée. Il y a quelques éléments écrits en dur, cette solution n’est donc pas générique. Si vous avez des questions, n’hésitez pas à laisser un commentaire.

1) worldmap.fla
Ci dessous, le code source action script à inserer dans votre fichier flash dès la premièere image.

// DESSIN D’UN CERCLE
MovieClip.prototype.dessineCercle = function(rayon, x, y) {// L’angle fait par chacun des huit segments est de 45 degrés (360 divisé par huit),
// ce qui est égal à PI/4 radians.
var deltaAngle = Math.PI / 4;// Recherche la distance du centre du cercle aux points de contrôle des courbes.
var ctrlDist = rayon/Math.cos(deltaAngle/2);// Initialise l’angle à 0 et définit les variables locales utilisées
// pour les points de contrôle et de terminaison.
var angle = 0;
var rx, ry, ax, ay;// Se déplace au point de départ, de un rayon à la droite du centre du cercle.
this.moveTo(x + rayon, y);// Répète l’opération huit fois pour créer huit segments.
for (var i = 0; i < 8; i++) {// Incrémente l’angle de deltaAngle (PI/4) pour créer tout le cercle (2PI).
angle += deltaAngle;

// Les points de contrôle sont dérivés en utilisant les fonctions sinus et cosinus.
rx = x + Math.cos(angle-(deltaAngle/2))*(ctrlDist);
ry = y + Math.sin(angle-(deltaAngle/2))*(ctrlDist);

// Les points d’ancrage (points terminaux de la courbe) peuvent être
// déterminés de manière similaire aux points de contrôle.
ax = x + Math.cos(angle)*rayon;
ay = y + Math.sin(angle)*rayon;

// Dessine le segment.
this.curveTo(rx, ry, ax, ay);
}
}
// ———— DECLARATION DES VARIABLES ————
var anneeDebut = 1950;
var anneeFin = 2050;
var nbAnnee = anneeFin-anneeDebut+1;
var fichierData=new LoadVars();
var listeData=new Array;
var listeResultat=new Array;
var coef=0.003;
var nbImage = 2; //Nombre d’images par changement
var vitesseTimer = 0.1;
// ——–
// ———— RECUPERATION DES DONNÉES ————
fichierData.load(“req_pop.php”);

// ———— DEBUT DU ONLOAD —————–
fichierData.onLoad=function(){

if(true)
{
//on parse l’information
_root.listeData=fichierData.resultat.split(“||”);
_root.listeData.pop();
for(i=0;i<_root.listeData.length;i++)
{
idWuts = i+1;
// recuperation des données////////////////////////////
_root.listeResultat[i]=_root.listeData[i].split(“,”);

for(j=1;j<=nbAnnee;j++)
{

idVal = j+3;
idAnnee = j+anneeDebut-1;
idAnneeInf = j+anneeDebut-2;

// recupération des rayons
_root[“rayon”+idAnnee+”_”+idWuts]=Math.sqrt((Number(_root.listeResultat[i][idVal])*coef)/Math.PI);
}

// recupération des coord X et calage
_root[“x_”+idWuts]=Number(_root.listeResultat[i][1])/46+243;
// recupération des coord Y et calage
_root[“y_”+idWuts]=Stage.height-(Number(_root.listeResultat[i][2])/46+214);

// Cercles de départ //////////////////////////////////

r=_root[“rayon”+anneeDebut+”_”+idWuts];
x=_root[“x_”+idWuts];
y=_root[“y_”+idWuts];
//_root.createEmptyMovieClip(“circle”+idWuts,5+idWuts);
//_root[“circle”+i].beginFill(0xbbbbbb);
//_root[“circle”+i].dessineCercle(r,x,y);
//_root[“circle”+i].endFill;
}// fin de la boucle for

// ACTION SUR LE BOUTON ANIMATION DES CERCLES
_root.btAnim.onRelease=function() {
clearInterval(timer);
idAnnee = anneeDebut;
_root.carre._width=0;
_root.afficheT._x= 12;
z=nbImage;
timer = setInterval(drawCircle2,vitesseTimer,idAnnee,z);

}

// ———— FIN DU ONLOAD —————–

}// fin du if
else
{
_root.afficheT.text = “XXXXX”;

}// fin du else
}
//—————– FONCTIONS ————————
function drawCircle(){
for(i=0;i<_root.listeData.length;i++){
idWuts = i+1;
_root.r=_root[“rayon”+idAnnee+”_”+idWuts];
x= _root[“x_”+idWuts];
y= _root[“y_”+idWuts];
_root.createEmptyMovieClip(“circle_new”+idWuts,500+idWuts);
_root[“circle_new”+idWuts].lineStyle(1,0xFFFFFF);
_root[“circle_new”+idWuts].beginFill(0xFF9900);
_root[“circle_new”+idWuts].dessineCercle(r,x,y);
_root[“circle_new”+idWuts].endFill;
}
// afficchage de la date;
_root.afficheT.text = idAnnee;
if(idAnnee==anneeFin){clearInterval(timer);}else{idAnnee++;}
}

function drawCircle2(){

for(i=0;i<_root.listeData.length;i++){
//for(i=0;i<1;i++){

idWuts = i+1;

if (z==nbImage){
r=_root[“rayon”+idAnnee+”_”+idWuts];
}
else{

idAnneeInf = idAnnee-1;
etendue=Number(_root[“rayon”+idAnnee+”_”+idWuts])-Number(_root[“rayon”+idAnneeInf+”_”+idWuts]);
deltaR = etendue/nbImage;
r1=_root[“rayon”+idAnneeInf+”_”+idWuts];
r=r1+z*deltaR;
}

if (_root[“rayon”+anneeDebut+”_”+idWuts]<_root[“rayon”+anneeFin+”_”+idWuts])
{
color=”0xE87E49″;
}
else
{
color=”0x5293E2”;
}

x= _root[“x_”+idWuts];
y= _root[“y_”+idWuts];
_root.createEmptyMovieClip(“circle_new”+idWuts,500+idWuts);
_root[“circle_new”+idWuts].lineStyle(1,0xFFFFFF);
_root[“circle_new”+idWuts].beginFill(color);
//_root[“circle_new”+idWuts].beginFill(0xFF9900);
_root[“circle_new”+idWuts].dessineCercle(r,x,y);
_root[“circle_new”+idWuts].endFill;

 

2)  req_pop.php
Ci dessous le code php qui fait la connexion à la base de donnée et genère un fichier texte contenant toutes les données.

<?php
$reponseFlash=”resultat=”;
// il faut mettre le = pour defeinir pays comme propriete de lobjet

//1)connection au serveur mysql (mettez vos propres infos de connexion)
$connexion_server=mysql_connect(“localhost”,”login”,”password”);
//2)connexion à la base de donnée
$connexion_base=mysql_select_db(“mydatabse”,$connexion_server );

//3)construire une requête
$requete=”SELECT * FROM _world_pop ORDER BY pop_2050 DESC”;

//4)on applique la requete et on recupere le resultat dans une variable
$resultat=mysql_query($requete, $connexion_server);

//5)on ferme la connexion
mysql_close($connexion_server);

//6)on affiche le resultat total avec while et par numero de champ
while($data=mysql_fetch_array($resultat))
{
$reponseFlash.=utf8_encode($data[“WUTS5″]).”,”.
utf8_encode($data[“X”]).”,”.
utf8_encode($data[“Y”]).”,”.
utf8_encode($data[“Name”]).”,”.
utf8_encode($data[“pop_1950″]).”,”.
utf8_encode($data[“pop_1951″]).”,”.
utf8_encode($data[“pop_1952″]).”,”.
utf8_encode($data[“pop_1953″]).”,”.
utf8_encode($data[“pop_1954″]).”,”.
utf8_encode($data[“pop_1955″]).”,”.
utf8_encode($data[“pop_1956″]).”,”.
utf8_encode($data[“pop_1957″]).”,”.
utf8_encode($data[“pop_1958″]).”,”.
utf8_encode($data[“pop_1959″]).”,”.
utf8_encode($data[“pop_1960″]).”,”.
utf8_encode($data[“pop_1961″]).”,”.
utf8_encode($data[“pop_1962″]).”,”.
utf8_encode($data[“pop_1963″]).”,”.
utf8_encode($data[“pop_1964″]).”,”.
utf8_encode($data[“pop_1965″]).”,”.
utf8_encode($data[“pop_1966″]).”,”.
utf8_encode($data[“pop_1967″]).”,”.
utf8_encode($data[“pop_1968″]).”,”.
utf8_encode($data[“pop_1969″]).”,”.
utf8_encode($data[“pop_1970″]).”,”.
utf8_encode($data[“pop_1971″]).”,”.
utf8_encode($data[“pop_1971″]).”,”.
utf8_encode($data[“pop_1973″]).”,”.
utf8_encode($data[“pop_1974″]).”,”.
utf8_encode($data[“pop_1975″]).”,”.
utf8_encode($data[“pop_1976″]).”,”.
utf8_encode($data[“pop_1977″]).”,”.
utf8_encode($data[“pop_1978″]).”,”.
utf8_encode($data[“pop_1979″]).”,”.
utf8_encode($data[“pop_1980″]).”,”.
utf8_encode($data[“pop_1981″]).”,”.
utf8_encode($data[“pop_1982″]).”,”.
utf8_encode($data[“pop_1983″]).”,”.
utf8_encode($data[“pop_1984″]).”,”.
utf8_encode($data[“pop_1985″]).”,”.
utf8_encode($data[“pop_1986″]).”,”.
utf8_encode($data[“pop_1987″]).”,”.
utf8_encode($data[“pop_1988″]).”,”.
utf8_encode($data[“pop_1989″]).”,”.
utf8_encode($data[“pop_1990″]).”,”.
utf8_encode($data[“pop_1991″]).”,”.
utf8_encode($data[“pop_1992″]).”,”.
utf8_encode($data[“pop_1993″]).”,”.
utf8_encode($data[“pop_1994″]).”,”.
utf8_encode($data[“pop_1995″]).”,”.
utf8_encode($data[“pop_1996″]).”,”.
utf8_encode($data[“pop_1997″]).”,”.
utf8_encode($data[“pop_1998″]).”,”.
utf8_encode($data[“pop_1999″]).”,”.
utf8_encode($data[“pop_2000″]).”,”.
utf8_encode($data[“pop_2001″]).”,”.
utf8_encode($data[“pop_2002″]).”,”.
utf8_encode($data[“pop_2003″]).”,”.
utf8_encode($data[“pop_2004″]).”,”.
utf8_encode($data[“pop_2005″]).”,”.
utf8_encode($data[“pop_2006″]).”,”.
utf8_encode($data[“pop_2007″]).”,”.
utf8_encode($data[“pop_2008″]).”,”.
utf8_encode($data[“pop_2009″]).”,”.
utf8_encode($data[“pop_2010″]).”,”.
utf8_encode($data[“pop_2011″]).”,”.
utf8_encode($data[“pop_2012″]).”,”.
utf8_encode($data[“pop_2013″]).”,”.
utf8_encode($data[“pop_2014″]).”,”.
utf8_encode($data[“pop_2015″]).”,”.
utf8_encode($data[“pop_2016″]).”,”.
utf8_encode($data[“pop_2017″]).”,”.
utf8_encode($data[“pop_2018″]).”,”.
utf8_encode($data[“pop_2019″]).”,”.
utf8_encode($data[“pop_2020″]).”,”.
utf8_encode($data[“pop_2021″]).”,”.
utf8_encode($data[“pop_2022″]).”,”.
utf8_encode($data[“pop_2023″]).”,”.
utf8_encode($data[“pop_2024″]).”,”.
utf8_encode($data[“pop_2025″]).”,”.
utf8_encode($data[“pop_2026″]).”,”.
utf8_encode($data[“pop_2027″]).”,”.
utf8_encode($data[“pop_2028″]).”,”.
utf8_encode($data[“pop_2029″]).”,”.
utf8_encode($data[“pop_2030″]).”,”.
utf8_encode($data[“pop_2031″]).”,”.
utf8_encode($data[“pop_2032″]).”,”.
utf8_encode($data[“pop_2033″]).”,”.
utf8_encode($data[“pop_2034″]).”,”.
utf8_encode($data[“pop_2035″]).”,”.
utf8_encode($data[“pop_2036″]).”,”.
utf8_encode($data[“pop_2037″]).”,”.
utf8_encode($data[“pop_2038″]).”,”.
utf8_encode($data[“pop_2039″]).”,”.
utf8_encode($data[“pop_2040″]).”,”.
utf8_encode($data[“pop_2041″]).”,”.
utf8_encode($data[“pop_2042″]).”,”.
utf8_encode($data[“pop_2043″]).”,”.
utf8_encode($data[“pop_2044″]).”,”.
utf8_encode($data[“pop_2045″]).”,”.
utf8_encode($data[“pop_2046″]).”,”.
utf8_encode($data[“pop_2047″]).”,”.
utf8_encode($data[“pop_2048″]).”,”.
utf8_encode($data[“pop_2049″]).”,”.
utf8_encode($data[“pop_2050″])
.”||”;
}
echo($reponseFlash);
// on utilse echo pour que flash pouisse recuperer les donnees
?>

}// FIN DE LA BOUCLE FOR

// incrementation
if (z==nbImage){z=1;idAnnee++;}
else{z++;}

// affichage de la date

_root.afficheT.text = idAnnee;
_root.afficheT._x += 2.7;
_root.carre._x=xbarre;
_root.carre._y=ybarre;
_root.carre._width+=2.7;

if(idAnnee==anneeFin){clearInterval(timer);

}

}

Et voici le code php

OpenEdition vous propose de citer ce billet de la manière suivante :
Nicolas Lambert (21 juin 2013). [DEV] Créer une carte animée avec actionscript, php et mysql. Carnet (neo)cartographique. Consulté le 7 octobre 2024 à l’adresse https://doi.org/10.58079/rrdp

Nicolas Lambert

Ingénieur de recherche CNRS en sciences de l'information géographique. Membre de l'UMS RIATE et du réseau MIGREUROP / CNRS research engineer in geographical information sciences. Member of UMS RIATE and the MIGREUROP network.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.