Jump to content


Photo

Autoscale symbol to symbol content


  • Please log in to reply
12 replies to this topic

#1 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 13 September 2011 - 01:04 PM

Hi all Fireworks Guru!

In general, the problem is the following. I have a button in the Windows Phone 7 style which consists of primary and secondary text layer, as well stroke layer.

Posted Image

I want create a rich symbol graphics which will manage the data in the button.

Posted Image

And trick is in how to scale a button if the secondary text layer begins to occupy more than one row
Because by style this button can have the two row style like this.

Posted Image

To implement this behaviour i create the graphic symbol with next layers.

Posted Image

Where:
primary_text - text layer;
secondary_text text layer;
bg - shape object with 3px stroke.

In order to scale shape object (bg) i create triger by secondary_layer height

var strlength = Widget.GetObjectByName("secondary_text").height;
if (strlength >24) {

SCALE FUNCTION

		});

Why > 24? Because initial height size of shape object is 24 px.

Next, I needed to scale the object (bg). But then the trouble starts a standard option in the Element object API is an option only for reading.

Posted Image

Ie if I write a string inside my condition:

Widget.GetObjectByName("bg").height= 200;

Nothing happens :(

To solve this problem, I started using the JavaScript library bs.js used in OrangeCommands extension.

I write second code to scale object in Fireworks Document

fw.selection.each_with_index(function(o,i) {
  		o.resize(o.width,o.height = 160);

The only problem with this piece of code, it applicable to the selection, ie, I need to selecting the object "bg" from JavaScript. I have not found a way to do it.

If anyone knows how to make a selection of object from JavaScript or offer some other method of solving the problem, please leave your suggestions.

P.S. At this stage, to verify that the code is work I use the following, if the height of the text block (secondary text) more than 24 px I select all the objects and scale them in height to 160
px


if (strlength >24) {

		fw.getDocumentDOM().selectAll();

		fw.selection.each_with_index(function(o,i) {
  		o.resize(o.width,o.height = 160);

		});

Here's how it works in practice http://screencast.com/t/mGszGjszc

All that is needed now to complete the normal operation, select object (bg) before executing the scaling code:

fw.selection.each_with_index(function(o,i) {
  		o.resize(o.width,o.height = 160);


#2 bomberstudios

bomberstudios

    FireworksFreak

  • Members
  • PipPip
  • 18 posts
  • Location:Spain

Posted 13 September 2011 - 01:11 PM

Interesting question.

I don't really know how you'd go about doing this (and the times I've tried to build "smarter" smart symbols I ended up going crazy and cursing the API), so I'm replying to say "my heart is with you" (and also to keep up with responses : )

Good luck!

#3 bomberstudios

bomberstudios

    FireworksFreak

  • Members
  • PipPip
  • 18 posts
  • Location:Spain

Posted 13 September 2011 - 01:15 PM

Hey, thanks for using bs.js : )

Here's how you make a selection using the API in a regular Fireworks document:

fw.selection = some_dom_element;

(yes, it's that simple).

However, Symbols are entirely different beasts. IIRC, you don't get access to the DOM when the JSF for a symbol is running.

You could try

fw.selection = Widget.GetObjectByName("bg");

but I really doubt that would work.

#4 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 13 September 2011 - 01:27 PM

Interesting question.

I don't really know how you'd go about doing this (and the times I've tried to build "smarter" smart symbols I ended up going crazy and cursing the API), so I'm replying to say "my heart is with you" (and also to keep up with responses : )

Good luck!

Thanks a lot!

#5 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 13 September 2011 - 01:40 PM

Hey, thanks for using bs.js : )

Here's how you make a selection using the API in a regular Fireworks document:

fw.selection = some_dom_element;

(yes, it's that simple).

However, Symbols are entirely different beasts. IIRC, you don't get access to the DOM when the JSF for a symbol is running.

You could try

fw.selection = Widget.GetObjectByName("bg");

but I really doubt that would work.


Unfortunately it does not work :(

#6 bomberstudios

bomberstudios

    FireworksFreak

  • Members
  • PipPip
  • 18 posts
  • Location:Spain

Posted 13 September 2011 - 01:43 PM

Unfortunately it does not work :(


Yep, I just tried and it doesn't work...

One thing you may want to try is use an AutoShape. The interface for the end user is a bit uglier (i.e: it's nasty) but there's a lot you can do with them.

See the shapes available at John Dunning's site, he has some wonderful samples of what can be achieved with some creative use of the AutoShape API.

#7 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 13 September 2011 - 01:56 PM

Yep, I just tried and it doesn't work...

One thing you may want to try is use an AutoShape. The interface for the end user is a bit uglier (i.e: it's nasty) but there's a lot you can do with them.

See the shapes available at John Dunning's site, he has some wonderful samples of what can be achieved with some creative use of the AutoShape API.


Thank you, I do not plan to do AutoShapes, to implement this case study I will have enough number of objects of different length that I can show and hide. I just wanted to use the native scaling. Maybe it's just impossible to implement within the symbol API. But I still have hope:)

#8 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 14 September 2011 - 12:44 PM

What is each_with_index() and resize()? Are those prototypes?

You can get the DOM of the symbol:

fw.getDocumentDOM(Widget.elem.symbolID)

However I haven't been able to find much you can do with the DOM other than read it.

#9 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 14 September 2011 - 01:24 PM

What is each_with_index() and resize()? Are those prototypes?


This is a part of Orange Command code Height +10 what can resize selected object

Original code is:

try {
  fw.runScript(fw.appJsCommandsDir + "/bs.js");
} catch(e){
  alert("This command requires the bs.js library\rGet it at http://bomberstudios.com/fireworks/");
};

fw.selection.each_with_index(function(o,i) {
  o.resize(o.width,o.height + 10);
});

Here the symbol with code, required bs.js library. Symbol work, but scale is work not pretty good, need to select only bg object.

Attached Files



#10 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 14 September 2011 - 02:01 PM

Took a look at bs.js, each_with_selection() sets fw.selection as normal, and resize() uses resizeSelection:

fw.getDocumentDOM().resizeSelection(w,h)

So first of all, have you tried searching for the element in the DOM by name and setting that to selection in a symbol? You might be able to use resizeSelection then.

Otherwise, could you check for o.name in the each_with_selection callback?

#11 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 15 September 2011 - 03:49 AM

Took a look at bs.js, each_with_selection() sets fw.selection as normal, and resize() uses resizeSelection:

fw.getDocumentDOM().resizeSelection(w,h)

So first of all, have you tried searching for the element in the DOM by name and setting that to selection in a symbol? You might be able to use resizeSelection then.

Otherwise, could you check for o.name in the each_with_selection callback?


Thanks! This code:

fw.getDocumentDOM().resizeSelection(w,h)

Work perfectly! Remains to find a way how to select the desired object in the symbol.

#12 pojitonov

pojitonov

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 15 September 2011 - 04:03 AM

Thanks! This code:

fw.getDocumentDOM().resizeSelection(w,h)

Work perfectly! Remains to find a way how to select the desired object in the symbol.


Also i dont know how to override o.name in the each_with_selection.

#13 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 15 September 2011 - 10:43 AM

Well my idea for using o.name was to do something like:
fw.selection.each_with_index(function(o,i) {
  if(o.name == "Whatever") o.resize(o.width,o.height + 10);
});

Otherwise you could try searching the DOM:
var elem;
var dom = fw.getDocumentDOM(Widget.elem.symbolID);
for(var l = 0; l < dom.layers.length; l++){
  for(var f = 0; f < dom.layers[l].frames.length; f++){
    for(var e = 0; e < dom.layers[l].frames[f].elements){
      if(dom.layers[l].frames[f].elements[e].name == "Whatever"){
        elem = dom.layers[l].frames[f].elements[e];
        break;
      }
    }
  }
}
if(elem){
  fw.selection = [elem];
  fw.getDocumentDOM().resizeSelection(w, h);
}

Something like that. That's assuming the fw.selection assignment will work in that case, which is a bit doubtful since GetObjectByName didn't. There's also dom.findNamedElements or something like that.

What's interesting is that the each_with_index prototype is apparently successful at setting fw.selection from within symbol context. Maybe you could make a prototype to do the resizing, then call it on your object.