Module programmation

Introduction
Dans ce module seront abordées les bases élémentaires de la programmation, essentiellement appliquées aux environnements de développement à vocation multimédia.

A partir d'exemples simples, on verra comment :

- Exprimer et décrire le résultat qu'on souhaite obtenir,
- Analyser, définir et classifier les étapes, et les traitements nécessaires pour arriver à ce résultat (manière de les enchaîner et de les imbriquer),
- Choisir les structures formelles offertes par les langages pour y arriver et représenter ces structures (lesquelles sont assez peu nombreuses finalement),
- Enfin, écrire dans le langage choisi.

On trouvera aussi un certain nombres de techniques et manipulations de base, ainsi que quelques trucs et astuces, rituels dans ce genre d'exercice.

Il ne s'agit pas d'un cours de Lingo, ni d'un manuel de Director, et encore moins d'une compilation d'un dictionnaire de langage.
De nombreuses équivalences seront citées dans d'autres environnements de programmation, même si les explications seront illustrées en Lingo.
La raison de ce choix, c'est que ce langage est souple, très lisible, et que l'environnement Director permet une bonne visibilité de l'ensemble des notions et médias que l'on manipule.
En outre, sans rentrer dans des nuances très détaillées techniquement, Director est devenu malgré tout très orienté objet, même si le choix de l'interface par Macromedia peut parfois masquer cet aspect. Dans tout ce qui suit, on n'utilisera jamais l'aspect linéaire de la timeline, plutot réservée à une utilisation du logiclel "en animation", même si toute interactivité n'est pas exclue de ce type d'utilisation.

Enfin, toute cette suite ne préjuge pas de la qualité artistique ni du sens contenu dans les réalisations.

En principe et sauf oubli, toutes les animations sont téléchargeables sous forme de fichiers .dir, dans lesquels on trouvera les scripts commentés. Les exercices sont traités étape par étape, le .dir pour chaque étape étant disponible. Les animations ont été réalisées dans les versions 8.5 ou MX de Director.
Ces .dir commentés sont complémentaires des explications données dans ces pages.

Notions fondamentales développées :
Les principes de base qui seront traités sont :

- les événements et leur classification
- classiquement, les variables, leur portée et leur type,
- les opérateurs,
- les structures conditionnelles,
- les structures de boucle,
- le signal d'horloge utilisé comme moteur,
- les objets, propriétés d’objet, méthodes, constructeur,
- listes et tableaux,
- fonctions, passages d’arguments, renvoi de valeurs,
- fonctions récurrentes,
- traitement de chaînes de caractères,
- des techniques plus spécifiques à Lingo, qui sont des fonctions de traitement d'image.

On suppose que les manipulations de base de l'interface de Director, telles que l'importation d'acteur, l'utilisation des encres, la mise en place d'un acteur sur la scène, l'affectation de comportement à un sprite, etc. sont connues.

Vous pouvez librement utiliser des fragments de ce cours si vous le souhaitez, ainsi que le code contenu dans les exercices, à condition de ne pas le modifier, et de mentionner le nom de l'auteur et l'ensad (École nationale supérieure des arts décoratifs).

Si vous avez des remarques, des commentaires, si vous relevez des âneries ou des manques, n'hésitez pas à m'écrire.

Notions abordées :
Autour d'un exemple simple et ultra-classique, ce premier exercice propose d'aborder une grande partie des notions fondamentales à mettre en oeuvre dans la modélisation d'un fonctionnement, puis dans son implémentation dans les trois langages.
Accéder à cet exercice...

Dans la première étape :
- Opération d'affectation
- Propriétés préconstruites et attributs html standards
- Organigramme
- Notion d'objet
- mot-clé this
- Evénements et classification des événements - Scrutation vs. interruption
- Etablissement des premiers parallèlismes malgré les différences de modèles
- Types de données numérique vs. type chaîne. Concaténation simple

Dans la deuxième étape :
- Propriétés personnalisées. Attributs personnalisés
- Instructions conditionnelles
- Structure des blocs de code
- Marqueurs de structure
- Initialisation des objets et événements d'initialisation
- Gestionnaires et scripts
- notion de DOM
- Opérateurs logiques

Dans la troisième étape :
- Les fonctions random()
- Problèmatique de l'initialisation en Javascript et modification de l'architecture
- type de données numériques entières vs. flottantes

Dans la quatrième étape :
- Méthodes
- TimeOut, interval et signaux d'horloge, et notion de moteur
- Variables
- Points de terminologie objet
- Architecture d'une animation
- Enchaînement logique - Chronogrammes généraux des animations avec moteurs
- Considérations sur l'implémentation de l'interactivité

Dans la cinquième étape :
- Propriété générique spriteNum en Lingo
- Généralisations des principes vu auparavant
- Appel d'une méthode depuis une autre méthode
- Code réutilisable
- Chemin d'accès aux propriétés
- Permutation de la source d'un objet graphique, cas particulier de Flash
- Boucles de répétition

Dans la sixième étape :
- Booléenne
- Evénement clavier
- Programmer, c'est d'abord un exercice de français...

Notions abordées :
- Mise en oeuvre des techniques vues au 1^er exercice
Accéder à cet exercice...

Dans la première étape :
- Rappel sur la structure d'une animation

Dans la deuxième étape :
- Utilisation d'une équation pour provoquer un mouvement
- Utilisation des fonctions trigonométriques
- Codage "en dur"
- Point d'alignement
- Mesure des angles en degrés ou radians

Dans la troisième étape :
- Utilisation d'une fonction trigonométrique pour rendre une valeur oscillante

Dans la quatrième étape :
- Modélisation d'un curseur de réglage
- Utilisation de propriétés d'objet pour le réglage d'un autre objet
- Utilisation d'un coefficient unique variant entre 0 et 1
- Limites de l'instruction repeat
- Propriété d'animation
- Remplacement de l'instruction repeat par un événement répétitif accompagné d'une condition
- Eléments d'interface et lisibilité d'une animation. Effet de rollOver

Dans la cinquième étape :
- Révision de la notion de code réutilisable

Dans la sixième étape :
- Notion de "mode" de fonctionnement
- Fonction arc tangente ( atan() )
- Gestion de la possibilité d'une division par 0
- Valeur absolue d'une grandeur

Notions abordées :
Dans cet exercice, on abordera un objet fondamental en programmation : les listes et tableaux.
On en profitera pour étudier la manière de reconstituer une vidéo en technique image par image.
Accéder à cet exercice...

Dans la première étape :
- Révision de la structure de base d'une application
- Utilisation d'un acteur factice pour servir de support de code

Dans la deuxième, la troisième et la quatrième étape :
- Problème de l'importation d'images en grand nombre
- Les listes : déclaration, peuplement, accès
- Appel d'un acteur via son numéro et le numéro de la distribution
- Modélisation de tableaux à l'aide de listes de listes
- Gestion des extrémités de listes : mesure à prendre pour le premier et le dernier élément
- Test de l'appartenance d'un élément à une liste et récupération de l'index d'un élément dans une liste
- Comptage du nombre d'éléments d'une liste
- Sens de déplacement dans une liste
- Instruction put et déboguage

Dans la cinquième étape :
- Règle de trois...
- Problème de l'arrondi sur les valeurs entières
- Problème de l'incrémentation d'une grandeur entière par pas fractionnaire
- Mention du problème de la division entière (traité plus loin dans le cours)

Dans la sixième étape :
- Révision et mise en oeuvre de la notion de mode de fonctionnement - structure
- Fractionnement du code
- La fonction integer() (vs floor() et ceil() )
- L'instruction nothing

Notions abordées :
Mise en oeuvre et révision des listes
Accéder à cet exercice...

Dans la première étape :
- Utilisation judicieuse des numéros de sprite pour simplifier le code
- "Détrier" une liste (la mélanger)
- Fractionnement du code d'initialisation pour éviter un redémarrage quand on doit pouvoir réinitialiser en cours d'application

Dans la deuxième étape :
- Un moteur n'est pas systématiquement nécessaire...
- Organigramme d'un traitement
- Passage de l'organigramme au code
- Propriété the timer

Dans la troisième étape :
- Introduction aux champs de texte
- Types de données : fonctions string() et value()
- Lingo n'est pas "typé" mais... il l'est quand même !
- Valeur void
- Sommation par boucle de répétition
- Instruction exit repeat
- Emission de sons

Notions abordées :
Dans cet exercice autour du traitement et de l'analyse du texte, on verra différentes propriétés des entités texte (couleur, style...). On en profitera pour apprendre à modéliser des ascenseurs. Dans la dernière étape, on apprendra à utiliser les Xtras fileIO et fileXtra4 pour manipuler des fichiers texte sur le disque dur.
Accéder à cet exercice...

Dans la première étape :
- Rappels divers de structure,
- Quelques propriétés des champs texte

Dans la deuxième étape :
- Suite des propriétés d'un champ texte
- Propriété scrollTop
- Modèle d'un ascenseur simple

Dans la troisième étape :
- Système, et utilisation judicieuse de la disposition des sprites dans le scénario
- Modèle d'un ascenseur continu
- Propriété the mouseDown
- Objets et propriétés rect et point
- Fonction inside()
- Structure case... end case
- Propriété rollOver

Dans la quatrième étape :
- Appel d'une fonction avec passage d'arguments
- Vraie nature d'une donnée de type caractère
- Opérateur de concaténation, concaténation avec insertion d'un espace
- Modification de l'aspect d'une partie de texte - Syntaxe à utiliser à la place de ce qui est indiqué dans le dictionnaire lingo
- Problème de la définition d'une couleur lorsqu'appliquée à un acteur
- Constantes lingo de type caractère

Dans la cinquième étape :
- Modèle d'une case à cocher et récupération de son état
- Problématique des délimiteurs
- Insertion d'un saut de ligne dans une concaténation
- Code ASCII, fonctions numToChar() et charToNum()

Dans la sixième étape :
- Hachage d'une chaîne de caractère
- Equation logique à base de OR et AND
- Propriété the floatPrecision

Dans la septième étape :
- Bouton en bascule
- Tri d'une liste
- Dédoublonnage d'une liste
- Listes de propriétés
- Limites et problèmes posés par les listes de propriétés

Dans la huitième étape :
- Type de données "propriétés"
- Boucles infinies et utilisation
- Duplication de listes. Fonction duplicate()
- Manipulation des listes et des critères de tri
- Ordre de traitement des éléments d'une liste. Précautions à prendre
- Renvoi d'une valeur par une fonction

Dans la neuvième étape :
- Utilisation d'Xtras
- Accès aux disques durs
- Evénement stopMovie
- Instruction clearGlobals
- Déformation d'un sprite par manipulation d'un de ses cotés
- Propriété the moviePath
- Création d'un lien "façon hypertexte"
- Problème du saut de ligne indésirable dans un texte

Contenu du cours sur les sites web :

I - HTML :
Rappels - structure d'un document.
Rappels sur les principales balises.
Astuces de mise en page.
Présentation de l'interface de Dreamweaver.
Notion de programmation coté client.
Comportements générés par Dreamweaver. Limites. Avantages et inconvénients.

II - Introduction à la programmation serveur :
Principe de l'échange client / serveur.
Fonctionnement du script serveur - Lieu et moment de l'exécution.
Principaux serveurs et langages serveurs du marché.
Imbrication des objets serveur avec un langage de programmation.
PHP/MySQL vs. ASP/VBScript
Les formulaires HTML.
Méthodes GET et POST.
Objets ASP : Request, Response, Server
Objets Session et Application. Variables de session et d'application. Utilisation. Variables de session en PHP.
Le fichier global.asa en ASP.
Notion de composants additionnels.
Récupération des données de formulaires dans des variables serveur. ASP : Request, PHP : $_GET, $_POST
Utilisation de ces variables pour le choix du contenu HTML envoyé au client par le serveur.

III - Introduction aux bases de données et au SQL :
Définition d'une base de données relationnelle.
Principaux systèmes de gestion de bases de données relationelle du marché.
Méthode pour la modélisation d'une base de données simple : un forum de discussion sur le web.
Inventaire des données.
Classification - Tables.
Non redondance - Atomisation des données - Normalisation.
Clés primaires, clés étrangères.
Relation de 1 à plusieurs, résolution des relations de plusieurs à plusieurs.
Dans tout ce qui précède, on insistera sur les décisions du concepteur pour les options à prendre lors de la modélisation.

IV - Présentation de l'interface d'Access et de MySQL :
Implémentation des tables déterminées précédemment .
Types de données.
Choix à faire dans les propriétés des champs.
Implémentation du modèle de base de données sous MySQL.

V - Traitements :
Inventaire des traitements à assurer par l'application de base de données.
Classification.
Introduction au SQL : SELECT, INSERT INTO, DELETE, UPDATE, clauses WHERE, ORDER BY... Opérateur LIKE, jointures.
Notion de recordset.
Démarche générale de l'utilisation d'une base de données dans une page dynamique : connexion, choix de la base, constitution dela requête, exécution de la requête, exploitation du résultat, fermeture de la connexion.
Ecriture de requêtes simples.
Présentation de l'interface graphique du générateur de requêtes d'Access.
Utilisation du générateur de requête d'Access pour la génération de requêtes complexes.
Utilisation et limites du copier / coller pour l'intégration de ce SQL dans des pages ASP ou PHP. Précautions à prendre.

VI - Implémentation en ASP ou en PHP :
Le lien ODBC. Configuration d'un lien ODBC sur un serveur Win.
Les différents jeux d'instruction natives PHP pour différentes bases.
Création d'une connexion.
Création d'un recordset.
Paramétrage d'une requête à l'aide de variables récupérées dans un formulaire envoyé par le client. Difficulté de notation du fait de chaîne imbriquées pour respecter les types de données définis dans les champs de la base.
Présentation des résultats, parcours du recordset.
Nombre d'enregistrements d'un recordset. Notion de pointeur. Propriétés ASP BOF et EOF. Déplacement dans un recordset. Tri. Parcours d'un recordset en PHP / MySQL.
Exécution des divers types de requêtes et résultats renvoyés.

VII - Divers :
Debuggage.
Envoi d'un mail à l'aide du composant CDONTS sous ASP. La fonction mail en PHP.

Notions abordées :
A travers trois variantes d'animations voisines, on découvrira comment créer et manipuler des images bitmap à travers quelques méthodes et propriétés spécifiques à cet emploi. Il s'agit de fonctions propres à Lingo, mais on pourra trouver des fonctions similaires dans certains autres langages. La démarche logique pour arriver au résultat souhaité reste, elle, générale.
Accéder à cet exercice...

Dans la première, la deuxième et la troisième étape :
- Le quad
- Manipulations du quad

Dans la quatrième étape :
- Création d'acteurs à la volée
- Les objets image
- La méthode copyPixels()

Dans la cinquième étape :
- Equation d'une droite
- Abandon d'un gestionnaire
- Fonctions récurrentes

Dans la sixième étape :
- Cas d'une droite non définie, contournement du problème

Dans la septième étape :
- Application des techniques précédentes à une image animée
- Animation dans une fenêtre (MIAW : Movie In A Window)

Notions abordées :
Construction d'un "menu" en forme de spirale pendulaire. C'est une fantaisie, mais cette figure permet d'aborder nombre de problèmes d'importances diverses qui peuvent se poser dans la modélisation d'un objet.
La spirale est entièrement écrite en approche objet.

Cet exercice inaugure une nouvelle pratique dans le traitement des cas étudiés dans ce site : le développement se fait de front dans les trois principaux langages à vocation multimédia : Lingo, ActionScript, et Javascript.
Il est prévu une réécriture des exercices existants selon cette même manière. Ces réécritures seront publiées à mesure que l'auteur de ces pages les aura rédigées...

Accéder à cet exercice...

Ces modèles ont été élaborés lors d'un workshop animé par Jean-Louis Boisiser en ARI en décembre 2004.

Dans une première version, la vidéo est "2D".
La séquence de vidéo, symbolisée par des images factices, se déroule linéairement. Pour une image données, il est possible d'accéder à des plans qui se trouvent en "dessous" ou "au-dessus".
Le déplacement dans la matrice d'images est représenté par la grille qui se trouve sous les images factices figurant la vidéo.
Dans ce modèle, un déroulement dans un plan linéaire horizontal est représenté par le déplacement de la barre violette, et une incursion dans la dimension verticale (commandé par les touches du clavier), et figuré par le déplacement vertical d'une barre orangée. L'intersection des deux est représentée par un point rouge.

Dans une deuxième version, la vidéo est "3D".
Au modèle précédent, on a ajouté une notion de profondeur, qui ajoute une troisième dimension.
Là aussi, la vidéo est symbolisée par des images factices. Et le déplacement dans la matrice 3D d'images est figuré dans le cube interactif se trouvant à coté de la vidéo factice.
Le déplacement 2D est figuré comme précédement par des barres, violette pour le déplacement linéaire horizontal et orangée pour le déplacement vertical. Le changement de plan en profondeur est figuré, lui, par un changement de la couleur de fond de l'image factice, ainsi que par une variation de taille du point rouge qui se situe à l'intersection des deux barres.