Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Animated menu ? Any Buddy found code to make this or know of something like this done in corona
Started by higable Jun 12 2013 09:43 AM

4 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

higable

[GLOBAL: userInfoPane.html]
higable
  • Observer

  • 4 posts
  • Corona SDK

[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,601 posts
  • Corona SDK

Hi.  You can achieve that kind of affect with transitions.  Below is a video with a similar result, but the flyouts are straight.  You can modify this as mentioned below.

 

 

I made up a quick sample and put it up for free with the rest of my stuff on GumRoad:

 

https://gumroad.com/l/xsWuP

 

 

If  you grab this, pay particular attention to the fly in-out times and the easings.  Experiment and you should be able to get what you want.  You may need specific times and easings per-button to get the exact  results you're looking for.

 

local flyTimeX = 500
local flyTimeY = 500

local xEasing = easing.linear
local yEasing = easing.linear
--local xEasing = easing.linear
--local yEasing = easing.inExpo

mb.touch = function( self, event )
    if(event.phase == "ended") then
        
        -- Use second button, not first or this compare won't work
        local fly2 = flyButtons[2]
        print( mb.x, fly2.x, fly2.x0, fly2.x1  )        

        -- In closed position?
        if( fly2.x == fly2.x0 ) then
            print("Closed")

            -- Fly out to open position
            for i = 1, #flyButtons do
                local button = flyButtons[i]
                transition.to( button, { x = button.x1, time = flyTimeX, 
                                         transition =  xEasing } )
                transition.to( button, { y = button.y1, time = flyTimeY, 
                                         transition =  tEasing  } )
            end

        -- Nope, in open position
        else
            print("Open")
            -- Fly in to closed position
            for i = 1, #flyButtons do
                local button = flyButtons[i]
                transition.to( button, { x = button.x0, time = flyTimeX, 
                                         transition =  xEasing  } )
                transition.to( button, { y = button.y0, time = flyTimeY, 
                                         transition =  yEasing  } )
            end
        end
    end
    return true
end

mb:addEventListener( "touch", mb ) 

 

 
Warning, this code was written very quickly, so it isn't well commented.

Edited by roaminggamer, 12 June 2013 - 11:45 AM.


[TOPIC: post.html]
#3

higable

[GLOBAL: userInfoPane.html]
higable
  • Observer

  • 4 posts
  • Corona SDK

do i need to include any other lua files in main.lua like director or scrollView.lua when using this menu code.  I am new to corona developement.   Does this code just get copied into main.lua file.  I am trying to use this type of fly in menu with different types of lists that i will transition in when each button is clicked, after the fly out.



[TOPIC: post.html]
#4

higable

[GLOBAL: userInfoPane.html]
higable
  • Observer

  • 4 posts
  • Corona SDK

What i am after is a fly in and out menu like you put up with the code above.  Is it possible to include the extra lua files that will be loaded as the menu buttons were pressed.  This would at least let me get started with code to producing a menu selectable to show a list of products.   Would the main.lua file have this menu code and then call a file like sample.lua below.

 

 

- main.lua

 

local flyTimeX = 500
local flyTimeY = 500

local xEasing = easing.linear
local yEasing = easing.linear
--local xEasing = easing.linear
--local yEasing = easing.inExpo

mb
.touch = function( self, event )
    if(event.phase == "ended") then
        
        
-- Use second button, not first or this compare won't work
        local fly2 = flyButtons[2]
        print( mb.x, fly2.x, fly2.x0, fly2.x1  )        

        -- In closed position?
        if( fly2.x == fly2.x0 ) then
            print("Closed")

            -- Fly out to open position
            for i = 1, #flyButtons do
                local button = flyButtons[i]
                transition.to( button, { x = button.x1, time = flyTimeX,
transition =  xEasing } )
                transition.to( button, { y = button.y1, time = flyTimeY,
transition =  tEasing  } )
            end

        -- Nope, in open position
        else
            print("Open")
            -- Fly in to closed position
            for i = 1, #flyButtons do
                local button = flyButtons[i]
                transition.to( button, { x = button.x0, time = flyTimeX,
transition =  xEasing  } )
                transition.to( button, { y = button.y0, time = flyTimeY,
transition =  yEasing  } )
            end
        end
    end
    return true
end

mb:addEventListener( "touch", mb )

 

 

 

- sample.lua

 

--
-- Abstract: Scroll View sample app
--  


display.setStatusBar( display.HiddenStatusBar )

--import the scrolling classes
local scrollView = require("scrollView")
local util = require("util")

local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
background:setFillColor(140, 140, 140)

-- Setup a scrollable content group
local topBoundary = display.screenOriginY
local bottomBoundary = display.screenOriginY
local scrollView = scrollView.new{ top=topBoundary, bottom=bottomBoundary }

local myText = display.newText("Move Up to Scroll", 0, 0, native.systemFontBold, 16)
myText:setTextColor(0, 0, 0)
myText.x = math.floor(display.contentWidth*0.5)
myText.y = 48
scrollView:insert(myText)

-- add some text to the scrolling screen
local lotsOfText = " This is just a test of sample text\n\nAuthor  "

local lotsOfTextObject = util.wrappedText( lotsOfText, 39, 14, native.systemFont, {0,0,0} )
scrollView:insert(lotsOfTextObject)
lotsOfTextObject.x = 24
lotsOfTextObject.y = math.floor(myText.y + myText.height)

-- Important! Add a background to the scroll view for a proper hit area
local scrollBackground = display.newRect(0, 0, display.contentWidth, scrollView.height+64)
scrollBackground:setFillColor(255, 255, 255)
scrollView:insert(1, scrollBackground)

scrollView:addScrollBar()
 

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



[TOPIC: post.html]
#5

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,601 posts
  • Corona SDK

@Higable,

 

The example I provided was just meant to show that it is possible to make fly-out (and with some work) radial-fly-out menus.

 

This code is not intended to act as a module, and I suggest examining it then designing your own specialized menu based on what you learn/find. 

 

I purposely kept the example 'thin' so you could experiment with it and see how the fly-out transitions work, and how they can be modified.

 

-Ed




[topic_controls]
[/topic_controls]