Transcript

00:06 hello everybody Joe workman here and
00:08 today I'm really excited to show you the
00:11 new impact stack and to call impact a
00:14 slide show is kind of a disservice
00:17 because while it is a beautiful
00:19 slideshow and it really has silky smooth
00:21 crossfades it's a disservice because
00:26 it's so much more than that right with
00:29 traditionally when we use sliders to
00:31 make banners and whatnot we were really
00:33 at the mercy of the size of the content
00:35 that we added to the banner to actually
00:38 size it right but impact you define this
00:42 size and impact fits the content for
00:45 that and not only does it support images
00:48 and also supports video and you can
00:50 overlay content on top of those images
00:53 or video as well so impact is really
00:56 powerful you can use it for our full
00:59 page headers you can use it for inline
01:01 headers within your content it's very
01:04 flexible it really is gonna be I think
01:06 the best kind of banner slideshow out
01:09 there so without further ado let's jump
01:12 in and see exactly what impact can do
01:14 for us so first we're gonna review the
01:16 impact demo site and as you see on the
01:18 demo homepage we have a beautiful
01:20 fullscreen slideshow and you'll notice
01:23 that the crossfades are silky smooth
01:25 right and what's even amazing with the
01:28 crossfade in impact is that not only
01:32 does it support images but it also
01:34 supports video and one thing that you'll
01:37 notice with the impact crossfade is that
01:40 the background of the site never bleeds
01:42 through this is the problem with
01:45 cross-fading of images right an impact
01:48 does it beautifully so that the
01:49 background of your site never
01:51 compromises the colors that are inside
01:53 of your images now in this particular
01:56 case impact is configured to be a full
01:58 screen header right or a hero header as
02:01 some people call them and you'll notice
02:03 that at the bottom we actually have a
02:04 scroll down button so if you click on
02:06 this button impact will actually scroll
02:09 up and you know unveil the rest of your
02:12 webpage for
02:13 you now let's go ahead and see some of
02:16 the other options that we can actually
02:17 use with impact so here we are on the
02:21 layout page on the impact demo site and
02:24 what we'll notice is that impact is
02:26 currently taking up a proportion of the
02:28 webpage not the entire height as we saw
02:30 in the previous example and what's great
02:32 here is that I've actually defined a
02:34 size that I wanted for my banner and
02:37 then impact inserted the video to fill
02:40 that space for me right this is very
02:44 powerful because this allows us control
02:46 over the size of our banners okay and
02:49 then impact adds the content to fill
02:52 that area for us now here I'm actually
02:55 not using a slideshow I just have a
02:57 static video right okay but as you see
03:01 this allows us some really great layout
03:03 because not only do I have the video in
03:07 the banner area that I want but I can
03:10 then overlay content on top of that now
03:14 if we scroll down a little bit further
03:16 we'll see that
03:17 here inside of my content inside this
03:20 column stack I'm actually doing a
03:23 slideshow of videos okay this shows us
03:27 that we actually don't need to use
03:28 impact to be fullscreen all the time we
03:31 can use it within our content and if you
03:34 notice here the actual content area here
03:37 is kind of squarish right but I've added
03:40 again full-screen widescreen video and
03:43 then impact you know cropped off the
03:46 video force automatically in positioned
03:48 the video so that it properly fills that
03:51 area for us and then further down on the
03:55 bottom of this page I just have another
03:57 image slideshow that shows you can
03:59 actually use these in more places than
04:02 just the top of your web page now if
04:05 you're a screens user you're gonna love
04:07 impact because you can use impact to
04:10 actually create full background slide
04:13 shows for each screens page as you see
04:17 in this page I have a nice you know
04:18 image slideshow going on in my
04:21 background of the screens page and if we
04:24 look at the second page here
04:26 we'll notice that we can also use impact
04:28 to insert video into the backgrounds of
04:31 our screens pages so here we are on the
04:34 impact controls demo page and this shows
04:38 us that we can actually start adding
04:40 controls to our impact slideshows as
04:43 well as you see in this demo I'm using a
04:47 full-screen impact slideshow I have
04:49 arrows on the left and the right to help
04:52 me navigate to previous and next slides
04:55 okay and we also have bullets at the
04:59 very bottom that can have numbers or to
05:01 have the numbers turned off so you can
05:03 navigate to a specific slide
05:10 so if we scroll down on the page we'll
05:12 notice that we can also have the
05:16 controls displayed on hover so if we see
05:20 this slideshow here it's actually a
05:22 slideshow that I can navigate to the
05:23 previous and next slides using the
05:26 bullets or the arrows okay now I should
05:30 add that the arrows do use font awesome
05:32 and so that this means that we have full
05:34 control over the color the size and
05:37 there are ten different options
05:38 available right now for your arrows and
05:41 if we see in this example the bullets
05:43 are actually you know solid bullets we
05:46 don't have the numbers in them so this
05:48 gives us a little bit more flexibility
05:49 with the bullets now one thing you'll
05:53 also notice with this particular slide
05:55 show is that it's not using the
05:57 crossfade and it is using impacts slide
06:00 routine okay so this gives us you know a
06:03 more traditional slide animation if
06:06 that's what you want for your slideshow
06:08 next we'll see that we actually have
06:10 external controls for impact this allows
06:14 us to from buttons actually control next
06:17 and previous slides so if you notice
06:20 here when I click on this next button
06:21 it's actually causing this slideshow to
06:24 go to the next slide for me and then you
06:27 have pause and play buttons as well and
06:29 there is also a control that's not shown
06:31 here that allows you to create a scroll
06:33 down button okay so if you want a custom
06:36 scroll down button you can easily add
06:39 this simply by adding a class to your
06:42 button now something you probably didn't
06:44 notice when I scroll down is that the
06:47 header that we saw on the very top of
06:49 this page is now gone so when I scroll
06:52 up that header is gone from the page so
06:56 let me refresh this page again and what
06:58 you'll notice here I have my full screen
07:00 header and when I scroll down and then I
07:04 go back up what impact does is it
07:07 removes that from the page this is great
07:11 if you only want to show the header in
07:13 certain instances right so if you want
07:15 to show the header when the person loads
07:17 but then when they scroll down it's
07:19 removed because really maybe it's just
07:21 some splash
07:22 screen to give them you know some
07:24 pizzazz to your site right but it's not
07:26 something you really need the user to
07:27 scroll back on because the all the
07:30 information that we need is within our
07:31 content right so this the great feature
07:34 and the last thing I want to point out
07:37 with impact is that you can use it for a
07:40 lot more subtle animations if we have a
07:44 look at this particular image at the
07:46 bottom of the page what you'll notice is
07:48 the only this particular green portion
07:51 of the page is actually being changed
07:54 this is because impact is cycling
07:56 through three different images where the
08:00 only difference in the image is this
08:02 green area within the image this kind of
08:05 gives us a very subtle but interesting
08:08 effect to our websites that we can use
08:10 you know to add some pizzazz with impact
08:14 so that kind of does it just for the
08:16 simple feature overview of what impact
08:19 can do for you so what we're gonna do
08:21 now is we're gonna jump into rapidweaver
08:22 and kind of get our hands dirty and do a
08:25 basic setup of impact so make sure to
08:28 check out the impact demo project file
08:31 that ships with impact and you can
08:32 download anytime from our documentation
08:34 portal as well now I'm not gonna dive
08:37 into every you know implementation here
08:39 but this is the actual project that was
08:41 built that was used to build the website
08:44 that we just saw right so if you want to
08:47 see how particular things were done
08:48 inside that project file just go ahead
08:51 and look and see exactly how we
08:52 implemented it okay so what we're gonna
08:55 do now is I'm actually just gonna start
08:58 a completely blank Stax page so what I'm
09:01 gonna do is I'm going to add an impact
09:02 stack to the page and what you'll notice
09:04 is there is actually a second stack here
09:06 called impact animate and this allows us
09:08 to animate content in when a slide
09:13 appears right so if you have content in
09:16 a particular impact slide you can
09:18 animate that content in when that slide
09:21 animates in as well okay very cool but
09:24 let's go ahead and do a simple
09:25 implementation of impact here and what
09:28 you notice is we have an impact slide
09:30 and we can simply drag and drop an image
09:33 directly into that
09:36 just like that now you can do local
09:39 image or you can do warehouse image it's
09:41 really up to you okay and then if you
09:44 want to add a new slide you just simply
09:46 click on the plus button and you'll
09:47 notice here that you can add an image
09:48 slide a video slide or impact controls
09:52 so the impact controls are gonna be your
09:55 dots and your arrows okay so if we added
09:58 a video slide we'll see here that
10:00 basically we can provide the URLs to the
10:04 warehouse image poster as well as the
10:06 videos okay now I've gone ahead and
10:10 added a few image slides and I've just
10:12 done image size just to keep things
10:13 simple for right now now what you'll
10:16 notice here is that you can like I said
10:18 before you can have a local image or you
10:20 can do a warehouse image URL okay and if
10:23 you'd like if you want to add specific
10:25 content to this slide you can go ahead
10:27 and say in foreground content you can
10:29 say add content and what you'll notice
10:31 here is that there is now a drop-down
10:33 area that you can add content to so if I
10:37 wanted to add a text stack into here I
10:39 can go ahead and you know let's go ahead
10:41 and make that text white okay and what
10:46 you'll notice is you have full control
10:50 on the slide contents on whether or not
10:53 where exactly you want that content to
10:56 be so do you want it to be you know no
10:58 you could have normal and what normal
11:00 means is it'll just basically start the
11:02 the content at the top of the slide just
11:04 as if it was content on inside the web
11:07 page right um you can also you know
11:09 align it left or right or so have it's
11:12 vertically centered or horizontally
11:13 centered right so it really is a very
11:16 flexible in terms of how you can
11:18 position the content okay now if you
11:22 wanted multiple content things and
11:24 position different locations you can
11:26 definitely use something like my target
11:27 stack inside the impact image slide
11:30 state weight maybe you have something at
11:32 the bottom right and something at the
11:34 top left or whatever right just set the
11:37 horizontal content or the positioning to
11:40 normal and then you can use target to
11:42 position the content exactly where you
11:44 want it if you wanted multiple things so
11:48 if we
11:48 look at the actual settings inside the
11:51 main impact stack they're gonna be
11:53 pretty straightforward
11:54 inside impact setup the foreground is
11:57 gonna be defaulted to none but if you
12:00 want you can say floating and what this
12:02 will do is it will have a drop-down area
12:04 and this will have content that is going
12:07 to be displayed on all slides so this
12:10 may be if you want to have a static
12:12 header that you know and then that the
12:14 slideshow happens behind it but that
12:17 content will be the same on every single
12:20 slide okay that's very useful then the
12:26 size option this is where we can
12:27 actually define the sizing of impact not
12:30 by default we have a full screen hero
12:32 header right and if we preview this page
12:36 we will see that that's exactly what we
12:38 get we get the full screen image header
12:41 that takes up the entire width and
12:43 height of the browser but we can also as
12:49 I said earlier we can do something like
12:51 proportional where we have a ton of
12:54 defined aspect ratios you know a lot of
12:57 predetermined ones as well as you can do
12:59 custom aspect ratios so that you know
13:02 you can easily if you want a header
13:04 maybe you want to have a sixteen by nine
13:06 or something like a I kind of like the
13:09 21 by nine and the ten by three
13:10 depending on your site for exactly
13:13 displaying you know headers and again
13:15 impact will take the contents that you
13:17 give it and it will make it fill that
13:19 container and if we look further down at
13:21 the impact animations we'll see that we
13:23 have fade and slide as our options okay
13:25 we could turn on autoplay you can also
13:28 have the ability to autoplay but they'll
13:30 only play it once so that when it
13:33 actually reaches the last slide it stops
13:35 and actually did this on the home page
13:37 of the impact demo right so it went
13:41 through all of the slides and then it
13:42 stopped on the fall in love with impact
13:44 slide and then of course you have
13:47 various things for you know slide
13:49 duration transition speed an initial
13:50 fade in and crossfade and all that stuff
13:53 right we have spent some specific
13:56 settings for video and that's when when
13:58 you have a video slide is it going to
14:00 start immediately do you
14:02 want to start the video when the slide
14:03 becomes active or basically play when
14:07 it's active and then pause the video
14:09 when it's inactive okay so that gives us
14:11 a lot of flexibility and then we also
14:13 have the ability on touch devices to not
14:16 play the video and only show the poster
14:18 image next we have a pre loader so if
14:22 you have a lot of really large images or
14:25 video you can actually have a pre loader
14:28 be displayed kind of it you know a
14:30 spinning indicator for when um you know
14:34 the slides are loading next we can have
14:36 touch device control so maybe on touch
14:40 devices even for slideshows you only
14:42 want to have a static image and you
14:44 don't want to actually display the
14:45 entire slideshow on you can do that here
14:49 next you can have an overlay so if you
14:51 want to actually have a colored overlay
14:53 on on top of everything you can do that
14:56 so basically add maybe a tint and you
14:58 can also have a tile on top of that as
15:00 well so you can have a combination of
15:02 those two so you can have again a
15:04 colored overlay with maybe a tiled
15:06 overlay on top of that this this gives
15:09 us a lot of flexibility and its really
15:11 great options the next is the impact
15:14 scroll down button so do we want to
15:16 display that scroll button and then tons
15:20 of options for customizing that right
15:22 the size the color the position of it
15:24 and things of that nature and then in
15:29 the Advanced Settings the z-index that
15:32 could be important if you're you know
15:34 doing some things z-index could help you
15:36 know with ordering of on the Z layer
15:39 right um and then if you need to add a
15:41 custom class you can it's kind of more
15:44 for more advanced reasons and then
15:47 trigger ID this is important if you want
15:49 to use those external controls that we
15:50 saw earlier because this ID is used in
15:52 the class themes that you're going to
15:54 use for those trigger classes now if you
15:58 notice here we have a show trigger
15:59 classes button and if you click on that
16:01 it gives you just a quick little tooltip
16:03 for all of the classes that you will
16:06 need to add for each button type so now
16:12 let's go ahead and add the impact
16:13 control stack to this and
16:15 what you'll see is by default it's all
16:17 disabled so if we want to enable dots we
16:19 can do that if you want to enable arrows
16:21 we can do that as well and as you see
16:24 everything's pretty self-explanatory
16:25 right do we want to show things on
16:27 hovered do we want to always show them
16:30 there are tons of color options for
16:33 every possible combination right the
16:35 border is the hover color the fill color
16:37 the fill color on hover right do we want
16:42 to have slide numbers if you don't want
16:45 to show the slide numbers just simply
16:46 make them completely transparent so make
16:48 it opacity zero you have control over
16:51 the size of the position right and then
16:53 the arrows same thing we can have a
16:56 drop-down of tons of arrows you have
16:58 color settings as well as positions and
17:01 sizing for the arrows as well so very
17:04 self-explanatory if you've used hardly
17:08 almost any stack before this should
17:10 really be intuitive to use so as you see
17:13 impact is really easy to use right there
17:17 is a lot of settings but they're all
17:19 pretty intuitive right just add a new
17:22 slide that you want either an image or a
17:24 video drag and drop your image in there
17:26 or you can wear a house it right and of
17:28 course if you add a video videos need to
17:30 be warehoused okay now one thing I
17:32 should add you know there are three
17:34 video files but um all modern browsers
17:38 support mp4 now so if you're only
17:41 worried about supporting modern browsers
17:43 okay you only really need to supply the
17:46 mp4 file but if you want to support
17:49 older versions of Chrome and older
17:51 versions of Firefox you can use the
17:54 Augean web them okay but really you
17:58 really only need to add the mp4 file so
18:01 that's something I forgot to mention but
18:06 impacts really beautiful right um it's
18:09 like I said it's easy to use it's
18:11 gorgeous it's flexible because it can we
18:13 can add it to where wherever we want and
18:16 impact will take care of filling the
18:17 content into the area for us right so I
18:21 hope you enjoy impact I hope it helps
18:24 you make beautiful websites and thank
18:27 you very much for watching everybody bye"}]