SlideShow with custom transition

From Directorforum Collaboration Wiki

Jump to: navigation, search

This example demonstrates how to generate custom transitions with Imaging Lingo and a single bitmap image sprite.

Contents

SlideShow


Description

This example consists of 1 single bitmap image sprite, a frame script (frameloop) and one behavior attached to the bitmap sprite.

The behavior uses two castlibs to generate the slideshow. First castlib is called "lbxSlides" and contains all the images of the slideshow. The second castlib is called "lbxTransition" and contains the individual frames of our custom transition. These transition images must be grayscale to avoid performance killing grayscale conversion on runtime!

Image:LbxTransition.jpg

You can create your own custom transitions and it's completely up to you how many images the transition is made of. Just make sure, you set the timeout object (pTransitionTime) to an interval > transition time.

Lingo Code

-- lbxAnimatedTransition.ls
-- initial version by Martin Schaefer
 
property pSprite, pMember
property pTransitionCast
property pTransFrameTotal
property pTransFrameCount
property pTransitionActive
property pTransitionAlpha
property pTransitionTime
property pTransitionImage
property pSlidesCast
property pSlidesList
property pSlidesCount
property pShowTimer
property pCurrentSlide
property pNextSlide
 
on beginSprite me
  -- basic properties for slideshow bitmap sprite
  pSprite = sprite(me.spriteNum)
  pMember = pSprite.member
  pMember.image.useAlpha = FALSE
 
  -- CUSTOM PROPERTIES FOR SLIDESHOW (only edit here!)
  ---- set transition effect castlib
  pTransitionCast = castLib("lbxTransition")
  ---- select the castlib containing the slides
  pSlidesCast = castlib("lbxSlides")
  ---- set total duration of each frame (incl. transition duration)
  pTransitionTime = 4000
  -- /CUSTOM PROPERTIES FOR SLIDESHOW
 
  -- transition properties
  pTransitionImage = image(pMember.image.width, pMember.image.height, 32, true)
  pTransFrameTotal = pTransitionCast.member.count
  pTransFrameCount = 1
  pTransitionActive = FALSE
  pTransitionAlpha = image(pMember.image.width, pMember.image.height, 8, #grayscale)
  -- get all slides from selected castlib
  pSlidesList = []
  castMemberCount = pSlidesCast.member.count
  if castMemberCount > 0 then
    repeat with i = 1 to castMemberCount
      pSlidesList.add(pSlidesCast.member[i])
    end repeat
    pSlidesCount = pSlidesList.count
  end if
  -- set initial slide to be displayed
  pMember.image = pSlidesList[1].image
  -- set timeout for each frame transition
  pShowTimer = timeout().new("lbxSlideshowTimer", pTransitionTime, #lbxTransition, me)
end
 
on endSprite me
  pShowTimer.forget()
  pShowTimer = VOID
  pMember.image = pSlidesList[1].image
  pTransitionImage = VOID
  pTransitionAlpha = VOID
end
 
on enterFrame me
  if pTransitionActive = TRUE then
    lbxComposeTransitionFrame()
  end if
end
 
on lbxTransition
  -- switch transition state to active
  if pSlidesCount > 1 AND pNextSlide < pSlidesCount then
    pCurrentSlide = pCurrentSlide + 1
    pNextSlide = pCurrentSlide + 1
    pTransitionActive = TRUE
  else if pSlidesCount = 1 then
    -- no transition with 1 slide only
    pTransitionActive = FALSE
  else if pSlidesCount = 0 then
    -- no slides found in selected slides castlib
    pShowTimer.forget()
    pShowTimer = VOID
    alert "No slides available!"
  end if
end
 
on lbxComposeTransitionFrame
  -- compose transition frames while transition is active
  if pTransFrameCount <= pTransFrameTotal then
    pMember.image.copyPixels(pSlidesList[pCurrentSlide].image, pMember.image.rect, pSlidesList[pCurrentSlide].image.rect)
    pTransitionImage.copyPixels(pSlidesList[pNextSlide].image, pMember.image.rect, pSlidesList[pNextSlide].image.rect)
    pTransitionImage.useAlpha = TRUE
    pTransitionAlpha.copyPixels(pTransitionCast.member[pTransFrameCount].image, pTransitionAlpha.rect, pTransitionCast.member[pTransFrameCount].image.rect)
    pTransitionImage.setAlpha(pTransitionAlpha)
    pMember.image.copyPixels(pTransitionImage, pMember.image.rect, pTransitionImage.rect)
    pTransFrameCount = pTransFrameCount + 1
  else
    pSlidesList[pCurrentSlide].unload()
    pTransFrameCount = 1
    pTransitionActive = FALSE
  end if
end

Download

lbxTransitionDemo.zip - D11 project file (3.12MB)

The below Transition Packs are 960x540px and should scale up or down nicely in your project. If you want to create you own transition packs ... the above behavior is open to any size you want.

Soft Organic Transitions

Wipe Transitions

If you want to contribute some more self-made Transition Packs ... well, go ahead :)

Personal tools