In this tutorial, you will create a simple session planner project.
And when you’re finished, you should know more about:
- Project Files
- Work Folders
- Adding Layers
- Exporting Images
- Creating Slides
The Basics
The session planner uses a multi layered and multi slide system.
So when it saves your files, it has to save Layers, Backgrounds and Slide information as well.
And when you open your saved files, the session planner has to know:
- which slide in your design the layers belong to
- where on the canvas they need to go
- and what background each slide should use
Session planner project files end with a .kt extension.
Project files, store data in a way that only the session planner understands, so they are rendered useless if you try and load them into any other app.
If you are using hooptactix Personal Edition, then during your environment build, we create 4 main work folders for you.
These are project, image, session video folders, of which the session planner only uses the project and image work folders.
The project work folder is where you save all your project files, and the image work folder is where you export your images to.
You can also create as many sub folders as you like, within your work folders.
Now you should have a basic understand of why the session planner uses project files.
Creating a project
You create an empty project workspace by clicking "file" on the top menu and select "new project".
You can call the project file anything you like, then hit "Create"
Notice the top right hand corner number, this is the current slide number we are on.
When a new project is created, then your starting slide is always 01.
The first thing we need to do is add a background image to the slide.
Click "Tools" on the top menu, and click "Canvas Manager", which opens the canvas manager window.
On the left pane, you will see all the image work folders your have access to.
If you are on an academy platform, then you will see your home drive and academy shared folder.Depending on what version of hooptactix you are using, and what setup you have in place will determine what folders you see.
Also, if you have any coach links setup, then you will see their image folder here as well.
If you are using the Personal Edition, then you should see your KwikDrive folder, and the canvas pack folders as well.
To expand a folder, you can either double click the folder, or click the arrow at the side of it to expand.
And when you click on a folder, it will highlight and show its contents on the right pane.
Let's go ahead and add a background image to slide one.
Navigate the football canvas pack folder, expand the fields and blank folders then click on the style 2 folder to show its contents.
If you are on the U.S platform, the football canvas pack will be called the soccer canvas pack.
And if you are on the academy platform, then the football or soccer canvas pack will be inside the academy shared image folder.
Whichever version you are using, you should be able to see a file called "[3D]Field[P].jpg" in the right pane.
The naming convention our system canvases use, start with a [3D]. or [2D] to indicate which dimension the background is.
Go ahead and double click the "[3D]Field[P].jpg" image file, or click the image file to highlight it, and select "Load Canvas".
The canvas manager should now close, and you should see the background image we selected has loaded onto slide 1.
Now let’s drop a few markers onto the canvas, and create some lines.
Adding markers onto the canvas
There are 3 ways to add markers onto the canvas, which all have the same desired result, but are quite different in operation.
1. Click a marker to highlight it, then click on the canvas where you want the marker to go.
The marker will be placed, and the tool will automatically switch to the selector tool so you can immediately select the marker you placed to reveal it available functions.
2. The quickest way to place a marker onto the canvas is to simply drag it from the marker menu, and drop it onto the canvas.
This achieves the same result as the previous way, but is slightly quicker.
3. Click on the marker you want to place, but this time before you click on the canvas, press and hold your SHIFT key on the keyboard. And keep it pressed in. Then click multiple times on the canvas to place the marker in several places, without have to go through the drag and drop process multiple times.
There is no limit to the amount of markers you can place on the canvas.
Simply take your finger off the SHIFT key to finish placing that marker.
Now let's add 4 orange cones to the canvas, using method 3 above.
Locate the orange cone on marker menu #1, by dragging the locator slide across, until you see the orange cone.
Then click it once and move your mouse to position 1 and click once (remember to keep your shift key pressed in).
Now move your mouse to position 2 and click again, then position 3 and position 4.
When you have finished, release the SHIFT key.
You should see 4 cones on your canvas, like the image above.
Now let's align the 2 middle cones vertically, and the 2 side cones horizontally.
Move your cursor to the top middle cone and click once to highlight it.When you move your mouse over a layer on the canvas, you should notice the cursor change to a hand cursor.
This indicates that you are hovering over a selectable item.
As in the image below:
Then press and hold shift and move your cursor to the lower centre cone and click it.
Then let go of your shift key.
You should notice that both cones are flashing. This indicates they are selected.
Now move your mouse to layers on the top menu, then hover over align, and click vertical.
The 2 cones you have selected, should now be in line vertically.
Let's do the same for the 2 side canvases, but this time we'll use a quicker way to select them both.
Make sure the selector tool is set.
Now move you mouse cursor above the left hand side of the cone, then click your mouse button and hold it in.
Now drag your mouse to the lower right hand side of the right cone. So a box is shown around both cones.
As below:
Then let go of your mouse button.
Notice, now you have selected both markers more quickly.
Now select layers on the top menu, and hover over align.
But this time select "Horizontal"
You should now see the 2 side cones are aligned horizontally.
Let's now copy this setup to a new slide.
Take a second to look at the slide controls that are located at the bottom of the session planner.
From left to right we have:
Previous slide - which change the slide to the previous one you was on.
First Slide - changes the current slide to the first on available
Delete Slide - deletes the current slide, and changes to the next slide.
Insert Slide - inserts a new blank slide using the current background, then switches you to that slide.
Clone Slide - create an exact copy of the current slide (which includes all the layers) and switches to that slide.
Last Slide - change the current slide to the very last slide available.
Next Slide - change the current slide to the next one.
If you want to learn more about slides, then be sure to have a look at the tutorial which is all about slides.
But for the purpose of this tutorial, we only need to use clone slide, next slide and previous slide.
Let's go ahead and clone this slide, by clicking the "Clone Slide" button
After you click the clone slide button, the only thing you should notice is the slide number has now changes to slide 2.
Now we are operating on slide 2, let’s add a new marker and line item to the canvas.
Locate the player 1b readiness marker, on the team 3 marker menu, which you can do so by sliding the locate slider horizontally, until you find the marker.
As shown below:
You can simply hover over any marker to check its name.
Once you've found it, drag it into position on the canvas near cone 1, like the image below.
Now let's add a gradient line, with an arrow onto the canvas.
Click the dashed line tool,
Then locate the line functions at the bottom of the session planner, and turn on the end arrow, and gradient to line functions,
by clicking them, as shown below:
Now move your cursor, so its close to the player marker foot on the canvas. Click and hold the mouse button in and drag the line towards cone 2. Release the mouse button when you are half way to the cone as shown below.
If your line does not look like the one above, hit the selector tool button.
Then click the line on the canvas you created. When the ends are highlighted by 2 yellow handles, click the pen thickness slider to make the line thicker. And then click the yellow colour function button to make the line yellow.
You can also move the line, using either of the handles to where you want them.
Ok, let’s copy this slide to a new slide.
Hit the Clone Slide button at the bottom of the session planner and check you are on slide 3 like below.
Now let’s move the marker item, and line item on the canvas, so they are pointing to cone 3 from cone 2.
Hit the selector tool, and click the player marker item.
When it’s highlighted, drag it to cone 2.
Now rotate the player, so they are looking at cone 3 by using the rotate left function on the marker like below.
Click it a couple of times to get it into position.
Now click the line we created, and drag it to cone 2.
Then use the end handle to make the line point to cone 3 as below.
Ok, let’s repeat the procedure again, and make the player marker look like its pointing to cone 4 from cone 3 as below.
Go ahead, and clone this slide.
Then check we are on slide 4, and move the player marker and line items.
Once you’ve finished, we need to repeat the procedure one last time.
Go ahead and create a new slide, then make the player look at cone 1, like the image below.
Great!
Well done, you have created your first multi-slide session with the planner.
And you've used several tools, and functions to achieve the result we wanted.
Let’s now see it in action.
Switching between slides
Click the "first slide" button, at the bottom of the planner to switch to slide 1.
Now click "Next slide" to go through the slides, and watch your player move from cone to cone.
When the player is at cone 4, there are no more slides.
Click the "previous slide" button to go backwards through the slides.
That's it.
Obviously the sample is basic, but imagine what you can achieve using all the markers, tools and functions available.
It's time to save the project so we can load it another day.
Saving your project
Click the file menu, and select "save project as"
This will load up the file manager in save mode, and show your project work folders as below.
Here you can create sub folders, and carry out standard file maintenance tasks.
Type the name you want to call this project, in the project name text box.
And click save to save the project.
That's it, your project has been saved to your project folder.
Let’s make sure its saved how we expected.
Click the file menu item, and select new to create a new project workspace.
Accept the default name.
When the blank workspace has been created, open the project we just saved.
Select, file from the top menu, and hit load project.
Locate the folder where you originally saved the project.
Once you have located it, either double click the project file, or click the project file and then click "open".
When it opened, cycle through the slides to make sure it's doing what it should be.
Also notice that the project filename is shown on the bottom right hand side of your canvas.
Exporting a slide
Now we have one last task. Let’s export a slide as an image into our image library.
Click "file" and select export view.
You will now see the exporter function, rendering the image.
Once it’s rendered, you will see the screen below You can right click the image, and save it to your device or computer.
Or you can click the "save to library" button, to save the image to your image library.
When the save image to library window appears, navigate to where you want the save the image.
Type the image name into the save image as text box.
Then hit save.
Your slide image should now be viewable using your image manager app as a standard image, which you can use in your session plans.
That’s it, you should now have a better understanding of session planner.
To view the process, checkout the video.
