User Tools

Site Tools


Creating Content for the Lesson Strip

Summary

Creating your own lesson_series, Lessons and Lesson Steps for the Lesson Strip is fairly straight forward and requires only a few steps. In this article we will explain those steps, so that you can begin creating your own content that helps users learn a concept, a new skill or how to use a robust product.

Process Overview

  • Determine your Lesson Plan
  • Copy a template of folders and files
  • Edit the titles and text of your Popup Panels
  • Create your images
  • Test your work

Foundation

There is some structure to the folders and files that you need to consider when building for the Lesson Strip. To help you succeed quickly, we provide a template for you to follow: Lesson Strip Example. To make designing and editing your Popup Panels easy, DAZ Studio includes a visual development tool by the name of Qt Designer with each installation, which can be found in the folder that you installed to.

Lesson Strip content can be installed as part of any product, or as its own product. Once installed, the user will have access to lessons via widgets found in the Status Bar. Here they can view the Lesson Steps, one by one, directly within the DAZ Studio User Interface (UI) as they continue to work in real time. The user can repeat the lesson as often as necessary and they do not need to be online to access this helpful option.

Step By Step

IMPORTANT: It is important to understand that there are multiple components involved in making the creation of Lesson Strip content easy. One of those components is Qt Designer, which is used to edit the template files we provide. Additional components include the scripts that handle what gets loaded when, and where - among other things. If you would like to make Lesson Strip content that goes beyond the scope of this article, you will need to have an understanding of Scripting, the Lesson Strips sample and a deeper understanding of how to use the Qt Designer tool.

Step 1: Plan Your Lesson

Your first priority should be planning out your Lesson Series and ultimately your Lessons. You have a limited number of Steps to work with, so it is important to decide ahead of time what the highlights of your Lesson will be, and how to best present them. The following is what you have to work with:

  • Each Lesson Series can consist of any number of Lessons.
  • Each Lesson consists of up to 10 Steps, each with its own Popup Panel.
    • Step 0 is reserved for a brief overview video, if you so desire.
    • Steps 1-9 are each reserved for step by step instruction.
  • Each Popup Panel should contain one step in a sequence, one part of a concept or one component of the interface.

Using this information, layout each Popup Panel, making sure you can fit the information you need in one or more Lessons, that all belong to a Lesson Series.

Step 2: Setup the Template

Now it is time to make sure you have your folder/file structure set up correctly. The easiest way to do this is to download the template provided here: Lesson Strip Example. This template will give you all of the folder and file structure you need, making it easy to edit and create a new Lesson Series and/or Lesson. Simply extract the contents of the file to the same path you installed DAZ Studio 4.x to - the zip contains the proper structure to place the files in their appropriate locations.

Once extracted, you will find a “<%DS4_INSTALL%>/resources/Lesson Strips/general/” folder. Inside this folder you will see a folder named “Lesson Series Name” and inside of it you will see a “Lesson Name” folder. Inside the “Lesson Name” folder you will see a total of 10 folders, each with a matching DAZ Script (*.dsa) file, numbered from 0-9. Each folder contains 3 files.

  • Popup.png
  • Popup.dsa
  • Popup.ui

The “Lesson Series Name” folder is reserved for generic topics. For example, if we have one named “DS4 Getting Started”, all Lessons pertaining to this general topic will go under this folder. Change the folder name to reflect your Lesson Series Name. Do not use “vanity” folder names, or anything too specific at this level - the purpose here is to help end users, not stroke your ego.

In the “Lesson Name” folder, again, try to keep this general and not based specifically on a particular product unless it will not pertain to any other product available. Change the name of this folder to reflect the Lesson Name like you did the previous folder. Loading Jane Doe Hair is an example of an unacceptable Lesson name, whereas Loading Hair onto your Figure is an example of a name that is acceptable.

Not all Lessons will need all 9 Steps - 10 if you are including the Overview Video. If you do not need this many, simply delete the unused numbered folder and matching script (*.dsa) file. A numbered button will still appear on the Lesson Strip for the removed folder/files, but they will appear in an inactive state. If you find that you have deleted too many and need one back, simply make a copy of one of the other sets and rename the folder/script to match the one you are replacing. The exception of course being the “0” folder/script, which you can copy from the template or another lesson.

Step 3: Create Your Image(s)

Next, you will need to create your images. You can use a screenshot, a photo, a diagram, etc… but you will want to keep them within a reasonable size limit. The example window to the right is approximately 450 pixels wide (click to view full size), with a slightly smaller area inside it that is displayed within a Popup Panel. If you need a larger format, you may want to consider including a PDF file with your product or, where appropriate, writing an article for the Document Center instead. Remember, the goal is for this to be an unobtrusive Lesson, not a full screen tutorial.

Once you have created your image, drop it into the numbered folder that corresponds with the Lesson Step. The recommended format to use for saving images is PNG. This is what the rest of the DAZ Studio UI uses. PNGs are also higher quality than JPGs and will allow for transparent backgrounds. If you name your image “Popup.png”, not only will it be consistent with the template, it will also save you some work in the next step.

NOTE: By keeping the included images smaller, the user is still able to navigate inside the program. This lets them learn as they 'do' as opposed to trying to follow the lesson by switching between various windows or screens.

Step 4: Edit Your Lesson

Now to the fun part! Its time to add your text and image to the Popup Panels. You do this using Qt Designer, which is included with each installation of DAZ Studio v4.x. You can review the Lesson Strips Scripting Samples section for information more advanced set up of your Lessons, but here are some quick changes you can make to set up a Lesson with little to no prior scripting knowledge.

  • Navigate to your DAZ Studio installed location:
    • PC 64 Bit - “C:\Program Files\DAZ 3D\DAZStudio4_64bit
    • PC 32 Bit - “C:\Program Files\DAZ 3D\DAZStudio4
    • MAC 64 Bit - “Application/DAZ 3D/DAZStudio4 64 Bit
    • MAC 32 Bit - “Application/DAZ 3D/DAZStudio4
  • Inside your main install folder, locate “designer.exe” (designer.app on Mac) and double click it to launch Qt Designer.
  • Select File > Open… from the Main Menu Bar, in the Qt Designer window and browse to one of the numbered Lesson Step folders. Choose the “Popup.ui” file within the folder. Once you have the file open, you will notice that the panels on the right in the Qt Designer window are now populated with various bits of information. This is where you will make a couple simple changes.
  • To replace the image for the Step, you can simply replace the “Popup.png” in the folder with a “Popup.png” of your own - as mentioned in Step 3 above. If the size of your replacement image differs from the one that is already assigned, you will need to resize the frame of the window to accommodate the new size.
    • If you would like to modify which image file is used, simply select the image in the window or select the QLabel named wStepImageLbl in the “Object Inspector” pane, which is in the top right corner of Qt Designer. Once you have the QLabel selected, scroll down in the “Property Editor” pane, just below the Object Inspector, and find the pixmap property. If you click on the table cell to the right of pixmap, you will notice that a typical “…” browse button will be displayed. Click the button to browse to the image you dropped into the folder that corresponds to the Lesson Step you are editing, and select it. It is that simple!
  • To change the title of the Step, simply double click the “Step # Title” text in the window and replace the text with your own. You can also change the title by selecting the QLabel named wStepTitleLbl in the Object Inspector pane and then scrolling to the text table cell in the Property Editor pane, clicking on the table cell to the right and entering your own. The same thing applies to the QLabel named wStepDescriptionLbl for the “Step # Description” text.
  • Select File > Save from the Main Menu Bar, in the Qt Designer window.

Step 5 - Overview Video (optional)

If you are adding an Overview Video to your Lesson, continue on with this step. If not, skip down to Step 6.

For this part of the Lesson, you will be working in the “0” folder.

  • The first thing you will need to do is upload your video to YouTube or some other video hosting service. (We use YouTube in this article.) Although we do provide an example with an embedded video player with the template, we do not recommend that you ship videos with your Lessons because of the various issues with formats and codecs between the platforms.
  • Next, go back to the Lesson Strip Example you downloaded. It contains a “Popup Capture Template.html” file located in the “0” folder. Open this in an editor, replace the number located in the string with your YouTube video ID and then re-save the file.
    HTML Image
  • Open the newly edited html file in your browser. This should open your video in a 425 pixel wide x 350 pixel tall embedded player, on a browser page. You can now “capture” a preview image for the video at the correct size for the Lesson Strip. Two great applications to use for this are, Jing on Windows, and Skitch on Mac.
  • Use your captured image to replace the “Popup.png” in the “0” folder, just like you did in Step 4.
  • Back in Qt Designer, select the QPushButton named wVideoImage_urlBtn - either in the Object Inspector or the window. Scroll through the Property Editor and find the statusTip table cell. Paste your video's URL into the text cell and save your work.

Step 6: Test Your Work

If you did your work in a temp/WIP folder, see Step 2 to place your files for testing.

Go to Enabling the Lesson Strip if the Lesson Strip not already visible. Once you have the widget enabled, test your Lesson in all of the Layout and Style options to make sure they look correct. Make any changes or tweaks, and re-save and test until you are satisfied.

Wrap-Up

Congratulations! Your Lesson Strip is now ready to collect and distribute.

The Qt Designer tool used in this article is very powerful. There are several things you can customize for DAZ Studio using this tool. For more advanced help on Qt Designer and DAZ Studio, please see the Education/Assistance scripting samples.