Lesson 5 - LiveCode...20/08/2013 LiveCode eBook Academy Transcript...
Transcript of 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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 2/19
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/Page 2 folderSelect all the imagesClick Open
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 3/19
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 4/19
Next we want to position our frames on screen, making sure they are inthe correct order.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 5/19
The Smoke ImagesYou will see we have separate frames for the smoke effect
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 6/19
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 7/19
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 8/19
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 9/19
Next select all the images and set the "Lock size and position" of themto true.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 10/19
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 11/19
preOpenCard handler.
on preOpenCard
hide image "p2-smoke2.png"
hide image "p2-smoke3.png"
hide image "p2-smoke4.png"
hide image "p2-smoke5.png"
hide image "p2-smoke6.png"
hide image "p2-rain.gif"
hide image "p2-inscreen-animation-text-1.png"
hide image "p2-inscreen-animation-text-2.png"
hide image "p2-inscreen-animation-text-3.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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 12/19
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-smoke2.png"
hide image "p2-smoke3.png"
hide image "p2-smoke4.png"
hide image "p2-smoke5.png"
hide image "p2-smoke6.png"
hide image "p2-rain.gif"
hide image "p2-inscreen-animation-text-1.png"
hide image "p2-inscreen-animation-text-2.png"
hide image "p2-inscreen-animation-text-3.png"
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 13/19
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
move image "p2-inscreen-animation-panel-2.png" to 860,373 in 1 second
move image "p2-inscreen-animation-panel-3.png" to 860,622 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
show image "p2-inscreen-animation-text-2.png" with visual effect dissolve
show image "p2-inscreen-animation-text-3.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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 14/19
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
wait 10 milliseonds
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 15/19
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 16/19
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 \
"Swipe to Continue" and pX < gPosition - 200 then
put empty into gPosition
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 17/19
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).
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 18/19
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson5/lesson5.html 19/19
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