Burst! Widget | Weekly Update | Adobe Muse CC | Muse For You

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
news for you awesome websites without code [Music] hey what's up museums John with me for you here to help you build awesome websites without code and in today's video tutorial I'm gonna go over the burst widget found at Muse free shop comm so it is the weekly update for May 7th through May 13th I released this widget this week so it's really cool widget you can add unique burst effects to your website and it's very simple to use you just add a widget the at first and then you add the widget and you can have these unique effects on your website then I have a second example and there we go so you can do a lot of really interesting things with this widget alright so I'll quickly showcase where to access it so I'll go to these free shop comm and here you can click subscribe today and here you can click subscribe now to get access to all widgets and templates I come up with for 39 a year the best widget is right here here you can click Add to Cart to purchase individually or again you can click subscribe to get access to all widgets and templates I come out with 439 a year the preview page is right here and I'll go ahead and read a few of the features that are included so you can apply the bursts to any element on your website you can choose from various shapes for the burst you can set the number of shapes within the burst you can layer bursts on top of each other you can have one shape burst also I mentioned you can you can animate the burst onload on click of the element or on the viewport which is the the browser window basically there and I'll showcase that as well you can set the speed delay and easing of the bursts you can loop the bursts you can play the bursts forward and then back you can set the position of the bursts within the element you can set the transform origin of the bursts you can set the stroke color of the shapes you can set the stroke width of the shapes you can set the fill color of the shapes you can set the radius of the burst set the angle of the brush at the scale of the burst and the opacity all right and it's not compatible with ie ie doesn't support really modern animations so it's more for modern browsers like Edge Chrome Safari Firefox and hop so yeah that's basically it there's a few widget options here on the left and looks good so I'll go ahead and quickly showcase how to use in Adobe muse so here I have a blank site or I just have the text Muse for you centered here with the browser centering widget so the first thing I'll do is I'll go to the library panel here on the right and if you don't see the library panel you can go to window and click on library so I'll open it up and here I'll type in bursts and here we have the three widgets we have the add first we have the burst widget and we have the burst shape widget so here I'll click on the at first I'll click hold and drag place here onto the website and then I'll first work with the burst widget so number two so I'll click hold and drag place right in there and to apply to the entire page what you can do is just type in HTML here this is the graphic style name and I'll start with this and then I'll show how to apply to an individual element all right so I entered in HTML and right away we'll have a burst with with the preset options that are in the widget so you'll notice this little burst here and we'll play with this a little bit so I'll go into the widget I'm here you can set the shape so we have the shape section you can you know choose from circle rectangle polygons line cross equal or curve or zigzag for polygon equal and zigzag you can set the number of points so for instance if I say polygon it's gonna have five points and there's gonna be 12 polygons so I'll preview and just like that we noticed the shape is a polygon and it's bursting all right so I'll go back into the widget I can set the burst options here I can have it onload on click of element or on click of you poor I'll click on on click of viewport and see how that looks so I'll preview and nothing happens initially but when I click every time I click anywhere on the site the animation bursts okay and it is set to loop so it keeps repeating here in the burst options it's set to loop here you can set a delay the duration I can set the duration to be longer so the first will be a little bit slower it's in milliseconds 1000 milliseconds equals one second and you can set the easing of the burst you can choose from these various easing options by default it's set to sign out but you can work with different easing and work with an easing that that works well for your animation okay you can set the degree of burst so for instance if I were to say 180 it wouldn't be a complete circle the burst would just be half a circle so if I click we notice rather than a full circle it just is half a circle 180 degrees so you can play with that I like you to have having it as a full circle so I'll enter in 360 for the degree of the burst and then we have these other options here so you can set the position the transform origin the radius the angle and the scale the opacity and then the options for the individual shape properties so for position you can set the position if it's in width if it's within an element and actually let me show case that now let's say you wanted to burst to be within a specific area you could just create a rectangle with the rectangle tool and I'll make it a color just so we can see it initially and then you can give this rectangle a graphic style name you can change the graphic style name here so I'll say area 1 and then I can click on the element and go to the graphic Styles panel if you don't see the graphic Styles panel you can go to window and click on graphic Styles okay and then here I'll create a new graphic style by clicking on this icon looks like a piece of paper with a folded corner in the lower left hand corner so I'll click there I'll double click on style and I'll rename this to area 1 cuz that's the graphic style name that is in the widget area 1 so now I can move this rectangle anywhere and the bursts will play in that rectangle so if I click we see it's playing within that rectangle so that's how I created this demo page here it's just a few different squares and rectangles and I copied and pasted the burst widget and applied different graphic style names to different rectangles and the rectangles I made black in the background black so you don't really see the rectangles but that's how I created this animation here with these different bursts okay so yeah you just applied the graphic style name to the element and the bursts will play in that element so then you can go into the into the widget options and you know for position you can position it within the element so if I say zero zero it will be the top left of the element 50/50 is the center so we see the brush now plays in the top left of the element right up there okay so I'll set it back to 50/50 I like the burst within the center of the element you can set the transform origin this works well if you're rotating the burst and you can rotate the burst by going to angle and we have a start angle and an ending angle so we want it to start at zero degrees and then that 360 and the burst will rotate 360 degrees so let's go ahead and see how that looks so I click and we can see the burst is rotating as its bursting okay so that's in the angle section you can set the radius of the brush so it's larger so the starting radius is zero the ending is at a hundred if I were to set this to 300 and I click we can see the burst is larger all right by changing the radius to be larger we could set the scale so the burst will get bigger in size so here yeah the start is 1 by default the initial the default scale is 1 anything larger than 1 makes it bigger anything less than 1 makes it smaller so I'll go ahead and preview and I click so we can see the shapes are bigger in the first bigger using the scale property okay if you do get horizontal scroll bars you can use the horizontal scroll disabler so the burst because the burst is going off the page and it's creating a horizontal scrollbar here at the bottom so you can use the horizontal scroll disabler it's another widget at these free shop comm horizontal scroll so I can just drop that in and you know make sure we don't have any horizontal scrolling to the site okay perfect all right so that's the scale property I do like working with the radius property a bit more but if you do want the shapes to get bigger as as the best plays then you can use the scale property I'm opacity is the visibility of the bursts as it's animating so it starts at zero opacity and then it ends at one with with the burst though they fade out automatically anyways so it goes from not visible to fully visible and then and then it fades out like if I were to switch this to one and then zero it would be fully visible and then it would just fade out so if I click fully visible and then it fades out the other way around it has a nice little fade in which I like so I like the opacity to go from zero to one all right so I'll go ahead and preview and I click so some nice little fade in and then it fades out all right so let me let me go ahead and change this back to HTML right here in the graphic style name so it animates from the center and then we don't need this element here let me just see it a little bit better we see it animates there the radius is bigger because we change the radius looks good okay so let's go to the individual shape properties um so you can change the stroke color the fill color the stroke width the radius and the angle for the individual shapes so if I were to for the fill color I can set it to you transparent by selecting the swatch with the red line going through it and then the the the shapes would be we just have a border and I can change the stroke with so I can say like you know start at five and end at ten so there's a lot of really customization options you can do here the radius is the size of the individual shapes so I'll start at let's do something really large actually let's start at five and and at 200 I see how that looks and you can rotate the individual shapes so I'll start at an angle of zero and end at 360 so we're gonna have really large polygons so I'll go ahead and preview so I click we see the polygons are larger and it makes for a really interesting effect and they're rotating so the burst is rotating and the individual shapes are rotating so the individual shape properties applies to each shape within the burst all right and we see we just have a stroke and the stroke goes from five to ten I believe that's what I said it to yeah five to ten okay so yeah you set the stroke color a fill color stroke with radius and angle for the individual shapes you set a starting stroke and ending stroke starting fill ending fills starting stroke with ending stroke with starting radius ending radius starting angle and ending angle and then I haven't how how to use section which covers kind of the main points that I'm covering in this tutorial all right so that's basically it those are the options so let's say you wanted to add a shape on top of the burst or you wanted to layer different bursts you could you know just go back to the library panel and then we have the burst with shape the burst shape widget which is just one shape it's not individual bursts or individual shapes and a lot of the properties are the same except it doesn't have the individual shape properties it just has all the properties here in different sections like the stroke fill and then you know physician you had a stroke fill and Stroke with are within different sections that they're not within individual properties because it's just one shape so for instance we have the shape to be a circle and I'll change the graphic style name to HTML so it animates within the entire page and I'll preview and we see we have a circle animating from the center it's just as simple to one shape you know it's not the burst if I click we have the burst going but as you can see you can start layering different bursts on top of each other to get this effect here so this is four different bursts layered on top of each other the two circles are one shape and then I have the burst widget with the different shapes animating from the center so yeah let's go ahead and work with this a bit so I do want the shape to be a circle let's start the shape on click a viewport so it animates together with the other bursts when I click and similar properties delay duration sign out for the easing you can set the easing there you can loop and you can have the shape play forward and backward if you'd like which is the yo-yo option okay so for the fill I'm going to make it transparent and the stroke we're going to leave just like that the position will leave at 50/50 transform origin 50/50 so animates from the center yes so we have the transform origin the radius angle stroke width scale opacity and a how to use section so I'll leave the transform origin at 50/50 and let's make let's make the radius a bit bigger so I'll say 200 and yeah we'll leave everything just like that so we just have one circle bursting out so I'll go ahead and preview and if I click we have the circle bursting along with those shapes okay and because the burst is set to 3 seconds in the circle is set to 15 hundred milliseconds there their timing is a bit different so let me just set the duration here to 3,000 milliseconds and I'll preview and I'll click so they'll animate together all right it's just that simple I can copy and paste this shape I'll add another circle a smaller one so I'll go to the radius set it to 100 and that's a so now I have a syrup of two circles oops I have two circles and one smaller than the other so I get this interesting if they're all right looks good alright so I'll copy the burst widget one more time and then I'll just add one more burst so here we go let me just all that down here alright yeah let me move this around a little bit something like this okay and so we'll add another burst let's add lets out a zig zag here so I'll select zig zag leave all the options the same and I'll just change the radius to be a bit smaller so I'll say 200 okay and I'll preview and I'll click now we have a zig zag and and the polygons there okay I can change the colors so I'll go to the individual shape properties and change the colors here something like that I'll click so we can see it a bit better so the yellow doesn't really work too well with those colors but you get the idea it's kind of you know it's really customizable you can change all the colors and and things like that for the shapes all right looks good so that is the burst widget I'm gonna delete this one here and just try with another shape in the same color let's do let's do a line and I think that should do it yeah so we have a line within the polygon but yeah it's really unlimited you can do a lot with this widget you could apply it to the center of the page you know if I were to change onload you know rather than on click a viewport to onload it would start immediately some change changing it to onload here and I'll preview you see the bird starts immediately without clicking and it set the loop so it just keeps looping and that's how I created you know this effect here alright if it was in a rectangle so let me just apply the area 1 graphic stylename and so area 1 and i'll set the start burst to on click of element whenever I click on that blue rectangle the burst will start okay so I encourage you to experiment with the widget and just make really cool bursts for your website and it could be could add a lot of interest to your website and can be more engaging and you know some fun animations and things like that so here I changed them all to on click of element rather than on click of viewport and when I click on the blue rectangle so here I'm clicking on the site nothing's happening but I'll click on the blue rectangle and it animates so you can have it when the user clicks anywhere on the page or when they click on a specific element right so I can move this rectangle around I can pin it using the pin options oops and I'll preview so it's pinned to the right so the user can scroll and it'll always be there if I were to set this to white if you do use a rectangle it can't be transparent so if you wanted to blown with the background just make sure that it's the same color as the background so it can't be transparent there otherwise it won't be applied to the rectangle so it's there you just can't see it so I'm clicking in that area and it just looks like it's part of the website if I were to have it like this I probably want it so the user clicks on the viewport so anywhere they click it would occur rather than having to look for that specific area I'll just change the on click viewport and that's basically it so I click anywhere and we see it's animating I can move it somewhere in there change the pinning options and that's it so if you do want multiple bursts different bursts you would have to create a new rectangle and change the graphics dhaniya you can't just copy and paste the element because it's only the burst only applies to one elements you would have to create a new graphic stylename copy and paste widgets and change the graphics down name for those widgets all right so that's that's uh that's it for this tutorial I'll go ahead and preview one more time and that's it for the burst widget looks good so yeah let me just change it to HTML so it's in the center [Music] but yeah you can really have a lot of fun with this you can change the number of shapes so I can do something crazy like 20 here in the number of shapes and just have multiple shapes for the burst okay change this to HTML here alright Smouse in the center and let me delete this rectangle preview and there we go so we can see we have more polygons there because I changed the number to 20 yeah you can do basically anything you'd like for the burst so the main things make sure the at first is placed at the top and then you can work with the burst widget or the shape widget and just you know work with the different properties there same with the burst widget here so you can do one shape or multiple shapes so you can have the burst or the burst with shapes so in the graphics in the library panel you can type in verse once it's installed you have the at first the burst widget or the burst shape widget which is just one shape all right looks good so that's it for this video tutorial to get access to the burst widget you can go to lease for you shop comm and here you can click Subscribe today and here you can click subscribe now to get access to all widgets and templates I come out with 439 a year the burst widget is right here here you can click Add to Cart to purchase individually or again you can click subscribe to get access to all widgets and templates I come out with 439 a year here are the features included a few of the widget options and the community section if you have any questions about the widget alright in this video will be right here so you can take a look at the video this video tutorial here on the widget page alright so that's it for this video tutorial um just a quick note I have been working on quite a few things from use for you I am looking at ways to you know with this whole news about Muse I'm looking at ways to transition my audience to an alternative that's the most I'll say about that I'm still going to be releasing widgets and templates but you know I do want to have a nice transition for my audience so that you guys can continue to build awesome websites without code and regardless what platform we'll be using you know the this idea of incorporating the scripts or incorporating this type of functionality that will that will transition over to whatever new platform I might decide to work with so yeah the you know muse for you a lot of the widgets they're using open-source scripts and that can be applied to any platform so there will be a one to one relationship for the widgets you know for whatever a new platform I decide to transition to so yeah a lot of a lot of what I've been thinking about and working on is as just you know what what new platform I want to work with and the easiest way to to to transition and to make it easy for for everyone who's worked with me used the easiest way to transition to to a new platform and and the different things that I'll be offering for that platform so it's it's an exciting time you know the idea of designing websites without code an awesome idea there's so many awesome scripts out there and there's so many ways to incorporate it into a website and that's kind of my whole vision you know like can you make some of these like if you go to awards calm like AWWA RDS calm can we make those type of websites without knowing code you know and it's possible you know there is a little bit of learning curve a little bit of code definitely helps you know just to know a bit of code but to be able to use an interface to make these really slick websites I think it's it's becoming more and more possible I think that's kind of a cool goal to strive forward you know making it really easy for for users to make really slick websites and use some of these more complex scripts in their sites so yeah that's kind of where I'm at with everything I still like you know making the talk the tutorials and offering things for muse but I am aware that at some point we're going to transition to a program that's actively being developed and that yeah that yeah it's actively being developed and progressing and it just makes for everything it just makes for a more exciting user experience in the end and and more uh yeah if we all know that the program is going to continue in that sense you know not to downplay muse but the idea that it's going to not be here maybe in a couple years is it's not the most exciting thing so we do want to work with programs that are actively being developed and for me that's that's the exciting part to keep growing to keep innovating and to keep progressing this whole world of web design and development so that's my two cents I know it kind of kind of went on for a bit but yeah that's just where everything is at I will keep everyone posted with videos and and everything like that um so yeah that's it for this video tutorial and kind of my little speech there or my little talk about where I'm at but yeah thanks again for watching again this to help you build awesome websites without code I feel like this video tutorial you can subscribe below also in the show more section below are links to other resources and links to muse for you shop comm so good thanks for watching and I'll see you in the next video tutorial thank you [Music] news for you awesome websites without code [Music]
Info
Channel: Muse For You
Views: 1,479
Rating: undefined out of 5
Keywords: adobe muse, adobe muse cc, adobe muse 2018, adobe muse cc 2018, adobe muse video tutorial 2018, adobe muse weekly update, muse for you weekly update, adobe muse widget, burst! widget, website animation, animation, mo.js, mo.js animation, mo.js and adobe muse, burst animation, shape animation, animating in adobe muse, mo.js burst, mo.js shapes, websites without code, website animation without code, easy website animation, muse for you widget, muse for you
Id: plmstMmc0lI
Channel Id: undefined
Length: 26min 36sec (1596 seconds)
Published: Sun May 13 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.