Difference between revisions of "AN1001 - Animation in SHIP"

From Serious Documentation
Jump to: navigation, search
(→‎Animation in SHIP)
Line 6: Line 6:
 
Here is an example of three fan images, all in fully transparent alpha-blended .png format, designed to give the impression of a rotating fan:
 
Here is an example of three fan images, all in fully transparent alpha-blended .png format, designed to give the impression of a rotating fan:
  
−
[[File:FanA75.png|75px|border|center|Example Rotating Fan Image, Part 1/3]]
+
[[File:FanA75.png|75px|border|Example Rotating Fan Image, Part 1/3]][[File:FanB75.png|75px|border|Example Rotating Fan Image, Part 2/3]][[File:FanC75.png|75px|border|Example Rotating Fan Image, Part 3/3]]
−
[[File:FanB75.png|75px|border|center|Example Rotating Fan Image, Part 2/3]]
 
−
[[File:FanC75.png|75px|border|center|Example Rotating Fan Image, Part 3/3]]
 
  
 
Animation in SHIP is the process of cycling through a series of images at a certain rate, making each one visible in sequence with the others invisible.
 
Animation in SHIP is the process of cycling through a series of images at a certain rate, making each one visible in sequence with the others invisible.
−
 
−
== SHIPTide Project Files for AN1001 ==
 
−
 
−
The first step is to import the images and organize them in the resources area.
 
  
 
== SHIPTide Project Files for AN1001 ==
 
== SHIPTide Project Files for AN1001 ==
Line 24: Line 18:
 
* {{SeriousDoc|41-an1001-shiptide-project-for-sim225|AN1001 SIM225}}
 
* {{SeriousDoc|41-an1001-shiptide-project-for-sim225|AN1001 SIM225}}
 
* {{SeriousDoc|41-an1001-shiptide-project-for-sim225|AN1001 Renesas YLCDRX63N}}
 
* {{SeriousDoc|41-an1001-shiptide-project-for-sim225|AN1001 Renesas YLCDRX63N}}
 +
 +
== Basic Concepts ==
 +
 +
There are many ways to implement animation in [[SHIP]]; the attached project uses the concept of "grouped images" and demonstrates 4 different [[SHIP:Node:Timer|timer]] modes. 
 +
 +
The three fan images, instead of being placed flat in the resources/images area, are placed in a named group.  Exploring the project in [[SHIPTide]] the group looks like this:
 +
 +
[[File:AN1001A.png|75px|border|center|AN1001 - Grouped Images]]
 +
 +
=== Grouping the Images ===

Revision as of 06:57, 4 January 2013

Animation in SHIP

Animation is a common element of many GUIs. Whether a rotating fan, slowly filling indicator, or a glowing element, subtle animations can enhance a GUI and make it more professional and modern.

At the core of every animation is a series of images that, when rotated through in-place one after another, form the impression of an animated object.

Here is an example of three fan images, all in fully transparent alpha-blended .png format, designed to give the impression of a rotating fan:

Example Rotating Fan Image, Part 1/3Example Rotating Fan Image, Part 2/3Example Rotating Fan Image, Part 3/3

Animation in SHIP is the process of cycling through a series of images at a certain rate, making each one visible in sequence with the others invisible.

SHIPTide Project Files for AN1001

Assuming you've downloaded and installed the SHIPTide Rapid GUI Development Environment, pick a target platform and download one of the following projects. Unzip the project to a directory of your choice and open up the project in SHIPTide.

Basic Concepts

There are many ways to implement animation in SHIP; the attached project uses the concept of "grouped images" and demonstrates 4 different timer modes.

The three fan images, instead of being placed flat in the resources/images area, are placed in a named group. Exploring the project in SHIPTide the group looks like this:

AN1001 - Grouped Images

Grouping the Images

Retrieved from "https://techref.myserious.com/index.php?title=AN1001_-_Animation_in_SHIP&oldid=1661"