Master Class: Tips & Tricks on Dreamweaver, Flash & Interactive Design

[ADOBE Creativity: Tips & Tricks on Dreamweaver, Flash and Interactive Design] [Man] Hi and welcome back, and now we've got a really, really exciting session for you and Rick's come back and joined me to talk about some of the stuff. We mentioned just a moment ago when we were talking that we'd just come back from MAX, our conference in Los Angeles and we showed a lot of new, exciting stuff in technology that we're doing there, and Michael talked about some of those things a little bit earlier. And one of those things that he talked about was the new touch apps for the tablets, and we talked about them being both available soon on both Android and on iOS and my iPad and Android tablets. I'm actually working here on Lenovo ThinkPad Tablet, which is really cool. One of the reasons that I'm doing this is that I wanted to show you an app and here's my huge, big finger on the touchscreen, so we'll work here, obviously, on the touch screen. Whoa--let's go back home again. It'll work on the touchscreen as well, but if I use the stylus, which I can use with the ThinkPad--it's awesome--and you won't see my big finger on the screen. The application I want to show is one called Adobe Proto, and this is a wireframing app or a prototyping app for developing websites, HTML5 CSS websites. Traditionally in the past, what I would have done is if I'm a web designer and I'm maybe on a break; I'm down at the coffee shop or I'm on a bus on the way home, I might have a bit of paper and I'm going to scribble some ideas, some concepts on the bit of paper. Or if I'm sitting with a client, I might basically do the same thing--scribble on a bit of paper, I go back to the studio and then I've got to rebuild the concepts. Is this the stort of stuff that you guys are doing at Vasava? [Rick] Yeah, just really the client tries to explain what's the idea in his mind for the website. Sometimes it's just some emails, and out of this we draw some stuff and we show him to see we are on the same page. [man] Okay, now you've actually got some examples we'll come back to in a little while, but let's have a look at Proto, too. So Proto--the concept of this is that no matter where I am, with my tablet, I can actually open up the tablet, start to actually sketch out an idea. So let's actually create a new website in here, so I'm just going to click the + button and if I can click it-- there we go--okay. And I've got some settings in here as to how I'm going to build up the website, what the width is, whether I'm doing it for--I'm not clicking this on the side-- there we go, that's clicked properly. Whether I'm doing it for a mobile phone, for a tablet, for a desktop as well. I'm just going to go with the defaults. I can choose the size, the columns, etc., but let's just create the page. Now, you'll see that when I go into this application, it's giving me some guides here on how to use the application and it's showing me a whole bunch of different gestures that I can use to actually start developing the app. So for example, I've learned some of these already, so let's actually have a look and see, so let's just close that up at the moment--close that box up. So it's told me that if I use my pen tool or my finger-- I can do it with my finger as well--if I draw a box that's a div. So let's just draw a box and there I've got a div. It's already created it, so let's just move that div over up into the top over here. Let's just stretch it out and let's just shrink that down, and I've now created like a banner div for my website. [Rick] Great. [Man] Really simple. Do you like that? [Rick] It's got some text, right? [Man] So once--like I want some banner text, okay? So to do some banner text, all I'm going to do is just write some text and there it is on the screen. So if I grab that, let's just grab that banner text, put it up inside my banner, maybe make it a little bit higher. Maybe I can come down to the bottom here and choose a different color for it. Maybe I want it to be white up inside here. Let's actully increase--whoa! That's huge! Let's drop the size down a little bit. I can choose the font and the links, etc. inside there, so I'm creating some banner text in there now. What if I also wanted to throw an image in the banner? So to draw an image, let's just draw an image. There it is. Let's grab the image, drag it up, and I'm just going to place that maybe across in the banner here. Let's shrink it down, and so I'm going to have sort of an image in there. [Rick] Videos? [Man] Videos? [Rick] Yeah? [Man] Ah, okay. So let's maybe add some video to the page. I'm going to add some HTML5 video. How do I do that? Le'ts just play--draw a Play button; there's my video. [Rick] Great. [Man] So I can grab my video element. Let's resize this, across here on the screen. Now, I'm missing one thing so far, I think, on my page. I'm obviously building a website here. It's not just going to be one page, so I'm going to need some navigation. [Rick] Oh yeah, of course. [Man] So I'm actually going to use my fingers to do this to show you how to do this. So to draw a menu bar, I'm just going to put my hand on the screen. We'll see what it looks like, and I'm just going to draw a menu. There we go. So there's my menu, I can grab that. Let's just drag that into--whoa--let's just drag my menu into position. [Rick] I'm going to lose my job; you know that, right? [Man] Do you think this is going to replace you? I don't think so. [Rick] I don't know. I think maybe it's going to help you guys working with clients, that way. [Rick] Yeah. [Man] I think your skill is very safe. [Rick] Yeah, totally. [Man] So if I wanted to add some more menu items here, let's just add a couple more menu items. Again, I can make--choose the active cell. Now, at the moment, I'm just using Lorem ipsum and menu text. What if I wanted actually change the names of these menus? So I'm just going to--I'll just do it with my finger. There we go. I can come in here and say, "Okay, well, that's going to be my contact menu." So I can just start stepping--ooh, I just drew a line. I've got to stop doing that. So basically, I'm starting to build this out. So what other things can I put in here? I've got a choice of things like text fields, buttons, combo boxes, radio buttons. Also, things that I can put in the side. Maybe I wanted to do an accordion menu, so I could just come out here and create an accordion menu. I could draw more divs, I could actually design the site. So let's just jump back a little bit. If I jump out of this mess that I've just made here and we go and look at--there's also some samples here inside Proto, and if you look at this particular one, there's a sample that comes here. It's the Citrus Cafe website, so in Townsend Street, which is where one of our offices is in the U.S., and if you scroll down, I've sort of started to build a bit of a page here with all different elements on it. It's got a menu across here. And also, you'll notice that if I come up into the pages, this is not just developing one page, but I can actually start to develop different pages and different structures through my website, so I've got a whole range of different pages there. In fact, in this case, 92. But if I jump back to the menu, let's just close this up. So all of this is touch-based, so I can do this across an Android device. I can do it on my iPad. If I come in here to the Creative Cloud button at the top, if I click on that, you'll notice that I can upload those wireframes up to the Creative Cloud, so I've actually done that with that page. [Rick] Right? Can you put this into Dreamweaver? [Man] Can I put it into Dreamweaver? [Rick] I don't know? [Man] Of course I can, as soon as it's in the Creative Cloud. So now we're going to jump across onto my desktop and we'll see what actually happens with this file. Now, just before I do this, I'm just going to open up a quick file that you gave me before. This is actually one of the files that you did previously before Proto existed. [Rick] Yeah, this is the way we work. The client tells us, "Okay, I need these elements." We tried to put in these elements, we send the wireframe to him, and as a feedback, they put some comments. [Man] Oh, they start to put some comments and they tell you things? [Rick] It would be great if we can work with the same application and he does the modification by himself, and instead of sending me long emails, he can send me what he has in mind. [Man] Details right on there. So tell me, once you do this as a prototype that you've built in here, once you've used this, this is not the site, though--you have to totally rebuild this--. [Rick] No, this is something we bring and say, "Okay, I will copy. Yeah, I'll help you." We throw it and we start again. [Man] And you start building. Okay, so in this particular case, let's jump into Dreamweaver. I'll just hide that out--let's jump into Dreamweaver and you'll notice that here, this is the same file that I output from my tablet inside Proto. This is the same page; I've just exported it across, brought it into Dreamweaver, and I'm there, ready to start working, ready to do all of the elements inside here, and it's very, very nice, clean HTML. Very nice, clean CSS. [Rick] That's great, man. [Man] And then what I've actually done is I've gone a little bit further with the site, so I've started to put the pictures in there. I've started to actually put some content and some color into the page, just working with the CSS. Let's jump to that, so that same site that I took from my tablet, scribbling away, just designing on there, now here it is inside Dreamweaver, just with some colors, some images, some layout. I've added a few little sort of menu animations on here and really just started to try and bring the page to life, which is the concept that I originally had back on the tablet. So do you like Proto? [Rick] Yeah. I mean, it's incredible. [Man] It's pretty cool, hey? Okay, so one of the troubles is that we face now is that if I'm building a website, this is designed for the desktop, whether I've got a laptop or a desktop. But a lot of people now are starting to surf the web on these things-- on mobile phones, on tablets, and here I've got an Android phone, I've got an iPhone, I've got an iPad, I've got a Blackberry PlayBook, I've got a Samsung Galaxy tablet, I've got an IBM ThinkPad. There's all these different devices, they're all different shapes and sizes, so how do I build a website? [Rick] This is a nightmare. [Man] It's an absolute nightmare. So what I want to be able to do is actually have this one page, but resize across all those different devices. So inside Dreamweaver CS5.5, we have this huge button at the top here called Multi Screen, so if I click on this button, you'll see that here is my website in different views. Here's the mobile phone, here's the tablet, and down here is the desktop. Well, it's okay in the desktop, but it's a bit squashy here in the tablet and it's really horrible inside the mobile phone. It's not a good thing, so I'm just going to close that for a sec. Let's get rid of the CSS that I've put in there already, so I'm just going to delete that out, and let's jump back to Multiscreen again and let's just do that quickly again. Okay, so you'll see here I've just got the content. No design, nothing in there, and what I'm going to do is add these things called Media Queries and this is the best way to build a one-content but modify it and optimize it across screens. So I'm just going to do it for this document, but I can also do it for the entire site as well. Let's just do it for this document, and I'm going to add a couple in here. So first of all, I want to do it for the desktop, and I'm going to say the minimum width of this is going to be 769, maybe, and I've chosen--I've already created that CSS file that you saw earlier. That's the one that I was using--the desktop one--let's choose that. Now I'm going to add another CSS file that's in a media query, and let's call this Tablet, and I'm going to say that the smallest this should be should be something like 481 and the maximum it should be should be 768, so it's going to fit my iPad, etc. [Rick] Right. [Man] And let's choose the Tablet file for that and click Choose, and then let's just add one more; let's add the mobile, so let's add Mobile. And let's start at 0 and then the maximum width of this, let's just make up to, say, 480. And if I click OK, poof! Whoops, I didn't select the file. [Laughter.] Good, see? Nice little reminder in there, choose the Phone file, click OK, Bang! There is my site. It's the same website, the same page. I haven't changed it, but with the different CSS, there's my desktop; there's my tablet, nicely optimized down to 2 columns; and here is my mobile phone where I've just put the menu on the top and just optimized it for just the content that I want. [Rick] This is what we're doing all the time. [Man] This is keeping you busy at the moment? [Rick] Yeah. I mean, every time we do a website, we need to check an amount of devices. [Man] So just as a quick example, I just wanted to show a site from a customer of ours, Taliana Design in Melbourne, and if Lisa, you're watching today, G'day. Lisa is now doing exactly this using our technology. This is a site that is, in fact, her own customer website, and you'll see that sort of nice little jQuery accordions and content in here, but if I now open this up or squash it down to the size of a tablet, it's now optimized. If I squash it down to the size of a phone, it's now optimized down to a phone and all the content is down the page. So Lisa's now working with a lot of the customers that she's built websites for in the past--different widths--starting to optimize them. Now, I'm going to go really quickly now because I want to show you one really, really cool thing that we're also doing in that we've announced some of the stuff at MAX as well. This is with the Flash platform, and we announced Flash Player 11 and AIR 3.0, and there's some really, really cool stuff coming in those platforms; especially AIR. And one of the things that I wanted to talk about is the ability of Air to build an application once and publish it across all of the different devices. In fact, all of these devices here, I've got today. In fact, also even out to television if I wanted to as well, if I wanted to build an app. So in order to do that, I've just got a little application here--a little simple game that I've sort of built. So if you look underneath here, I've got this ability now to publish out to all of these different types of platforms. So this particular one here, I've published out to an AIR application for the desktop, so Mac/PC, it'll run the same, published it out to the browser, so it'll run in a web browser wherever. And I've also published it out to iOS, to the iPad. I've published it out to Android, so I've got a couple of Android devices here; out to the PlayBook--I've published it everywhere. So what we might do first of all is I'm going to jump out of here and I'm going to first of all open up the AIR one so you can see what it looks like. So this particular one, the same application with no changes. This is running inside AIR on the desktop, so what I might do is also open it up inside the browser, so here's a web browser. Let's jump to the correct file. Here it is running inside my web browser, so let's move the web browser across to that side, move the AIR application over to this side. I'll just leave them sitting like that at the moment. So in the browser, I'm going to make that Course 4, click there. You can see it's now got the river. If I click on this one, let's make the AIR application Course 3. That's all set up, ready to go. [Rick] Okay. [Man] Now I'm going to come across onto the tablets, so if we can jump across to the ELMO, and you'll see that on here, I've also got this application running on my Lenovo ThinkPad here under Android, so if I run this, let's maybe set this up as Course 2 and we'll just set that aside for a moment. So now, Rick, I'm going to need your help here, juggling some of these, because it's going to get all a little bit crazy in a moment. Now I'm on my iPad, and let's open up the same application. I'm going to use my finger. [Rick] All of these devices are on the same network? [Man] Yeah, so they're all on the same network in here. [Rick] Okay. [Man] So this has got Course 1; I'm not going to click that just yet, because I'm going to also open up my iPhone, which I'll just hold underneath here and I've got the same application running on my iPhone. Let's just run it on there--a little bit hard to see and all that, but we'll just get this running. So here it is running on my iPhone. I'm going to choose the controller, so using the accelerator on the phone, you can see-- I don't know if you can see sort of on there, as I turn, I'm steering and I can adjust my speed with + and -. Okay, so this is where it all starts to get exciting. As soon as I hit Course 1 on my iPad, the race is on. And Rick, help me out here. Okay, so now I'm driving along and you can see with my phone, I'm starting to steer the road. Let's just make him go just a little bit faster, so I'll speed him up a little bit, and I'm steering him across. I'm not very good at steering; let's turn him back again. Let's turn him around again so he's flying along. This is fine, he's on my iPad, but he's getting to the end of the river, so what are we going to do now? And Rick's helping me, he's bringing on the Android, the Lenovo ThinkPad, and as he comes off there, he's now onto the Android ThinkPad and we're sailing along. [Rick] Crazy. [Man] Now, in a second, as he gets to the end of this, we're going to have to jump to the desktop any second now, so if the guys upstairs in the studio can get ready to jump to the desktop-- and we're jumping across--go! Onto the desktop, on the screens, and here he comes. He's now on the AIR application, and if I can get you to click onto the browser when we get to the end of this, so he's coming across, he'll jump onto the browser. So he's already gone from an iPad--he's gone to the Android ThinkPad. He's now come onto the AIR application on Mac or PC, and he's now jumping into the browser on the other side. Let's go backwards and let's speed him up and see if we can do that really quick, so let's start making him pedal backwards. So now he's going backwards really fast. He's jumping from the browser onto--there he is! He's on the AIR application and then we'll get across onto--[laughing]. So now everyone's going to freak out at the other end here. [Rick] Okay. [Man] We've got him coming on backwards; here he comes across onto the devices. Here he comes, he's now on the Lenovo ThinkPad, and coming along, we speed him up a little bit--let's go a little bit faster. Oh, slow him down a little bit, go backwards, and maybe shake him off there onto the other one; shake it on a bit. See, there he is onto--that was fun! [Rick] Very good! [Man] Oh, I've crashed--I've just crashed. Thanks. This is the sort of stuff that you can now do with Flash using the AIR platform to publish your applications across all of these different devices. It could also be on the BlackBerry PlayBook here. It should also be on a television set, so it really doesn't matter what the platform is that you're using. You could publish your application across all of those devices. And Rick, thank you very much for joining me, and thanks--thank you very, very much.