20/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 1/19 Introduction Welcome to Lesson 5 of the LiveCode eBook Academy. In this lesson we are going to be looking at creating page 2 of the eBook importing the page 2 assets using animated gifs visual effects asset animation Importing Assets Start by opening your Bitter Revenge stack in LiveCode and ensure you Lesson 5 Introduction Importing Assets Setting Up the Card The Smoke Images Coding the Card Animating the Smoke The Swipe Handler Creating Page 3 Changing the Background Color Lesson 5
19
Embed
Lesson 5 - LiveCode...20/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 1/19 Introduction Welcome to Lesson
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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 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.
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
show image "p2-smoke3.png" with visual effect dissolve very fast
show image "p2-smoke4.png" with visual effect dissolve very fast
wait 10 milliseonds
show image "p2-smoke5.png" with visual effect dissolve very fast
wait 10 milliseonds
show image "p2-smoke6.png" with visual effect dissolve very fast
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
put empty into gPosition
show image "p2-smoke2.png" with visual effect dissolve very fast
wait 10 milliseonds
show image "p2-smoke3.png" with visual effect dissolve very fast
wait 10 milliseonds
show image "p2-smoke4.png" with visual effect dissolve very fast
wait 10 milliseonds
show image "p2-smoke5.png" with visual effect dissolve very fast
wait 10 milliseonds
show image "p2-smoke6.png" with visual effect dissolve very fast
wait 10 milliseonds
end openCard
on mouseDown
put item 1 of the mouseLoc into gPosition
end mouseDown
on mouseUp
put empty into gPosition
end mouseUp
on mouseMove pX
if gPosition is not empty and the label of button "Navigation1" is \
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.