|
|
|
|
|
|
|
|
|
|
- Overview
- Page control
- Moving an image (or any type of control)
- Appearance effect of an image by clipping or fade-in
- Effect of automatic image movement
Animating the image display (WEBDEV)
Page control The Web sites propose several transition effects between the elements: - images progressively loaded in the page.
- moving images.
- image appearing with overlapping effects.
You also have the ability to perform an "Automatic image movement" effect. This effect simulates the light move of a camera over an image without programming. WEBDEV allows you to easily include these solutions in your Web sites. Moving an image (or any type of control) WEBDEV allows you to easily give a graphic effect when moving a control. To do so, use the AnimationPlayOnControlProperty function. This function, used in browser code, allows you to define the animation that will be performed when modifying a control property. Therefore, to move a control, all you have to do is use the X and Y properties of the control. For example: AnimationPlayOnControlProperty(IMG_Image1, "X" ,0, 200, 50000, animDeceleration)
AnimationPlayOnControlProperty(IMG_Image1, "Y", 0, 200, 50000, animDeceleration)
This function can also be used with other properties to create special effects: Width, Height, Color, BackgroundColor, Opacity, ... Appearance effect of an image by clipping or fade-in WEBDEV allows you to easily give an appearance effect to an image. This image can be found in: - an Image control,
- a Thumbnail control.
The following method must be used: - Go to the "UI" tab of the control description (Image or Thumbnail control).
- In the "Transición" field, select the desired transition mode: scan, overlap, uncover., ...
The "Random" transition mode allows you to use several transition modes on the same control. - Through programming, change the image associated with the control. For example, in browser code:
IMG_Image1.Valeur = "images\hotel\alize.jpg"
- At runtime, the new image replaces the image found in the control with the requested effect.
Effect of automatic image movement WEBDEV allows you to easily give an effect of "automatic movement on an image". The following method must be used: - Go to the "UI" tab of the control description (Image or Thumbnail control).
- In "Transición", select "Panoramic movement".
- At runtime, the image moves without any programming.
This effect simulates the light move of a camera over an image. Three effects are combined: - swipe in random directions,
- light zoom,
- fade-in for the sequence of effects.
- Go to the "UI" tab of the control description (Image or Thumbnail control).
- In the "Transitions" section, expand "Transición" and select "Panoramic movement".
- In the "Automatic scroll" section, check "Deslizar imágenes de un directorio o lista programada". Depending on the desired result, you can also check "Iniciar automáticamente", "Examinar directorio de la imagen (Pestaña General)" or "Ordenar contenido del deslizamiento".
For more details, see automatic image sliding. - Validate.
Attention: Image movement is optimized for browsers supporting HTML 5 (Chrome, Firefox, ...). Otherwise, the movement may not look smooth. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|