반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

스티브 잡스 추모 앱

2011. 11. 21. 06:02 | Posted by 솔웅



오늘은 누군가가 올린 스티브 잡스 추모 앱을 가지고 공부 해 보겠습니다.

이 앱의 진행은 처음에 애플 인트로 화면이 나오고 조금 있다가 두번째 화면이 나옵니다.
세번째 화면은 로딩 화면이고 그 다음 화면이 스티브 잡스 분향소 이미지 화면입니다.
이 분향소 화면에는 촛불이 있고 유저가 좌측에 있는 버튼을 누르는 동안엔 이 촛불에 불이 켜지게 됩니다.

dsrawat이라는 분이 만들어서 배포한 것인데요...
소스도 같이 공개 했습니다.

이제 부터는 여러 공개된 샘플 코드를 가지고 공부할 생각입니다.
그 첫번째 대상이 스티브 잡스 추모 앱이 됐습니다.

전체 리소스는 아래 파일을 다운 받으시면 됩니다.





main.lua 파일 소스 먼저 보시면....

 --file main.lua

--To Hide the status bar
display.setStatusBar( display.HiddenStatusBar )
--==> 아이폰의 status bar를 없애줍니다.


-- For Importing director.lua class
local director = require("director")
local movieclip = require("movieclip")
uiButton = require("buttonLib")

--==> 화면전환을 위한 클래스 director.lua와 애니메이션 효과를 위한 movieclip.lua 그리고 버튼을 사용하기 위해서 buttonLib.lua 클래스 파일을 require 합니다.

-- For Creating a main group
local mainGroup = display.newGroup()

--==> 객체들을 그룹화 하기 위해 newGroup을 만듭니다. 특히 director 클래스를 사용할 때는 이렇게 그룹화를 해서 display객체들을 관리해야 좋은 화면 전환 효과를 낼 수 있습니다.

-- Start of Main function
local function main()

--==> main() 함수입니다.

     -- Adding the Group from director.lua class
    mainGroup:insert(director.directorView)

--==> 아까 만든 그룹에 director.directorView를 담습니다.
   
local function flash1()
    local myLogo = display.newImage("menubackground/splash.png")
     myLogo.x = 240
    myLogo.y = 160
    myLogo.alpha = 0
    transition.to( myLogo, {time=500, delay=500, alpha=1})
    transition.to( myLogo, {time=500, delay=3500, alpha=0})
end
    timer.performWithDelay(0, flash1)

--==> flash1() 함수입니다. 여기에서는 첫번째 화면 이미지인 splash.png를 표시해 줍니다. 위치를 설정해주고 transition.to로 서서히 이미지가 나타나는 효과를 줍니다.

타이머를 달아서 delay는 0으로 줘서 곧바로 실행하게 하고 이때 flash1함수를 콜해 줍니다.

local function flash2()
    local myLogo1 = display.newImage("menubackground/apple.png")
     myLogo1.x = 240
    myLogo1.y = 160
    myLogo1.alpha=0
    myLogo1.alpha = 0
    transition.to( myLogo1, {time=500, delay=500, alpha=1})
    transition.to( myLogo1, {time=500, delay=3500, alpha=0})
 end
    timer.performWithDelay(3500, flash2)

--==> flash2() 함수입니다. 첫번째 이미지가 서서히 사라지고 난 후 두번째 이미지인 apple.png를 서서히 나타나게 합니다. 그리고 서서히 사라지게 합니다.



    local changeScene = function()
        director:changeScene("loadmainmenu", "fade")
    end

--==> 이 함수는 director클래스의 fade효과를 주면서 loadmainmenu.lua 클래스를 실행 하도록(화면전환) 하는 함수입니다.

    timer.performWithDelay(8000, changeScene)
    --To Change scene withoutany effects
    return true

--==> main()함수의 마지막 부분입니다. 8초 후에 changeScene 함수를 실행 합니다.
end



-- For Running Main Function
main() --==> main함수를 실행합니다.

이 메인 함수가 실행되면 각각의 timer가 실행 될 겁니다. 첫번째는 곧바로 실행되는 첫번째 타이머가 flash1 함수를 실행할 것이고 두번째 타이머는 3.5초 후에 flash2함수를 실행 할 겁니다.

그리고 세번째는 8초후에 실행되는 타이머로 changeScene 함수를 콜해서 다음 화면으로 넘어가도록 할 겁니다.

loadmainmenu.lua 파일 입니다.


module(..., package.seeall)

--==> 처음에 모듈 선언을 함으로서 외부파일에서 불려질 수 있는 모듈임을 알립니다.

-- Main function - MUST return a display.newGroup()
function new() --==> director 클래스에서 사용되는 모듈은 new()함수 내에 위치해야 됩니다. 그리고 display.newGroup()을 return 해야 합니다.
    local localGroup = display.newGroup() --==> 그룹을 만듭니다.
   
    local theTimer
    local loadingImage

--==> theTimer와 loadingImage 변수를 선언만 해 둡니다.
   
    local showLoadingScreen = function()
        loadingImage = display.newImageRect( "menubackground/loading.png", 480, 320 )
        loadingImage.x = 240; loadingImage.y = 160
       
        local goToLevel = function()
            loadingImage:removeSelf()
            director:changeScene( "mainmenupage" )
        end
       
        theTimer = timer.performWithDelay( 1000, goToLevel, 1 )
   
    end

--==> showLoadingScreen 함수입니다. loading.png 이미지 파일을 보여줍니다.

이 함수 안에는 goToLevel이라는 로컬 함수가 있습니다.

이 로컬 함수에서는 loadingImage를 없애고(removeSelf()) director클래스의 changeScene 함수를 이용해서 mainmenupage.lua 클래스에 있는 것을 표현해 줍니다.

theTimer변수에 타이머를 답니다. 1초 후에 goToLevel 함수를 호출하고 이는 1회만 실행 합니다.

 
    showLoadingScreen()

--==> showLoadingScreen()함수를 호출해서 실행 하도록 만듭니다.
   
    unloadMe = function()
        if theTimer then timer.cancel( theTimer );
       
         end
       
        if loadingImage then
            loadingImage:removeSelf()
            loadingImage = nil
        end
    end

--==> unloadMe함수는 theTimer가 있으면 이를 cancel하고 loadingImage가 있으면 이를 없애고 메모리도 풀어 줍니다.
   
    -- MUST return a display.newGroup()
    return localGroup --==> localGroup을 return 합니다. director.lua로 화면전환을 할 때 반드시 해 줘야 합니다.
end

--==> 이렇게 하면 로딩 화면이 1초 정도 떠 있다고 mainmenupage.lua에 있는 내용들이 실행 되겠죠?



 --==> mainmenupage.lua 파일입니다.

module(..., package.seeall) --==> 모듈선언입니다.

local menuGroup=display.newGroup() --==> 그룹을 만듭니다.

 local ui = require("ui") --==> ui.lua 클래스를 이용하기 위해 require합니다.
  local movieclip = require "movieclip" --==> movieclip.lua를 이용하기 위해 require합니다.
  local candle --==> candle변수를 선언합니다.

function new() --==> director.lua를 사용하려면 new()함수를 사용합니다.

local menuGroup=display.newGroup() --==> 위에서 선언했는데 중복되서 선언했네요. 제 생각엔 위에 선언한 것을 지워도 될 거 같습니다.
 -- Background
local background = display.newImage("menubackground/jobs.png")
menuGroup:insert(background)
local localGroup = display.newGroup()
--==> jobs.png 이미지를 display하고 이를 menuGroup에 넣습니다.
 그리고 localGroup을 만듭니다.

candle = movieclip.newAnim{ "candle/candle0.png","candle/candle.png", "candle/candle1.png","candle/candle2.png","candle/candle3.png"}
candle.x=220
candle.y=220
candle.xScale=.4
candle.yScale=.4
candle:stopAtFrame(1)
--==> 촛불 애니메이션 효과를 줍니다. candle 변수에 newAnim을 이용해서 5개의 촛불 이미지를 담습니다. 그리고 위치와 크기를 설정하고 1번 프레임에 stop시켜 놓습니다.
      
    --- ********************************************************* ---
    ---                            BUTTONS                              ---   
    --- ********************************************************* ---
        -->> Set Up "fire" Button with required variables

    --Custom function to execute on began press state
    local function fireBeganFunction()
        print("fire Began State Executed")
        candle:play()
       
    end
--==> candle애니메이션을 play() 시키는 함수입니다.

    --Custom function to execute on released press state
    local function fireReleasedFunction()
        print("fire Released State Executed")
        candle:stopAtFrame(1)
        new()
    end
--==> candle 애니메이션을 1번 프레임에 stop시키는 함수입니다.

    fireBTN = movieclip.newAnim({"fire.png", "fire1.png"}) -- The sequence of images : Should contain a default and pressed state image
    fireBTN.x = 40          
    fireBTN.y = 260
         fireBTN.xScale=.5
        fireBTN.yScale=.5       
--==> fireBTN 변수에 두개의 이미지를 담습니다. (newAnim을 이용해서요...)            
     fireBTN.beganFunction = fireBeganFunction       -- The pointer to the custom function to execute on button began state (If any) Optional
    fireBTN.releasedFunction = fireReleasedFunction -- The pointer to the custom function to execute on button began state (If any) Optional
    fireBTN.removeListenerOnTouch = true            -- If true the library will automatically remove the event listener for you when it is done.
   menuGroup:insert(fireBTN)
--==> menuGroup에 fireBTN을 insert합니다.

    fireBTN:addEventListener("touch", uiButton.handleEvent)
fireBTN에 리스너를 달아서 터치를 하면 위에 선언했던 fireBeganFunction과 fireReleasedFunction을 실행하도록 합니다.

     ------------------------------------------------------

clean = function()
 fireBTN:removeEventListener("touch", uiButton.handleEvent)
 menuGroup:removeSelf()
end
--==> fireBTN의 리스너를 없애고 메뉴그룹에서도 없애는 함수입니다.

     -- MUST return a display.newGroup()
    return localGroup
end
   
========= o ======= o ======== o ======== o =========

다른 사람이 작성한 코드를 보니까 나 같으면 이렇게 했겠다라는 부분도 있고 내가 모르던 방법을 사용해서 새로 배울 수 있는 부분도 있고 그러네요.

시간이 되면 똑같은 앱을 제 방식대로 한번 만들어 보고 싶네요.
만약 이런 앱을 만드는 의뢰를 받았다면 나는 어떻게 만들지 그리고 이 사람이 만든 코드랑 어떻게 다른지 또 어떤점이 더 낫고 어떤 점은 내가 배울 점인지 좀 더 확실하게 알 수 있도록......

첫번째 샘플 코드 분석은 이렇게 마치겠습니다.

질문이나 의견 있으면 언제든지 기탄없이 댓글로 남겨 주세요...

그럼...

 

반응형

Comment