Skip to main content

Designing Apps in InDesign

Lesson 1 from: Designing Apps in Adobe® InDesign®

Jason Hoppe

Designing Apps in InDesign

Lesson 1 from: Designing Apps in Adobe® InDesign®

Jason Hoppe

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

1. Designing Apps in InDesign

Lesson Info

Designing Apps in InDesign

So, since this is the Creative Cloud Design Week, what we do with the credit cloud in design well, a lot of people don't know that you can actually design APS in in design without using code without using HTML without knowing any CSS. Anything like that. And one of the great things is, is that when you have in design CS six or the creative cloud, this will work in both. You can build APS for your IPad or IPhone Kendall, um, and create them in in design, published them either locally or to the ITunes store, share them with friends and do all these cool, fantastic interactive features that you can get in in design. And truly, it's one of those applications where what you see is what you get. You design it with fonts and images and links and rollovers and pop ups and slide shows, and you actually get exactly what you see on the screen, which is fantastic. When was the last time you ever had something like that where you actually designed something that was some type of interactive media t...

hat actually looked the same way you wanted it On the end piece years ago. I used to do HTML and I can't type. So therefore, I can't code because I would have an error in the first line. Multiple errors in the first line, well, within design. You really don't have to know any code whatsoever. It's that simple. If you can lay out and design and in design, you can build on out. So this class came about because there's a lot of people out there that don't know you can actually build APS and in design full on interactive APS and I have been teaching class for several years on how we can do that, using PdF so that you can have an interactive slideshow on interactive presentation. And a lot of people didn't know that either. Well, this takes at a completely different direction. The digital publishing suite has been around and in design for several renditions. It actually came out in CS five or CS 5.5 CS six. They bolster a little bit, and then, with a creative cloud, they have gone ahead, and they've integrated it even further into in design. So if you never knew in design, could do APS or you knew it could do some maps. There's a lot of things that in design can do, and there's a lot of things out there that could make it very confusing. So I'm gonna try to make it as confusing as possible. Oh, no, wait a second. I'm supposed to make it as simple as possible. That's right. Okay, so I have a slide slide show here, and we're gonna walk you through everything we need to know nice and simple or all 4000 slides. This is a two day class, right? Jammed into, what, 85 minutes? So plain and simple. If you know in design, um, you should have no problem getting through the app process. If you can lay things out in design, you should be good to go. So basically what an app is, it's It's just an application that appears on your IPhone, your IPad and can be made available through the ITunes store. And you don't have to publish it to the ITunes store. You can actually keep it locally and share it with friends or clients. But if you want to put it on the ITunes store, you can update it, and everybody can see it downloaded. If you want to charge for it, you can certainly do that. So a nap is just everything you build together and in design as a nice little icon and you got it there in the ITunes store. So when it comes to you actually laying out and in design now we've got folios and we've got articles. Why? They're called folios. I have no idea. But she is. Think of a Folio is a book, and the folio is actually you're gonna build everything in design and it's going to go into a folio. You're going to name that folio, And that folio is basically going to be your amp so your folio think of there's a book and then all your articles you put in are going to be your chapters. And so articles are basically an in design file. An in design file could be one page five page 50 pages and you can have multiple articles inside a folio. So just like you would have a book with a table of contents portfolio would be your book. The articles would be your table of contents and you can navigate through them again. All built in in design, no special knowledge needed. And then we get into the layout portion of it. And the layout is the orientation of the article because you hear a lot of times where websites need to be responsive and mobile. APS need to be responsive so that they'll fit dear IPhone that fits your Kindle that fits your IPad, that Lorcan all the Web browsers. These are things that you need to pay attention to. Well, in design has already kind of helped you along with that with the alternate layout. I remember when the alternate layout came out a long time ago, I'm thinking, Why would we ever use something like this? We're going to design a horizontal and vertical of the same thing. And then, for some reason, I don't know, it occurred to me. It's like you take your IPad, you tilt it, and all of a sudden you have a horizontal and vertical layout. How does it do that? Well, it doesn't do that. You do that, so you make sure it looks good in both the horizontal and the vertical format. So that's basically our layout are layout is the orientation of our article. We lay out everything exactly the way we want to see it in both vertical and horizontal format. And you can see them side by side so you can make sure there's continuity and your design is solid across all the venues. So what is the whole single edition digital publishing suite? You hear this quite a lot and nobody ever tells you exactly what it iss. Well, this is just for comparison purposes here and you can go on to the adobe website. If you go on to the adobe website and you look up in design and the creative cloud, you'll hear a lot of talk about the single edition. You can do this with single edition. That was single edition. Well, what is single addition? Why do we have to worry about it? What is it? Is it better than double Edition? You know, multiple addition, Subtraction division. Whatever. Okay, so the single addition is literally included with your adobe creative cloud subscription. If you belong, Teoh, the creative cloud you have access to the single edition and all the single edition does is it allows you to create and publish APS as many as you want. OK, that's basically what it does. You don't have to sign up for the single edition. You don't have to do anything special for it. It comes with the creative cloud. If you have Adobe in design, CS six, you can also access most of these features through there. But you have to be part of the creative cloud in order to you get your APS uploaded to the Apple Store. Now they also have the Professional Edition and the Enterprise Edition, which is at an extra cost, and those will go ahead and give you a lot more functions and features. If you're a large company and you're doing multiple APS on a daily basis and you want to market those APS and you want update them and you want a lot of other adobe support features, then you're going to get into the professional or the Enterprise edition. If it's just you, you want to create a cookbook. You want to do some type of video. You want to do a bridal shower. You want to dio vacation app to show people what it is. Have it be interactive. You can create 500 of these all with a single edition all at no extra cost to you. As long as you're part of the creative cloud you can publish day and night. 3 65 Okay. What? You can do it in design. It really doesn't limit you. But if you're going to become, you know, a big company and you want to do this with all these other features, you can go and actually see what it is that you can dio. So for the most part, when people say single edition for most users, it's fine. You're not gonna need to know anything beyond Single Edition. It's gonna work for you. And if it doesn't, then you can look into the added subscriptions of the professional or the enterprise versions. So when it comes, Teoh actually getting your app together. Of course, everything's laid out and in design, that's the great part. You take in text and you do images everything else you flow into in design. You make it happen right there. And seriously, you don't have to know any coding you really don't. It's all just moving things around and make it look like the way you want to look. So when we get in here? We start with the production workflow here and with the production workflow Open up our pages panel begin to lay out all of our layouts here, and we're gonna walk you through a quick little tutorial for all of this is not just gonna be a slide show today. We're actually gonna bring you into and design and show you the buttons and rollovers and pop ups in the folio builder. Everything else. Basically, we start with a layout and we use the alternate layout to create both horizontal and vertical version of our content. And you can see in our pages panel here is the icon that we have the same content left and right for a vertical and a horizontal. And we can work with these so we can see make sure our everything is consistent when we're creating our app. The few other things that add to this is the folio overlays panel. And now the folio overlays is basically a fancy way of saying Here's all the functions and features that you can put into an interactive app. So remember, a folio is a book and overlay is basically features. So an overlay is like little additions, and you could do hyperlinks in Crete. A slideshow from multiple images. You can add audio and video, which you could already doing in design for several versions. You could actually showcase existing Web content, so you don't have to know coding, but you can put a place in there for a website. So if you want to have an app that then showcases a website inside that app, you simply specify a window. Put the girl in there, and that website will then show up inside that app and again, no coding. You can type in the U. R L. That's a faras you need to go. We can also use the pan and zoom feature that is so popular on the I Mac, where the IPad we consume and pinch with your fingers. And we can show you how to do that scroll herbal frames so that you can actually have a frame of text. You can scroll through it. You can have hyperlinks, buttons, pop ups, everything within that scroll, herbal text and again, I can't reinforce this enough. You don't need to know any coding any HTML nothing, nothing at all. so basically how we start with this is once we've got our in design file built, we go to our folio builder and you're actually gonna build the folio. You create a folio. All of your articles basically think of is your chapters. They're going to go into your folio and you will be able to test the content that you build with a connected IPad. And there's two different ways we can text text test this file. We can do it right on our desktop here. And we actually have to download the adobe content viewer on our Mac here. Or if you have your IPad, you can plug it in. You have to download the adobe content viewer on your IPad. You have to have it open, and you simply go into your folio builder and say, I want to test this on my IPad. It shows up on your IPad and you've got it right there and you can run through the entire app. Their test it completely. Now here's the thing. If you are on a PC, now is the time to get a Mac, because you will need to be on a Mac in order to use the digital publishing suite at Builder. Okay. And you'll also need an IPad in order to download the Adobe Content viewer in order for it to work. Okay, now, I had mentioned that we have several other devices that we can design for, but this is the only one that's actually built in for ready viewing and testing with in design Creative cloud. So I want to make sure that's very, very, very clear to people because if you're on a PC, you're going to run into some issues. You have to be on a Mac. And if you are going to upload this to the ITunes store, if you're going to sell it or populate it so that other people can grab it, you have to do it from a Mac. So sorry PC users. You know, this is Mac here, Okay, But if you're gonna be doing an IPad anyway, you probably have an IPhone as well, and so you probably used to it. So we're going to get up to you the stage here where we're going to show you how we can have an in design file, how we can do buttons. How weaken do interactive items, how we conduce to folio builder and the folio overlays and basically just do testing right here on our desktop. What we need to know, though, is that there is a whole different world out there. Once we've actually tested and built our app on our desktop and that is everything from here to the thing Apple store or the ITunes store where your app with them go. If you do want to publish your app for anyone and everyone to download. So there is a pdf multiple page. Pdf it is on the adobe website here, and it is the step by step guide to publishing IPad. APS. You have to read this because this is not the kind of thing I'm gonna bore you within a 90 minute segment. I know we talked about doing an interactive class here, and I think it's going to be coming up in the next month or two. It's gonna be a two day class. We're gonna walk you through all of this. I have to tell you, don't try to attempt this yourself by just going in there logging in, hoping you're going to do this because you have Teoh getting adobe log in, which we'll talk about. But then you're gonna need to get an apple log in, and you're going to need to get certificates from Apple in order to become a developer in order to publish this stuff. Then you'd go through all the certificate stuff, You get your certificates, they have to live there. You have to do a whole bunch of other work in order to make your app so that it will fit all the different formats, sizes, previews, everything else. And then you submit to the the ITunes store, which can take up to 4 to 6 weeks, and then you publish it and you can update it. So there's a whole field of work that happens after we actually build the entire AMP that is put through here in this, and I'm gonna give you a quick little preview of this as well. This is nothing special. You could go to the Adobe website and downloaded here. This is exactly what it looks like. Click on it, go through the whole thing, and it's going to tell you everything that you probably didn't want to know because this will take is long, if not longer, to get through this process than it does to actually build the up. Once you get it set up, you have your adobe I d or your apple I d and your certificates there, then you can publish on a regular basis. It doesn't speed things up in their approval process, but it allows you to streamline the whole thing. So there is quite a lot of work and set up time to begin with, So I'm sure people would have questions about that. So basically, once we create our in design file, we're gonna need access to the digital publishing system. If you are in design, Creative cloud user you'll already have on Adobe Log in there, which shouldn't be an issue if you're not and you're still using in design, see a six. You can go on to adobe and you can create an adobe I d. You can also do that through the Folio builder as well. We'll ask you to sign up and we'll show you that too. But once you have that you have free access to the digital publishing suite Now not everybody that has CS six will have the digital publishing suite. So what you need to do is you need to go under the help menu and in design, and you need to run your updates. There is a roughly 80 Meg update for in design that is going to download your folio builder in your folio overlays so that you actually can build the apse here. A lot of people will look at CS six and they're like, I don't have that. I can't do that. Well, that was a development that came a little bit later after CS six. It's an update. Make sure you run your updates. Great thing about Creative Cloud is that it automatically runs the updates for you. So when there's updates, they automatically happen for you. Okay, So if you are missing the folio builder in the folio overlays, run your update and they're gonna be there for you. So don't freak out about that. They're there. So getting started on setting up your in design file, as many of you probably noticed when you create a new in design file Now we have different intense we have for print and we have for digital publishing and we have for Web. And when we start off with creating a new in design file standard dimensions of an IPAD 10 24 by 7 68 RGB images for display don't have to worry about much of anything else. That's pretty simple. And when we started in design, we're going to show you exactly how simple that is. But that's just a really quick overview of what we have for the in design vile. Okay, so with that, we're gonna jump over to in design here, and I put together a quick little layout here for my bike share program. I'm just gonna walk you through really quickly on how this was set up to begin with here. When I go under the file menu and I choose new file I was talking about the intent and the intent here. Is it for print? Is it for Web? Is it for digital publishing? Digital publishing really doesn't change much. The difference is is that it changes everything. Two pixels because, of course, being the Web or digital publishing, that is how everything is measured. And we have our presets here for a page size IPad, IPhone, kindle, fire, android, all that you can create any other custom sizes that you want. If you want to build for any other device right there. We don't have support for a lot of the other devices through this. So you'd actually have to load the app up and then test it on there, make a little bit easier if you have an IPad. And that's why it's the default right here. And the default is horizontal. 10 24 by 7 68 You really don't need to change anything else unless you want to add pages. Which, of course, you can always dio. So once we create that file, this is what it comes up as. And of course, the rulers are all gonna be in pixels. So what I did is I threw together a quick little file here on something that I wanted to make a nap out of. Now a napkin, Be one page. Could be 20. Pages can be 50 pages, could be 100 pages. Think of it very much as an interactive website. But you don't have to know either coding. If I said that before, I just want to make sure because I'm sure somebody saying Yes, but I don't know coding. So far, so good. It's like here's a good quote, the only building I like. It's chocolate coating. Oh, that's good. Okay, so with the interactive portions of in design here, there's three different sections that I want to show you. Everything is going to reside under the window menu and under the window menu. We have our interactive portions for this particular class with building APS here. What? We're going to need to know what we're going to have to have our buttons and forms panel up as well as our object states. Now, if you've never used these kind of things before, they can be slightly daunting because there are a lot of things that you can do in the interactive side of things. And for those of you who took my three d and design class a few months ago, remember if we touched on that very much. But I know we did it in the abbreviated. Nothing of that because we knew we're gonna dio an interactive class. Exactly. I have a knack, a bat class where we use acrobat Teoh build APS and we use a lot of that functionality from in design using the buttons and forms panel and the object states as well. So these the two panels that we're going to use while we're in design here for this brief overview, We're also going to go into the window menu and you can see we have our folio builder on our folio overlays. So our folio builder is going to be our window where we actually create the name of our app or folio. Thinking of this as our book right here. And we are also going to go ahead and call up our folio overlay panel, which is going to be all of our functionality in regards to our folio builder. Okay, now, some of these may kind of cross over from the interactive portion to the folio builder portion here. So what I'm gonna do is I'm gonna focus a little bit on just building the interactivity using buttons and forms and object states here, and then jump over two additional features here using folio overlays. We can mix and match and put them together very easily. You'll notice in our folio overlays, we have a hyperlinks panel which we can do hyperlinks. It's also under our interactive panel here. We also have hyperlinks here is well, so they're gonna work exactly the same. But the folio overlays panel basically puts everything together that in design figures is gonna be most specific to you building an app. Do I need to use buttons and object states? Absolutely not, but this just helps the whole interactive portion of it. So we're gonna run over just a few of these items here. We can't dio a huge in depth piece right here just because we don't have all that time. So what I want to show you here is a quick little view of my window and I'm gonna turn all in all of my frame edges right here. If you were not a layers person and in design, this is a great time to start using layers. And the reason why is because we can get very lost very quickly in a file like this. Even a very simple file of this nature can be quite daunting because I'm gonna have all of my content and then I'm going to have all of my interactive content and that interactive content in many cases can be completely invisible Teoh designer to the user. And we need to make sure that we separate those out on layers. I'm gonna show you why. So how I basically go about doing this as I lay out my entire content and in design, And then I begin working with the functionality of this bits bit by bit. Now, basic items in here. If I want Teoh, click on a button and have it do something. It's gonna become a button, okay? And a button conduce many different things. And I've got buttons in here that I can turn this into a button. If I want Teoh that can open up something and go to the next page, it can open up a Web site. Whatever we want to do for a button. If you click on it and you want something to happen, we're gonna turn that into a button and over in my buttons and forms panel here, basically simple is this. If you want to create a button, all you have to dio is take any object that you have. It doesn't matter if it's a text container traffic container line something that has fill or stroke makes no difference. As long as it's an object, we're going to turn this into a button that's then going to have an action applied to it. And it's a simple is clicking on her object, going to the very bottom of our buttons and forms panel here and simply converting it to a button, a button that can then be turned into something. Now you'll notice that we get a dotted line around our object here and also in the lower right hand corner. We see a ghost, a little image right there that shows little hand with a button on there. I need to turn off my extras here, my content grabber. There we go. So I have turned this into a button, and a button can then have an action applied to it. Well, if you're on a Web page and you click on a link, you assume that that link is gonna go someplace. And that's what a button is going to dio about to turn into a button in order to establish some type of action. Once I click on this button, I can then go to my buttons panel here, and I can add a specific action for that button. I click on this and that button can go to a destination. First page, last page, next page show or hide buttons and forms. This is cool. We can show things that are hidden. We can hide things that are showing. So if we have a navigation panel that comes out, we can go ahead and navigate, and when we're done, it could go back in. And this is how we said via in action, we can go to a certain page. We can go to a certain state. And no, this is not like going to Montana in the middle of our presentation. We're gonna show you a quick overview of object states. So these are a whole bunch of actions, and actions are just simply you click on it and so on, release or tap. So if you're doing this via a mouse on a pdf, you click on it, or if you're tapping on your IPad there, or you can go ahead on focusing on blur and navigate through your document. So there is a button we can create an action. Go to the last page of the document. There it is it's all set up. If I test this there, I click on this. It would take it to the last page of my document. Buttons can also be used for navigation as well. So if you wanna have navigation buttons forward, back and home, there is a fantastic list of sample buttons under the drop down menu of our sample buttons here. And this will call up all these different navigation buttons here that you can use top bottom left and right rollovers. Things like that Button's for any type of actions. These are just pre made buttons. That's all they are. Is there just nice little colorful buttons that you can put on there and apply in action to? But you can see we have our whole list of arrows and such that we can use his navigation. Just because they're going left and right doesn't mean I can't turn them to go upto home or down to the end. And it's just like drawing any other shape here. It just gives you a whole bunch of sample buttons right there. What I really like about buttons is this. I have what looks like a set of menus right here, and this is going to be my roll over. And I absolutely love these items because, like, you see on a website there, when you roll over an item with a mouse, it will. Actually, you can actually have a do something. It could glow or change color, or the fund can become bold. So you know you're there, and one of the things we can do with buttons and forms is we can have different states of appearance so we can have a normal appearance. Or if we're rolling over with our mouse, we can change the appearance. In this case, I just made the font bold so it shows up. I could reverse the color. I could put a glow around it. You see those buttons on Web sites all the time. I could also have something happen on Click, where it changes color completely or changes the font, whatever it may be, So I can have multiple states within a button. It just doesn't have to be a static button where you click on it and you don't really see anything happening. You can actually make that button itself interactive, along with actions as you go so pretty sweet to be able to learn all about buttons. And these were all set up his buttons as well. It's a giveaway because whenever I click on these, I can see that dotted line. So I know that these buttons have something happening. Buttons are pretty simple. Once you get into buttons and understand buttons, you can go through and have a lot of fun. It's when you get into these really cool object states, which makes this a lot more fun. So I have my menu items up here and from these menu items here. I want to create a drop down menu or pop up some place. Well, what I have set with this particular button is when you click on this button or when you roll over this particular button, it goes to what's called an object state. But what is an object state? An object? States can be really tricky because object states kind of exist in their own little world. Okay, they don't necessarily show up his layers. They show up on Lee in the Object States panel here, which is part of our window menu. So with objects states here, I have this. When you click on the about menu, I want this little panel to pop up just like we'd have a navigation button on a website where you hover over something, you get the little drop down menu and weaken scroll through the drop down menu. Well, what I did is I created a container for my object, and when I click on the about button, I told it that it's going to go to an object state. An object state is nothing more than an object that has different ways that you can view it at different times. So when I went in and I created my object here, I went ahead and made into an object state by coming to my object state and clicking on it. My initial state, when people normally view it, is totally empty. But I have something else hidden in there so that when you hover over the about button, it will go ahead and show this portion of the object state, and you could have multiple object states, and these objects states can contain anything. These aren't necessarily layers thes air, just like hidden things that are in different states. Okay, so you can think of in his days of the week we're on Monday can only see what's on Monday. So while this is an object state here, it doesn't get activated until I click on this button and it's going to go to this particular state and its state number two that is going to show. So I click on this button here and there is my about drop down menu. There is my normal state, which we wouldn't see normally. And there's my secondary state and creating these it's just a text container with text in there and a slight little fill of white so that it kind of gives a slight little opacity over them. And if I shut that all off, you can see there in that object state. How that white kind of hover over is that button, and it's just an object state. There is not visible there. It's turned on, but we need some type of action to show what that status so cool these air Great. These can also get very complex. The thing about object states is that you can only find them in the Object States panel so you can click on this box and say, Where is everything? I don't even see it. You can go to your layers panel here and open up everything right here. And it's not going to show everything until you actually go to your state than it actually shows everything inside that state. It's kind of tricky, takes a little bit of time to getting to get used to that particular portion of it. But it's great because you can hide anything. Anywhere. You can click or hover over any of the buttons, and you can have anything pop up. And this can be multiple objects in this state. I can have five different states in here if I want Teoh, depending on what I hope for over what I click on and they all show up in this little window. It's quite cool can be quite complicated. That's why I put everything on its own color coded layer so that I know any time that I have object states. They're always going to be on this particular color layer. If you're not good about file structure. This is one of these things where an hour into this, you can get completely lost. I know when I build these, I find a real hard time. If I have to go back 20 or 30 objects to find out how my thought processes, it may not be a bad idea. Even map this all out because if there's things that you can't see and you don't know how we're gonna be able to get to them ever so object states so cool, so easy and you can actually have them pop up just through the buttons. So a few other things that we can do with object states as well is we can actually create a really cool slideshow. Now, slide shows can be done in a couple different ways here, and basically a slideshow is nothing more than a series of objects put together so that we can scroll through them. And what I have here on my side is I've got a whole bunch of images right here from my bike share program, and I want to create a slide show, and a slide show is nothing more than a window that is going to have multiple objects show up in that window. And so, technically, this is what's called a multistate object That's one object with multiple images and, you know, using in design. I can't put multiple images into one container. One image, one container. So what I do is I create containers that are all the same size, and I can put all of these together. And if I just put them here and I grab all of these and then use my allying feature So if I go under my objects right here object, use my line. Aiken center everything vertically and horizontally right there to align them vertically, horizontally. Put them all together. Here I can create a multistate object which becomes a slide show, and you can see with my object states right here. It says click the new button to major each object a separate state or option to keep them all in the same state. So if I create a slideshow here, how do I get to actually play this slide show? Well, part of the folio overlay here, part of the APP portion or the DPS portion of this allows me to go in and actually create a slide show. Now, if you're not used to any of this stuff, one of the cool things is is if you click on any of these things in the folio overlay, it'll actually give you a brief description on what you can do or how to build what it is that you're doing. So I'm gonna click on the slide show here, and it says, create a multistate object using this and view the slide show. Okay, so I have my multiple objects here, all put on top of each other. I can go in and create a new multi state object and with my slide show here to do that. So there's my multistate object right there. Selected them all clicked on my new object here, and I'm gonna call this my slide show. And here's all my different states. Okay, basically one object. But with all the different slides in the slide show, it's one object with multiple different views of it. Once I do that, I can go to my slideshow here actually going to go in. And so there it is and got my multistate object right there. Claire's slideshow right there. So I click on my slide show and now in my folio overlays panel here I get all the options to play my slideshow If you've ever used this before and we before we have the app builder. What we have to do is we'd after you have to create buttons here so that you press play and it tells it to walk through the entire state here. But now that we have our folio overlay and we create this multistate object, I can go ahead and I can have this auto play. So when they open this up in my app is gonna auto play or I can have it tapped to play or pause. I can also swipe through it as well. Or I could have it automatically go through every two seconds and I can have it. Faiza go across and Lupas Well, so if I take this and I put this into my object here on, I'm starting to run out of space here on my desktop and I decide that I'm going to park that right here. I can size that anyway, that I want to make that larger, smaller that becomes my slide show right here. And when I test this on my app, whatever I've done in my folio overlay to set the preferences. It's a slideshow that easy. Nothing else needs to be done. It's that easy. People say. Well, there's got to be something. No, it's really that easy. We've got a lot of other fantastic features swipe to change. The image is stop of the images hide before playing, playing reverse, a whole bunch of things that you can add to it. But that's my slideshow. Just like that. We have some questions there. Should we continue on here? We got We have a few questions. We throw a couple your way. That sounds great. Fantastic. Looks like we're gonna start in the studio audience. How are you able to rearrange the order in which the slides slide? Show images, plays that just how you stack and dragged Emery able to do that in the folio? You can go ahead, and it's literally works like a layers function. I could go in, and I can literally reposition these inside my object states here. It later labels them one through four, but it doesn't have to play in that order. So just like layers, I can move those around and it can play in any any order that I choose so if you haven't set them up in your stack the way you want to just reorder them here in your object states. So these objects can we convert them into buttons? I mean, okay, there's a single object you can, but if they're meant multiple objects can gun with him, well, this we wouldn't actually turn into a button here because because this is a slide show. It's kind of like the end eso We could create a button to play the slide show or stop the slide show here. We probably wouldn't have buttons that are inside here we could where you could have a slide show that comes up and then you could have a button inside here that does. Something probably wouldn't do that in this particular case, but we can have buttons that will hide or show or stop or play the slide show cool and from the Internet out. A question about your talking about resolutions earlier has not compatible with retina display. Well, here's the interesting thing with retina display, because when we started this up and I knew this would come up here and that was with me bythe from the chaperone. Yeah, retina display actually is the exact same size. Okay, so it takes up 10 24 by 7 68 What we do is we actually build everything twice the size. Okay, so the images or twice the size and everything, and then we reduced them down. And so we basically have twice the Resolution four retina display. So we actually, technically end up building the same IPad size, but just twice the size images reduced down. So it's kind of a weird thing. We don't actually physically build it twice the size physically way, actually, twice the size pixel wise. And then we put it into the exact same layout. So we have standard definition SD and HD. And when we do the full on class here, when we actually upload the apse there, you'll see that we have both SD and HD versions, which require pictures for each of the icons and you'll notice in the SD versions you'll have icons. They're like 54 by 54 then the HD versions. You'll have one away by one late, same thing. It's just double the amount of pixels because then it just packs them in their higher resolution, so that's basically what it is. Thank you don't want to do that. You can just keep them all standard definition, and your retina display will just not display quite a nice great Terry from the chat rooms is asking. And actually we have a couple questions like this. Can you clarify if people must have creative cloud to create and publish APS to the Apple Store? I know you touched on this first thing, but you have to be part of the digital publishing suite. So if you have in designed CS six, you will need to download the DPS update and you'll need to have an adult. We I d to get in there and do that as well, and so you'll be able to do that from there having the creative cloud. Basically, when you log into the creative cloud, it's the same log in for the digital publishing suite right there. So since this is Creative Cloud week, it's like we'll tell you yes, you have. Teoh, technically don't have to have Teoh, but it's easy if you dio absolutely, once you have the creative cloud, then once you log in your good to go cool and goes, I would like to know, Are you able to create websites using this same workflow? Well, this technically isn't a website. This is an app. It functions like a website, right? I don't know the coding because I am not a coating person. Um, I don't know how the back end looks, but I'm going to assume that there is a lot of code back there and then similar to a website. I wouldn't be surprised. A lot of this is HTML five that's there. So if anybody wants to chime in on that great don't know cool and then really quickly can you just clarify for a few people in the chat rooms again that Thebes vices that you can create for I know you mentioned Kindle Quick way of doing that is when you go in and you go in your digital publishing intent here. IPad, IPhone, kindle nook, fire android. Those are all presets, okay? And these are all things that we know. The coding, or the way the Absar developed here will definitely work on those of supported ones. I am sure there are people out there that know workarounds that once you build the app. You get somebody that can work on the back end there that can edit the code in order for it to work and other devices as well. But this is basically the the standard of which they go for just, you know, ipad, android, that kind of stuff. Great. We had questions about android and everything. So you just hit it all. Thank you. Beautiful. Another thing I want to show you. I personally love this scroll. Herbal windows Scroll, Herbal windows air. Great. Because you want to go through and you wanna have something? I don't want to have a drop down window that I have to scroll through. I want the window to be static and I want to be able to scroll through that window. So what I've done is I've created my scroll of a window area just by drawing a container on by in my in design file here. And then I've got some content over here that is actually in its own separate container. And what I don't do it. I don't just paste the copy into my scroll of a window. What I end up doing is I end up taking this copy here, and I'm going to make it so that it appears in my scroll herbal window kind of inside there. Open it up until I get down the very bottom here. And this is my content that I have. So I'm going to cut that out of there, select my scroll oval window, which it isn't yet, by the way. And then I'm going to edit and I'm gonna paste into so that now I've pasted a text container inside a container for the U. N. Design users. It's like, Wait a second. Why would you ever do that? In this case, you would, because we create a container that then has all the directions on it and what's inside is what we can see. And then we go to our folio overlays here and because it's a frame and there's Texan it it's knows it's a scroll herbal frame, and I click on that and by default, it set off. So it's just static. We wouldn't be able to scroll if I go in here, I can say OK, how do we want this to scroll horizontally vertically, which is great you want you have Ah bullet list there while you want to do it left to right, you don't have to scroll top to bottom. In this case, I do want to do it vertically. And I don't want any scroll indicators on there because I want to make this look a slick is possible and it's all vector because it's all types. So I wanted to render nice and clean here, and I've just built myself a scrotal window. I also throw this great little fade right here in the bottom to make it look kind of cool so that it looks like a scroll oval window because I don't have any other delineation between this and my background here. But if I put that little fade bar, which is nothing more than a bar of color and use the feathered radiant just to cut it off, you know nothing special here. It's just a box, Okay? Nothing freaky people are like, How do you do that? Just a box. The fates. We can create a box that fades. It has nothing to do with the interactive there. It just makes it look cool. So with that, we have our scroll of a window that simple right there. If you want to put media in here, we have audio and video. It's a simple is going under file place placing audiophiles videophiles in there as well? If you wanted to launch a play, we can create a button that then activates an action that will go ahead and do that. And of course you saw under buttons here. When you go into a button, you can go ahead on click. What do you want to dio? What? We could go to some place. We can open a file, you know we can play something would go to the u. R L play a sound, play a video. There's video in there. We point to it. There you have it from Daniel in the chat room. Thank you. She wanted to know about playing audio segments. It's that simple. And I don't know if people have ever imported audio and video into in design here, but it's very easy. And the last version in design, CS six, they actually went through, and with their interactive portions here, they actually have their preview now where you can actually see these things actually happen. So before the app building really became quite awesome in here. The only way we could preview this if we were doing like an interactive pdf was we have to export. It is an interactive pdf and then test it. What? When we do the SWF preview here, you can see how this works. And this is just my preview when I'm just going to open this up large on the screen here, I'm gonna show you just how this works. So I hover over that menu. Look at that. So when we hover over that little object state shows up right there and here is my video right here, which we're going to weaken. Go ahead and play as well. So if I press play, we should be able to go through and make sure I'm previewing that right there. And we have our scroll herbal window as well, which will have to show you in our application. But that's basically how it works. We can see those buttons. We roll over them, they get bold and this doesn't preview absolutely everything Okay, this previews just the interactive elements here. All the stuff that we do in our app builder, we have to preview in a different way. But you can see those buttons and how they work. Really slick. We jump in with a quick question. Absolutely So Mark Mayo asked the question regarding rollovers about doing rollovers for IPad or IPhone. Exactly. They won't show up because you don't generally don't do a roll over on there as well. So what's cool about this is that and this is something that I'm actually working on for a client. We're gonna be doing both interactive, PdF's and APS as well. So it doesn't make sense for me to build two totally different files. So in that case, with roll over, you wouldn't see the roll over on those particular buttons. But when you click on them, you know, So on this, I could say on click or on roll over in this place. If I'm gonna do the app here, I would probably want to say on Click, then is going to go ahead and is going to go to that particular state there. So I want to say, Go to that state and I choose that state, which is gonna be right there, and that's what shows up. So that's a great question. You're right because there's certain things that don't work because we don't have a mouse on the IPad. Just a quick follow. So when you do click that dropped down will appear and they like that next. Subcategory? Yep. Great. Thank you Exactly. I was just gonna say, Jason, that I think you're psychic because you're answering all these questions before we get a chance to, but Ste. Photo Victor in the chat rooms, it's wondering when you would use this versus Acrobat to create interactive Pdf. Well, as you know, when you use the IPad, the pinch and zoom and the scroll and the swipe feature is fantastic if you're doing a presentation and a lot of and I'm actually going to a class here on presentations, a lot of times people use a power point presentation where they use transitions to make it look interesting. If you did something like this, you could have a fully interactive PdF in a room that makes it look like it's a website. You don't have to know any coating whatsoever, either. Click on links you can use hover over scroll clicking sounds when you click over buttons, things like that. Great for a pdf, but for a nap would be kind of boring, you know, because we don't look for that kind of interactivity on a web page. But on an app, we look for that interactivity where we can use this white feature weaken Swipe four weakens right back. We can scroll up and down. We can pinch and zoom. So that's where you go ahead and differentiate the difference there. If you want to impress your friends, you know you can send him an interactive Pdf. But if you really wanna impress your friends, send him a Napa's. Well, love it. Yeah, right. Thank you. Certainly. So now with the folio overlays here, there's lots of stuff that we can dio. And here's all the different things Image sequence, audio video, panorama, Web content, all this stuff we showed you a couple with a Scrabble frames and the slide show here. But I'm gonna show you really quickly on how we do a vertical and horizontal format before we jump into. You actually see how this tests so under the window menu here and we're gonna go to our folio builder on. I'm sorry. We're going to a pages panel first and under a pages panel here. This is where we can go in and we can actually do our alternate layout on the alternate layout. Right now we have horizontal. Great. If IPad is horizontal. But if I go under the pages drop down menu, I can go ahead and create an alternate layout, and that alternate layout will then go ahead and oriented vertically. So the name is going to be IPad V for a vertical h for horizontal, and I go ahead and click. OK, so now, side by side, I can see my vertical layout right here so I can move these items around where I want them to be on the page for my vertical layout so that everything works. And then I can go back to my horizontal layout once I have all my content in the rate part is is that this is literally an alternate layout and you'll see that when we went in and we created the alternate layout here that it was going to keep the links to the stories and all the copy text everything else with that as well. Now these are two separate layout step. So if I make a change on one, that doesn't necessarily make the change on the other, these are two different layouts that allow me to view them side by side so that I can match everything that I'm doing content wise. So there's a horizontal. There's the vertical, and I would have to manipulate this. I changed the name here. It does not go in and change the name here. I would need to change the name here on as well, but it gives me the ability to see these side by side so I can actually work on this content. So that alone take some time to be able to go through and build both the horizontal and vertical. And this is why you get really good with your file structure and your layers to make sure all this stuff states together. Because, as you can see, there's a lot of things going on in this file with all the links in the chains and all the little button icons, everything else, and you can get lost really quickly with that. So with that alternate lay out there, that gives me both my orientations. So I have a very responsive app with virtually anything that is gonna be displayed on some maps you'll see, or only vertical summer only horizontal. That's a choice that you have to make. If you do both vertical and horizontal, you can go ahead and build it. And when you actually export this, it knows that separates out on the vertical and all the horizontal. And when you tilt it, it just loads all the vertical for all the horizontal. You don't even have to worry about that. If you build that and you have an equal number of horizontal and vertical pages, it figures it out. Not a problem at all. So once you get to this point where you've got everything done and you want to see how this actually looks, well, that's when we're going to go on your folio builder. And our folio builder here comes up and there's my folio builder and I'm going to log out of this sign out right here, and it tells me clicks like new to create a new folio Professional enterprise. Customers signed into the Double Dobie Digital Publishing suite with your adobe I d. And this is where you can keep track of your money. How many people have bought everything else? Since we're using the single edition here, all I'm going to dio is I'm just going to go and I'm going to create a new folio. This is my new book. This is what a minute you begin to publish right here. And if you did want to sign in or given Adobe I d If you click, the sign in here is going to launch a website there and you actually log in and put in your password here. Or you can create an adobe I d right from there. And then you consign in. It doesn't cost you anything to creating an OBE adobe 80. But again, if you have creative cloud, you already have that adobe I d to go ahead and sign in. So to create a new folio here to build my app I'm gonna click on the new Folio icon and there is my new folio. So I'm gonna call this my bike share. And what's my target device? Will the IPad 10 24 by 7 68 What orientation do I want? If I specifically want one or the other. I have to choose that or I can have dual orientation. And I need to choose this here. I can always go back and edit this, but for right now I'm just gonna go ahead and choose my horizontal format. The format that I want is going to Pete be PdF. So the vector stays vector. The raster stays raster and everything looks good. Then I have to go in and I actually have to create some type of poster or cover preview. If this is gonna be a book I need to cover for this so I'd have to go ahead and create a J peg or a PdF or something that I could use again. It's gonna be 10 24 by 7 68 That's my size. Don't even have to think about that right there. And I just simply locate that and put it in there. That's going to show up when we launch the app after being see little icon, This is what we have. So I didn't create one for this because I only have one page, so I'm simply going to click. OK, and there it comes. So there's my folio right there. Bike share 10 24 by 7 68 That's my folio. That's my book. There's nothing in it. Okay, so now what I'm going to do is I'm going to click on this, and I'm now going to add articles to this. I'm gonna go back into my pages panel right now, and I'm going to get rid of my alternate layout here just because I don't want to have anything messing that up. So I'm gonna go back to just my single page layout right there. And because I have this open right here, I'm going toe add this to my folio. And again, I could have 30 different in design files. Each in design file is an article. Just think of it as a chapter one. Page 5 51 100 pages makes no difference. I go ahead and I click on the ad article and I'm going to add the open and design document right here. It opens the whole thing. What's this article? I'm going to call this the bike share in trail, and again, it's gonna be a pdf smooth scrolling. I can go ahead and it's going to be horizontal orientation and Here we go. Click. OK, I'm gonna continue. I was gonna add it right to my folio builder. Here. Here is my first article and my folio getting dangerously close. There it is. It's tough now. I do have to tell you that this is uploaded. Begin to the cloud. Okay. I have noticed on many occasions that the larger articles, the longer it takes when you are doing hundreds if not thousands of articles had a project that we probably uploaded well over 1000 articles and the Internet gets slow. This can be a real hassle and can take a long time. And it will go halfway through. And then it will stop and could be really frustrating. Fast connection hopefully works really good. I found out that after two o'clock in the morning, everything uploads really fast because nobody in their right mind is up after two in the morning. But it happens. So now that I have my bike share in here, so there's my landscape layout for it. There is my folio. There is my article. And Aiken, go use the drop down menu under the right hand side here to go to the article properties to go and actually put in the title of my articles here. Whatever metadata information that I want to have in their everything else horizontal, vertical, everything else So I can add those items right there is metadata. And this is going to come up on your IPad is kind of your header with new tap on it. There, sitting kind of uses a table of contents or an outline view so that you can actually go through with your IPad instead of scrolling through everything you could get an outline view of every single article in there is a quick little table of contents preview. Then at the bottom here, I can go ahead and I can click on my preview button right there. And if I had my IPad hooked up, I would have to have my IPad hooked up and the adobe preview app open and running in order for this to work, so you'd have to download your adobe content viewer to your IPad. Launch it on your IPad. Make sure your IPad is running it. It's not asleep. It's connected. And then I could go through and click on the preview preview on the IPad. If you don't follow all those steps, you will not go and actually have that file running. Okay, so now if I click on the preview here, I'm going to click on this and preview on my desktop. It's going to prepare my folio here. Open up the adobe content viewer. Look at it right there. Okay, so my slide show right here should go ahead and work. There it is. I clicked on it and it started it. I had it change every two seconds, and I also had a loop, so it just loops right through. Now, how do you know how to start and stop it? We don't have any directions on there, but with an IPad, what do you do when you see something? You touch it? Of course, it's the wet paint syndrome. Is it really wet? So I don't need to give her any real instructions here, but the slide show begins to play. Based on the parameters that I have here is my scroll of a window as well. So I can scroll through that, which is kind of cool. See, that is right there by about menu. When I click on this. You'll see that I actually click on everything right here. And this is what you're going to see on your IPad. When you click on certain things, you can actually go back to the beginning. Here you can see all of your list of items that are in there as well, or go back to all of your folios. So with this I can see exactly what's going on inside my IPad. Justus, if it was tested on my IPad here, any edits that I need to make that I'm gonna go, and I'm going to make sure that I make those edits right there. And this is just a content viewer. If you don't have this content viewer, when you click on that, it's gonna ask you to go ahead and download it or update it. But when you're part of the creative cloud is going to do all that stuff automatically. So I can very quickly and easily see how this all works. And my about supposed to work here. So I need to go back here, and I need to click on my about button here and find out a lot of my about button isn't working one of my buttons and forms here. So on click, we're going to go to that state to which is the drop down menu. There is my object states. If you have any questions there, we can certainly figure that out. So there's my state one state to so that should work right there with that button on click on tap. There we go. So because there is no click on an IPad, little nomenclature issues there, tap or click two different things. And so that's a perfect example of how that would work. Then what I need to go do is I'm gonna go in here and I'm going to go to my article right here. And I want to update my article because I made a change. It doesn't automatically know that I made a change here, So I'm gonna update this. It's going to update it because what's frustrating is you make a change. You go to test. It's like, Why isn't it working? You got to go win and update it. You have to go into your folio than into your article and update each and everyone. It's updated. It's good. Now I can go back to my folio here. I can go ahead and preview this on my desktop. Hopefully we'll upload everything. And now if I paid attention to those little nuances like tap and click, if I go through here, I probably have to have my IPad to tap in order to do that, because I'm testing it here. But I'm using my click button. That's probably why it's not working. But this is how you go through and build APS using in design that simple that easy that quick You built that pretty quickly like, yeah, like 40 minutes, That that's fantastic. It's, you know, and it seems really tricky. I cannot stress enough about what actually goes on in this file here. Teoh actually see everything that's going on. I got my background right here, and I've got all my text. So I put all of my static items on one layer all by itself, and that layer simply exist right here at the bottom with all of my content. And then I put all of my buttons on their own separate layer and all my object states on their own layer as well, because when I have object states they show up in my layers panel, but they only show up for that specific state. If I've got a four object state here and I go into my layers panel If this is state number three, only state number three shows up. So it's really confusing when you get into using object states here. Another way of doing this when we actually show you the class here is you build everything instead of turning items into buttons. What we do is we just go through with the very end, and we do but overlays on everything where we just create a button that sits on top of our object so that we don't have to turn an object into a button and worry about the multiple states of that button. I would just go in and I would create a whole new layer on top of everything, and then I could just go in and say, OK, here's my buttons, and I can take this, turn this into a button here and have it navigate through. The huge advantage of that is, is that you can copy and paste those buttons and change very quickly without going in having to edit the content of the buttons of the direction here, so it makes a little bit easier to do it that way. And when we do this full class here, we're gonna show you a couple different strategies on how that can work for you on how you actually build. But it's quite amazing to see all of this content right here that you got in here so that you can go in and make it all work and happened. If you could build it in design. We got nothing into code. We never saw any code or anything else. We were able to go ahead and see how that works. I know there are a lot of people, well, a few people in the chat rooms who had built maps before, but not this way. They're kind of sad that they didn't know about this. I think I have to say the coolest thing is the multistate objects, and it can be really confusing, but it could also be the coolest thing. You can have something where you have a little icon or something like that and you click on it and it can be vein very large and you can also have navigation set up there where other things show up and you can have complete and total different windows show up within a window inside an object state. So if I wanted to click on this, I could click on this. It could become large. I could have the author and the photograph everything mask out the entire screen. Just as one object state, I could have a back button that would bring me right back, hide everything, and I can actually control the fade levels on how fast they come in and fade out. And it's almost like creating this interactive movie in here and almost all of its done just using the folio overlays here. Image sequences where you can go with it and just create a sequence of images. Panorama is which are really cool. You could literally look top bottom, left and right all around with panoramas, Web content, Web content. Here, you want to put something in here? Here's a box and I want to put Web content in. I click on this. I've already done this, but I went and said, Okay, create creative live right here, and so I'm gonna go ahead and do auto play. So when I see this and I look at this preview here, the creative live website will actually come up inside my amp. If I'm hooked up Teoh Internet access, I can see it all the links work and the entire website functions like the website does just by saying here is the place where it's supposed to pay. So I don't need to take a static picture of the website. I can actually have a full working version of any website as long as I have a u r l to put it in there again. No coding whatsoever. Uh huh. So speaking of coding, Jason Yeah, and no coding whatsoever. Joke A. Would like to know if you know whether it's possible to actually edit the application code within in design. Or would you need coding software like Dreamweaver such and even if you had remover, would do you know if there is a way to edit the code? There's always ways to edit the code. I know one of the things that with e books, and I'm sure that this has some of the similarity can't be guaranteed, But one of the things that a nap does is actually just create a zip file of all these items. And I use years ago when we were doing any pubs there, it was very difficult to get anything toe look the way on screen, as was gonna look on the device. It was almost impossible being basically, you could do flush left, and that was about it and, you know, rough CSS for font size and headers. But springing was an app that allows you to unzip that file without damaging it. Get in there and edit the coat, and I'm sure there is. I'm sure there's websites now that you can actually go in, and you can edit the code to fit older Androids things like that to make it work. And that's great. But because the whole point of this is that you don't have to use code, I don't bother to look at the coat. Would I be interested in that? Oh, absolutely. Because there's always and tips and tricks that you can do for certain things that you probably are not able to do or third party items that you are able to put in to be able to go and edited to further enhance the content, which makes it always fun and exciting. So few more questions here from the Internet. People are really digging this Terry is wondering about designing an app across multiple devices. So you have Teoh recreate a nap for every different device you do. Because here's the thing. Just like we have a horizontal and vertical layout here, the alternate layouts there each layout is its own unique layout. Okay, so if we were going to do this, what I would do is I would take this entire file and then I would go in and I would change the page size here, Teoh, you know, be something for, like, the Kindle nook or fire. And it's going to repurpose that page size and then I would go in and I would tweak that Now if I were really, really, really thorough about what I was doing. What I would do is I would get every size that I want, and I would actually create a layer here on overlay, basically not to be considered folio overlay, but just like an overlay, like a transparency here on my layers that would actually have all of the different sizes laid out in red so that I could keep everything within a particular bounding area and then anything else that they were going to design, like a background or ancillary items. They're decorative things or supporting elements would then fall outside those areas so that I wouldn't have to go in repurpose everything every single time and redesigned the whole thing. I would do the smallest common denominator. And so I would go through here under the new file and find out okay, if my intent is gonna be digital publishing the IPADS 10 24 7 68 the Kindle nook is 10 24 by 600 so I would just have a squad of your box. Okay, so then I'd have some fill or color behind there so that my content doesn't go beyond there. I'm gonna go to my ad droid 12 80 by 800. So a little bit larger format there again, I would probably keep it within the smallest, always common denominator. Well, I'm going to start with from S T photo Victor, regarding the States. I saw that the S w f was a selection but Flash does not work, is not supported by ipads. And then am I missing something? Can you talk about that? That is absolutely correct. So when we go into the interactive portion here of object states here and when we're using object states, object states are generally activated by a button. So when we do our buttons and forms here and we create something that is a button, our actions are and they basically spell this out. So flash based files on Lee are going to allow you to go do animation go to this kind of stuff. And what's interesting is that since we can we actually do not support flash on the IPad here. This SWF is if we're going to export this file like as a pdf for an interactive pdf here. What this does is this would not be part of the pdf portion of it, But it's kind of this weird area, because when we click on a button and we want something to happen and we wanted to go to a particular state here when we've got these little rollovers here, of course we don't have any flash support. Okay, which is one of the issues. So android sports Flash, But Apple's don't So how do we get around that flash thing? Well, we don't. That's why HTML flies was developed so that we could go ahead and we could create a movie of some sort so that we could put that in there as well. So in this particular case, when we noticed that, you know, we want to use a flash based item here when you go to a particular state. We try to use that in here like this. It'll drop down menu. It doesn't work when we test it on the IPad. So what we'd have to do is we'd have to go in and we'd have to use our shore hide buttons here, make that drop down a button that's hidden in order to do the same thing. But the interesting thing here is that so can we use states? Yes. Can we use a button to get to a state and have it work on the IPad? No, because it's flash based. Only Apple doesn't support flash. So here's all the things that will work universally. This is for flash based only. If you want to export it is flash or a PdF, and this is going to be pdf only here as we go, there's always It's like every time you get to a fork in the road, there's three different base. You can go when you go to different ways and everything else and just do a follow up questions. So we saw sort of static buttons. Can you also do animated buttons? Well, buttons could be. Basically a button can be three different states. I'll show you really quick the state of a button here. I think it's a simple is this whenever you create a button here and I'll just go in and do a very basic button. So there's a button right here, and I'm just gonna use color to display how this actually works. So I'm gonna create a button here that looks like this. There's a button and in my buttons panel here, I just clicked on my ad button or create a button. There is my normal state when it's a static state. That's what it's going to look like if I want to create a rollover state or a click state here. These are all different states, like object states. But these air button states same concept, normal. It looks like this, but on rollover, it's going to look like what? Well, I can take that same button there, and I can change the color so that on roll over it appears magenta, but on click it's going to go ahead and appear yellow. Plus, it's going to go ahead and have an outer glow around the entire thing on Click so that we can actually see something happening with this. And we're going to preview this so we can see this outer glow using multiply mode here and go ahead and control the size of that right there. Okay, I didn't create three separate objects. I created one objects with three different states or one button with three different states on normal looks like that one roll over. It looks like that on click. It looks like this to preview that I can go under my interactive menu under the SWF preview, and when I look at that, you can see there is my button roll over. That's what I get on click. That's what I get and I can set actions toe happen on every one of these states so unrolled over I could have a play, a sound like a little clicking sound so that you get that little click when you go over things. And then on Click, I could have it go to a page, launch a website, play something else as well. So that's basically what it is. A one button multiple states inside the button there without having to create multiple buttons. Thank you. So I'm wondering if you can reiterate for us and for our friends who might not be on an Apple device. C. J W in the chat rooms is asking if you're on a PC. Can you still create APS and publish APS somewhere else? Like maybe in the play store or something like that? Well, here's the thing, folks. In order to be able to put stuff on to the APP store, you will need to have a Mac. Okay, a lot of the stuff is Mac only. Unfortunately, very unfortunately, and so it's calls it out very specifically. In fact, here, when you're going in and step two step guide by building APS right here, which you can download from Adobe Store, you'll go through this, and it's very, very content heavy. But I just want to give you a certain, you know, overview of how the whole thing works, and it's going to tell you specifically what you need to have. And in order for this to work, you gotta have a Mac. Okay, so that's what does work on a PC. I don't know, but they specifically tell you you've gotta have a Mac in order to do a lot of this stuff right here. And surprisingly enough, one of the things Like I said, there's a whole bunch of stuff we got through building and testing the whole thing and being able to look at that whole thing. But then you need to be part of the IOS developer program, which requires you to log in. Answer all these questions. Do all this stuff how you actually get in here, get on ITunes account, be able to log into that everything else you need to get your certificates here, which we'll go through and do all the agreements on. Then get your IPad applications contract. Except all that. How What's going to work? Attach it to a bank account, review all the guidelines here for being in Annapolis. Store user, Go through all of that stuff Installed X code on your Mac in order to do this, gather your certificates. Make sure you get your certificate signing as you go through. All of this stuff is well, make sure you get it goes on and on and on and on and on. And then when you actually go and do all these multiple steps, there's a development certificate. Make sure it's all generated. Make sure you get your p 12 development certificate. Make sure, And I'm telling you, this is not something you do by yourself. So you have to download this whole thing. Then once you do that and you go through this entire process there 67 pages in this, okay? And this has nothing to do with what I've showed you up until this point. This is taking what we've built and actually getting it on the apple store. Okay, so it entails quite a lot. But if we were going to go through here and we actually had our folio builder right here and we call that up with our folio builder here once we are done with our particular object right here. We can go in and we can just go and create the app right from there. The APP does not have to live in the apple store. Okay? You can create a cat nap for local distribution. You just send it to all your friends, email it to him. Dropbox it Whatever you want to dio, you don't have to go in and actually create an app that goes on the ITunes store that you just answered a question from Jeanette. What would be your work floor of that? You just send it to him. Just send in the app is when you when you actually get the app. Here is your GPS app builder right here and you can go in and you can create the app here, Of course, on the Mac and you end up with your little app right here. I mean, it's just that little icon and what's cool is that you can go in and you can take this and you can just distribute it to your friends. You don't have to go through and actually build everything. Now, if you go through this entire builder process here, here's the step by step guide that I just showed you for the pdf here. But you don't need to go and do that whole thing complete to the very end here. You can build the app without ever distributing it through the apple store. Multi part question part from Danielle in Canada, in part from me. OK, eso she asks. To my knowledge, Kindle is more fussy as faras available layout an interaction would we need an alternative layout with more limited interactions for kindle versions. And then my dent, um is can you also talk to the fact about IPad mini an IPad or both? Those? Well, here is what you have to dio. Yes, sir. Simple question to a multi part. There's a simple answer to a multi part question. If you're gonna have it on five different devices and you really want to make it work good, you're gonna have to build and test on those five different devices because when you go to the, um, app store, you can download for very specific devices. And so that's what you would have to dio if you have an app that you want to make sure it works going on everything. You'll have to test it on everything and build very specific APS for those specified devices. If you go in and just do a blanket one, then you're going to have a lot of shortcomings and we're gonna be selling something like that. Then it's got to be either a really simple app. Where's got to be really good for people not to get annoyed that it doesn't work on the devices. But other than that, yeah, you'll have to build to suit devices. Okay, great advice you guys build to suit devices that I know is a Web designer. I have to do that every day because I'm looking at all the different browsers from IE, so same same kind of thing. So build for the different browsers and devices and also test them thoroughly because we had a class last week. That said, the most critical person that you'll find from your clients is your client's grandmother. Clients. Grandmother will be calling and saying, Why does Why doesn't it work networks? Jason, Thank you. You know this you lived up to the reputation that I set forth for this class. I know you guys out there are really interested in interaction. So it was really just great to get all this all this all this goodness for and we're excited. I know I am, for, you know, two days of this because I know we could easily do two days of this. Absolutely. Yeah, because we could spend an entire day. I'm just building all the interactive and then testing on the devices and say how it works than actually going through. We can't actually upload to the apple store because we'd have to sit here for 46 weeks. But I can get all the certificates and walk you through that because you what's cool about this is that when you actually upload to the ITunes store is you upload all your little icons and it builds the little rounded corner reflective little icon for you. And so it does all that is part of the software, and it's really cool. I mean, you gotta have all your ducks in a row. I being there is this huge long list of things that you've got to make sure that you have all set ready to go after you've tested this thing and are uploaded. And so what I showed you was the easy part of it.

Class Materials

bonus material with purchase

Indesign CC Interactive Apps.pdf

RELATED ARTICLES

RELATED ARTICLES