Moving an image along a path

When you have to move an object along a path or do an animation, many programmers lose days or weeks to calculate the formula that mathematically describes the path or animation.

Livecode allows you to avoid this and simply do it by hand!

As an example, I'll show you how to make a ball bounce in less than a minute.

First draw the ball directly in Livecode, just press the oval button, make a circle and then indicate the colors of the gradients, to have something like this:

Let's call it "ball".
Then we create a path, which we will call "mypath", by pressing the freehand button and drawing the trajectory of the ball by hand, obtaining something similar to this:

Make invisible the path and then create a Start button with this code:

on mouseUp
   move graphic "ball" to the points of graphic "mypath" in 10 sec
end mouseUp

Pushing the butto this will be the result:

Just one line of code! (thank livecode)

Animated scrolling text

Creating an animated scrolling text can be achieved by livecode in two ways:

• text manipulation
• graphic manipulation

We'll see both ways.

TEXT MANIPULATION

Just create a field and put this code in it:

on movingtext mytext, myspeed
   set the realtext of me to mytext
   set the realtext2 of me to mytext
   stripspaces
   set the text of me to empty
   createspaces
   put the realtext2 of me into temp
   put the text of me before temp
   #put the text of me after temp
   set the realtext2 of me to temp
   set the text of me to temp
   set the cyclet of me to true
   cycleText myspeed
end movingtext

on stopcycle
   set the cyclet of me to false
end stopcycle

on stripspaces
   put the realtext2 of me into temp
   if the last char of temp is space then
      delete the last char of me
      set the realtext2 of me to temp
      stripspaces
   end if
end stripspaces

on cycletext myspeed
   put the realtext2 of me into temp
   put the number of chars of temp into nt
   set the text of me to temp
   repeat for nt times
      delete char 1 of me
      if not the cyclet of me then exit repeat
      wait mySpeed sec with messages
   end repeat
   if the cyclet of me then send "cycletext " & myspeed to me in 0 sec
end cycletext

on createspaces
   set the dontwrap of me to true
   put space after me
   if the formattedwidth of me < the width of me then
      createspaces
   end if
end createspaces



Now you have the following messages to use:

• movingtext TEXT,SPEED: you use this message to change text, start scrolling setting the scroll speed
• stopcycle to stop scrolling text

GRAPHIC MANIPULATION

Create a field and put this code inside it:

on cycleText myText, mySpeed
   lock screen
   set the locktext of me to true
   set the dontwrap of me to true
   set the pcontinue of me to true
   set the text of me to myText
   clone me as "clonefield"
   put the ID of the last field into tID
   set the pcloneid of me to tID
   set the width of fld id tid to the formattedwidth of fld id tid
   set opaque of field id tid to false
   set showFocusBorder of field id tid to false
   set threeD of field id tid to false
   set showborder of field id tid to false
   set lockText of field id tid to true
   set the left of fld id tid to the right of me
   set the top of fld id tid to the top of me
   create graphic "cycleR"
   put the id of the last graphic into tID2
   set the pgr of me to tID2
   set the style of graphic id tid2 to "rectangle"
   set the rect of graphic id tid2 to the rect of fld id tid
   set the opaque of graphic id tid2 to true
   set the backgroundcolor of graphic id tid2 to the backgroundcolor of this card
   set the linesize of graphic id tid2 to 0
   clone graphic id tid2
   put the id of the last graphic into tid3
   set the pgL of me to tid3
   set the right of graphic id tid3 to the left of me
   set the top of the graphic id tid3 to the top of me
   set the prealText of me to the text of me
   set the text of me to empty
   set the pmyspeed of me to myspeed
   unlock screen
   cycle2 mySpeed
end cycleText

on cycle2 mySpeed
   put the pcloneid of me into temp
   if exists(field id temp) then   
      set the left of fld id temp to (the left of field id temp - 1)
      wait myspeed sec
      if the right of fld id temp < the left of me then
         set the left of fld id temp to the right of me
      end if
   end if
   if the pcontinue of me then send "cycle2 "& mySpeed to me in 0 sec
end cycle2

on StopCycle
   set the pcontinue of me to false
   set the text of me to the pRealText of me
   put the pcloneid of me into tid
   put the pgr of me into tid2
   put the pGL of me into tid3
   delete field id tid
   delete graphic id tid2
   delete graphic id tid3
end StopCycle



RESULTS

You can see results in the following video, the text mode is confinde in it's space but it sn't constant due the difference in size of each letter, on the other hand the gaphic mode is smother but needs on the left and on the righe no other object, because we have to cover the text:

Toggle button

One of the missing controls in Livecode palette is the toggle button.
To obtain a toggle button, just add this code to a button:

on MouseUp
   put the hilite2 of me into hitemp
   if hiTemp then
      set the hilite2 of me to false
   else
      set the hilite2 of me to true
   end if
end MouseUp

setprop hilite2 temp
   set the hilite of me to temp
   set the hilite2 of me to temp
end hilite2

I used a new property, because the hilite is actived as soon you press but you still don't relase the mouse.

Animation with drawing

You can create an animation with the drawing commands of livecode, for example see this script:

on mouseUp
   set the rect of the templateImage to 100,100,400,400
   create image "test"
   choose brush tool
   set the brush to 8
   set the brushColor to red -- could use an RGB triplet here
   set the dragSpeed to 20 -- very slow
   #H
   drag from 120,120 to 120,300
   drag from 120,200 to 150,200
   drag from 150,300 to 150,120
   #i
   drag from 180,120 to 180,150
   drag from 180,180 to 180,300     
end mouseUp

this is the result:

The example is simple, but you can use all geometric shapes of livecode, so you can create very complex animations.

Expandable animated menus

I needed a LOT of time to write this post, this time I'll show you how to create animated menu collapsing/expanding.
You are free to change anything of the code and animations.
You can change buttons in the examples below with any combinations of items you like for graphic.
It's a little complex, so I'll write a plugin to do this automatically and better.
The final result will be like this demo:

Please note the will need to do a lot of GROUPS. Here is the hierarchy of what we'll see, keep it in mind for the rest of this post:

First of all, create a button called main, then another button called +. Resize them to get this result:

Now put this code in button + script:

on mouseUp
   if the label of me is "+" then
      showMe
      set the label of me to "-"
   else
      hideMe
      set the label of me to "+"
   end if
end mouseUp



Group them together and call the group Main.
Create another button call it slider, resize it below Main like this:

Now group slider with itself (or other item you like in slider), and call the group Slider.
Now group group slider with group main, call this group element 1.
Set the lockLocation of group "element 1" to true.
Put this code in group element 1:

on showMe
   repeat while the top of group "Slider" of me < the bottom of group "Main" me - 4
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" me + 4
      set the height of me to the height of me + 4
      layoutChanged the short name of me, 4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end showMe

on hideMe
   repeat while the bottom of group "Slider" of me > the bottom of group "Main" of me
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" of me - 4
      set the height of me to the height of me - 4
      layoutChanged the short name of me, -4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end hideMe



Clone it has many times you like, for example 5 times.
Put any clone below the preceding clone, change the numbers in names, so we have: element 1 on top, element 2 down element 1, element 3 down element 2 and so on.
Group all and call it List.
Set the lockLocation of group "list" to true.
Put this code in group list script:

on layoutChanged pGroup, pSize
   lock messages
   
   local tElementCount
   
   if pGroup is "Element Template" then exit layoutChanged
   
   put word 2 of pGroup into tElementCount
   add 1 to tElementCount -- look for the next one
   repeat while there is a group ("Element" && tElementCount)   
      set the top of group ("Element" && tElementCount) to the top of group ("ElemenT" && tElementCount) + pSize--
      add 1 to tElementCount
   end repeat
   set the vscroll of me to the vscroll of me
   
   if the bottom of group pGroup of me > the bottom of me then
      set the scroll of me to the scroll of me + pSize
   end if
   set the vScrollBar of group "List" to the formattedHeight of group "List" > the height of group "List"
   set the vScroll of group "List" to the vScroll of group "List"
   unlock messages
end layoutChanged



FINISHED!!!

How to create an animation

If you want to create a video game or animation for your program, you need first of all a series of images to be replaced in order to create the animation.
I created three different sequences for a character: one in which is stopped (s1-s18), one in which advances (f1-f6) and one in which recoils (b1-b6).

We put an image, called "Thai" as an example, in our window and create a custom property that contains the folder with all the animation sequences (called frames or sprites ).

Single frame

I put the image and then I added the following code:

on opencard
   put the filename of image thai into temp
   set itemdel to "/"
   put item 1 to -2 of temp into temp2
   set the cartella of image thai to temp2
   send fermo to image thai
end opencard



Then I wrote the code for the animation when it stays in place, I called the message standstill. I created a custom properties sprite that makes me as a counter to the correct order of images.
If the images are not all the same size the center of gravity shifts and the animation may begin to move, so it is best to store the position (property loc ) and reset it after updating the sprite.
We must be careful to create a message that calls itself, not a repeated sequence in a message, otherwise you will block in an infinite loop the program. Here is the correct code into the image:

on fermo
   put the cartella of me into cart
   put the sprite of me into spr
   add 1 to spr
   if spr > 16 then
      put 1 into spr
   end if
   set the sprite of me to spr
   put the loc of me into temploc
   put cart & "/s" & spr & ".png" into temp
   set the filename of image thai to temp
   set the loc of me to temploc      
   send fermo to me in 0.2 sec   
end fermo

on cancellafermo
      repeat for each line templ in the pendingmessages
      if item 3 of templ is "fermo" then
         put item 1 of templ into temp
         cancel temp
      end if      
   end repeat
end cancellafermo



As you can see the image contains both the message to be repeated to make the whole cycle of the sequence and the message to block it.
Now add the buttons to move your character, here is the code to move forward: 

on mouseUp   
call cancellafermo of image thai
   set the stato of image thai to "avanti"   
   put the cartella of image thai into cart
   repeat for 2 times
      repeat with spr = 1 to 6
         put cart & "/f" & spr & ".png" into temp
         put the item 1 of the loc of image thai into templocx      
         put the item 2 of the loc of the image thai into templocy
         add 5 to templocx
         set the loc of the image thai to templocx,templocy      
         set the filename of image thai to temp
         wait 0.2 sec
      end repeat
   end repeat   
   send fermo to image thai   
end mouseUp



Because I don't want interruptions during the sequence of movement, I used a single message with a loop repeat inside. But do it only if you want something that can never be broken. It is usually best to do as in the case of the stationary sequence.
You can also use the same code for the button to go back (just replace 5 with -5) and you will done.
This is the result and there isn't a line of code more: