Just an idea for Edge animate. Was wondering if having the ability to link layers with other layers (like AE) would be difficult to put into
the program. Cheers
↧
Edge Animate idea
↧
translateZ blurs SVGs on WebKit browsers
The Edge library sets the translateZ css property on symbol elements, this forces WebKit browsers to treat the element as a 3D element which makes vector imagery dramatically softer.
I have observed that unnessecarily treating elements as 3D also affects performance.
A few small tweaks to the Edge JS made it clear to me that this is an easy win for Edge, both preformance and visuals noticably improved after commenting out a few lines (where translateZ was being set).
↧
↧
Is there a way to loop individual layers in Edge?
I like being able to loop the animation in Edge so it will play continually. But coordinating an edge animation with a number of different layers for each object makes me want to be able to loop each layer. Right now it seems you can only insert an action trigger in the general timeline. Is it possible to insert action triggers to individual layers?
For example, I made this animation for my illustrator portfolio page (sorry about the long URL):
http://home.comcast.net/~gregfisk/assets/gf_web_folio_logo_illust/gf_web_folio_logo_illust .html
I have set up layers for each color, and layers for each texture. Right now it cycles through them in a regular pattern. But I'd like to set individual loops for each color and texture layer so that the animation varies a little.
Is there a way to do that? I'm only just getting my feet wet with Edge, so if there is a way, I haven't found it in the manuals and tutorials I've gone through. (Or if it IS in a tutorial, it's not clearly labeled as such.)
Any assistance here is appreciated. Thanks in advance -
Greg
↧
"Create your own story" with Edge
I'm new to Adobe Edge but I would like to try realizing a "create your own story" project. Is this possible?
Any trick, advise, assistance here is appreciated!
Thanks in advance,
Livia
↧
Sprite Sheet Animation started by Mouse Click
I have a animated fire sprite. It is set to hidden, another button is set to "show" this sprite when it's clicked.
Problem is that the animation runs while hidden so when you click the button that reveals the sprite, the animation cycle may be complete. It's set to loop but I would like the sprite to start on frame 1 and begin play once you click the button, not autoplay.
Any ideas how to do this?
↧
↧
Edge Animate being very slow
When I first downloaded Edge Animate, everything worked perfectly fine. Now, it's been a couple weeks and it has suddenly become very slow. Just trying to scroll through the timeline takes a while for it to follow through with my mouse dragging. Not sure what the issue is!
↧
TV monitor display project, need advice.
So I will be starting a project soon for my job. It will require some content for a store lobby TV display screen. Basically I will be making some content, whether it be scrolling images, animations, or maybe a video clip playing automatically. I will have maybe all of these things to be played throughout the day in the lobby of my work for customers to be viewing. This is the first time I have taken on a project such as this and I'm not sure where to start. I need advice on what type of information I need in order to begin this such as what size to start my project as, format, etc. Thanks!
↧
Creating an overlay menu screen?
I'm building an app in Edge and would like a menu system that pops up on each page every time the user presses the menu button.
The menu will have a semi-transparent background so that you can still see the page behind, as well as 100% opacity menu buttons. The buttons will animate in. I would like this on every screen of a 20+ screen app.
Firstly, is it possible?
Secondly, is it a case of building the menu functionality and then copying and pasting it in to every page, adding in the actions to trigger the menu etc?
Is there a more economical way of doing this to cut down on memory?
Many thanks!
↧
Edge Animate program itself running slow
The Edge Animate CC program itself is running really slow on my work computer right from the start the first time I installed it. When I try to do anything the response is sluggish at best, and often the “Not Responding” message comes up. After about 30 seconds to a minute, it unfreezes and the operation completes. Other CC programs including Dreamweaver, Photoshop and Flash run fine – it is just Animate. Animate also runs normally on my home computer. Reinstall was no good.
The computer is a Dell desktop with a Core i5-3330 processor and 8G of RAM running Windows 8 Pro 64-bit.
I’m afraid this may be one of those rare obscure issues that is impossible to resolve, because I can’t find anyone with a similar problem online, so any hopeful suggestions would be welcome.
↧
↧
import png sequence and scrub through
Hi all,
Can edge animate do something like this?
Click on the 3D model and it will spin with mouse control
http://visualscience.ru/en/projects/hiv/3d-model/
So its a collection of images that when played, represent a spinning 3D object. Scrub right and the timeline plays, scrub left and the time line rewinds - and it will scrub in either direction forever.
I have done something like this in flash, but wondered if edge can do this too?
Thank you
↧
How would I add a play action to an object with the first click and a reverse play action to that same object with a second click?
How would I add a play action to an object with the first click and a reverse play action to that same object with a second click?
↧
Make animation scrollable without large stage?
Hi,
I've seen many videos showing how to make an animation scrollable but so far, they all involve using a large stage in the composition. I'm looking for ways to export the animation into a Wordpress page, so I'd like to avoid having a huge dive inside the page that's already built.
↧
SVG and relative position
Hi,
Something weird is happening to me with Animate 4.0
When I import an SVG graphic on the stage, and I convert its X coordinate from px to %, inside an also responsive (%) Stage, when I try it (in Safari), and I strecht the browser window, the graphic's position adapts but in the opposite direction. That is, if I enlarge the width of window, my graphic escapes to the left, and when I narrow it, it goes to the right.
With PNG graphics the behavior is normal as expected, but not with SVGs.
Any ideas?
Thanks
↧
↧
I am trying to import external CSS in Edge Animate, Has anyone got a "simple" example showing this working that I could have a look at?
I am trying to import external CSS in Edge Animate, Has anyone got a "simple" example showing this working that I could have a look at?
↧
How to create mouse parallax
I am looking for mouse move parallax effect in edge animate. If you aren't getting my words then check this out (Paul Trani | Follow Mouse Movement in Edge Animate). After this tutorial I am able to make my background image move with my cursor. But the problem is that it works with X position I don't know how to do this with Y axis since its linked with timeline.
Hope I'll get a solution here.
Thanks in advance.
↧
How I add @keyframe rules for Edge Animate?
Hi,
I'm trying to spin a 3D cube (4 sides) infinite side by side and I think I need @keyframes rules for animation.
What is syntax for that in Edge Animate? Should I use external css-file or what?
-Mariian-
↧
How to make the code more simpler for dynamic data?
Hi everyone!
I have a JSON file with over 200 records.
I want every record to be active button with unique actions.
The code is the below:
$.getJSON("content.json",
function(data){
for(var i=0; i<200; i++){
var s = sym.getSymbol("base").createChildSymbol("template", "conts");
s.getSymbolElement();
s.element.attr('id', 'symbol'+i);
s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')" });
s.$("imageholder").data('myIndex', i);
s.$("imageholder").data('title',data[i].name);
s.$("imageholder").click("click", function(e){
if ($(this).data("myIndex") == 0){
WB = 10;
sym.$("#symbol0").show();
sym.$("#symbol1").hide();
sym.$("#symbol2").hide();
sym.$("#symbol3").hide();
sym.getComposition().getStage().getSymbol('placer').$("holder").css({"background-image":" url("+$(this).data('Large')+")"});
sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('tit le'));
if ( WB == 10) {
sym.getSymbol("#symbol0").$("rect").animate({opacity:1},700);
};
}
else if ($(this).data("myIndex") == 1) {
WB = 11;
sym.$("#symbol0").hide();
sym.$("#symbol1").show();
sym.getComposition().getStage().getSymbol('placer').$("holder").css({"background-image":" url("+$(this).data('Large')+")"});
sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('tit le'));
if ( WB == 11) {
sym.getSymbol("#symbol1").$("rect").animate({opacity:1},700);
};
}
});
s.$("imageholder").mouseout ("mouseout",function(e){
if ($(this).data("myindex") == 0 && WB != 10) {
sym.getSymbol("#symbol0").playReverse("selectend");
}
else if ($(this).data("myindex") == 1 && WB != 11) {
sym.getSymbol("#symbol1").playReverse("selectend");
}
}
});
s.$("imageholder").mouseout ("mouseout",function(e){
if ($(this).data("myindex") == 0 && WB != 10) {
sym.getSymbol("#symbol0").play("selectstart");
}
else if ($(this).data("myindex") == 1 && WB != 11) {
sym.getSymbol("#symbol1").play("selectstart");
}
});
}
});
How is possible to place an each command or something else in order not to write for each Index and for each function the actions?
Now I am writing for every function of (mouseover, click, mouseout) the actions that every record of the JSON should make.
Can someone help me?
↧
↧
Can I use an animated symbol acting like a mouse cursor?
Hi,
I'd like to use an EDGE animated symbol ( a blinking magic wand) as my mouse cursor (hiding the original cursor) that stays on the stage all the time at a certain point in the timeline and when clicked on a hotspot, goes to another point in timeline where the symbol no longer act as a mouse cursor. I used the following code suggested in the following thread by YOSHIOKA Ume
Re: How to I have an animated symbol follow the coordinates of the cursor when clicked?
1:create a symbol named "Symbol_1"
2:add this code on Symbol_1-Timeline.complete.
//delete this instance when timeline complete. sym.deleteSymbol();
3:add this code on document.compositionReady.
//on/off mousemove event handler method
sym.$("Stage")
.mouseover(function(){
sym.$("Stage").on("mousemove",draw);
});
//create instance of Symbol_1 on stage.
function draw(evt){
var instance = sym.createChildSymbol("Symbol_1", "Stage");
instance.getSymbolElement().css({
position:"absolute",
top:evt.clientY,
left:evt.clientX });
}
But the problem is, the symbol is being repeated/drawn one after another according to the above code, which I don't want. Changing the cursor using CSS requires a URL of a image file, not a symbol inside EDGE as it seems. How can I get back the normal mouse cursor in another point in the timeline (and go back to the animated symbol mode again if needed?). If I click on another hotspot element on the stage, do I actually click on the attached symbol as a cursor? Or the hotspot?
Also, how can I put a constraint on the cursor so that it stays within a certain rectangular area smaller than the stage?
A suggestion is much appreciated.
↧
My new creation !
Hello
I'm a French WebDesigner, u should take a look to the new website i have done. I make it entirely with Edge Animate !
Thanks for your time, bye bye
↧
Rated drag and drop
Hello everyone. I apologise for asking a question that has probably been answered previously. I have a dilemma with my animation that I have tried prowling the Internet for for quite some time now and I have yet to find a solution to fit what it is I'm after.
The animation that I am making in Edge is a drag and drop game which gives students varied results based on how they do. Currently I have the elements dragging and dropping in their correct locations. Once they are in their locations though they do not drag again, making the students have no choice but to get everything correct. After the animation is complete the timeline plays and stops at a marker (Which will be altered based on the answers the students have provided at a later point).
What I need from this animation is to:
- allow students to drag and drop elements into both correct and incorrect locations.
- to be able to drag them again after placing them.
- to keep a track of the amount of elements that have been dropped.
I would be incredibly grateful for any comments and feedback on this. I hope I am not the only one who has tried to do this. It feels like I am the only one who is having a problem like this!
Here is my code currently as well as I am sure I am at least halfway there. The final line (sym.play();) is just for the timeline playing and will change at a later point.
// insert code to be run when the composition is fully loaded here var dragForms = ['Drag1', 'Drag2', 'Drag3', 'Drag4', 'Drag5']; var dropForms = ['Drop1', 'Drop2', 'Drop3', 'Drop4', 'Drop5']; var Pos = [ {'x':29,'y':115}, {'x':29,'y':160}, {'x':29,'y':205}, {'x':29,'y':250}, {'x':29,'y':295} ]; Pos.sort(function() {return 0.5 - Math.random()}); for (i=0;i
↧