# A Quick Example

To get you started, here follows a very quick example of how you can use Lucid to very quickly add a Javascript animation to a web page.

First, from the Welcome panel, create a new project by pressing the 'Create New...' button. If the Welcome panel is closed, you can open it from the 'File' menu.

When you have created the new project, you will be presented with a new Lucid document. It will look something like the below screengrab.

## Saving the Project

Before we do anything, we need to save the project. We do this by simply choose Save from the File menu.

## Opening the Script & HTML

Lucid has created some files for us to get started with, a Lucid Workflow file, and a simple HTML file. We need to open both of these by double-clicking them in the Site Manager, which is pictured below.

Open both the files by double clicking them.

The Lucid Window should now look like the image below.

## Add an Event

First of all, we need to add an Event to the the Javascript. An event is simply something that happens when something happens on the HTML page. For example, a mouse click, keyboard press, or just that the HTML has finished loading. Events are simply triggered when something happens on the page. In this case, we will add a 'Click' event. A Click event happens when the user clicks his/her mouse button somewhere on the page. It will also happen on tablets when the user taps his/her finger or stylus on the screen.

To add the event, drag the 'Click' event from the 'Library' (available from the top left of the Lucid window) to the Workflow view. You will see that an object appears at the top of the Javascript area. You will also see that under the object, is the text 'Not attached', this means that the event is not attached to any element on the HTML page, and will therefore not do anything at all. To attach the event to the page, just drag from the event to the element on the page. In this case, let's drag to the blue box on the page.

## How to Bind

Lucid will present a number of ways we can bind to this object.

The blue entries with the '#' marks will bind to this specific object. The yellow entries can potentially bind to many objects, for example, the '.generalboxes' will affect any object with a class of 'generalboxes', and the 'DIV.generalboxes' will affect any `DIV` element with a class of 'generalboxes'.

For this example, choose the '#bluebox' entry, and press OK.

## Connect to an Action

Now we have a an event bound to the 'bluebox' div, but at the moment, the event will not do anything. To make the event do something when 'bluebox' is clicked, we need to add an Action to the Javascript. Actions can be anything from changing a property in your HTML or CSS, to running a JQuery animation, or using AJAX to pull down data from your server. In this quick example, we'll apply a bouncing animation to the div.

Actions are also available in the 'Library', drag the Bounce action to the Workflow view. You will see that a Bounce item appears in the Workflow view. You can drag this item around and put it where you wish. If you double click the item, you'll see a window pops up for you to edit the action.

Now, drag from your 'click' event to the new Bounce action. You'll see that there is now a connecting line between the event and the action. This means that when you click the 'mybluebox' div, the 'BOUNCE' action is called. However, at the moment, the action does not know what it is to bounce and will not do anything.

## Setup the Affected Element

To connect the bounce action to the item on the page it should bounce up and down, drag from the little circle on the side of the action to 'bluebox' div on the page.

You will again be asked how you want to connect, choose the blue entry '#bluebox' again.

You will now see that there is a connecting line from action to the div. This means that now, the click event knows to call the bounce action, and the bounce action know which element on the page to animate, and you're good go!

Now enter 'Preview' mode in Lucid by clicking the button on the top right of the window. After a short while your page will be loaded into preview mode, and you can click the div. You will see that the div bounces up and down a few times, then stops.

You will see the Workflow on the left side of the Document will show the Actions being used by wiggling them.

If you now return to 'Edit' mode, and double click the 'BOUNCE' action, you can now change the duration of how long the item will bounce for, and also add more advanced properties, like the number of bounces, how high it bounces etc. Feel free to experiment with these properties.

# Summing up...

You have just completed your first simple effect in Lucid. What we have learned is first, how to attach an effect to an element on the page. Then how to make that event call an action. Lucid provides a lot of actions, for animation, JSON/AJAX requests, simple attribute changes, and even a Google Map. If Lucid does not provide the action you want, you can also add Custom Code.