Intro this is intro
Steve: [00:00:00] Okay, the one that a lot of people have been waiting for, the AI player card, or the AI trading card demo, that we're now making available to you as a template that you can download along with the Canva design files that you can tweak to help you get up and running with your own version of this pretty quickly.
For those of you that saw this at PBX or maybe you have seen other places where I've posted about it, I have made a few little design tweaks to this just to simplify the setup, but otherwise it is exactly the same as what you've already seen.
Let's jump into the iPad and just run through a demo so you can just be reminded of how it actually works.
So I'm going to come over to the iPad here and just tap start. We've got our live view here, so I'll hit start to get going. I'm going to:
And, of course, now we can choose gender and skin tone to sort of help influence the AI a little bit. Now, of course, don't come at me for not having all the available options. You can, of course, if you wish, go to town on this and add all the skin tones and genders and ethnicities and hair colors or whatever else you might need.
But for this demo, just to keep it simple, we've got two genders and three skin tones here. So I'll go ahead and select those. And it's going to count us down for the photo.
All right, we'll just let that process. This normally takes around 10 seconds or so, just depending on the internet and the server load.
Okay. So we're done. So that's the output. We've got:
So the first thing I want to do is jump into Canvas so I can show you all the screens that are involved in this and what they all are. [00:02:00]
Here we are in Canva. Basically I've got every single screen that you'll have seen in the demo available here as an editable template.
The very first one here is just the welcome screen or the attract screen. I had this as a video. You could just swap all these images out for anything you want.
In Canva, if you come down to the bottom here and you press this little button, you can pop open the timeline here, and then when you click on this element here, you can see that I added an animation to it, so you can change that animation, no worries at all.
When you go to export your files, you'd want to export this one as an MP4. So that'll download that particular screen as an MP4. Now of course, you don't want to download all your pages or all your screens as MP4s, so you'd probably just make sure that you are just selecting that current page or [00:03:00] page one. Otherwise you're gonna get the whole entire UI as an MP4, which you don't want.
Moving down, we've got our ready screen. So the ready screen is basically what you see when you first go to take your picture. So I've just kept this nice and simple. There's a ready.jpg and the live view will fill the square there.
And then we get into the survey side of things. The surveys is where we capture the data to configure the player card aspect of it.
What we've got first is the position. Now surveys in Breeze, if you are new to Breeze, the surveys are a little bit more of an advanced feature, but not too tricky to understand.
The key way to think about this is that they're just images. We've got one screen, which is what the survey looks like when nothing is selected. And then we have the second screen here, which is essentially exactly the same, except now we have what it looks like when there is an option selected. [00:04:00]
Essentially, when you tap on one of these player positions, we want to change the color from white to orange. And so we do that by creating two versions of the screen, one unselected and one when it is selected. Then in the event editor, we'll put that together by adding the options/touchscreen elements on top of it.
Coming down, we've got our shirt number. This is really a similar sort of concept except rather than the buttons for the player position, we've just got a key pad. Again, we will add the numbers in the touchscreen editor in Breeze. And then we will tell Breeze where to place the output of that, which will be on top of the shirt here.
There's two versions of this screen just to indicate what the keyboard will look like when it is pressed. This is what the keys look like by default. But when you press one of them, it's going to change to the black color, just to let you know that you have pressed that particular number.
Then we have the keyboard to enter your name. [00:05:00] Every letter of the alphabet's there, and we'll assign the interaction to that in the event editor. And it's the same with the one above. You have two versions of that screen - one for what it looks like when it's not pressed, and one what it looks like when it is pressed.
Now these keyboard screens, you can actually take to another level and add the uppercase and the lowercase versions. If you had a particular font that did require the ability for people to specify an uppercase character versus lowercase, you can add additional screens to cater for that. But this font doesn't have lowercase, which is great, so we only need the two keyboard screens, which does keep it a little bit simpler.
Then we move on to our details or the gender and skin tone. It's the same principle as earlier with the player position. We've created two screens. One screen is what everything looks like when it's not [00:06:00] selected. And then the next screen is what everything looks like when it is selected.
So when you tap the male, it'll turn orange. Or if you tap the white skin tone, it'll put an orange circle around it. So remember, these are just graphics at this stage. We'll need to export these and put them into the event editor and assign the touchscreen actions.
We then have a taking photo screen. So basically this is the screen that's going to display when the photo is being taken. So the live preview, once again, just pop into that one.
And then we have a processing screen, which is a video again. It doesn't have to be a video, but I think a video is better just because it's animated and just sends a stronger signal that you're waiting or something's happening. So I just had an animation pop up animation on the please wait, which you could pick from any of the available ones that Canva has. [00:07:00]
Again, when you export that particular screen, you would export it as an MP4.
Lastly, we've got the sharing screen. So basically we've got our drop email options and the finish button, and the email keyboards as well, which are very similar to how the keyboards above work.
Most of these screens are JPEGs. Some of the screens need to be PNG files - the survey screens are PNGs. The rest are JPEGs aside from the animated screens, which are going to be videos.
If we just come into the folder of screen assets, you can actually see that I have named everything in the Canva template to the correct file name. So we can see the ready screen is already called ready. All the survey screens are named correctly.
So when you go to export, you'll get a set of files that are all ready to go named correctly. You just need to ensure that you're saving it as the right file format, [00:08:00] either JPEG or PNG. The easiest way to do that will be to check against the files in the demo event, and you can see, for example, ready, the ready screen is a JPEG, but the survey screens are all PNG files.
One of the reasons I like doing things in Canva, aside from the fact that it makes it easy to share with you guys when we're doing these sorts of videos, is that it's really easy to reskin these things.
If you're doing this event but obviously the team that you're working with is not orange, you can for example click on the orange start button here and change the color, say to this blue one here. Then Canva has an option that says "change all." So if we hit change all, aside from a couple of text elements, it's now going to go through and change all that orange to blue. That's a really handy feature and makes it very quick to reskin.
Obviously you'd probably want to change this logo too, but this is just an element that you can delete and re-add. All the elements in here, in fact, have come from Canva. [00:09:00]
So if you're doing another sporting team, or another type of sport, football or baseball, or whatever it might be, you should be able to find all the elements you need to sort of switch out quite easily. And the same goes for fonts. If you don't like the fonts here, you can just switch them out for a different font.
To keep it simple, if you are going to change things and redesign things, don't go moving things around too much. Anytime you move the graphic, you then also have to move the touch screen action in the event editor.
Once you have all those files the way you like, you can export them. Just keeping in mind, they have to be a JPEG or a PNG or a video file, depending. You will then copy them into your folder for this particular event.
I do have another video on how to get the demo event into [00:10:00] the event editor, so I won't cover that off in detail. Essentially, if you need to make any changes, you're switching out these screens for the new ones that you've made in Canva.
Now, if we go into the event editor and go into this particular event that I've imported already, I want to have a look at the touch screen actions, so you can sort of get an idea of how this is all coming together.
We'll start on the ready screen. This is our ready screen and we've got our live view area. I've got that positioned nicely just in the middle. And we can also see that I've got my photo aspect ratio set to square. So we're going to capture a square image.
The key thing with face swap, it doesn't actually really matter what photo you're capturing too much, because it's really just passing the facial information across the AI to do the processing. And it doesn't care what ratio it is. So square, I think works well in this case.
Down the bottom here we've got a button, a touch screen [00:11:00] action that says still start. I've selected that one from the list here. And we've just drawn the box around our start button here. So when we tap on it, it'll start the countdown.
Now, because we're using surveys, when you start the countdown, it's going to shoot us straight into our survey keyboards. And we can see here, we've got the graphic for the player position.
How this works, we've got our five positions here and we have our touchscreen actions on top of them. So let's go ahead. I'm going to delete all of these. And we're going to do it from scratch so you can see how it works.
Okay, so I am going to add a new radio button. So these are considered to be radio buttons. And we need to assign a group name. So basically, how do we want to refer to all of these buttons that we're going to add? They are position buttons, so I'm going to call it "position" and then we need to assign an ID. The ID is really what is the [00:12:00] name or what is the output of this button going to be when you touch it.
Keeping in mind that we're using the output to print onto the print layout to set the text. So the ID is going to be "power guard". We'll put that in there, power guard. And we've got position.
So now that's created a touchscreen action and we want to put that around the player guard button. Now what'll happen is, if we come to the pressed version of that survey where it is selected orange, you'll see that the touchscreen action is still in the same place.
It is essentially saying when you tap on this area, anything in this box, when you tap it is going to be switched to what is in the box on this particular screen. So that means, for example, if you just did something like this, and only partially covered the shirt, when you tap on it in the user interface, [00:13:00] only half of it, only this section here is going to change color. The rest of it will remain unchanged.
Make sure that these touch screen actions cover the entire area. So I'll quickly go through and add the rest:
Now, we've got an OK and a Cancel button here, so let's have a quick look at how we do these. These are a different type of button. These are called a Key Action, so this is sort of emulating a key press, [00:15:00] and the name of the next button is <next>. And we're going to put that touch screen action around that.
And then we're going to add another key action and we're going to call that one <cancel>. So when you tap on that one, it's going to close and take us back to the very start. So that's that screen there done.
Now we're going to go across to the next survey too. And this is our key pad with our shirts. Let's just delete that one off. I'm not going to delete all of this. I'll just delete a couple just to show you the idea.
Basically when you first get these graphics into here, it's just going to be plain like this. But obviously these won't do anything when you tap them. So we want to add again, a key action. What are we going to do when we tap that area of the screen? We want to output the number one. [00:16:00]
So we grab that and we just drag that around our number one and now we need to add a key for number two and we'll drag that around that and so on and so forth. So basically now whenever you touch this area of the screen it's going to put a number two.
But where is it going to put it? Well we have to tell the software where we want the number to output on the screen so we can see it. So we're going to say, add text input, which is basically like adding a field. I think I called that "shirt". So we're going to call the text input ID "shirt" and we're going to drag this down here.
And we can edit the text input and we can change the height. So the height is represented as a percentage width/height of the screen you're using. So basically the font is going to be about 5 percent of the height of your screen, which is maybe a little bit low, so we can maybe put it up to like 10%. [00:17:00]
In here, you can also:
If you're a power user and you know how to use regular expressions, you can also do further magic by using regular expressions and you can actually use information captured on previous survey screens in here as well.
We can also set the maximum number of characters, which is important. We only want to output two characters. We don't want someone to be able to enter a six digit number for the back of their shirt.
So that looks about right to me and we'll position it roughly where we think that's going to go. And again, we have to have our cancel and okay buttons.
One extra key we have is the delete key. So it's another key action and the code for that is <delete>.
So we'll then go across to the keyboard. Now, this is the same thing. It is just a graphic keyboard and we have to add all the little keys to it. [00:18:00]
Now, if you're doing this sort of thing on the regular, the trick is not to go changing your keyboard designs too often. Keep it all sort of the same, that way you don't have to go to the effort of resetting it up.
The only difference here, of course, I've got a space bar and the code for that one when you add your key action is <space> in the brackets. And similarly, we need to add a text field. So where does the text go when we start typing? We want it to come up here.
In this case, we also want:
And again, if we wanted to, we probably should make some of these things mandatory. So you can't skip past the screen unless you wanted to do it.
And then we'll come onto the last screen here, which is quite an important one. This is the surveys which have two different radio button types on it to specify gender and skin. [00:19:00]
Let's delete these off and re-add them so you can see how it all works:
Now, obviously at this point, if you wanted to, you could add even more skin tones or all the genders if you want. You could add other options we haven't thought about yet. But in this demo, just keeping it simple, there's really no limits to what you can do in that respect.
The rest are all sort of pretty self-explanatory:
For the sharing screen, we need to add touch screen actions for airdrop and email. [00:22:00]
We also need to set our preview area - this is where the final output will appear on the screen. If we don't want it there, we could put it elsewhere, make it small, shrink it, etc.
We also need the "still share closer" button - that's the button that exits the share screen once it's done.
Then we also just had our email keyboard screens, which work basically the same way as the survey screens.
One of the nice things about Breeze is the ability to have hidden actions. I've got a hidden keyboard action up in the top right hand corner. When I'm testing and I don't want to keep typing in my full email address, I can just tap up in the top right hand corner here and that will auto fill my email address. [00:23:00]
Once we've got all that, that is really the foundation of the interface and the experience that you saw in the demo. But what are we doing with all this survey data that we have collected?
We need to use that for the print layout. So if we come across to the photos tab and the print layout here, we can see we've got our design and our text options.
Let's just head back to Canva for one moment. There's another template that I'll give you, and that is the basic overlay design that we used in this demo. You can change this once again - it's just sort of split up into its individual components.
The only thing you can't do in Canva, and you might have to do this in Photoshop, is removing the black [00:24:00] circle in the middle. Unfortunately, Canva does not give you a way to delete that bit out.
Because this is going to be an overlay and we essentially want to put a circle around the original photo, you will need to cut that out. So you end up with something that has a transparent area.
You'd export that file overlay as a PNG, and that would go into your folder of assets replacing the one that's in here.
We also need to talk about fonts. The font that I have used is a font called Commando. You need to download that font and you can get that from a website called dafont.com - just search for Commando. [00:25:00]
Download that font, you need to install it into Windows. If you've already got the event editor open, once you install it, you might just have to restart the event editor before it'll pick up.
But also we need to get that font onto the iPad as well. The font is not automatically sent across to the iPad.
I use an app called iFont, which you can download for free off the app store. The great thing about that is you can either send the font file across from your computer onto the iPad through airdrop or some other means, but they actually have a default built into the app. You can just search for that commando font right here within their app, which is really just a little website built into the app. [00:26:00]
Here you can see the commando font - you can download it. That's going to prompt you to install that font through the iFont program. So you just basically follow the steps to get that into your iPad. It's going to throw up a few warnings because getting fonts onto an iPad is a little bit of a workaround, but this program makes it nice and easy.
Just follow the steps and you'll have the font on your iPad and you'll have the font on your Windows PC as well.
Let's have a look at what's going on in our print layout here:
First of all, we've got the image on here twice:
To get these images onto the page, you can basically just right click and say "add photo one", then it will put a new copy of that photo onto the page.
Now we've also got text, and this is when the surveys come into play. If we just go back for one second and have a look at our survey screens:
If we go back into the print layout, you can add a caption to your print layout by right clicking and saying "add caption", and that'll add a new caption to the screen.
I've already got some on here in this demo, so let's just click on one and edit it. You can see here that I've got this little token. Let's just copy this or cut it and I'm just going to replace this with the number 10. So we can just see what it looks like if we just put a number in here.
When you're trying to get your scale and position before you start trying to put the survey data or the tokens in there, just set it to the actual text, some representative text. Just the number 10, just so you can get your scale and [00:29:00] positioning correct.
Obviously we can increase the font size here if we think it's too small, and we could put it up here if we wanted to. But I think it looks good down here. So I'll set that back to 200.
Now, if we edit this caption again, we want to use a token. A token basically is just pulling the information from the survey that was captured. So, the shirt number was collected in survey number two. So it's:
{survey2_text_shirt}
It was a text input type survey option. And the ID was "shirt". So we have:
So that will now be replaced with whatever information is entered in that field when the photo booth is run. [00:30:00]
And for the position, that survey was collected on the first survey. It was a radio button and it was the position group:
{survey1_radio_position}
We can set the font size, font color, opacity and alignment.
Similarly down here, we've got:
{survey3_text_name}
So on the third survey screen, we had a text field with ID "name", and that's where we collected the name of the player. And that's where we want it to output on this particular screen.
Now the slightly trickier bit is the FX side of things. [00:31:00]
In the event template I've given you, there's a folder called "face swap images for FX". These are all the images that you need for this specific FX AI player card demo. Obviously if you're doing your own event, you'd switch them out, but for the purpose of testing, here are the ones that you need.
These have all been named quite deliberately, and they line up with the survey data. From survey number four, we have the gender (male and female), and we have the skin tone (black, tanned, and white).
So what we've done here is created our six face swap images, and we've named them all:
Now this is important. The name of the actual file itself doesn't matter so much, but it is important when we get it into FX just to make sure we have the naming convention correct, because we are going to take the values collected from the survey to line it up with the correct image. [00:32:00]
Let's jump across into Breeze FX. If you haven't signed up, you can sign up for free and you'll get 50 free credits to play with, which should be enough to get you up and running with this demo.
Now I had some of these in here already, but let's go ahead and just start afresh. I'm gonna delete these out so we can do it completely from scratch. [00:33:00]
So we're basically blank now. We'll add a new FX config, and we're gonna call it "female black". Now the name doesn't matter so much - it's just a reference. What does matter is this token. This is very important. We need to follow this naming convention here that relates specifically to our survey options:
So we're going to have "female-black". And it's going to be a face swap. Then we're going to upload/select our target image from our face swap images folder - female black. [00:34:00]
Now we're going to add the next one - "female tanned", and this needs to be "female-tanned" for the token. And so on for:
So we've got all the options in there, ready to go.
What we're interested in, in particular, is the URL that it's created. When you're using BreezeFX, you need to copy and paste this URL into the post processing URL field.
Normally if you were just doing one face swap for an event, you'd copy that entire thing in there. And anytime you took a photo, it's going to switch you into that particular player.
Now we want to have the option to switch between any one of these six based on those survey results, which is why the naming of the URL structure is so important.
What we need to do here is copy up to the token bit - just the first part of the URL that includes the main BreezeFX domain, the API bit and our company name. [00:37:00]
We'll copy that and come into the event editor, into the photos tab and enable post processing URL. And we want to replace this bit that says "your API URL goes here" up until that forward slash and paste that in.
So now what we're doing, instead of saying at the end here "male-black" or "female-tanned", we are using tokens to pull data from the survey to create this dynamically. We're now saying that we want the URL to be:
{survey4_radio_gender}-{survey4_radio_skin}
So if I select male and white, I'm going to have "male-white", which will line up with this URL, so therefore it's going to turn me into a white basketball player.
Conversely, if I picked female and tanned, [00:38:00] it's going to switch out this part of the URL for "female-tanned", and then it's going to use that particular URL in BreezeFX.
So that's how you start putting things together. You could just run this demo really just by installing the font and getting set up with the FX part. You don't have to change any of the graphics if you don't want.
But if you do want to change and tweak things, this is basically how you go about doing it.
This is definitely a more advanced use of Breeze because we're pulling together a whole bunch of different things, and it's quite heavy on the use of surveys as well. So I wouldn't expect someone just jumping into Breeze for the very first time to make this their very first [00:39:00] event. But if you can do it and pull it off, kudos to you.
Hopefully this template makes it a little bit easier to get started with and all makes a little bit of sense.
That's sort of the gist of it. That's how we're able to pull all the things that we've created in this user interface and really lean into the surveys quite heavily to build this custom UI.
You can sort of hopefully get a taste of what else you could do with this by adding more detail to surveys and start customizing more things in the app and add more personalization in print layouts.
We've got some more exciting things planned in this respect for the app in the future. I'm very excited to see what people can do with this. But I do hope that this template and this guide will get you on the path to offering these more customized experiences to your clients. [00:40:00]
I think it's a really fun way to do it, and it's a much more engaging way to do it than just picking options from a big list. People really like interacting with the screen and feeling like they are personalizing their output.
If you have any questions, please jump into the comments and let me know. I'm always happy to help, or drop us an email and we'll guide you through it.
See why Breeze is considered the most powerful and flexible software in the industry.
.svg)
