7/27/2019 Creating a Video Library Application
1/104
Creating a Video Library
Application
7/27/2019 Creating a Video Library Application
2/104
1 Playing Video in a Revolution Application
1.1 What You Will Create in This Chapter
1.2 Create the Window Where Your Video WIll be Displayed
1.3 Add the Video Player to the Window 1
1.4 Organizing Your Video Files 2
1.5 Add the Video Files Menu 2
1.6 Populating the Video Files Menu 3
1.7 The Card Script In Detail 3
1.8 Loading Video Files When a User Selects a Video From the Menu 4
1.9 Adding Code to Setup the Application Once it is Launched 5
1.10 Creating Your Executable Application for Mac and Windows 5
1.11 Sharing Your Application 6
2 Iteration 2: Improving the User Interface
2.1 Add a Background Color 6
2.2 Add a Logo to the Background 7
2.3 Add a Background to the Logo 8
2.4 Disable Window Resizing 10
7/27/2019 Creating a Video Library Application
3/104
Playing Video in a Revolution
Application
Creating a Video Library Application - 3
7/27/2019 Creating a Video Library Application
4/104
What You Will Create in This Chapter
In this chapter you will learn how to create a basic video player application. The application will:
1) List the videos files in a folder in a menu.
2) Allow you to choose a video file from the menu and play it.
End Product
The end product will resemble this.
Creating a Video Library Application - 4
7/27/2019 Creating a Video Library Application
5/104
Create the Window Where Your Video WIll be Displayed
To begin, you need to create the window that will display your menu and video player. In Revolution a
window is referred to as a stack. Let's look at how to create a stack.
File > New Mainstack
To create a new stack (or window), select File > New Mainstack.
Creating a Video Library Application - 5
7/27/2019 Creating a Video Library Application
6/104
After selecting File > New Mainstack a new stack window should appear that says Untitled 1 in the
window title bar.
Creating a Video Library Application - 6
7/27/2019 Creating a Video Library Application
7/104
Give the Window a Name
Next you will give the stack window a name and label. You can do this using the Object Inspector. To
open the Object Inspector for a stack choose Object > Stack Inspector.
Creating a Video Library Application - 7
7/27/2019 Creating a Video Library Application
8/104
The Object Inspector
When the Object Inspector opens you should see the word "stack" in the title bar (1). Give the stack a
name (2) and title (3).
The name of a stack becomes important when you start writing revTalk later on and you need to refer
to the stack.
Creating a Video Library Application - 8
7/27/2019 Creating a Video Library Application
9/104
The title of a stack is what is displayed in the title bar of the stack window. It is okay if the name and
title are the same right now but you might update the title property later on if you were to localize your
application for other languages.
Save Your Work
You should now save your work. So far you have created a stack window in memory. That means that
if you were to close Revolution the stack you created would be gone forever. What you need to do is
save your stack window to a stack file. A stack file is how Revolution stores all your work on disk.
Before continuing and saving the stack file you should create a folder especially for the files related to
this application.
Choose File > Save to display the save file dialog.
Creating a Video Library Application - 9
7/27/2019 Creating a Video Library Application
10/104
Name your stack file Video Library.rev (1) and save it in a folder that you have created especially for
this application. The folder I'm using is Rev Applications (2).
Creating a Video Library Application - 10
7/27/2019 Creating a Video Library Application
11/104
Add the Video Player to the Window
Now that you have created a stack window and saved your work it is time to start adding objects to you
window. Let's start with adding an object that can play QuickTime videos. In Revolution the Player
object can do this.
Add Player Object To Stack Window
Locate the Player object icon in the Tools palette (1). Click on drag the Player object from the Tools
palette onto your stack window.
Creating a Video Library Application - 11
7/27/2019 Creating a Video Library Application
12/104
After you drop the Player object onto your stack window your window should look something like this.
Creating a Video Library Application - 12
7/27/2019 Creating a Video Library Application
13/104
Edit Player Object Properties
Now you need to give the Player object a name and load a video to play. You can perform both of
these actions from within the Object Inspector. To open the Object Inspector for the Player:
1) Make sure the Edit tool is selected in the Tools palette.
2) Select the Player (selection handles will appear around the Player)
3) Choose Object > Inspector
Creating a Video Library Application - 13
7/27/2019 Creating a Video Library Application
14/104
Set Name and Source
With the Object Inspector open name the Player object My Video (1). Next, click on the folder icon nex
to the Source field (2). This will display a file selection dialog allowing you to select a movie file.
Creating a Video Library Application - 14
7/27/2019 Creating a Video Library Application
15/104
Select Movie File
Locate a QuickTime compatible movie file on your computer and click Open to load the movie.
Creating a Video Library Application - 15
7/27/2019 Creating a Video Library Application
16/104
The Result
The movie file should load into the Player object. In this example the movie dimensions are larger than
the stack window. By default Revolution resizes the Player object to the dimensions of the movie file
automatically. This has caused the Player object to be larger than the stack window.
Creating a Video Library Application - 16
7/27/2019 Creating a Video Library Application
17/104
Resize Stack Window
Resize the stack window so that the Player object fits within it. You can resize the stack window like
you would any other window on your operating system.
Creating a Video Library Application - 17
7/27/2019 Creating a Video Library Application
18/104
Center The Player Object
Now click on the Player object and drag it so that it appears centered within the stack window.
Creating a Video Library Application - 18
7/27/2019 Creating a Video Library Application
19/104
Play The Movie
Now you can preview the movie. To play the movie select the Browse tool in the Tools palette.
Creating a Video Library Application - 19
7/27/2019 Creating a Video Library Application
20/104
After selecting the Browse tool you can click on the play button to play the video.
Next Steps
Now that you have created a Player object we will look at how to create a menu and dynamically load a
movie based on the menu selection.
Creating a Video Library Application - 20
7/27/2019 Creating a Video Library Application
21/104
Organizing Your Video Files
Before we build the menu you will need to organize your video files into a single folder that resides
alongside your stack file.
Locate Stack File
Locate the stack file that you saved early on.
Creating a Video Library Application - 21
7/27/2019 Creating a Video Library Application
22/104
Create New Folder
Create a new folder alongside the stack file.
Name the folder Videos.
Creating a Video Library Application - 22
7/27/2019 Creating a Video Library Application
23/104
Place Videos in Folder
Place any videos you want to make available in your application inside this folder.
Creating a Video Library Application - 23
7/27/2019 Creating a Video Library Application
24/104
Add the Video Files Menu
Now we will add a menu to the application that allows you to select the video file to play.
Activate Edit Tool
Click on the Edit tool in the Tools palette.
Creating a Video Library Application - 24
7/27/2019 Creating a Video Library Application
25/104
Reposition Player Object
Click on the Player object and reposition it so that there is room for a menu on the left side of thewindow. Make the window larger if you need to.
Creating a Video Library Application - 25
7/27/2019 Creating a Video Library Application
26/104
Add List Field To Window
To make our menu we will use a List Field. A List Field displays multiple lines of text and allows the
user to click on individual lines.
Locate the List Field in the Tools palette (1) and drag it onto the window.
Creating a Video Library Application - 26
7/27/2019 Creating a Video Library Application
27/104
A new List Field will appear in the window.
Creating a Video Library Application - 27
7/27/2019 Creating a Video Library Application
28/104
Resize the List Field
Use the selection handles to resize the List Field.
Creating a Video Library Application - 28
7/27/2019 Creating a Video Library Application
29/104
Edit List Field Properties
With the List Field selected click on the Inspector button to open the Object Inspector.
Creating a Video Library Application - 29
7/27/2019 Creating a Video Library Application
30/104
Name the List Field
Name the List Field Video Menu.
Creating a Video Library Application - 30
7/27/2019 Creating a Video Library Application
31/104
Populating the Video Files Menu
Now that you have created a menu (the list field) to display your videos we will look at how to populate
the menu so that it displays a list of available videos.
This lesson will introduce revTalk for the first time in the application. revTalk is the language you use in
Revolution to control what the application does and how it responds to user actions.
Edit The Card Script
So far we have discussed the Stack window, the Player and the List Field. Now we will introduce the
Card object. A Stack window is made up of one or more Cards. A Card can contain multiple objects
such as a Player or Field.
We are going to add the revTalk necessary to populate the List Field to the Card Script. The Card
Script stores revTalk that can affect any object on the card.
To edit the Card Script choose Object > Card Script.
Creating a Video Library Application - 31
7/27/2019 Creating a Video Library Application
32/104
The Script Editor Opens
When you edit the script of an object you use the Script Editor. The Script Editor enables you to write
revTalk that affects the behavior of your application. Notice that a tab is open in the Script Editor for the
Stack window's card (1). We will begin typing revTalk into the script field (2).
The Card Script
Below you will find all of the revTalk that goes in the Card script. If you would just like to copy and paste
all of the code into the Card script without worrying about what it does then you can do so. If you would
like to walk through writing the revTalk that goes in the Card script then skip the next step go to the nex
lesson which describes the Card script in detail.
Creating a Video Library Application - 32
7/27/2019 Creating a Video Library Application
33/104
Copy and paste the following revTalk into the Card script. After pasting the revTalk into the Card script
the dot in the Card's tab will turn yellow (1). Click the Compile button (2) so that Revolution applies the
changes you've made to the Card's script.
Copy & Paste Into Card Script
on preOpenCard
## Load the video list
uiPopulateVideoList
## If there is at least 1 video in the list then load the video
ifthetextoffield"Video Menu"isnotemptythen
setthehilitedlineoffield"Video Menu"to1
uiLoadSelectedVideo
endif
end preOpenCard
command uiPopulateVideoList
## Get list of video files in Video folder
put GetVideoFiles() into theFiles
## Assign the list of files to the list field (our menu)
setthetextoffield"Video Menu"to theFiles
Creating a Video Library Application - 33
7/27/2019 Creating a Video Library Application
34/104
end uiPopulateVideoList
function GetVideoFiles
## Get the path to the "Video" folder on disk
put GetPathToFolder("Videos") into theFolder
## Get list of files in the folder
put GetFilesInFolder(theFolder) into theFiles
## Return list of files
return theFiles
end GetVideoFiles
function GetPathToFolder pFolderName
## Retrieving paths to folders that are relative to the stack can be tricky.
## Determine the location of this stack on disk
putthefilenameofthisstackinto theFolder
## Folder paths use "/" to separate each folder in the path
## By setting the itemDelimiter to slash we can refer to
## individual sections of the path by the 'item' token in revTalk.
settheitemDelimitertoslash
## When you build a standalone version of this stack on OS X the stack
## file will be located in side of an application bundle. These next few
## lines strip the application bundle portion of the path off.
iftheplatformis"MacOS"then
if theFolder contains".app/Contents/MacOS"then
## Delete the last three items of the path that are specific
## to the application bundle
deleteitem -3to -1of theFolder
endif
endif
## Replace the last item in theFolder with the 'pFolderName' parameter
put pFolderName intothelastitemof theFolder
Creating a Video Library Application - 34
7/27/2019 Creating a Video Library Application
35/104
## Return the complete path
return theFolder
end GetPathToFolder
function GetFilesInFolder pFolder
## This function uses the default folder to get a list of files
## Store the original default folder so we can return to it later
putthedefaultfolderinto theOrigDefaultFolder
## Change the default folder to the folder passed into the function (pFolder)
setthedefaultfolderto pFolder
## 'the files' always returns the files in the 'default folder'
putthefilesinto theFiles
## Restore the original 'default folder' setting
setthedefaultfolderto theOrigDefaultFolder
## Filter out invisible files (files that start with a "." in their name) from 'theFiles' variable
filter theFiles without".*"
## Return the list of files to the caller of the function
return theFiles
end GetFilesInFolder
command uiLoadSelectedVideo
## Get the name of the video selected in the video menu
puttheselectedtextoffield"Video Menu"into theVideoName
put"Videos/" & theVideoName into theVideoFile
## Set 'the filename' property the player object to the relative video path
## Revolution will locate the video as long as the "Videos" folder is
## alongside the stack file or the application executable.
setthefilenameofplayer"My Video"to theVideoFile
## Reset the time of the Player object to 0
setthecurrenttimeofplayer"My Video"to0
end uiLoadSelectedVideo
Creating a Video Library Application - 35
7/27/2019 Creating a Video Library Application
36/104
The Card Script In Detail
This lesson will describe the Card script in detail and may be of interest if you are trying to learn
revTalk. If you would just like to get your Video Player working as quickly as possible the you can skip
this lesson and come back to it later. In this case you should have copied and pasted the entire Card
Script that was provided in the previous lesson.
Create The uiPopulateVideoList Command
In revTalk you can write commands that perform certain operations. We are going to write a command
the populates the List Field with available videos. The definition for a command starts with the word
command (1), followed by the name of the command (2). To finish the definition of the command you
write end (3) followed by the name of the command (4).
Creating a Video Library Application - 36
7/27/2019 Creating a Video Library Application
37/104
What Will The Command Do?
Before writing the actual revTalk that populates the List Field I've added some comments that describe
what I want to do. This can be helpful as the comments tell the story of what needs to happen. I can
then go back and write the revTalk that actually performs the required actions.
The Completed Command
Here is what the command looks like when it is finished. The command calls a function call
GetVideoFiles() (1) that returns all of the available video files, each one separated by the return
character. We will look at what a function is in the next step.
Creating a Video Library Application - 37
7/27/2019 Creating a Video Library Application
38/104
The command then assigns the list of video files to the text property of the Video Menu List Field (2).
Assigning the text property of the List Field changes what you see in your Stack window.
Copy & Paste Into Card Script
command uiPopulateVideoList
## Get list of video files in Video folder
put GetVideoFiles() into theFiles
## Assign the list of files to the list field (our menu)
setthetextoffield"Video Menu"to theFiles
end uiPopulateVideoList
The GetVideoFiles Function
In the uiPopulateVideoList command we called a function that returns a list of video files. As of right
now there is no function named GetVideoFiles that has been defined. Let's do that now.
You define a function the same way that you do a command except that you use the word function
rather than command. Notice how you can just add the definition of the GetVideoFiles function after the
definition of the uiPopulateVideoList command. You can add any number of function and command
definitions to a script.
Creating a Video Library Application - 38
7/27/2019 Creating a Video Library Application
39/104
The purpose of GetVideoFiles is to return a return delimited list of all video files in the Videos folder
that you created earlier. In order to do this we will need to get the path to the Videos folder on disk and
then get a list of all the files in the folder. GetVideoFiles makes use of two other functions that help do
this: GetPathToFolder and GetFilesInFolder. We will define this two folders next.
Copy & Paste Into Card Script
function GetVideoFiles
## Get the path to the "Video" folder on disk
put GetPathToFolder("Videos") into theFolder
## Get list of files in the folder
put GetFilesInFolder(theFolder) into theFiles
## Return list of files
return theFiles
end GetVideoFiles
The GetPathToFolder Function
When working with video the video files are stored separately from the application that we are creating
In this case the video files are stored in the Videos folder. When you share your application with others
it is important that your application is able to find the video files on the computer it is running on.
GetPathToFolder helps do this. The purpose of the function is to take the name of a folder, in this case"Videos", and return the full file path to that folder.
You can read the comments in the function if you want to learn what it is doing but for now you can just
copy and paste it into your Card script and now worry about the details.
Copy & Paste Into Card Script
Creating a Video Library Application - 39
7/27/2019 Creating a Video Library Application
40/104
function GetPathToFolder pFolderName
## Retrieving paths to folders that are relative to the stack can be tricky.
## Determine the location of this stack on disk
putthefilenameofthisstackinto theFolder
## Folder paths use "/" to separate each folder in the path
## By setting the itemDelimiter to slash we can refer to
## individual sections of the path by the 'item' token in revTalk.
settheitemDelimitertoslash
## When you build a standalone version of this stack on OS X the stack
## file will be located in side of an application bundle. These next few
## lines strip the application bundle portion of the path off.
iftheplatformis"MacOS"then
if theFolder contains".app/Contents/MacOS"then
## Delete the last three items of the path that are specific
## to the application bundle
deleteitem -3to -1of theFolder
endif
endif
## Replace the last item in theFolder with the 'pFolderName' parameter
put pFolderName intothelastitemof theFolder
## Return the complete path
return theFolder
end GetPathToFolder
Creating a Video Library Application - 40
7/27/2019 Creating a Video Library Application
41/104
The GetFilesInFolder Function
The GetFilesInFolder function is a handy way of retrieving a return delimited list of files located in a
particular folder on a computer. The parameter you pass in, pFolder (1), is the path to the folder whose
files you want to retrieve. The function then uses the defaultFolder and the files (2) to get the list of
files.
Copy & Paste Into Card Script
function GetFilesInFolder pFolder
## This function uses the default folder to get a list of files
## Store the original default folder so we can return to it later
putthedefaultfolderinto theOrigDefaultFolder
## Change the default folder to the folder passed into the function (pFolder)
setthedefaultfolderto pFolder
## 'the files' always returns the files in the 'default folder'
putthefilesinto theFiles
## Restore the original 'default folder' setting
Creating a Video Library Application - 41
7/27/2019 Creating a Video Library Application
42/104
setthedefaultfolderto theOrigDefaultFolder
## Filter out invisible files (files that start with a "." in their name) from 'theFiles' variable
filter theFiles without".*"
## Return the list of files to the caller of the function
return theFiles
end GetFilesInFolder
Compile the Card Script
Now that you have modified the revTalk in your Card script you need to compile the script. Whenever
an object script has been modified the dot in the object tab will turn yellow (1). Click the Compile butto(2) to compile the script. The dot will then turn green if the script compiled correctly or the Script Editor
will alert you if there is something in your script that needs to be fixed, e.g. you typed something
incorrectly.
Also note that after you compile a script the list of commands and functions that you have defined in
your script appear in the left column (3). This helps you quickly navigate to a particular handler (a
handler is either a command or a function) in your script.
Creating a Video Library Application - 42
7/27/2019 Creating a Video Library Application
43/104
Test the uiPopulateVideoList Command
We have now added all of the commands and functions to the card script that are necessary for
uiPopulateVideoList to work. Let's test it out. Use the Window menu to select the Video Library Stack
window and bring it to the front.
Open The Message Box
Now we are going to use the Message Box to test the uiPopulateVideoFiles command. The MessageBox is a tool that allows you to execute revTalk statements. Click on the Message Box button in the
toolbar.
The message box will appear and should look something like this. Make sure that single-line messag
mode is active.
Creating a Video Library Application - 43
7/27/2019 Creating a Video Library Application
44/104
Call uiPopulateVideoList
Type uiPopulateVideoList in top field and press the Return key (1). Because the Video Library stack
(2) is the target of any commands executed in the Message Box the uiPopulateVideoList command
you defined in your card script will be executed.
Done
After pressing the Return key the List Field should populate with the videos in your Videos folder.
Creating a Video Library Application - 44
7/27/2019 Creating a Video Library Application
45/104
Loading Video Files When a User Selects a Video From the Menu
Now that the video menu is being populated we need to have the application load a video whenever the
user selects a video in the menu. Let's look at how to do that.
Edit Card Script
With the Video Player Stack window at the forefront, choose Object > Card Script to edit the card
script of the Stack window again.
Define The uiLoadSelectedVideo Handler
To start we need to define a command that will load the video file that is selected in the menu.
uiLoadSelectedVideo will do just that. It gets the video file that is selected and creates a path to the
video (1) that looks like this:
Creating a Video Library Application - 45
7/27/2019 Creating a Video Library Application
46/104
Videos/the_selected_movie.mov
Note that the path to the video is a relative path rather than an absolute path. When you assign a
relative path to the filename property of a Player object Revolution will try to locate the relative path
using the folder that the stack file resides in as well as 'the default folder'. Since the Videos folder is
alongside the stack file Revolution is able to find videos using the above relative URL.
Note for those using older versions of Revolution: Searching the folder that the stack file resides in
in order to locate movies was added in Revolution 3.5. If you are using an older version of Revolution
then you will need set the defaultFolder property to the folder the stack file is in.
Copy & Paste Into Card Script
command uiLoadSelectedVideo
## Get the name of the video selected in the video menu
puttheselectedtextoffield"Video Menu"into theVideoName
put"Videos/" & theVideoName into theVideoFile
## Set 'the filename' property of the player object to the relative video path
## Revolution will locate the video as long as the "Videos" folder is
## alongside the stack file or the application executable.
setthefilenameofplayer"My Video"to theVideoFile
## Reset the time of the Player object to 0
setthecurrenttimeofplayer"My Video"to0
end uiLoadSelectedVideo
Compile The Card Script
Click the Compile button to save the changes to the Card script.
Creating a Video Library Application - 46
7/27/2019 Creating a Video Library Application
47/104
Edit the List Field Script
Now we just have to tell Revolution that we want the uiLoadSelectedVideo command to be called
whenever the user changes the selected menu item in the video menu. With the Edit tool activated (1)
select the Video Menu List Field (2). Click on the Script button in the toolbar (3) to edit the object's
script.
Creating a Video Library Application - 47
7/27/2019 Creating a Video Library Application
48/104
Define selectionChanged
Whenever the user selects a line in a List Field Revolution sends a message to the field indicating that
the selection has changed. This message is called selectionChanged. You can define what happens
when this message is sent to the field by defining the on selectionChanged message in the field's
script.
Remember that a Card script can have revTalk that affects all objects on a card. Since we have already
defined the uiLoadSelectedVideo command in the Card Script we can call that command from the
selectionChanged message of the List Field Script.
Copy & Paste Into List Field Script
on selectionChanged
uiLoadSelectedVideo
end selectionChanged
Creating a Video Library Application - 48
7/27/2019 Creating a Video Library Application
49/104
Test
After adding the above script to the List Field and pressing the Compile button you can test your work.
First activate the Browse tool.
Creating a Video Library Application - 49
7/27/2019 Creating a Video Library Application
50/104
With the Browse tool activated you can try selecting different selections in the video menu. As you
make different selections the video in the Player object should change.
Creating a Video Library Application - 50
7/27/2019 Creating a Video Library Application
51/104
Troubleshooting: If Video Doesn't Show Up
If the video doesn't show up in the Player object then check the Object Inspector for the Player object.
Make sure the Source field (the Source field shows the 'filename' property of the Player object) contain
a valid relative path.
Creating a Video Library Application - 51
7/27/2019 Creating a Video Library Application
52/104
Adding Code to Setup the Application Once it is Launched
At this point your Video Player application is working in the Revolution IDE and you are just about ready
to build an application that you can share with others. The final step is to write a little revTalk that will
populate the video menu and load the first video when your application is launched.
Edit Card Script
With the Video Player Stack window as the frontmost window choose Object > Card Script.
Creating a Video Library Application - 52
7/27/2019 Creating a Video Library Application
53/104
Define preOpenCard Message
When a Stack window is about to be opened up and displayed on the computer Revolution sends the
preOpenCard message to the Card that is about to be shown. This is a good place to initialize the
menu and load a video.
To initialize the menu all we need to do is call uiPopulateVideoList (1) as that reads in the list of video
files and populates the menu.
After the menu has been populated we can load the first video in the list. Before we load the video we
check to make sure that at least one video exists in the menu. Checking that the text of field "Video
Menu" is not empty (2) accomplishes this. If the text property of the field contains any text at all then
there is at least one video file.
After confirming that there is at least one video we use revTalk to change the line that is selected by
setting the hilitedLIne property of the list field to 1 (3). This selects the first line of the list field.
With the first line selected we finally call uiLoadSelectedVideo which loads the currently selected
video in the menu (4).
Copy & Paste Into Card Script
on preOpenCard ## Load the video list
uiPopulateVideoList
## If there is at least 1 video in the list then load the video
ifthetextoffield"Video Menu"isnotemptythen
setthehilitedlineoffield"Video Menu"to1
Creating a Video Library Application - 53
7/27/2019 Creating a Video Library Application
54/104
uiLoadSelectedVideo
endif
end preOpenCard
Compile The Script
Make sure and compile the Card script after adding the above revTalk.
Creating a Video Library Application - 54
7/27/2019 Creating a Video Library Application
55/104
Creating Your Executable Application for Mac and Windows
Now you are ready to build an executable application that you can share with others.
Open Standalone Application Settings Dialog
The first step in creating an executable application is to open the Standalone Application Settings
dialog for the Video Player Stack. With the Video Player window as the frontmost window choose File
> Standalone Application Settings....This menu item opens the dialog for the Video Player stack.
Creating a Video Library Application - 55
7/27/2019 Creating a Video Library Application
56/104
Standalone Application Settings Dialog
This dialog allows you to configure a number of options for the executable application that you will
create. For our purposes the default settings will suffice as Revolution will build an executable for both
OS X and Windows.
Go ahead and close the dialog using the close button in the dialog title bar.
Creating a Video Library Application - 56
7/27/2019 Creating a Video Library Application
57/104
Save As Standalone Application
Now that you have configure the standalone application settings you can create an executable. With
the Video Player window as the frontmost window choose Save As Standalone Application... to
begin the process.
Creating a Video Library Application - 57
7/27/2019 Creating a Video Library Application
58/104
Select Output Folder
A folder selection dialog will appear asking you to select a folder to save your application in. Select the
folder you would like to save to and click the Choose button.
Save Your Stack
If you haven't saved your Video Player stack lately then Revolution will prompt you to save before the
executable is created. Click the Save button.
Creating a Video Library Application - 58
7/27/2019 Creating a Video Library Application
59/104
Success
Revolution will display a progress window during the building process. When finished this dialog will
appear. Click OK.
The Result
If you look in the folder you built the executable in you will a folder named Video Library (1). In thatfolder you will find two other folders: MacOSX and Windows. In each of these folders you will find the
executables for each platform (2).
Creating a Video Library Application - 59
7/27/2019 Creating a Video Library Application
60/104
Move Executables
Move the executables for each platform out of the MacOSX and Windows folders and into the Video
Library folder.
Copy Videos Folder
Now copy your Videos folder that you have been working with into the Video Library folder. It should
now be alongside the Video Library executables for each platform.
Creating a Video Library Application - 60
7/27/2019 Creating a Video Library Application
61/104
You can safely delete the MacOSX and Windows folders at this point.
Test
Double-click on the executable for the platform you are currently running on to launch it. The applicatio
should load and you should see the list of files in the Videos folder (1). The first video in the list should
be selected (2) and the video should appear in the Player object (3).
Congratulations! You just created a Video Player application!
Creating a Video Library Application - 61
7/27/2019 Creating a Video Library Application
62/104
Sharing Your Application
What To Include
To share your application with others you just need to provide them with the executable for the platform
they are running on and the Videos folder alongside it. Whoever you share the application with will onlneed to have QuickTime installed (guaranteed on OS X, optional install on Windows). Everything else
is included in the executable file you created.
Creating a Video Library Application - 62
7/27/2019 Creating a Video Library Application
63/104
Iteration 2: Improving the User
Interface
Creating a Video Library Application - 63
7/27/2019 Creating a Video Library Application
64/104
Add a Background Color
What We Are Going To Do
In this lesson we are going to ad a nice background color to our video player. To do this we will first
need to create a graphic an then place it behind our other controls.
Creating a Video Library Application - 64
7/27/2019 Creating a Video Library Application
65/104
Expand Tool Palette
Select Rectangle
Creating a Video Library Application - 65
7/27/2019 Creating a Video Library Application
66/104
Drag Rectangle on Stack
Drag a rectangle so that it covers then entire stack (or window). It will be transparent but you will see
the selection handles.
Select Object > Object Inspector
Creating a Video Library Application - 66
7/27/2019 Creating a Video Library Application
67/104
Check Opaque
Check Opaque from the inspector palette. This will give the rectangle a fill.
Next we will change the color.
Creating a Video Library Application - 67
7/27/2019 Creating a Video Library Application
68/104
Select Colors & Patterns
Select Colors & Patterns from the inspector palette.
Click on Fill Color
Creating a Video Library Application - 68
7/27/2019 Creating a Video Library Application
69/104
Select Color and Click OK
Creating a Video Library Application - 69
7/27/2019 Creating a Video Library Application
70/104
We Now Have a Background!
We now have a background color. But notice that it is covering all of our fields exceptthe videos. There
are two reasons for this.
1. The graphic we created is layered on top of the other fields (the last item you create always is always
on the top layer.
2. The video is set to Buffer. This means that it is being drawn directly to the screen and will show up
on top of everything else in our window. The video will alwaysbe on top unless we change the buffer
setting.
Creating a Video Library Application - 70
7/27/2019 Creating a Video Library Application
71/104
Move Graphic to Back
This is a background graphic so we want it to appear behind everything else. With the graphic selected
select Object > Send to Back.
Creating a Video Library Application - 71
7/27/2019 Creating a Video Library Application
72/104
That's It!
We now have a nice dark background for our window.
Creating a Video Library Application - 72
7/27/2019 Creating a Video Library Application
73/104
Add a Logo to the Background
What We Are Going to Do
In this lesson we are going to add a logo to our window.
Creating a Video Library Application - 73
7/27/2019 Creating a Video Library Application
74/104
Make Some Space
We need some more space at the top of this window for the logo. The first thing we want to do is move
the list field down.
Select Edit Tool
Creating a Video Library Application - 74
7/27/2019 Creating a Video Library Application
75/104
Select Field and Drag Down
Select the list field and drag it down to create more space at the top.
Creating a Video Library Application - 75
7/27/2019 Creating a Video Library Application
76/104
Import Image File
Select File > Import As Control > Image File...
Creating a Video Library Application - 76
7/27/2019 Creating a Video Library Application
77/104
Select File
Select the graphic file and click Open.
Creating a Video Library Application - 77
7/27/2019 Creating a Video Library Application
78/104
Where is the Graphic?
You have now imported the graphic but you can't see it. Why not? Because it is behind the video. If you
remember from our previous lesson, the video will always be drawn on top of everything as long as thebuffer setting is checked. This is normally goodas it make the video playback more smoothly. But while
we are positioning controls on our screen it is badsince we can't see our controls.
Let's turn off the buffer setting momentarily while we are moving things around.
Creating a Video Library Application - 78
7/27/2019 Creating a Video Library Application
79/104
Select the Video
Notice that the graphic we imported appears. You might think that you can now move the image aroun
and everything will be fine. Not true. When you click and drag on the graphic you won't be able to see itbecause of that video buffer setting. So let's turn off the buffer.
Creating a Video Library Application - 79
7/27/2019 Creating a Video Library Application
80/104
Turn off Buffer
Go to the inspector palette for the video and uncheckthe buffer setting.
Creating a Video Library Application - 80
7/27/2019 Creating a Video Library Application
81/104
Drag Image to Upper Left
Now drag the image to the upper left of the screen.
Creating a Video Library Application - 81
7/27/2019 Creating a Video Library Application
82/104
Turn Buffer Back On
We want to turn the buffer back on since that will give us better video performance. Just select the
video again and check Buffer in the inspector palette.
Creating a Video Library Application - 82
7/27/2019 Creating a Video Library Application
83/104
Creating a Video Library Application - 83
7/27/2019 Creating a Video Library Application
84/104
Add a Background to the Logo
Now that the logo has been added to the window it would be nice to put a border around it and further
tidy the UI up.
The Current State of Affairs
We will now add a border around the logo. The video player window should look similar to this.
Creating a Video Library Application - 84
7/27/2019 Creating a Video Library Application
85/104
Draw a Rectangle Graphic
Select the Rectangle graphic tool in the Tools palette.
Creating a Video Library Application - 85
7/27/2019 Creating a Video Library Application
86/104
Draw Rectangle
Draw a rectangle around the logo.
Creating a Video Library Application - 86
7/27/2019 Creating a Video Library Application
87/104
Edit Rectangle Properties
Make the graphic opaque by checking the Opaque checkbox in the Basic Properties pane of the
rectangle graphic's inspector.
Creating a Video Library Application - 87
7/27/2019 Creating a Video Library Application
88/104
Set Rectangle Width
The rectangle that was just created is going to be the same width as the field displaying the list of
videos. You can see the width of the field by selecting it (1) and looking at the Size & Position pane in
the property inspector (2). The width field displays the width of the field (3).
Make note of the width as you are going to assign the same value to the graphic.
Creating a Video Library Application - 88
7/27/2019 Creating a Video Library Application
89/104
Now select the graphic (1) and set the width in the property inspector. Since the field is 250 pixels wide
the graphic is going to be 250 pixels wide (2).
Align the Logo and the Graphic
Now that the graphic is the right width you will center the logo within the graphic.
Creating a Video Library Application - 89
7/27/2019 Creating a Video Library Application
90/104
Select the Graphic & the Logo
Select the rectangle graphic and the logo (hold down the SHIFT key to select multiple objects).
Creating a Video Library Application - 90
7/27/2019 Creating a Video Library Application
91/104
Align Objects Using Property Inspector
When multiple objects are selected the property inspector includes an Align Objects pane. Click the
Align Objects Center and Align Objects Middle buttons to align the graphic and the logo.
Creating a Video Library Application - 91
7/27/2019 Creating a Video Library Application
92/104
The result should look like this.
Group the Graphic and the Logo
Now you are going to group the logo and the rectangle graphic. Grouping multiple objects enables you
to treat all of the objects as one single object. This can make it easier to reposition the objects on the
screen.
With both the logo and the rectangle graphic still selected select the Object > Group Selected menu
item.
Creating a Video Library Application - 92
7/27/2019 Creating a Video Library Application
93/104
After grouping the objects the group will be selected.
Look at Group in the Application Browser
While there are no visual cues in the window that the graphic and logo are grouped you can see that
they are in the Application Browser. To open the Application Browser choose the Tools >
Application Browser menu item.
Creating a Video Library Application - 93
7/27/2019 Creating a Video Library Application
94/104
The Application Browser
The Application Browser shows all of the controls in your stack window. To see them the group you
just created do the following:
1) Expand the arrow next to the Video Library stack.
2) Click on the card that appears under the stack.
3) Make sure that the list of controls is sorted by Layer.
As you can see, the rectangle and logo are grouped together.
Creating a Video Library Application - 94
7/27/2019 Creating a Video Library Application
95/104
A Note About "Select Grouped"
Now that you have grouped two controls together it is worth mentioning the Select Grouped feature of
the Revolution IDE.
When Select Grouped is turned on (the text appears bold in the toolbar or the menu item is checked in
the Edit menu) any control you click on will be selected, even if the control is in a group.
When Select Grouped is turned off clicking on a control selects the group that the control is in.
Make sure that Select Grouped is turned off for the time being.
Set Margins of Group to 0
Now you will want to left align the group you just created with the video list. Before you do that you
should change the Margins property of the group to 0.
Creating a Video Library Application - 95
7/27/2019 Creating a Video Library Application
96/104
When you select the group you will notice that the selection handles are offset slightly from the sides o
the graphic (1). This is because the margins property of a new group defaults to 4 pixels. If you were to
use the IDE alignment tools to align the group with the video list the group would end up 4 pixels off of
where you actually wanted it to appear.
In the Text Formatting pane (2) of the group property inspector change the Margins property to 0 (3).
Left-Align Logo Group and Video List
When aligning objects in Revolution all objects are positioned relative to the FIRST object that you
select. Since the video list is already in the proper position select it first. Then hold down the SHIFT key
and click on the logo group to add it to the selection.
Creating a Video Library Application - 96
7/27/2019 Creating a Video Library Application
97/104
In the Object Inspector make sure the Align Objects panel is displayed (1). Click on the Align Objects
Left button (2).
Creating a Video Library Application - 97
7/27/2019 Creating a Video Library Application
98/104
Now the left edges of the logo group and the video list line up.
Creating a Video Library Application - 98
7/27/2019 Creating a Video Library Application
99/104
Tidy Up Position of Controls
Now select the list of videos and resize it using the selection handles. Make the bottom of the field
match up with the bottom of the video. You can select objects and use the arrow keys on your keyboardto fine-tune their position.
Creating a Video Library Application - 99
7/27/2019 Creating a Video Library Application
100/104
The Final Result
Now the logo has a nice border around it and all of the controls appear more balanced.
Creating a Video Library Application - 100
7/27/2019 Creating a Video Library Application
101/104
Disable Window Resizing
Now that the controls in the UI of the video window are in the proper position it is time to fix the window
size so the user cannot resize it.
Resize Window
Resize the stack window by dragging the resize handle on OS X (or the edge of the window on
Windows).
Creating a Video Library Application - 101
7/27/2019 Creating a Video Library Application
102/104
Here you can see that the bottom border of the window is the same size as the left an right borders
Open Stack Inspector
Now open the Stack Inspector by selecting the Object > Stack Inspector menu item.
Creating a Video Library Application - 102
7/27/2019 Creating a Video Library Application
103/104
Turn Off Resizable
Switch to the Size & Position pane in the inspector and uncheck the Resizable property. The window
will no longer be able to be resized.
Note: You can also fine-tune the size of your stack window using this pane.
Creating a Video Library Application - 103
7/27/2019 Creating a Video Library Application
104/104
The Result
Now the stack window can no longer be resized.