You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: iwsy/resources/help/quickstart.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -10,21 +10,21 @@ The first thing to do is define a _block_. This is an area of the screen having
10
10
11
11
## Your first block
12
12
13
-
Click the **Blocks** button over in the right-hand panel, then click the ~img:https://easycoder/github.io/iwsy/resources/icon/plus.png|icon~ at the right-hand end of the title row. Now click the button titled "New Block". You should get this:
13
+
Click the **Blocks** button over in the right-hand panel, then click the ~img:https://easycoder.github.io/iwsy/resources/icon/plus.png|icon~ at the right-hand end of the title row. Now click the button titled "New Block". You should get this:
Most of these default values are fine as they are; they describe a block that occupies the whole window area. Let's just change the ~m:name~ property to ~m:background~ and the ~m:background~ property to ~m:url('https://easycoder.github.io/iwsy/resources/help/quickstart/SemoigoDawn.jpg')~. When the presentation runs, the effect will be to display a full-size image. This is what the panel should look like now:
Now let's save our work. There's a **Save** button in the editor panel but this just anchors your changes and updates titles etc. You really need to save the entire project. If you are registered it will go to the ~iwsy~ website, but if not it will be saved to your browser's own storage space. Type the name ~m:quickstart~ in the **Script name** box under the main button bar, then click the ~img:https://easycoder/github.io/iwsy/resources/icon/save.png|icon~ icon in the button bar. It's highly recommended that you click this button regularly so you don't lose your work in the event of something going wrong.
21
+
Now let's save our work. There's a **Save** button in the editor panel but this just anchors your changes and updates titles etc. You really need to save the entire project. If you are registered it will go to the ~iwsy~ website, but if not it will be saved to your browser's own storage space. Type the name ~m:quickstart~ in the **Script name** box under the main button bar, then click the ~img:https://easycoder.github.io/iwsy/resources/icon/save.png|icon~ icon in the button bar. It's highly recommended that you click this button regularly so you don't lose your work in the event of something going wrong.
22
22
23
23
The effect I want to create is for the image to fade up out of the screen background. So let's go to to the **Steps** editor and make that happen.
24
24
25
25
## Adding some steps
26
26
27
-
The ~m:init~ step provides information about the container to be used for the show. Its default values are fine so there's no need to make any changes here. So we'll add a second step. Click the ~img:https://easycoder/github.io/iwsy/resources/icon/plus.png|icon~ to add the new step, then click the **New step** button. You should see this:
27
+
The ~m:init~ step provides information about the container to be used for the show. Its default values are fine so there's no need to make any changes here. So we'll add a second step. Click the ~img:https://easycoder.github.io/iwsy/resources/icon/plus.png|icon~ to add the new step, then click the **New step** button. You should see this:
@@ -34,38 +34,38 @@ Click in the Action box and a drop-down list appears of all the available step t
34
34
35
35
We'll start with a short pause. When the browser switches to full-screen mode it displays a message for a couple of seconds so we'd like to wait for this to disappear before starting our show. Choose ~m:pause~, then set the ~m:Name~ property to ~m:pause before starting~. We'll have a 2-second pause so set the duration to 2 then click **Save**.
36
36
37
-
Now click ~img:https://easycoder/github.io/iwsy/resources/icon/plus.png|icon~ again to add another step. It too starts as **New Step** so click that. As before, click to open the ~m:Action~ list. We want to set up (initialize) our background block,so choose ~m:set~~m:content~. Set the ~m:Name~ property to ~m:set up background~, then click **Save**. It should now look like this:
37
+
Now click ~img:https://easycoder.github.io/iwsy/resources/icon/plus.png|icon~ again to add another step. It too starts as **New Step** so click that. As before, click to open the ~m:Action~ list. We want to set up (initialize) our background block,so choose ~m:set~~m:content~. Set the ~m:Name~ property to ~m:set up background~, then click **Save**. It should now look like this:
The ~m:set~~m:content~ action lets you set up any number of blocks at the same time, though here we only have one. Click the ~img:https://easycoder/github.io/iwsy/resources/icon/plus.png|icon~ in the **Blocks** row, then click the empty selector under the **Blocks** title. A drop-down list appears with the name of the block we created earlier:
41
+
The ~m:set~~m:content~ action lets you set up any number of blocks at the same time, though here we only have one. Click the ~img:https://easycoder.github.io/iwsy/resources/icon/plus.png|icon~ in the **Blocks** row, then click the empty selector under the **Blocks** title. A drop-down list appears with the name of the block we created earlier:
so select that. The block has no text, just the background defined in the block itself, so leave the **Content** drop-down list empty. Click the **Save** button for this step, then click the ~img:https://easycoder/github.io/iwsy/resources/icon/save.png|icon~ icon in the button bar.
45
+
so select that. The block has no text, just the background defined in the block itself, so leave the **Content** drop-down list empty. Click the **Save** button for this step, then click the ~img:https://easycoder.github.io/iwsy/resources/icon/save.png|icon~ icon in the button bar.
46
46
47
47
## Fading up
48
48
49
-
Now we have a block with a background, so let's fade it up. Click ~img:https://easycoder/github.io/iwsy/resources/icon/plus.png|icon~ again or click the **Add step after** button. In the new step, open the editor, select the **fade up** action and give it the name ~m:fade up background~. It should look like this:
49
+
Now we have a block with a background, so let's fade it up. Click ~img:https://easycoder.github.io/iwsy/resources/icon/plus.png|icon~ again or click the **Add step after** button. In the new step, open the editor, select the **fade up** action and give it the name ~m:fade up background~. It should look like this:
This action lets you fade up as many blocks as you like simultaneously, so it provides you with the means to add a list. Here we only have a single block so we'll add that. Click the ~img:https://easycoder/github.io/iwsy/resources/icon/plus.png|icon~ in the **Blocks** row, then click the empty selector in the new row and choose **background** again. Finally set the duration of the fade to a suitable value; say 2 (seconds). You can use decimal fractions here if you need to. It should now look like this:
53
+
This action lets you fade up as many blocks as you like simultaneously, so it provides you with the means to add a list. Here we only have a single block so we'll add that. Click the ~img:https://easycoder.github.io/iwsy/resources/icon/plus.png|icon~ in the **Blocks** row, then click the empty selector in the new row and choose **background** again. Finally set the duration of the fade to a suitable value; say 2 (seconds). You can use decimal fractions here if you need to. It should now look like this:
If you haven't saved your project recently, do it now.
58
58
59
59
## Watch it run!
60
60
61
-
Now it's time to test your work, which will cause this help panel to disappear, but don't worry; you can bring it back by clicking the ~img:https://easycoder/github.io/iwsy/resources/icon/help.png|icon~ button in the toolbar.
61
+
Now it's time to test your work, which will cause this help panel to disappear, but don't worry; you can bring it back by clicking the ~img:https://easycoder.github.io/iwsy/resources/icon/help.png|icon~ button in the toolbar.
62
62
63
-
You have 2 run options. The ~img:https://easycoder/github.io/iwsy/resources/icon/run.png|icon~ button runs the presentation inside ~iwsy~, in the left-hand panel currently occupied by this Help page. The ~img:https://easycoder/github.io/iwsy/resources/icon/fullscreen.png|icon~ button runs it full-screen. Note: It is possible that the full-screen mode may not always start up properly; if you have trouble then put your browser into full-screen mode yourself before clicking ~img:https://easycoder/github.io/iwsy/resources/icon/fullscreen.png|icon~.
63
+
You have 2 run options. The ~img:https://easycoder.github.io/iwsy/resources/icon/run.png|icon~ button runs the presentation inside ~iwsy~, in the left-hand panel currently occupied by this Help page. The ~img:https://easycoder.github.io/iwsy/resources/icon/fullscreen.png|icon~ button runs it full-screen. Note: It is possible that the full-screen mode may not always start up properly; if you have trouble then put your browser into full-screen mode yourself before clicking ~img:https://easycoder.github.io/iwsy/resources/icon/fullscreen.png|icon~.
64
64
65
-
Click the ~img:https://easycoder/github.io/iwsy/resources/icon/run.png|icon~ or ~img:https://easycoder/github.io/iwsy/resources/icon/fullscreen.png|icon~ icon in the button bar and enjoy watching your steps run!
65
+
Click the ~img:https://easycoder.github.io/iwsy/resources/icon/run.png|icon~ or ~img:https://easycoder.github.io/iwsy/resources/icon/fullscreen.png|icon~ icon in the button bar and enjoy watching your steps run!
66
66
67
67
A couple of things to note. One is that as the presentation runs the steps in the editor take on green backgrounds. With only a single fade this happens too quickly to see, but in a longer presentation you can see where you are at all times.
68
68
69
-
Another thing is that you can click the ~img:https://easycoder/github.io/iwsy/resources/icon/binoculars.png|icon~ icon for any step to see what the presentation looks like at that step. The program invisibly runs the entire presentation up to the step you clicked, then runs that step, giving the button a blue background.
69
+
Another thing is that you can click the ~img:https://easycoder.github.io/iwsy/resources/icon/binoculars.png|icon~ icon for any step to see what the presentation looks like at that step. The program invisibly runs the entire presentation up to the step you clicked, then runs that step, giving the button a blue background.
70
70
71
71
in ~page:quickstart2:Part 2~ we'll add some text to the presentation.
0 commit comments