In this article, I will be discussing how to add a Flash button into your CD Menu Maker project.  I will be using a button that is included in the Flash library.  However, you will not need to own a copy or know how to use Flash to include a Flash button.  There are many places online to download, create and customize your own buttons.

Click Here to download the button that I will be using if you would like to follow along.

Open CD Menu Maker and Create a New Project.  The first step is to add the Flash button to the project.  Click Project > Add/Remove Project Files in the Project Menu. 

Click Add File or Resource and browse your file system to locate your button. 

Click OK then Done to return to the Design Environment.  In the Add Components panel click the Video Component button, give it a name and click OK.  Click Pick, select the Flash button, uncheck the Show Control Button and click OK. 

Click Preview in the Project Toolbar to make sure the Flash button appears.  You will notice that the button takes on the size of the Video component. 

Close out the Preview window and return to the Design Environment.  Resize the Video component by dragging the size handle or right clicking on it in the Component Explorer and selecting Advanced Properties.   Once the component is sized appropriately, you can add Actions to the click event, duplicate the component etc.

In this tutorial I will be discussing how to animate a component in CD Menu Maker or VEDS with easing.

Note:  All screenshots and paths are for CD Menu Maker but can easily be applied to VEDS. 

Easing will create a more realistic looking animation as if the object was reacting to the forces of gravity.  Click here if you would like to look at an example of a ball bouncing with and without easing.

There are a few main concepts that you will need to understand before we start. 

1.  The animation will be time based so we will need to set the EventTimer to fire 20 times per second to get smooth motion.   

2.  A number will need to be updated to add/subtract a certain amount to move the image position every time the EventTimer is fired.  (This will create an animation without easing)

3.  An equation will be defined to have the image pick up/loose speed by multipyling or dividing the position.  (This will add easing to our animation)

Now that the theory is out of the way, we can get started.  The first thing to do is add an image component and name it Image1.

Step 1: Setting the Initial Left Position of the Image

Once your image is on the Canvas, move it to a position on the right side.  Now get the Left position of the image.  Right click on the image component in the Component Explorer, select Advanced Properties and remember the left coordinate

This number will be the starting left point for the animation.  Next click on the Canvas, click Events >  select {Global Code} > click the Code Editor button.

Now create the variable that will hold the left position value.  Paste the code below and change the left position number to left coordinate that was retrieved above.

 

dim leftPosition 

leftPosition = 500

Step 2:  Setting the EventTimer

The event timer will have to be set when the application starts to determine how may times it will fire in milliseconds (entering a value of 1000 will fire every second).  Select the frmCanvas, right-click and select On_frmCanvas_Load to open the code editor.  I want my animation to fire 20 times per second so I will enter the following:
frmCanvas.EventTimer.Interval = 50

Step 3:  Moving the Image Position

Now that the EventTimer is set, I will need to decrement the leftPosition variable by 1 every time it is fired (20 times per second).  Select the frmCanvas, right-click and select On_frmCanvas_EventTimer to open the code editor. 

You can simply put the following to move the image across the Canvas no easing.

 

leftPosition = leftPosition - 1 

Image1.Left = leftPosition

However, the image will continue to move without a stopping point.  To stop the image at 10, you will need to say…

If leftPosition > 10 Then 

leftPosition = leftPosition - 1 

Image1.Left = leftPosition 

End If

Once the image position is less than 10, the leftPosition variable will not decrement anymore and the animation will stop.  Preview your project to make sure the animation works properly.

Step 4:  Adding Easing

Now that the image is animating across the canvas, we will just need to make a slight modification to the code above.  Right now there is an image that moves to the left 1 pixel 20 times per second and stops when it is < 10.   Now the image needs to start off moving fast and slow down as it nears 10.  This is done by multiplying the leftPosition by a decimal value of .85.  The decimal value will determine how fast the image will move across the canvas.  (The lower the value, the faster the animation)  Delete any existing code and paste the code below:

If leftPosition > 10 Then 

leftPosition = (leftPosition - 1) * .85 

Image1.Left = leftPosition 

Image1.Refresh 

End If

Preview your project to confirm the image animates with easing.  If you would like to view the finished animation, you can download it here: easing.zip

It’s relatively simple to create some animated text using CD Menu Maker or Visual ELearning Design Studio (if you know the code). This short project should be a great starting point for you.First, open up CD Menu Maker (or VEDS), and create a new Blank Project (once you understand this concept, you can apply to your existing projects).

Add a Text Label component (keep the name as Label1), and then configure it (for this example) to CENTER alignment, font size of 16, SOLID background style (I chose BLACK as the color), and change the caption color to WHITE.

Resize the label component on the form to stretch the entire width (similar to my example below):

Now get to the GLOBAL CODE area (in the example here, I am using CD Menu Maker):

Click the CODE EDITOR button:

Enter in the following code:

Dim Start
Dim ScrollText
Dim ScrollTimer

Now go to the LOAD event of the form (as shown):

Enter in the following code:

Start = 0
ScrollText = “Enter the text you want to scroll here”
Set ScrollTimer = frmCanvas.Controls.Add(”PSA.AutoEvent”, “ScrollTimer”)
ScrollTimer.Interval = 250
ScrollTimer.RoutineToCall = “AnimateText”

Note the line of code that starts with “ScrollText =” defines the text that will be animated. Simply enter in the text you want inside the quotes.

You can also change the speed - the line that is ‘ScrollTimer.Interval = 250” is the code that defines the speed. A speed of 1 is the fastest, 1000 is 1 letter animated each second, up to 32,767 (which is agonizingly slow).

Now, click the button along the top of the code (where is says Sub On_frmCanvas_Load()), and choose “Add a New Sub, Function, or Class“:

For Name of Routine, enter AnimateText, then click OK:

Now enter the following code:

Start = Start + 1
If Start > Len(ScrollText) Then
ScrollTimer.Interval = 0
End If

Label1.Caption = left(ScrollText, Start)

Preview your project to see the animated text.

In this article I will be discussing how to add a video from a button in Visual Elearning Design Studio (VEDS). 

First open VEDS and click Create a New Project.  Give your project a name, click the Test Launcher Template tab and select the Test Launcher Legacy Clone D31A. 

Click your Basic Button tab in your Components panel.  Give your button a name and select the layer you want to place it into and click ok. 

Note:  the middle row of containers are called cntLeftColumn, cntMiddlecolumn and cntRightColumn.

Enter you button Caption then click the Define “MouseClick” Action. 

Click the Create Action Using Wizard button and select Play a Video. 

Now we have to add the video to our project.  Click the Add button then click your Add a File or Resource button. 

Select your video and click OK then done.  Click the Pick button, select the video you just added and click OK. 

Click Save on the code editor then size and position your button.  Preview your launcher by clicking your Project tab > Run in preview mode > Test Pro Test Launcher (with sample tests) to confirm your video will open properly.

Now that your launcher is functioning, click Project > Build & Deploy.

I will be explaining some questions to help explain how your Visual Elearning Design Studio(VEDS) Launcher works in conjunction with Test Pro Developer.  First we will take a look at the VEDS Launcher.  Open VEDS, select a new project, give it a name, click the Test Launcher Templates tab and select the Test Launcher - Legacy Clone - D31A launcher.  Open Test Pro Developer as well to follow along a bit better. 

Now that both programs are opened, I will make a few comparisons.  If you look at your VEDS launcher, you will see two blocks of text that say {pkgTitle} and copyright elearning software company. This text holds a place for preferences that you will set when you publish a Test Pro Elearning Software Package. 

Below is what will display in your placeholders when you are publishing an elearning software package in Test Pro Developer.

OK now that we have taken a look at how your VEDS launcher will function with Test Pro, I will move on to the next section in the package wizard .  As you navigate through the wizard, you will come across a drop down box that asks you to Select Design.  This is where you will select the launcher that you had Deployed to make available in Test Pro developer earlier. 

Note: When you are finishing work on a template in VEDS, you must Build and Deploy it as a Test Pro Test Launcher to make it available to select in Test Pro Developer.  Project > Build & Deploy > Test Pro Test Launcher

 Now preview your VEDS launcher by clicking Project > Run in Preview Mode > Test Pro Test Launcher.  Your preview window will popup and you will see a drop down box that says Sample Test 1.  This drop down box will correspond with the tests you select in the Test Pro Developer Wizard (shown below)

A common question we get at Atrixware is customizing Visual Elearning Design Studio (VEDS) templates.  It is a pretty straight forward process so we will begin with creating a new Test Launcher.  Give it a name like “custom launcher.”  Click the Test Launcher Templates tab and select the Test Launcher - Legacy Clone - D31A launcher. 

Your launcher will appear in your design window.  First I will start with changing the image.  Prepare an image that is the same size as the top left image we are going to replace.  This image happens to be 425 by 135 pixels so create your logo to this size. 

Note: If you would like to check the dimensions of this image for yourself, select the image and in your properties and events box and click the advanced tab at the bottom.   

Next I am going to swap the current image with our logo.  This is done by clicking on the existing image (blue boxes will appear when it is selected). 

After it is selected, right click on it and select properties.  Click Set Image Picture then click Set Image.  Click your filesystem tab and navigate to the location of your logo. 

Important: If your file is on your Desktop, you will need to double click on the folder that contains your computer username.  You will then be able to browse common areas like your desktop and my documents folders. 

Click OK a few times to return back to your design screen.  Your logo will now appear in place of the old one.  Now that the logo is complete, I will show you how to add a link to your website.

First click on your Hyperlink button in you components section.  It will prompt you to enter a name and ask you where you want to place it.  Give it a name like website_link and we are going to put it into the MAIN FORM/CANVAS. 

Note: If you want to put the link inside one of the gray boxes, you will need to select the name of the component you want to place it in instead of the MAIN FORM/CANVAS.  To get the name, simply click the component you want to put your link and look at your properties and events dropdown box.

Now that we have it in the correct component, give it a name, change the font etc.  By default after the new Hyperlink component is created, it will be selected.  You can move it around to the appropriate location by clicking the larger center box.  If for some reason your component is not selected or you have clicked something else, you can simply click on it again to select it.  However, if components are overlapping you may not be able to select it.  To get around this, you will have to click your Properties and Events drop down box and select the Hyperlink component that you have just named. 

I have decided to place my hyperlink at the bottom right of my canvas. 

One problem you need to be aware of is when components are overlapping.  If you have placed your Hyperlink at the bottom right like I have, when you preview it, you may experience some problems.  The copyright component is overlapping my Hyperlink component and causing the rollover to work incorrectly.  To fix this we want to select the copyright text and shrink the size of the text box by dragging the small blue handles on the right over until the components are no longer on top of each other. 

Now with that out of the way, we are ready to link our text to a website address.  This is done by selecting your Hyperlink, right clicking on it and selecting Event > {YOUR_HYPERLINK_NAME}MouseClick(x,y).  Now click the Create Action Using Wizard button and select Show a Web Page.  

Type in the web address you want to link to, select how you would like it to open and click OK then save.   You must put the entire web address ex. http://atrixware.comor you can go to the site in a web browser then copy and paste the address.

We are now ready to preview what we created to confirm everything works correctly.  This is done by clicking Projects in the top left menu > Run in Preview Mode > Test Pro Test Launcher.   

This will launch the preview window and just click your link to make sure it works properly. 

Once this is completed we are now ready to output it so we can use it with Test Pro Developer.  Close your preview window and click Project again.  This time select Build & Deploy > Test Pro Test Launcher.   Give it a name and click Build. 

Your launcher will now be available to use in Test Pro Developer. 

If you are using Atrixware Test Pro Developer to create ELearning Software Packages for distribution on CD-Rom or via download, you are most likely familiar with the design templates available to you. These are the ‘face’ of your elearning software application, and are what enable your end user to interact with your quizzes and elearning materials you include with your package.

While you may have found one or more designs to be adequate, you probably would like to create branded elearning software interface with your own logo and colors, and perhaps even add more functionality.

For example, here are some things our customers have been doing:

• Insert links to their website
• Launch other applications from your interface
• Embed flash videos and powerpoint presentations
• Include PDF documentation
• Communicate with a system or database on your web server
• Much more ..

So how do you do all of this? The answer is by using Visual ELearning Design Studio. It is an add-on application that can be used to (among other things) create elearning software interfaces for your Test Pro Developer elearning software packages.

I have embedded a video tutorial (also available on our video channel) that walks you through the following concepts:

1. Picking a design from Test Pro Developer as the starting point
2. Swapping out the image with your own logo
3. Adding a hyperlink that enables your users to go to your website
4. Publishing the design right into your Test Pro Developer installation