Creating a Video Library Application

download Creating a Video Library Application

of 104

Transcript of Creating a Video Library Application

  • 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.