The easiest way to achieve this would be to specify the properties with code since there is no animated transition that you're looking for.
Start by opening Edge Animate and making two text fields with "home" and "about us". Then, name the text fields with a <div> ID by changing the name in the Properties panel. Click in the top text area and change the name <div> ID to something that's easy to identify with. I chose "homeText":
Repeat this step for the "about" text field. Next, click the Open Actions icon next to your home text field object in the Timeline area:
Choose "click" in the pop up menu that appears:
Copy and paste this code below (this is CSS code styling the color property). Make sure to change "homeText" to whatever you chose to call the home text field object:
In this example I made the home link's active color #650097 (purple). This code tells Edge Animate to make the home link purple and to make sure that the about link is the default black (#000).
Next, click the plus button in the Open Actions window. This time choose "mouseover". This is where we will add the code for the hover functionality.
Copy and paste the following code into the code window:
Finally, hit the plus button again to add one more event to the buton. This time choose "mouseout". This code will add funtionality to the button to make the underline disappear after the user is not hovering over it anymore. Copy and past the following code into the code window:
Repeat these steps for the aboutText button. The code for the about button is below.
If you need additional clarification / instruction, let me know. I hope this helps!
This is very helpful thank you.
What if you wanted to sort of "toggle" the text color when clicking, that is, when you click it, it turns a certain color, then clicking it again sort of de-colors it. And, when clicked, the mouseout function should be disabled. Do you know how to do this?
Thanks so much.
I have same question but little bit different. How if we have hover with animation,
Example, I have square icon when I mouse in icon it is fly from left to right (looping)
when mouse out, icon back to normal with reverse efect (back with fly from right to left, and steady on origin position).
Thanks in advance
To toggle the color you can add a flag like this:
var newC= true;
sym.$("aboutText").css("color", "#650097"); // color 1
sym.$("aboutText").css("color", "#000000"); // color 2
// click event will use the function to toogle the color
I found a million examples on how to change a css property, but I can't figure out how to return the current value.
In my case I need to use the current left value of a button in a calculation.
How do I access the left value?
Yea! Thanks AMULI! Works perfectly. Also thanks for the jquery link. Wow, didn't realize we could use all these jquery fucntions, etc.
Very nice of you to take the time to generate the example!
I'm working on image rollovers for my web site. I've created a rollover for a symbol image using the img tag. The code that I've put in for one of my images for the 'mouseover' state is the one below
sym.$("img").attr('src', 'images/sunrise aeration flyer button OVER.jpg');
I've used the same code for the 'mousedown' and 'mouseout' state with their designated image names. It works perfectly but when using the sym.$("img").attr('src', 'images/image-name.extension'); on other symbol images, when previewing in the browser and hovering over one of the images, all of the images show the 'over' state of the one image. It's as if all of the images are linked together. How can I have it so that when I hover over one image, it shows the 'over' state of only that one image, not affecting any of the other images?
I've tried changing the "img" to "img1" to differentiate from one img to another but the rollover function doesn't work. Any ideas?
$("img") indeed selects all and every <img> in your page. It's right to differentiate : did you use an ID (id="img1"), then the jQuery selector $("#img1") ?
Thanks for your reply. I'm new to Edge so bear with me. I've added the id="img1" in the line before
sym.$("#img1").attr('src', 'images/sunrise aeration flyer button OVER.jpg');
in the Actions window in the mouseover state and the rollover didn't work. Where you refer to id, is that on the top left corner under properties where you name the img?
Hello, i have the same problem of Justin, any help please?
I'm going to be teaching a course soon at work and was curious if there was a more "visual" way of doing it.
I'm a front end dev, so I'm comfortable with coding but the team members I'll be teaching come from Flash and Photoshop. So I wanted to know if it's possible to create effects such as this by strictly using visual tools (and no coding).
It doesn't seem like there is, which is why I'm also teaching HTML, CSS, JS.
What do you want to do exactly?
Due to the news of EA possibly being discontinued, I've postponed the class.
Trying to figure out if we Flash can output to HTML.
Flash HTML5 is Canvas. It does not do what Animate does.