PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Creating an image animated by WINDEV/WINDEV Mobile/WEBDEV
  • Using an animated image in a WINDEV/WINDEV Mobile application or in a WEBDEV site
  • Using an animated image in a WINDEV or WINDEV Mobile application
  • Using an animated image in a WEBDEV site
  • Programming an animated image
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
WINDEV, WINDEV Mobile and WEBDEV allow you to handle several types of animated images:
  • The images animated by default. These images have an animated image format (animated GIF for example). These animated images are automatically managed. No specific configuration is required.
    Android The images animated by default (animated GIF for example) are not available.
  • The images animated by WINDEV/WINDEV Mobile/WEBDEV. These images contain all animation drawings.
WEBDEV - Server codeWEBDEV - Browser code Note: WEBDEV also allows:
This help page explains how to handle the images animated by WINDEV, WINDEV Mobile and WEBDEV.
Versions 18 and later
Android The animation of control modification is now available for the Android applications.
New in version 18
Android The animation of control modification is now available for the Android applications.
Android The animation of control modification is now available for the Android applications.
Versions 20 and later
iPhone/iPad The animation of control modification is now available for the iPhone/iPad applications.
New in version 20
iPhone/iPad The animation of control modification is now available for the iPhone/iPad applications.
iPhone/iPad The animation of control modification is now available for the iPhone/iPad applications.
Versions 23 and later
WEBDEV - Server codeLinuxPHP This feature is now available for the WEBDEV sites.
New in version 23
WEBDEV - Server codeLinuxPHP This feature is now available for the WEBDEV sites.
WEBDEV - Server codeLinuxPHP This feature is now available for the WEBDEV sites.
Creating an image animated by WINDEV/WINDEV Mobile/WEBDEV
To create an animated image:
  1. Create an image file.
  2. In this image file, insert the different drawings taking part in the animation. These drawings can be organized in rows or in columns, or in a combination of rows and columns.
Caution: All the drawings must have the same size and the spacing between the drawings must be identical.
Example:
Using an animated image in a WINDEV/WINDEV Mobile application or in a WEBDEV site
WINDEVAndroidiPhone/iPadWindows MobileJava

Using an animated image in a WINDEV or WINDEV Mobile application

To use a custom animated image in a WINDEV or WINDEV Mobile application:
  1. Create an Image control.
  2. Display the description window of the control ("Description" from the popup menu of Image control).
  3. In the "General" tab, select the file containing the animated image.
  4. In the "Details" tab, configure the animation options. Choose the type of animation and configure the associated options.
The options may differ according to the selected display mode.
The "one-way" and "two-ways" options are used to configure the mode for reading the drawings of the image file. The images can be read from left to right and from top to bottom ("standard direction") or in the "reverse direction".
You can specify:
  • The display time for each drawing of the animation ("Duration/Image").
  • The number of drawings found in width and in height in the image file. Depending on the specified number, the image will be automatically divided into as many drawings as necessary.
The animation will be performed by displaying each drawing at regular time interval.
Versions 23 and later
WEBDEV - Server code

Using an animated image in a WEBDEV site

To use a custom animated image in a WEBDEV site:
  1. Create an Image control.
  2. Display the description window of the control ("Description" from the popup menu of Image control).
  3. In the "General" tab:
    • Select the file containing the animated image.
    • Check "The image is an animation sheet" and configure the animation options in the window that is opened.
      • The "one-way" and "two-ways" options are used to configure the mode for reading the drawings of the image file. The images can be read from left to right and from top to bottom ("standard direction") or in the "reverse direction".
      • The display duration of each animation drawing ("Duration between each image" option).
      • The number of drawings found in width and in height in the image file. Depending on the specified number, the image will be automatically divided into as many drawings as necessary.
The animation will be performed by displaying each drawing at regular time interval.
New in version 23
WEBDEV - Server code

Using an animated image in a WEBDEV site

To use a custom animated image in a WEBDEV site:
  1. Create an Image control.
  2. Display the description window of the control ("Description" from the popup menu of Image control).
  3. In the "General" tab:
    • Select the file containing the animated image.
    • Check "The image is an animation sheet" and configure the animation options in the window that is opened.
      • The "one-way" and "two-ways" options are used to configure the mode for reading the drawings of the image file. The images can be read from left to right and from top to bottom ("standard direction") or in the "reverse direction".
      • The display duration of each animation drawing ("Duration between each image" option).
      • The number of drawings found in width and in height in the image file. Depending on the specified number, the image will be automatically divided into as many drawings as necessary.
The animation will be performed by displaying each drawing at regular time interval.
WEBDEV - Server code

Using an animated image in a WEBDEV site

To use a custom animated image in a WEBDEV site:
  1. Create an Image control.
  2. Display the description window of the control ("Description" from the popup menu of Image control).
  3. In the "General" tab:
    • Select the file containing the animated image.
    • Check "The image is an animation sheet" and configure the animation options in the window that is opened.
      • The "one-way" and "two-ways" options are used to configure the mode for reading the drawings of the image file. The images can be read from left to right and from top to bottom ("standard direction") or in the "reverse direction".
      • The display duration of each animation drawing ("Duration between each image" option).
      • The number of drawings found in width and in height in the image file. Depending on the specified number, the image will be automatically divided into as many drawings as necessary.
The animation will be performed by displaying each drawing at regular time interval.
WINDEVAndroidiPhone/iPadWindows MobileJava
Programming an animated image
Several WLanguage functions are used to manage the animated images. These functions are as follows:
AnimationGetParameterReads the value of one of the animation parameters defined for an Image control or for a Static control.
AnimationSetModeChanges the type of animation:
  • for an image in an Image control.
  • for a text in a static control.
AnimationSetParameterChanges one of the animation parameters used for:
  • an animated image (in an Image control),
  • an animated text (in a Static control).
Several WLanguage properties are used to manage the animated images. These properties are as follows:
Animation..Animation is used to manage the animation of an image.
InitialAnimation..InitialAnimation is used to find out the initial status of animation in an Image control, a button, a Static control or a Carousel control.
Related Examples:
The Image control (animations) Unit examples (WINDEV): The Image control (animations)
[ + ] Animating an image with WINDEV.
Two main topics are presented in this example:
1/ animated drawings ('image to animate')
2/ one-way and two-way animations.

This example presents some features proposed by WINDEV to animate images.
This list is not an exhaustive list ; indeed, by combining the different modes, the number of possible animations exceeds 2,000.
This example proposes animations without code as well as programmed animations.
The Image control (Animations) Unit examples (WINDEV Mobile): The Image control (Animations)
[ + ] Animating an image with WINDEV Mobile.
1/ animated drawings ('image to animate')
An 'image to animate' is a kind of 'animated drawing'. Several fixed images create an animation. These images are grouped in a single image. This single image contains a number of rows and columns. Just specify these settings to the 7-tab window as well as the duration between each image, and the image becomes animated.
2/ one-way and two-way animations
If no fixed images are available, WINDEV Mobile enables you to scroll the image. Settings are defined in the 'Details' tab of the image description ('Animation'). You can define the direction, the speed, and so on. The different display modes enable you to create over 2,000 different animations.
All the parameters can be modified by programming with the WLanguage functions:
AnimationSetParameter()
AnimationGetParameter()
Minimum required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment