Adding edges to an edge

Have created a rounded rectangle in Fireworks 8. I then made it transparent and added an edge. How can I add a think line around the inside and outside of the edge (like a colored picture frame with, say, black borders).
Would appreciate advice on the experts on this. Am relatively new to Fireworks.

Sorry, I can't help you with the way Fireworks anti-aliases. What I've seem to been advising people to do, lately, is make their Fireworks document two or four times bigger than what they want their eventual output to be, output a flattened version at that larger size, open the flattened version and reduce appropriately. *shrugs* Not ideal, but it does help for some problems.
As for your paste inside problem...the composite shape you have does not have anything "inside" anymore. When you punched out the smaller shape, you threw that part away. What you have now is more like the letter O. All is not lost!
Make another rounded rectangle, maybe one where the outline fits inside the frame you just made. Move it below your frame in the Layers panel, then paste your image inside that.
As an alternative to pasting, you can use your new rounded rectangle as a mask over your image. Have both your image and new rectangle in the Fireworks document. Make the rectangle white and place it over the part of the image you want to show. Select the rectangle and image, then use the menu item
Modify > Mask > Group as Mask.
(Oh man! I typed this all out, then got interrupted, came back hours later to find it still sitting here waiting for me to hit "Post Message!" )

Similar Messages

Adding Audio to previous Edge file in new Edge v3. Audio files don't appear?

Hi All,
Pretty exciting stuff that there is a new Edge Version out with Audio! So I gave it a go on a project I have made previously and had been using Buzz Audio, which I had working fine, but this new version looks like a much cleaner way to go (snaps to everyone on the Edge team).
However I have immediately encountered a problem when adding the Audio files to the library using the "+" symbol. I select the files to add which are .mp3 format and select Open. There is no error message, the Audio library flashes as though a new audio file has been added but then is back to it's original state showing no audio files are available (yes i've checked the Audio drop down arrow sever times ) ?
I then tried this using a new blank document and the audio files added fine as expected.
Can't seem to find why Audio wouldn't add to my previous project file which is about 1MB in total size and created with the previous version of Edge CC.
Thanks in advance for any ideas,
Cheers,
Jeff

Hi Darrell,
Thanks for your idea, I have given it a go with the following results:
Saved the previous file as a new file, in a new folder location.
Loaded up the file, no errors, all good.
Loaded up the audio files into the library and they appeared this time, excellent!
However upon loading up these audio files it immediately generated the following error message:
"An error occurred. Please save your work and restart Edge Animate."
This message now appears every time I try to open the Edge Animate file, presumably when it's now loading up the audio library where I first got this error.?
However, the audio does play and the file seems to work... despite the less than encouraging message i'm getting. I've tried this on a few different files now and I seem to get the same error message result when adding audio to other older tutorial created files also... could it be possible it's not just me with this issue?
Thanks again for your help, hopefully we/someone can make sense of the error message that is now hanging over?
Cheers,
Jeff

Adding own javascript to edge animate

I'm having a bit of trouble adding my own javascipt to an edge animate project. I created a website that has javascipt in it. I am trying to recreate it using edge animate because I was interested in using edge animate to take the site up a notch... basically I have a template of what I need the site to do with the existing javascipt I have, but I haven't gotten it to work integrated into edge animated yet.
I imported all of the images I have from the existing website into edge animate and then relabled all of the instances on the stage to reflect what I have called them in the javascript. I've tried importing my javascript file into the "scripts" section and then just linking to the source in the main html page that edge generates but the javascript doesn't work. Then I've tried putting parts of the script into the CompositionReady panel and onto the button I want clicked directly in the elements.... this works ok, except I have to change the syntax a little (not too much of a pain except when I don't think the edge animate javascript has the same functions).....I'll post below and see if someone can help me get this working either by just linking to the file directly from the html or making the script campatable in edge syntax and posting it in the appropriate element panel. Here is the seperate script from the outside javascript... show I change the syntax and put it directly on the"checkbutton" button in the elements (if so, how?) or should I just link to the file (if so, how come when I put a simple link in the header that it doesn't work: <script type="text/javascript" charset="utf-8" src="js/myscript.js"></script>
script from myscript.js:
//sym.$("pic1a").hide(); //edge animate syntax when in animate panels.... does my external js sheet have to keep this syntax?
var carArrayX = [140,140,330,460,650,765];
var carArrayXcounter = 0;
var carArrayY = [ 440,440,405,390,390,390];
var carArrayYcounter = 0;
$( '#blueCar' ).addClass( "hidden" );
var counterBox = 0;
    $('#checkButton').click(function(){
     if (counterBox == 0)
         alert("Please choose an answer");
     else if (counterBox > 1)
         alert("Please choose only one answer");
     else if (counterBox == 1)
         $(this).css('background-image', 'url(button_down.png)');
         $("#pic2a").unbind("click");
         $("#pic2b").unbind("click");
         $("#pic2c").unbind("click");
         $("#pic2d").unbind("click");
         $("#pic2e").unbind("click");
         $("#pic2f").unbind("click");
           if($("#pic2a").hasClass("hidden")){
           $("#words_correct").removeClass("hidden");
           $( '#pic3a' ).removeClass( "hidden" ); //correct answer
           $( '#pic1a' ).addClass( "hidden" );
           $( '#blueCar' ).removeClass( "hidden" );
           $('#blueCar').animate({
            left:carArrayX[carArrayXcounter] + "px",
            top:carArrayY[carArrayYcounter] + "px"
           carArrayXcounter ++;
           carArrayYcounter ++;
           var cookieXcounter = carArrayXcounter;
           var cookieYcounter = carArrayYcounter;
           //console.log(cookieXcounter);
           //console.log(cookieYcounter);
           $.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});
           $.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});
           console.log($.cookie('mycookieX'));
           $( '#pic1b' ).addClass( "hidden" );
           $( '#pic1c' ).addClass( "hidden" );
           $( '#pic1d' ).addClass( "hidden" );
          else if($("#pic2b").hasClass("hidden")){
           $("#words_wrong").removeClass("hidden");
           $( '#pic4b' ).removeClass("hidden");//incorrect answer
           $( '#pic1b' ).addClass( "hidden" );
           $( '#pic1a' ).addClass( "hidden" );
           $( '#pic1c' ).addClass( "hidden" );
           $( '#pic1d' ).addClass( "hidden" );;
          else if($("#pic2c").hasClass("hidden")){
           $("#words_wrong").removeClass("hidden");
           $( '#pic4c' ).removeClass( "hidden" );//incorrect answer
           $( '#pic1c' ).addClass( "hidden" );
           $( '#pic1a' ).addClass( "hidden" );
           $( '#pic1b' ).addClass( "hidden" );
           $( '#pic1d' ).addClass( "hidden" );;
          else if($("#pic2d").hasClass("hidden")){
           $("#words_wrong").removeClass("hidden");
           $( '#pic4d' ).removeClass( "hidden" );//incorrect answer
           $( '#pic1d' ).addClass( "hidden" );
           $( '#pic1a' ).addClass( "hidden" );
           $( '#pic1b' ).addClass( "hidden" );
           $( '#pic1c' ).addClass( "hidden" );;
    $('#pic2a').click(function(){
      $( '#pic1a' ).removeClass( "hidden" );
      $( '#pic2a' ).addClass( "hidden" );
      counterBox++;
    $('#pic2b').click(function(){
      $( '#pic1b' ).removeClass( "hidden" );
      $( '#pic2b' ).addClass( "hidden" );
      counterBox++;
    $('#pic2c').click(function(){
      $( '#pic1c' ).removeClass( "hidden" );
      $( '#pic2c' ).addClass( "hidden" );
      counterBox++;
    $('#pic2d').click(function(){
      $( '#pic1d' ).removeClass( "hidden" );
      $( '#pic2d' ).addClass( "hidden" );
      counterBox++;
    $('#pic2e').click(function(){
      $( '#pic1e' ).removeClass( "hidden" );
      $( '#pic2e' ).addClass( "hidden" );
      counterBox++;
    $('#pic2f').click(function(){
      $( '#pic1f' ).removeClass( "hidden" );
      $( '#pic2f' ).addClass( "hidden" );
      counterBox++;
    $('#pic1a').click(function(){
      $( '#pic2a' ).removeClass( "hidden" );
      $( '#pic1a' ).addClass( "hidden" );
      counterBox--;
    $('#pic1b').click(function(){
      $( '#pic2b' ).removeClass( "hidden" );
      $( '#pic1b' ).addClass( "hidden" );
      counterBox--;
    $('#pic1c').click(function(){
      $( '#pic2c' ).removeClass( "hidden" );
      $( '#pic1c' ).addClass( "hidden" );
      counterBox--;
    $('#pic1d').click(function(){
      $( '#pic2d' ).removeClass( "hidden" );
      $( '#pic1d' ).addClass( "hidden" );
      counterBox--;
    $('#pic1e').click(function(){
      $( '#pic2e' ).removeClass( "hidden" );
      $( '#pic1e' ).addClass( "hidden" );
      counterBox--;
    $('#pic1f').click(function(){
      $( '#pic2f' ).removeClass( "hidden" );
      $( '#pic1f' ).addClass( "hidden" );
      counterBox--;

I also had the problem of wanting to use custom javascript that I could call from an Edge Animate Composition.
The solution I found (from a post by hemanth kumar r https://forums.adobe.com/thread/1479495) was to make variables and functions properties of AdobeEdge.
So in the external .js document a variable is declared and given a value:
AdobeEdge.myVariableName = "The variable value";
To use it in a symbol/element:
alert(AdobeEdge.myVariableName);
And a function is declared:
AdobeEdge.myFunctionName(param){...function code...} //param optional
To call these in a symbol/element:
AdobeEdge.myFunctionName(param);
To test this out I created a button on my stage that called a function in my custom .js file that simply called an alert. Once the function works you can expand it to do anything you want (I used it to go to a new html page).
Peter Small

PE4: Adding Edges/Frames

I have some jpg files that are edges/frames. The outline area is black, and the center is white. I want to use some of these edges on some photos I have. I am doing this but not sure if I am doing it correctly.
I know how to correctly size the two photos to match. I am able to copy the main photo on the frame graphic, which will add a layer. Next I use the Blend>Multiply. Doing it this way, I have the black outline as the frame part, and the photo is in the center, great if I want a black outline.
However, at times I may want white or other colors for the outline part. I approached this differently and did manage to get a white outline. I created a mask using the edge graphic, and applied it using the mask process. Is there another way to accomplish this, that is, not using the mask method?
Simply put. When using a edge/frame graphic file on a photo. What would be the steps to have a black outline edge? What would be the steps to have a different color outline edge?
Just for heck of it and curious to know. How would you go about having the edge part transparent? I know if I want to keep it transparent it will need to be saved as a PSD file.
Thanks,
Tony (XP Pro)

Tony,
It sounds like the Multiply Blend Mode is causing problems.
Try this:
1. On the the frame layer, select the Magic Wand Tool and click within the white (center) portion. This selects all the white.
2. Hit the Delete key (or Edit>Cut, or Ctrl-X). This will delete the white, leaving just the frame on transparent background.
3. Set Blend back to Normal.
4. Select the frame by Crtl-clicking the frame layer's icon.
5. Set Foreground color to your new frame color and Edit>Fill.
You can later change the frame color by activating the layer and applying the Hue/Saturation tool.

Adding HTML5 animation from edge animation to captivate 8

I created a simple/small animation in Edge Animation, published it as .oam . In Captivate 8, Media, HTML5 Animation, selected the animation and it displayed on the slide. The problem is now, in the preview the animation doesn't play. I even published it on a web server and it doesnt show there either. Does anyone have any idea what is going on??

Just a suggestion: try to add a play button in Edge Animate, maybe the animation is so short that you don't have time to see it? What is its duration? I can insert OAM's in CP8.

Adding a Video to Edge Animate CC

Is there a way to add a video to Edge Animate? I like to export it as a HTML5 file.
Thanks,
joe

the easiest way is with the edgeHero plugin. See at edgeHero.com

How do I use edge commons composition loader to load multiple compositions with a next and back button?

I am working on an interactive book and have set up each page as a separate composition in edge.
I am using the edge commons JS library to load multiple compositions into a main composition.
You can see how this works here: Edge Commons - Extension Library for Edge Animate and Edge Reflow | EdgeDocks.com
The way the edge commons tutorial is set up requires a button for each composition i want to load. I am interested in loading multiple compositions with a "next" and "back" button, and a "swipe left, "swipe right" gesture on the content symbol that each composition is loaded into. I also need the swipe features on the content symbol not to interfere with the interactive elements on the loaded composition.
Please suggest a solution that will work without adding additional scripts beyond edge commons and jquery.

Sort of. I'm using this code inside an action for a button symbol. But it doesn't work perfectly. Trying to debug it.
Let me know if you have any luck.
//Check to see if pageCounter already exists
if (typeof EC.pageCounter === 'undefined') {
// it doesn't exist so initialize it to first page
EC.pageCounter = 2;
//check if the page is only 1 digit -- patch for single digit
if (EC.pageCounter < 9) {
// it is, so we need to pad a 0 on the front.
EC.pageCounterString = "0" + EC.pageCounter;
//e.g. 01 ...09,11,12,13....115,222352,,....
else {
EC.pageCounterString = EC.pageCounter;
EC.loadComposition(EC.pageCounterString + "/publish/web/" + EC.pageCounterString + ".html", sym.$("container"));
EC.pageCounter = EC.pageCounter + 1;
//TODO for back -1

Adobe Edge Animate CC won't preview in Browser

I am writing a review on Adobe Edge Animate CC. Loving the program until I tried to preview it in a browser.
I am on a PC, using latest version of Firefox, and IE10. The only thing that is viewable in either browser is a static image.
The animation runs perfectly "within" the Edge Animate CC program.
Need to resolve this problem, as I would hate to give the program a bad review, especially if it is something that I'm doing wrong.
Thanks for any help you can give,
Dee Marie

Thanks for your response to my question.
The animation I created was very simple one.
The Original Animation (that I could not view in any browser)
1. Resized the Stage and changed the background color
2. Created a "moon" shape from the Ellipse Tool, adding a silver color and inverted shadow
3. Animated "moon" shape using Motion Paths
4. Added a font from Edge Web Fonts (clicking the Add Fonts within the Edge Web Fonts box), changed font color and size
Saved each step as I created them
The first time I tried to create the above animation it would not animate when previewed in browser.
TODAY: I started from scratch.
The only thing that I did differently: after saving "each" step, I clicked preview in browser.
To my surprise, each time I added an additional step the animation worked perfectly when I clicked "preview in browser"
Not sure what I did wrong the first time ... as I stated above, the only thing that I did differently this time was to click the "preview in browser" between each step (after first saving each step).
So, whatever I did, it is now working perfectly!
Thanks again for your helpful response.
Sincerely,
Dee Marie

CS5 - Graphic with feathered edge disappears when exported to PDF

I just ran into an odd problem, and unfortunately the book got printed before we saw the problem … ugh!
I set up a chapter header for a book. It was a graphic of wood to which I added a 0p9 feathered edge. In a text box on top of this, I put the chapter name in white type. They were both on the same layer, but the text box was on top.
I didn't notice at the time that when I exported the page to PDF, the graphic disappeared … and since the type was white, the whole chapter header was invisible. If I opened the PDF in Acrobat Pro using Pitstop, I could select a box where it was supposed to be, but couldn't make it show up.
I tried creating another layer and moving the text up to that; no good. The only way I was eventually able to make that darn wood graphic show up on the PDF was if I shut off the feathered edge.
Now I know I've used a feathered edge frequently, and have never run into this problem before. Does anyone have any idea why this time should be any different? There's was no color other than black, only one layer, and nothing was set to non-printing. I used the same export settings I always use. Stumped here … and very unhappy that we missed it and printed the book without the headers (my fault for not catching it, but doesn't make me any happier).
Specs:
Mac OS 10.5.8
InDesign CS5 (version 7.0)
Export setting - set to print to Acrobat 8/9 compatibility (PDF 1.7) with crop marks on
Hoping someone has some insight here. It's too late for the current job, but I'd like to know why it did it so I can avoid the problem in the future.

Hi John,
My InDesign files are too big to upload anywhere, but these two screen shots show an example of this problem.
This is how the spread looks in InDesign (link and effect info for right image shown):
... and this is how the exported PDF spread looks (normal "Press Quality" export setting):
As you can see, several, but not all, objects with transparent effects have disappeared.

Add TWO Edge Animations/Stages to ONE web page (without using oam)

Hi All,
This is a bit of a follow on question for those who are adding scalable height/width edge compositions to web pages using the awesome piece of code created by Sarah (http://sarahjustine.com/) and other forum contributors... (attached code below).
My question is: How do I add a second Edge Animate composition to the same page using this method? So it's using "Stage" already... i'm guessing it's a matter of changing it to "Stage_02" etc in the following code? I've tried changing the relevant code but so far I have been unsuccessful in getting it to recognise a second stage.
Any help would be appreciated, many thanks in advance for your time.
Jeff
Index.html

    <script type="text/javascript" charset="utf-8" src="clouds_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-78729757 { visibility:hidden; }
    </style>

<div class="stagewrap">
        <div id="Stage" class="EDGE-78729757">
        </div>
</div>
Adobe Edge Stage Script
var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage
sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-origin":"0 0"
function scaleStage() {
    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage
    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage
    var parentWidth = stage.parent().width(); // Get the parent of the stage width
    var stageWidth = stage.width(); // Get the stage width
    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales
    var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales
// Rescale the stage!
     stage.css('transform', 'scale(' + rescale + ')');
    stage.css( '-o-transform', 'scale(' + rescale + ')');
     stage.css('-ms-transform', 'scale(' + rescale + ')');
    stage.css('-webkit-transform', 'scale(' + rescale + ')');
     stage.css('-moz-transform', 'scale(' + rescale + ')');
    stage.css('-o-transform', 'scale(' + rescale + ')');
    parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts
// Make it happen when the browser resizes
$(window).on('resize', function(){
     scaleStage();
// Make it happen when the page first loads
$(document).ready(function(){
    scaleStage();

I also met this question, have you solved this question? Jeff

Adding HTML content in text frame

I'm a little bit frustrated when adding some copy to edge. In order to add a simple hyperlink for example in my paragraph of text, I need to use the replace text field where I can add the <a href..>
and change it over before it's viewed.
Is there any plans on making this easier? Or is there better workaround?
Thank you.

EW wrote:
That is correct.> In old versions of Planning if you knew how to write html you could add stuff into the instructions that could be a hyperlink and could be edited for fonts size and color etc.
>
This is no longer available based on the base code changing and no longer allowing it. Other might have suggestions on how to make so that works again but way I know handle this is through "menus". In menus you can add hyperlinks to other stuff.
Well I thought it changed back in later versions 11.1.1.3.04 (I know not much use if you are on earlier versions) :- 9475065 – Users cannot use HTML commands in data form and task list instructions.
Cheers
John
http://john-goodwin.blogspot.com/

Edge Animate with Fancybox?

Hi:
I can't seem to get Edge Animate and Fancybox to work happily together. Please see:
http://www.mercerhrs.com/marcomm_world/test/testfancybos.html

Here is an old thread that may be of assitance.
http://forums.adobe.com/message/4761205#4761205
Also, here is a tutorial and sample file to follow that should get you there: http://businessanywhere.biz/blog/2013/03/adding-a-lightbox-to-edge-animate/
Darrell

Light box Edge Animate 2014.1.1

I'm not very well versed in the code please give the finished work proet version Edge Animate 2014.1.1. I need to open photos in the ie light box

Does this help?
Adding a Lightbox to Edge Animate - YouTube

Fancybox iframe in Edge Animate - Not showing correct height and width

Hi All,
Can someone please provide advice or a solution to this issue.
I have been trying to use the Fancybox.js in Edge Animate to call an iframe (as a lightbox pop up).
However when I try this it doesn't show the correct height and width properties - even though I am setting them.
When I test this on my hard drive it works fine in Chrome and Firefox. However when tried online on a test server I get a slim pop up that hasn't set the height properly.
Could this be because the iframe is pre-loading the composition/html page first before setting the size??
Please help
CODE USED:
$.fancybox.open(
type: 'iframe',
autoScale : 'false',
height: '600',
widht: '600',
href : 'website composition link.html',
padding : 0
Other references: http://businessanywhere.biz/blog/2013/03/adding-a-lightbox-to-edge-animate/
Cheers,
Jason

HI Darmendra,
Thank you for your reply to this.
I worked out what the problem was - my external composition that was created Edge Animate was centred both horizontally and vertically.
This was created the problem. When I took this off the fancy box worked well.
Cheers,
Jason

Insert Edge Animate Compositions Unavailable

I don't have an option to import Edge Animate Compostitions in Dreamweaver's 'Insert' menu.
Was this an update to CS6 only available in the cloud and not to boxed versions?
I have CS6 master collection. DW 12.0 Build 5861 for Windows.

This feature of inserting Edge compositions directly into DW is available only to Creative Cloud subscribers (at the moment, since Creative Cloud brings in all the new features as soon as they're released). See here: http://helpx.adobe.com/dreamweaver/using/import-edge-files.html
However, you can manually insert your Edge compositions into your code with a div tag and a unique Identifier to the div, also adding a few supporting Edge files. You should publish your Edge composition for 'Web'. You can possibly decode the published index.html file source code after that. If you need more help doing this, do post back!
-ST

Adding edges to an edge

Similar Messages

Maybe you are looking for