But : réaliser un diaporama pour MacOSX…

Technologies : Compositions Quartz, KVC

Première partie : Une composition Quartz

1. Lancer Quartz Composer et créer une composition vierge (de type Basic Composition).
2. Ajouter à cette composition un Billboard, à l’aide de l’inspecteur, modifier sa largeur de sorte quelle soit égale à 2.
3. Déclarer l’Input de nom image du Billboard comme étant une entrée publique (à l’aide du menu contextuel, Publish Inputs) et choisir un nom adéquat pour cette entrée (disons image1). Sauver la composition.

Seconde partie : Intégration d’une composition Quartz dans une application, Application Delegate, Outlets

1. Lancer xcode et créer un projet OSX/Cocoa Application.
2. Éditer l’interface pour y ajouter un objet de type QCView.
3. À l’aide de l’inspecteur des propriétés, éditer l’objet QCView pour qu’il charge la composition Quartz créée, penser à le paramétrer.
4. Modifier le code AppDelegate.hpour y ajouter @property (weak) IBOutlet QCView *renderer; (un Outlet est une propriété visible de l’éditeur d’interface à laquelle on peut associer un objet, c’est une propriété représentant une association au sens UML). Sauver le fichier.
5. Revenir à l’édition de l’interface et tirer un lien entre l’objet App Delegate et la QCView, choisir l’outlet renderer. Désormais l’objet App Delegate connaît la QCView de l’interface via la propriété renderer (ils sont associés).
6. Observer les Connections de l’objet App Delegate et constater que cet objet est connu d’un autre de nom File's Owner via un Outlet à l’intérieur de celui-ci. Observer l’objet File's Owner et constater que sa classe est NSApplication. Utiliser la documentation pour comprendre à quoi ces objets sont utiles. Pour le mécanisme de délégation, vous pouvez interroger les enseignants (ou rechercher sur le web).
7. Dans l’interface rajouter un bouton et lui associer le déclenchement de l’action play: de la QCView.
8. Ajouter une image quelconque au projet (supposons qu’elle s’appelle toto.jpg).
9. Dans l’implémentation AppDelegate.m modifier le code de la méthode applicationDidFinishLaunching: (en profiter pour consulter la documentation de cette méthode) en lui rajoutant le code suivant :NSImage *image = [NSImage imageNamed:@"toto"];

[self.renderer setValue:image forKeyPath:@ »patch.image1.value »]

; On en profitera pour lire la documentation relative à la classe `NSImage`. La seconde instruction correspond à l’association de l’image chargée à l’entrée de la composition Quartz (il peut donc être nécessaire de la modifier en conséquence). Compiler (sans oublier de rajouter le framework Quartz.framework au projet). Et Tester.

Troisième partie : Une composition Quartz plus complexe

1. Modifier la composition Quartz (ou en créer une autre) avec deux Billboards dont les entrées seront toutes deux publiées sous le nom image1 et image2 par exemple.
2. Utiliser, Interpolation, Mathematical Expression et deux RGB Color afin de contrôler l’entrée Color des deux Billboards. Paramétrer l’interpolateur pour passer de la valeur 0 à la valeur 1 en trois secondes. Utiliser la sortie de l’inerpolateur pour modifier le canal Alpha (qui représente la transparence dans les couleurs) des deux RGB Color, lorsque l’un sera à la valeur x, l’autre sera à la la valeur 1-_x_. Les couleurs de sortie des RGB Color seront branchés en entrée des Billboards.
3. Tester et mettre au point la compositionen utilisant le visionneur de paramètres (Parameters) afin d’y placer des entrées en test.
4. Sauver cette composition.

Quatrième partie : Un diaporama plus complet (awakeFromNib, subclassing, …)

1. Ajouter à l’application précédente une sous-classe de QCView de votre cru (MyQCView). Modifier la classe du QCView de l’interface pour qu’elle soit positionnée à la nouvelle classe créé.
2. Ajouter une seconde image à l’application.
3. Modifier la nouvelle classe créé en surchargeant la méthode startRendering afin d’y positionner les deux entrées de la composition Quartz.
4. Compiler. Tester

Cinquième partie : Encore plus complet

1. Modifier la sous-classe de QCView de sorte qu’à son extraction du fichier d’interface, un tableau d’images soit initialisé, avec un ensemble d’images contenues dans le bundle de l’application (surcharger la méthode awakeFromNib).
2. Surcharger la méthode renderAtTime:arguments: de sorte que les images d’entrée de la composition soient modifiées lorsque nécessaire afin d’obtenir un diaporama de l’ensemble des images chargées (consulter attentivement la documentation de cette méthode).
3. Modifier la composition, l’interface et le code de sorte que le temps de défilement entre les images soit un paramètre qui vaut 3 secondes par défaut et soit modifiable en temps réél via un slider et que les délais puissent varier de 1 à 10 secondes.