Join Chris Converse for an in-depth discussion in this video Making your design responsive, part of Create a Homepage Marquee with Edge Animate.
Now we are going to set up parts of our design to be responsive.…When we started the project we created a width of 100% on our main stage, so this means as…our stage collapses down and our Overflow is set to hidden, our photography will be cropped…and we won't get a horizontal scrollbar in our composition.…However, the problem we are going to have is when we close the browser down, the navigation's…going to be hidden.…So in Preview in Browser here, if I close the browser down, you'll see that the navigation…actually gets hidden.…When we get under 500 pixels, this is where we'll have horizontal scrolling. But again,…our navigation can be interacted with until we open the browser up to a certain width.…
So we are going to set a responsive design property on the navigation so that it moves with the browser.…So, let's close out of Preview in Browser.…On the stage I am just going to scroll over to the right-hand side here, and when we set…up our responsive properties, we have this little ruler here that we can move back and…
- Setting up your project
- Creating buttons and converting them to symbols
- Animating symbols
- Detecting a mouse rollover on the stage
- Creating custom interactions with jQuery
- Styling buttons and navigation elements with CSS
- Creating a rollover effect with jQuery
- Adding and removing custom debugging code
Skill Level Intermediate
Q: I can't get the code to detect a mouse rollover on the main stage to work in Edge Animate 2014.1.
<div> A: Adobe removed jQuery from the default set of files in Edge Animate. If you use click the + icon in the Scripts panel, select the "from URL" option, and link to a URL version of jQuery, such as the one listed here, the course will work fine.</div><div> </div><div><font style="font-family:Tahoma,Geneva,sans-serif;font-size:10pt"><a href="https://code.jquery.com/jquery-1.11.0.min.js" target="_blank">https://code.jquery.com/<wbr>jquery-1.11.0.min.js</a></font></div>