A Book Project

ext code lua

• 012-overlay page

  • overlay_button_next.lua
  • overlay_button_prev.lua
  • storyboard_play.lua

• 011-viewer

  • storyboard_init.lua
  • storyboard_setup.lua
  • storyboard_button_back.lua
  • storyboard_dispose.lua

• M1

  • storyboard_show.lua
  • storyboard_hide.lua
  • overlay_show.lua
  • M1_play_video.lua

ext/lib is copied to build4/lib manually

• storyboard.lua
• storyboardController.lua
• storyboardView.lua

M1

• overlay_show.lua

  

  local composer = require("composer")
  _K.curPage = UI.curPage
  _K.curUI = UI
  composer.showOverlay("views.page012Scene") -- overlayed icons
  

• storyboard_show.lua

  receives “showStoryboard” runtime event from the overlayed “story” button that sends the event with storyboard_play.lua

  

  local storyboards = {}
  storyboards[1] = nil
  storyboards[2] = {dir="lib/spring01", file="spring01.storyboarder"}
  
  _K.showStoryboard = function()
      local composer = require("composer")
      composer.hideOverlay() -- page012Scene
      --
      if _K.storyboardState == "pause" then
      _K.storyboardState = nil
      else
      _K.storyboardIndex = 1
      end
      --
      local sceneGroup = _K.curUI.scene.view
      local layer      = _K.curUI.layer
      --
      sceneGroup.alpha = 0.01
      if layer.video then
          layer.video.x = layer.video.oriX
          layer.video.y = layer.video.oriY
      end
      --
      _K.storyboardDir = storyboards[_K.curPage].dir
      _K.storyboardFile = storyboards[_K.curPage].file
      --
      composer.showOverlay("views.page011Scene") -- viewer
      --
      if layer.video and _K.gt.linear_video then
      _K.gt.linear_video:pause()
      end
  end
      
  Runtime:addEventListener("showStoryboard", _K.showStoryboard)
  

• stroyboard_hide.lua

  

  Runtime:removeEventListener("showStoryboard", _K.showStoryboard)
  

• M1_play_video.lua

  pauses and hides the viewer of storyboard and shows M1 (sceneGroup.alpha = 1) with the overlayed buttons of page012Scene. It also plays the liner_video animation to bring the native web view to show the page of Instagram.

  

  local composer = require("composer")
  local _AC     = require("commands.kwik.actionCommand")
  
  if _K.storyboardIndex ==3 then
      --  _AC.Layer:frontBack(layer.video, true, Layer)
      _AC.Animation:playAnimation("linear_video")
      sceneGroup.alpha = 1
      Runtime:dispatchEvent( { name = "storyboard", command="pause", index=_K.storyboardIndex} )
      composer.hideOverlay()
      composer.showOverlay("views.page012Scene")
  end
  

  ---

  012-overlay

• overlay_button_next.lua

  local _AC           = require("commands.kwik.actionCommand")
  local nextPage = _K.curPage < 10 and _K.curPage + 1 or _K.curPage
  _AC.Page:gotoPage(nextPage, "slideLeft", 0, 300);
  

• overlay_button_prev.lua

  local _AC           = require("commands.kwik.actionCommand")
  local prevPage = _K.curPage -1
  _AC.Page:gotoPage(prevPage, "slideRight", 0, 300);
  

• storyboard_play.lua

  Runtime:dispatchEvent({name="showStoryboard"})
  

• but_back

  

011-viewer

• storyboard_button_back.lua

  local _AC           = require("commands.kwik.actionCommand")
  _AC.Page:gotoPage(_K.curPage, "slideUp", 0, 1000)
  

• storyboard_init.lua

  

  local storyboard = require("lib.storyboard")
  
  storyboard:init(sceneGroup, display.contentCenterX, layer.controls.y)
  
  storyboard:characterPos(layer.character.x, layer.character.y)
  storyboard:actionPos(layer.comment.x, layer.comment.y)
  storyboard:dialoguePos(layer.dialogue.x, layer.dialogue.y)
  
  layer.character.alpha = 0
  layer.comment.alpha = 0
  layer.dialogue.alpha = 0
  layer.slider.alpha = 0
  layer.timeTxt.alpha = 0
  layer.controls.alpha = 0
  

• storyboard_setup.lua

  

  local storyboard = require("lib.storyboard")
  local composer = require("composer")
  
  storyboard.controls:init(layer.bg)
  --storyboard:rotate(UI)
  storyboard.controls:setStoryboarder(_K.storyboardDir, _K.storyboardFile, _K.systemDir)
  storyboard.controls:decodeJson()
  print("controls_image.lua", _K.storyboardIndex)
  storyboard.controls:render(_K.storyboardIndex)
  Runtime:addEventListener("enterFrame", storyboard.controls)
  
  layer.rotateBtn.tap = function()
      if layer.rotateBtn.rotation == 90 then
          local composer = require("composer")
          composer.gotoScene("extlib.page_reload")
      else
          storyboard:rotate(UI)
      end
      return true
  end
  
  layer.rotateBtn:addEventListener("tap", layer.rotateBtn)
  

• storyboard_dispose.lua

  

  local storyboard = require("lib.storyboard")
  
  storyboard.controls:dispose()
  layer.rotateBtn:removeEventListener("tap", layer.rotateBtn)
  

Screenshots

• 012-overlay page over 002-M1

  

• 011-viewer overlayed over 002-M1 (alpha = 0.1)

  receives a touch event and trigger the web view of Instagram with the button of photo obj in M1 if _K.storyboardIndex == 3

  

• Web view (no overlay)

  
  • Story button to resume to view the storyboard

• Landscape (overlay over 002-M1)