Lesson 5 - LiveCode...20/08/2013 LiveCode eBook Academy Transcript...

20/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 1/19

IntroductionWelcome to Lesson 5 of the LiveCode eBook Academy.

In this lesson we are going to be looking at

creating page 2 of the eBookimporting the page 2 assetsusing animated gifsvisual effectsasset animation

Importing AssetsStart by opening your Bitter Revenge stack in LiveCode and ensure you

Lesson 5IntroductionImporting Assets

Setting Up the CardThe Smoke Images

Coding the CardAnimating the SmokeThe Swipe HandlerCreating Page 3Changing the Background Color

Lesson 5



are on the "Page2" card we created ar rge end of Lesson 4.

As before we are going to import our assets onto our stack.

Select Import As Control -> Image File from the File menuSelect the Main Illustration/ folderSelect all the imagesClick Open



Setting Up the CardFirsly we want to set the layer of the rain image to the furthest back. Thisensures it is behind the window.

You can relayer controls by dragging them around in the ProjectBrowser.



Next we want to position our frames on screen, making sure they are inthe correct order.



The Smoke ImagesYou will see we have separate frames for the smoke effect



What we need to do is line these up correctly, with smoke effectnumbered 1 coming first and the rest going on top afterwards. All theimages are visible, but they are correctly lined up directly on top of eachother.



Next we want to hide all the smoke images so they are not shown, youcan do this in the Project Browser by clicking the visibility button (thatlooks like an eye) or using the Property Inspector and setting the visibleproperty to false.



Next select all the images and set the "Lock size and position" of themto true.



Next we want to take a note of the initial location of each panel imageso we can use this later.

Panel 1 - 860,156Panel 2 - 860,373Panel 3 - 860,622

Coding the CardNext we want to set up the card in code.

Firstly we want to hide our images, as we have before, we will hide thesmoke images first, then the rain image, then the panel images

Open the Card Script from the Object menu and add the following



preOpenCard handler.

on preOpenCard

hide image "p2-smoke2.png"





hide image "p2-rain.gif"

hide image "p2-inscreen-animation-text-1.png"



end preOpenCard

Then move the panel images offscreen.

Next we want to get the offscreen locations of the panels so we can setthem to be offscreen in the preOpenCard handler. We can get thesefrom the Size and Position pane of the Property Inspector once the



images have been moved off screen. These locations allow the imagesto move onto the screen in a straight line, Panel 1 from above, Panel 2from the right and Panel 3 from below but you can use any locationsthat will give the effect you desire.

Panel 1 - 724,-192Panel 2 - 1170,373Panel 3 - 860,912

We also want to set the label of the "Navigation" button to "Proceed".We'll do that in the script below.

Update the preOpenCard handler to set the locations of these images.

on preOpenCard






hide image "p2-rain.gif"




set the loc of image "p2-inscreen-animation-text-1.png" to 724,-192

set the loc of image "p2-inscreen-animation-text-2.png" to 1170,373

set the loc of image "p2-inscreen-animation-text-3.png" to 860,912

set the label of button "Navigation" to "Proceed"

end preOpenCard

Next we want to copy the "Proceed" button from the "page1" card. Goto the "page1" card, select the "Navigation" button and copy it.

Then go back to the "page2" card and paste the button and lock its sizeand position.

Open the Code Editor for the "Navigation" button by clicking the Code



button in the Menubar and update it to refer to the images on this cardand use the onscreen locations we noted earlier.

global gPosition

on mouseUp

if the visible of image "p2-inscreen-animation-text-1.png" is true then

show image "p2-rain.gif" with visual effect dissolve

move image "p2-inscreen-animation-panel-1.png" to 860,156 in 1 second



set the label of button "Navigation1" to "Swipe to Continue"

end if

if the visible of image "p2-inscreen-animation-text-1.png" is false then

show image "p2-inscreen-animation-text-1.png" with visual effect dissolve



put flushEvents("all") into tFlush

put empty into gPosition

if the environment is "mobile" then

mobileClearTouches

end if

end if

end mouseUp

Now if you go to the previous card and back again you will see thesmoke animation.



Animating the SmokeNext we want to animate the smoke, we will do this on openCard so itis visible to the user. We create the animation by showing each frame inturn, using the visual effect dissolve very fast command and with await time of 10 millisecond between each image to ensure they do notappear too quickly.

Open the Card Script using the Object menu and add the followinghandler

on openCard

show image "p2-smoke2.png" with visual effect dissolve very fast

wait 10 milliseonds


wait 10 milliseonds




wait 10 milliseonds


wait 10 milliseonds


wait 10 milliseonds

end openCard

Now if we go to the previous card and back again you will see thesmoke animation. If you then click "Proceed" the panel images will slidein and the label of the "Navigation" button will change to "Swipe toContinue."

The Swipe HandlerNext we want to add the swipe handler to the Card Script again.



Start by declaring the global variable gPosition the copy and paste therelevant handlers from the "page1" Card Script, remembering to putempty into gPosition in openCard so that our swipe calculation doesnot use any values left from a previous gesture, and changing the 'go tocard' command in mouseMove to go to "page3".

global gPosition

on openCard



wait 10 milliseonds


wait 10 milliseonds


wait 10 milliseonds


wait 10 milliseonds


wait 10 milliseonds

end openCard

on mouseDown

put item 1 of the mouseLoc into gPosition

end mouseDown

on mouseUp


end mouseUp

on mouseMove pX

if gPosition is not empty and the label of button "Navigation1" is \

"Swipe to Continue" and pX < gPosition - 200 then




visual effect push left

go to card "page3"

end if

end mouseMove

Creating Page 3Next we need to create a new card and call it "page3".

Select New Card from the Object Menu or use the keyboard shortcutcmd/ctrl-NLiveCode will automatically move to the new cardOpen the Card Inspector from the Object menuSet the name of the card to "page3"

Now if we go back to the previous card we should be able to initiate aswipe gesture and transition to the next card.

Changing the Background ColorThe next thing we want to do is change the background color of thecard, this makes the rain look a little better.

Return to the "page2" card and open the Card Inspector from theObject menu.

Choose "Colors & Patterns" from the dropdown(1)Click on the Background Color selector(2), you will be shown asystem color picker.(3)Choose the color you want(4) and click OK(5).



The background color of the card will change, although the only placeyou will be able to see it is behing the transparent window section of themain image.

The very last thing we want to do here, which will depend on how youhave positioned things is to move the "Navigation" button to the middleof the card, just to make it easier to push.



That's all for this lesson. In Lesson 6 we will be looking at

Creating page 3 of the eBookImporting the page 3 assetsUsing visual effectsAsset animationUsing sound effects

Lesson 5 - LiveCode...20/08/2013 LiveCode eBook Academy Transcript...

Documents

Transcript of Lesson 5 - LiveCode...20/08/2013 LiveCode eBook Academy Transcript...