
Clip & Clap
1.Clip.
L'attribut clip détermine une région rectangulaire dans un
calque. Cette région est la seule visible du calque. L'attribut visibility
s'applique à cette région. Elle permet différend effets généralement à
l'aide de scripts.

![]() |
Moyen mnémotechnique, vous avez sûrement remarqué que l'ordre des valeurs de clips est prise en tournant autour d'un rectangle dans le sens des aiguilles d'une montre. |
Les distances sont prises à partir du coin
haut et gauche du calque, (pas de l'écran), indiqué sur l'image par 0,0. Les
distances sont en pixels.
Exemple, clip : rect(50 150 100 50)
Haut 50 la région de clip démarre à 50 pixels du haut du
calque.
Droit 150 la région de clip s'arrête à 150 pixels du bord
gauche du calque.
Bas 100 la région de clip s'arrête à 100 pixels du
haut du calque
Gauche 50 la région de clip démarre à 50 pixels du bord
gauche du calque.
Application
Dans la forme ci dessus nous superposons exactement une
photographie et la même
photo inversée, cette dernière se retrouve dessous. Cette photo mesure
200 x 200 pixels.
L'instruction clip est fixée à
clip : rect(0 200 200 0), la zone de clip couvre la photo entière si
bien que quand vous ferez "Afficher la page" vous ne verrez que la
photo normale.
Exercices à effectuer dans la forme ci-dessous.
![]() |
Vue de départ / Code initial |
![]() |
Exercice : Limiter la zone d'affichage de la photo normale, calque "Photo" à la moitié gauche de l'image, comme dans l'image ci-contre Corrigé |
![]() |
Exercice : Afficher le quart haut droit de l'image, comme dans l'image ci-contre Corrigé |
![]() |
Exercice : Afficher seulement la partie centrale, un carré de 100 x 100 pixels également espacé des bords de l'image, comme dans l'image ci-contre. Corrigé |
2.Position.
La partie clippée se retrouve positionnée à la place
qu'elle occuperait si toute l'image était affichée. C'est important dans le
cas d'affichages d'images en bandes comme :
Cette animation de poisson comporte 3 images de chacune 100
pixels, on peut facilement les isoler une par une, nous les affichons les unes
au dessus des autres à 200 pixels du bord de page et en corrigeant le décalage
dut à la position des images dans la bande :
Fin de ce tutorial
| Sommaire | ||
| Précédent | ![]() |