PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • 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
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview

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.
Versions 17 and later
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.
New in version 17
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.
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 AnimationPlayOnControlProperty. 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, animDécélération)
AnimationPlayOnControlProperty(IMG_Image1, "Y", 0, 200, 50000, animDécélération)
You also have the ability to use this function with other properties to create special effects: ..Width, ..Height, ..Color, ..BrushColor, ..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 Clickable Image control.
  • a Thumbnail control.
The following method must be used:
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "Transition" control, select the requested transition mode: swipe, overlay, underlay, ...In the "Transition/Effect" control, select the requested transition mode: swipe, overlay, underlay, ...
    Versions 17 and later
    The "Random" transition mode allows you to use several transition modes on the same control.
    New in version 17
    The "Random" transition mode allows you to use several transition modes on the same control.
    The "Random" transition mode allows you to use several transition modes on the same control.
  3. By programming, change the image associated with the control. For example, in browser code:
    IMG_Image1..Value = "images\hotel\tradewinds.jpg"
  4. At run time, the new image replaces the image found in the control with the requested effect.
Effect of automatic image movement
Versions 17 and later
WEBDEV allows you to easily give an effect of "automatic movement on an image".
The following method must be used:
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "Transition/Effect" control, select the transition mode named "Automatic movement".
  3. At run time, 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.
To use this effect on a set of images, this option must be combined with the automatic scroll of images.
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "General" tab, select the image type:
    • Dynamic image.
    • Image from a database: path.
      These two types of images propose to manage the automatic scroll. The area regarding the transitions and the automatic scroll is ungrayed if one of these two types of images is selected.
  3. In the "Transition/Effect" control, select the transition mode named "Automatic movement".
  4. Check "Enable the automatic scroll of images". According to the requested result, you also have the ability to check "Start the scroll automatically", "Automatically browse the directory of the image", "Sort the content of the scroll". See automatic scroll of images for more details.
  5. Validate.
Caution: The movement of the image is optimized for the browsers that support the HTML 5 standard (Chrome, Firefox, ...). Otherwise, the move may be jerky.
New in version 17
WEBDEV allows you to easily give an effect of "automatic movement on an image".
The following method must be used:
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "Transition/Effect" control, select the transition mode named "Automatic movement".
  3. At run time, 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.
To use this effect on a set of images, this option must be combined with the automatic scroll of images.
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "General" tab, select the image type:
    • Dynamic image.
    • Image from a database: path.
      These two types of images propose to manage the automatic scroll. The area regarding the transitions and the automatic scroll is ungrayed if one of these two types of images is selected.
  3. In the "Transition/Effect" control, select the transition mode named "Automatic movement".
  4. Check "Enable the automatic scroll of images". According to the requested result, you also have the ability to check "Start the scroll automatically", "Automatically browse the directory of the image", "Sort the content of the scroll". See automatic scroll of images for more details.
  5. Validate.
Caution: The movement of the image is optimized for the browsers that support the HTML 5 standard (Chrome, Firefox, ...). Otherwise, the move may be jerky.
WEBDEV allows you to easily give an effect of "automatic movement on an image".
The following method must be used:
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "Transition/Effect" control, select the transition mode named "Automatic movement".
  3. At run time, 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.
To use this effect on a set of images, this option must be combined with the automatic scroll of images.
  1. Display the "General" tab of the control description (Image control, Clickable Image control or Thumbnail control).
  2. In the "General" tab, select the image type:
    • Dynamic image.
    • Image from a database: path.
      These two types of images propose to manage the automatic scroll. The area regarding the transitions and the automatic scroll is ungrayed if one of these two types of images is selected.
  3. In the "Transition/Effect" control, select the transition mode named "Automatic movement".
  4. Check "Enable the automatic scroll of images". According to the requested result, you also have the ability to check "Start the scroll automatically", "Automatically browse the directory of the image", "Sort the content of the scroll". See automatic scroll of images for more details.
  5. Validate.
Caution: The movement of the image is optimized for the browsers that support the HTML 5 standard (Chrome, Firefox, ...). Otherwise, the move may be jerky.
Minimum required version
  • Version 15
Comments
Click [Add] to post a comment