Animated menu ? Any Buddy found code to make this or know of something like this done in corona

higable · June 12, 2013, 5:43pm

I have a question about animated fly in or out menu. There is an example here http://maniacdev.com/2011/12/open-source-library-for-creating-an-animated-curved-menu-like-in-the-popular-path-2-app

roaminggamer · June 12, 2013, 7:37pm

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.

http://www.youtube.com/watch?v=9votYVZD168

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 ) &nbsp;&nbsp;&nbsp;&nbsp;if(event.phase == "ended") then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- Use second button, not first or this compare won't work &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local fly2 = flyButtons[2] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print( mb.x, fly2.x, fly2.x0, fly2.x1 &nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- In closed position? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if( fly2.x == fly2.x0 ) then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("Closed") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- Fly out to open position &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for i = 1, #flyButtons do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local button = flyButtons[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to( button, { x = button.x1, time = flyTimeX, transition = &nbsp;xEasing } ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to( button, { y = button.y1, time = flyTimeY, transition = &nbsp;tEasing &nbsp;} ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- Nope, in open position &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("Open") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-- Fly in to closed position &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for i = 1, #flyButtons do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local button = flyButtons[i] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to( button, { x = button.x0, time = flyTimeX, transition = &nbsp;xEasing &nbsp;} ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition.to( button, { y = button.y0, time = flyTimeY, transition = &nbsp;yEasing &nbsp;} ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;return true end mb:addEventListener( "touch", mb )&nbsp;

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

higable · June 12, 2013, 9:08pm

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.

higable · June 12, 2013, 9:24pm

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()

roaminggamer · June 13, 2013, 3:07pm

@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

roaminggamer · June 12, 2013, 7:37pm