Free Demo
1.866.696.8709
Atrixware CD Menu Maker Archives - Atrixware
learning management system
Axis LMS
Ready to Enhance and Streamline YOUR Training?
Works on Windows, MacOS, iPad, iPhone & Android
FREE DEMO

Archive for the ‘CD Menu Maker’ Category

Insert a Flash Button in Menu Maker

In this article, I will be discussing how to add a Flash button into your 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 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.

1.jpg

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

2.jpg

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, un-check the Show Control Button and click OK.

3.jpg

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.

4.jpg

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.

If you enjoyed this article please consider staying updated via RSS.

Animate with Easing in Menu Maker

In this tutorial I will be discussing how to animate a component in Menu Maker.

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 multiplying 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

img1.jpg

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.

globa.jpg

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

global2.jpg

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
load.jpg

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.

eventtimer1.jpg

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 &gt; 10 Then 

leftPosition = (leftPosition - 1) * .85 

Image1.Left = leftPosition 

Image1.Refresh 

End If

eventtimer.jpg

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

If you enjoyed this article please consider staying updated via RSS.

Rotate an Image in CD Menu Maker (animated gif)

In this article I will be discussing a few tricks to create the appearance of an image rotating.  You can’t actually programmatically rotate an image component in Cd Menu Maker so I came up with 2 ways to work around it.  The first way is to create an animated gif and place it in an HTML Canvas.  The second way is to swap images based on a timer.  In this article, I will be discussing the animated gif method.  This will require some knowledge of image editing software like Fireworks, Photoshop,  ImageReady etc. to create your gif file.

Note: You can visit download.com and search for “animated gif” to find inexpensive or free software to create your gif

After your gif is created, open up CD Menu Maker and Create a New Project.  Begin typing a name and select the Blank Project template.   Add your animated gif to your project by click Project > Add/Remove Project Files > Add File or Resource in the Menu bar.

blog6.jpg

Browse and locate your animated gif, click OK and Done.

Click the HTML Canvas component in the Add components panel, give it a name and click OK.   Type dep\YOURFILENAME.gif in the Initial page to Display box and click OK

blog5.jpg 

Click Preview in the Project Toolbar to view the animated gif. 

To remove the scroll bar and border, simply place the browser component inside a Layer/Page that is smaller than the browser component to hide the edges as shown below.

blog7.jpg

If you enjoyed this article please consider staying updated via RSS.

Rotate an Image in CD Menu Maker (swap images)

In this article I will be discussing a few tricks to create the appearance of an image rotating.  You can’t actually programmatically rotate an image component in Cd Menu Maker so I came up with 2 ways to work around it.  The first way is to create an animated gif and place it in an HTML Canvas.  The second way is to swap several images based on a timer.  In this article, I will be discussing the swap image method.  This will require some knowledge of image editing software like Fireworks, Photoshop, etc. if you would like to create your own animation. 

Here are 4 images that are rotated slightly until the rotation is complete. 

 sun1.jpgsun2.jpg

sun3.jpgsun4.jpg

Save the images above (right click, save image as) and be sure to keep the names sun1.jpg, sun2.jpg, sun3.jpg and sun4.jpg.  Add the images to the project by clicking Project > Add/Remove Project Files > Add File or Resource

blog1.jpg

After all of the images are added, click the Image component in the Add Components panel.  Give it a name of img_sun and click OK.  Browse and select the first image of the animation sequence (sun1.jpg). 

blog2.jpg

The next step is to start the event timer.  Right-click on the canvas and select Event > On_frmCanvas_Load().  Once the Actions Menu is opened, click the Code Editor button on the bottom left and paste the following code:

frmCanvas.eventtimer.interval = 50

When the interval = 1000, the function will fire every 1 second.  In this case, I want the application to swap the image 20 times per second to ensure that I will have a smooth animation. 

Note:  Animations may differ so 20 times a second may be too much or not enough so adjust accordingly

Now I need to swap the image every time that the interval is fired.  You will need to click the Events button in the Project Toolbar and select {Global Code}.  Paste the following code:

dim increment

increment= 1

This variable will keep track of the image number that will be swapped and will be “incremented” each time the timer is fired.

Right-click on the canvas and select Event > On_frmCanvas_EventTimer().  Once the Actions Menu is opened, click the Code Editor button (if needed) on the bottom left and paste the following code:

If increment < 4 Then

increment = increment + 1

Else 

increment = 1

End If img_sun.Picture = Loadpicture(system.AppRootFolder & “dep\” & “sun” & increment & “.jpg”)img_sun.Refresh

blog3.jpg 

Code Explained:  

Line 1 will check to see if the “image counter” (increment) exceeds the total number of images in the project.  If it does not exceed the image number it will proceed to line 2 and add 1.  Once the image number has been exceeded, the “image counter” (increment) will proceed to line 4 and reset to 1. 

Line 6 Once the If statement above determines which image number to swap and Loads the image into the img_sun component.

Line 7 Refreshes the image component for a smooth animation

Note: If the images above were not used, you must customize the function to correspond with amount of images used and adjust any component name or image name that may differ from above

Click Preview in the Project Toolbar to view the image rotating.

blog4.jpg

You can download the completed animation here: rotate.zip

If you enjoyed this article please consider staying updated via RSS.

Add a Swap a Caption Action to CD Menu Maker

In this article I will be discussing how to add a custom Action in CD Menu Maker that will swap text when an Event takes place. 

First, download the Custom Wizard I created using the Custom Code Wizard Template and unzip it.  

Download: swap-a-caption.zip (1.7 MB)

Navigate to the folder below:

On XP 

C:\Documents and Settings\YOUR USER NAME\Application Data\Atrixware\CD Menu Maker\wizards\ 

On Vista 

C:\Users\YOUR USER NAME\AppData\Roaming\Atrixware\ CD Menu Maker\wizards\ 

Drag the Swap a Caption folder inside the wizards folder and open CD Menu Maker. 

 

layer-35.jpg 

 

Click Create a New Project and select the Business Training 1 Template.   Select any button, click the Events button in the Project Toolbar and select On_MouseClick

 

layer-54.jpg 

 

Click New Action and select +Swap a Caption

 

 layer-73.jpg

 

Select the header component to swap the caption on, enter the rest of the required information and click OK.

 

Note:  You can click the code button to view the code that this wizard will write

 

 layer-92.jpg

 

Click Preview in the Project Toolbar and click the button that has the Swap Caption action applied to it. 

 

layer-101.jpg

If you enjoyed this article please consider staying updated via RSS.

Creating Animated Text in Menu Maker

It’s relatively simple to create some animated text using Menu Maker  (if you know the code). This short project should be a great starting point for you.First, open up Menu Maker, 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.

image001.jpg

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

image002.jpg

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

image003.jpg

Click the CODE EDITOR button:

image004.jpg

Enter in the following code:

Dim Start
Dim ScrollText
Dim ScrollTimer

image005.jpg

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

image006.jpg

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”

image007.jpg

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“:

image008.jpg

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

image009.jpg

Now enter the following code:

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

Label1.Caption = left(ScrollText, Start)

image010.jpg

Preview your project to see the animated text.

If you enjoyed this article please consider staying updated via RSS.

Convert Flash Videos to CD-Rom Auto Launch Executable

The Atrixware CD Menu Maker software is designed to enable you to turn just about anything into an auto launch CD-Rom application. A common task is turning one or more flash videos or presentations into an application your end user can run automatically simply by placing the cd-rom into their system.

Note: This article was written with a beta version of CD Menu Maker, so some screen shots and steps may vary slightly from the final release.

To do this, follow these steps:

1. Start CD Menu Maker, click the Create New Project button, enter a name fpr the project (I used ‘Movie Player’), and pick one of the templates from the ‘Blank Templates‘ tab.

article1_html_m1150d567.jpg

2. From the Add Component Panel, click the VIDEO button, and then click OK on the dialog box:

article1_html_m6bd0f6c5.jpg

3. The View Component Properties Panel will appear. From here, click the ADD button, click the BROWSE button on the File Dependencies Dialog, and then click the Filesystem tab on the Dependency Browser panel:

article1_html_m5eb77bb3.jpg

4. Locate your swf file (in this example shown above, I have my swf file ‘Weblearning8.0LMS.swf’ located and highlighted). Making sure the swf file is selected (highlighted), click the OK button

5. Making sure the swf file is selected (highlighted), click the OK button on the Dependency Browser dialog, and then click DONE on the File Dependencies Dialog.

6. Now, click the PICK button on the Video Component Properties panel, and your swf file should now appear an an option – pick it.

article1_html_m3c632e41.jpg

7. You can leave all checkboxes checked (the default) for this example – they are the most common settings. Click OK, and then resize the component to your desired size:

article1_html_m3d1dd751.jpg

8. You may need to Preview (press F12, or click the PREVIEW button along the top toolbar) your project a few times until you work out the desired size of the video component and/or window size.

If you want your video component to ‘snap’ to the form size, and perhaps you want your end users to be able to resize the form, follow these steps:

1. In the Components Explorer panel, click the ‘frmCanvas‘ component (at the very top of the list).

frmcanvas.jpg

2. On the top toolbar, click the Actions button, and choose OnStart.

article1_html_m1112ebcf.jpg

3. On the Actions Menu, click the CLICK HERE button to access the Code Editor.

article1_html_m11971724.jpg

4. When the code editor appears, type in the code as shown below:

article1_html_m787de474.jpg

5. Click the Actions button (along top on the top toolbar) again – this time, instead of choosing OnStart, choose the On_frmCanvas_Resize option, and then type in the following code:

article1_html_4fcfcaa5.jpg

Once you have completed the project, click the BUILD button on the top toolbar. Once complete, drag & drop the files onto a blank CD-Rom (or use your favorite CD Burning software).

The end result is, when your end user inserts the CD Rom into their system, your application will start, and the video will begin playing immediately.

If you enjoyed this article please consider staying updated via RSS.

A Better, Easier & Less Expensive Learning Management System
Try the Atrixware Axis LMS