0 Replies Latest reply on Sep 22, 2009 8:43 PM by jaysondking

    trouble using component...

    jaysondking Level 1

      I bought a component for Flash to use for photos. The problem is I do not know how to use it? I went over and over the directions and tried to find help online... no luck. If you could please help me I would so much appreciate it!!!

       

      Here are the directions...

       

      This component is a 2D product display panel, panning component, vertical and horizontal scroller. The code will

      adjust itself after the variables found in the .xml file.

      The component is highly customizable directly from the xml but you could modify a few components from the .fla with

      ease.

      1. In order to use the component into your flash projects (and you want to have the component embedded into

      your project) you must first copy the folder “Product Display 01 by Flashtory” into your new projects library and

      drag and drop to the stage the movie clip called “main” (you will find these folders once you open the .fla and

      the library – Ctrl + L). Copy all of the source files into your new project root folder ( “flashtory”, “ascb” and

      “caurina” folders). In main.as you have the function readTheXml(), here you will be able to specify which .xml

      file to load when this is used embedded into another swf file, when this is embedded into a html and you forgot

      to specify in the flashvars the .xml file the xml mentioned in main.as will be used.

       

      I opened the main.as file and I do not have a clue where to add my own photos? I test the movie and there are the sample photos... I do not even see in the code where they are?

       

      The code is:

       

      import caurina.transitions.*;

      import ascb.util.Proxy;

      import flash.filters.BlurFilter;

       

      class flashtory.ProductDisplay.main extends MovieClip

      {

      private var settingsObj:Object;

      private var myXml:XML;

       

      private var holder:MovieClip;

      private var lst:MovieClip;

      private var mask:MovieClip;

       

      private var xpos:Number = 0;

      private var ypos:Number = 0;

       

      private var lstWidth:Number = 0;

      private var lstHeight:Number = 0;

       

      private var idx:Number = 0;

       

      private var mode:String;

       

      private var yTol:Number;

      private var xTol:Number;

       

      public function main()

      {

      defaultSettings();

      init();

      readTheXml();

      }

       

      private function init() {

      settingsObj = new Object();

      lst = holder["lst"];

      mask = holder["mask"];

      lst.setMask(mask);

      }

       

       

      /**

      * this will execute after the .xml file has loaded

      */

      public function cont()

      {

      var node:XMLNode = myXml.firstChild.firstChild;

       

      settingsObj = parseSettingsNode(node);

       

      mask._width = settingsObj.maskWidth;

      mask._height = settingsObj.maskHeight;

       

      node = node.nextSibling;

       

      var totalItemWidth:Number = settingsObj.thumbWidth + 2 * settingsObj.strokeSize;

      var totalItemHeight:Number = settingsObj.thumbHeight + 2 * settingsObj.strokeSize;

      var posX:Number = 0;

      var posY:Number = 0;

       

      /**

      * generating all the thumbnails

      */

      for (node = node.firstChild; node != null; node = node.nextSibling) {

      var currentItem:MovieClip = lst.attachMovie("IDthumbnail", "Thumbnail__" + idx, lst.getNextHighestDepth());

      currentItem.addEventListener("thumbLoaded", Proxy.create(this, thumbLoaded));

       

      currentItem._x = posX;

      currentItem._y = posY;

       

      posX += settingsObj.horizontalSpace + totalItemWidth;

      if ((posX + totalItemWidth) > settingsObj.totalWidth) {

      if (lstWidth == 0) {

      lstWidth = posX - settingsObj.horizontalSpace + 2 * settingsObj.mouseOverMagnify + 2 * settingsObj.strokeSize;

      }

      posY += settingsObj.verticalSpace + totalItemHeight;

      posX = 0;

      }

      currentItem.setNode(node, settingsObj);

      idx++;

      }

       

       

      if (idx == 1) {

      mode = "pan";

      }

      else {

      if (lst._width == totalItemWidth) {

      mode = "vScroller";

      }

      else {

      if (lst._height == totalItemHeight) {

      mode = "hScroller";

      }

      else {

      mode = "display";

      }

       

      }

       

      }

       

       

       

       

      if (posX == 0) {

      lstHeight = posY - settingsObj.verticalSpace + 2 * settingsObj.mouseOverMagnify + 2 * settingsObj.strokeSize;

      }

      else {

      lstHeight = posY + totalItemHeight + 2 * settingsObj.mouseOverMagnify + 2 * settingsObj.strokeSize;

      }

       

      if (mode == "pan") {

      xTol = 0;

      yTol = 0;

      currentItem._x += 15;

      currentItem._y += 15;

       

      lstHeight = settingsObj.thumbHeight + 2 * settingsObj.strokeSize + 30;

      lstWidth = settingsObj.thumbWidth + 2 * settingsObj.strokeSize + 30;

      }

       

      if (mode == "display") {

      xTol = settingsObj.thumbWidth;

      yTol = settingsObj.thumbHeight;

      }

       

      if (mode == "vScroller") {

      xTol = 0;

      yTol = settingsObj.thumbHeight;

       

      lst._x = settingsObj.mouseOverMagnify;

      mask._width = settingsObj.maskWidth = totalItemWidth + 2 * settingsObj.mouseOverMagnify;

      }

       

      if (mode == "hScroller") {

      xTol = settingsObj.thumbWidth;

      yTol = 0;

       

      lstWidth = lst._width + 2 * settingsObj.mouseOverMagnify;

      lst._y = settingsObj.mouseOverMagnify;

      mask._height = settingsObj.maskHeight = totalItemHeight + 2 * settingsObj.mouseOverMagnify;

      }

       

      idx = -1;

       

      idx++;

      if (lst["Thumbnail__" + idx]) {

      if (mode == "pan") {

      lst["Thumbnail__" + idx].overActions = 0;

       

      }

       

      lst["Thumbnail__" + idx].mode = mode;

      }

       

      idx = -1;

      thumbLoaded();

       

      if (mode == "vScroller") {

      if ((posY + totalItemHeight) < mask._height) {

      lst._y = Math.round(mask._height / 2 - (posY + totalItemHeight) / 2);

      }

      else {

      setInterval(this, "detectMouse", 20);

      }

      }

      else {

      if (mode == "hScroller") {

      setInterval(this, "detectMouse", 20);

      }

      else {

      setInterval(this, "detectMouse", 20);

      }

      }

       

      trace("The Component will work in ---=== " + mode + " ===--- mode ");

       

      var i:String;

      for ( i in settingsObj) {

      trace(i + " = " + settingsObj[i] + " ;")

      }

       

      trace("Enjoy this new release from Flashtory.com");

      }

       

      /**

      * this will execute after a thumb has loaded, this will load the next thumb

      * @param obj

      */

      private function thumbLoaded(obj:Object) {

      idx++;

      if (lst["Thumbnail__" + idx]) {

      lst["Thumbnail__" + idx].loadThumb();

      }

      }

       

      /**

      * this scans for the mouse position and updates the list

      */

      private function detectMouse() {

       

      if ((this._xmouse > 0) && (this._xmouse < settingsObj.maskWidth) && (this._ymouse > 0) && (this._ymouse < settingsObj.maskHeight ) ) {

       

      if (mode != "hScroller") {

      var ym:Number = this._ymouse - yTol;

       

      if (ym<0) {

      ym = -settingsObj.yScrollingCorrection;

      }

       

      if (ym>(settingsObj.maskHeight - yTol)) {

      ym = settingsObj.maskHeight - yTol;

      }

       

      ypos = Math.round((ym * (settingsObj.maskHeight - lstHeight)) / (settingsObj.maskHeight - yTol));

      }

       

       

      if (mode != "vScroller") {

      var xm:Number = this._xmouse - xTol;

      if (xm<0) {

      xm = -settingsObj.xScrollingCorrection;

       

      }

       

      if (xm>(settingsObj.maskWidth - xTol)) {

      xm = settingsObj.maskWidth - xTol;

      }

       

      xpos = Math.round((xm*(settingsObj.maskWidth - lstWidth))/(settingsObj.maskWidth - xTol));

      }

       

      lst.onEnterFrame = Proxy.create(this, lstEnter, ypos, xpos);

      }

      }

       

      private function lstEnter(ypos:Number, xpos:Number) {

       

      if (mode != "hScroller") {

      if (Math.abs(lst._y-ypos)<1) {

      lst._y = ypos;

      delete lst.onEnterFrame;

      if (settingsObj.toggleBlur == true) {

      blur(0, 0, lst);

      }

      break;

      }

      else {

      if (settingsObj.toggleBlur == true) {

      if (Math.abs(ypos-lst._y)>50) {

      blur(0, Math.abs((ypos - lst._y) / 12), lst);

      } else {

      blur(0, 0, lst);

      }

      }

      lst._y += Math.round((ypos - lst._y) / settingsObj.scrollingSpeed);

      }

      }

       

       

      if (mode != "vScroller") {

      if (Math.abs(lst._x - xpos)<1) {

      lst._x = xpos;

      delete lst.onEnterFrame;

      if (settingsObj.toggleBlur == true) {

      blur(0, 0, lst);

      }

      break;

      }

      else {

      if (settingsObj.toggleBlur == true) {

      if (Math.abs(xpos-lst._x)>50) {

      blur(Math.abs((xpos - lst._x) / 12), 0, lst);

      } else {

      blur(0, 0, lst);

      }

      }

      lst._x += Math.round((xpos - lst._x) / settingsObj.scrollingSpeed);

      }

      }

       

      }

       

      /**

      * this will blur the lst

      * @param blurX

      * @param blurY

      * @param mc

      */

      private function blur(blurX:Number, blurY:Number, mc:MovieClip) //function used for blurring the image

      {

      var quality:Number = 2;

      var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);

      mc.filters = [filter];

      }

       

      /**

      * this will load the .xml file

      * if you are using this component into another flash component, here you can setup the .xml file

      * if you are using this embedded into a .html file and you specify the .xml file using the flashvars the .xml file

      * mentioned below will be the one mentioned in the .html flashvars

      */

      private function readTheXml() {

      var xmlOb:XML = new XML();

      myXml = xmlOb;

      xmlOb.ignoreWhite = true;

      xmlOb.onLoad = Proxy.create(this, cont);

      xmlOb.load(_level0.xml == undefined ? "data_display.xml" : _level0.xml);

      }

       

      private function defaultSettings()

      {

      // these settings are the default ones so the project will look nice on the screen

      // if you remove these the menu;s functionality will not be afected but it will no longer be fixed size

      // at some php/html applications you should remove these

       

      Stage.scaleMode = "noScale";

      Stage.align = "LT";

      this._lockroot = true;

      }

       

      private function parseSettingsNode(n:XMLNode):Object {

      var o:Object = new Object();

       

      for (n = n.firstChild; n != null; n = n.nextSibling) {

      var rawStr:String = n.firstChild.nodeValue;

      var clnStr:String = (remWhiteSpace(rawStr)).toLowerCase();

       

      if (!isNaN(clnStr)) { o[n.nodeName] = Number(clnStr); }

      else if (clnStr == "true") { o[n.nodeName] = true; }

      else if (clnStr == "false") { o[n.nodeName] = false; }

      else { o[n.nodeName] = remSideSpace(rawStr); }

      }

       

      return o;

      }

       

      private function remWhiteSpace(str:String) {

      var newStr:String = "";

       

      for (var i = 0; i < str.length; i++) {

      var c:String = str.charAt(i);

       

      (c != ' ' && c != '\t' && c != '\n' && c != '\r') ? (newStr += c) : null;

      }

       

      return newStr;

      }

       

      private function remSideSpace(str:String) {

      var newStr:String = "";

      var innSpc:String = "";

       

      for (var i = 0; i < str.length; i++) {

      var c:String = str.charAt(i);

       

      if (c == ' ' || c == '\n' || c == '\t' || c == '\r') {

      innSpc += c;

      }else {

      newStr += (newStr == "") ? c : (innSpc + c);

      innSpc = "";

      }

      }

       

      return newStr;

      }

       

      /**

      * this function will draw a square or an oval, depending on the r value

      * @param mc

      * @param mw

      * @param mh

      * @param r

      * @param fillColor

      * @param alphaAmount

      */

      private function drawOval(mc:MovieClip, mw:Number, mh:Number, r:Number, fillColor:Number, alphaAmount:Number) { // this function will draw an oval

      mc.clear();

      mc.beginFill(fillColor,alphaAmount);

      mc.moveTo(r,0);

      mc.lineTo(mw-r,0);

      mc.curveTo(mw,0,mw,r);

      mc.lineTo(mw,mh-r);

      mc.curveTo(mw,mh,mw-r,mh);

      mc.lineTo(r,mh);

      mc.curveTo(0,mh,0,mh-r)

      mc.lineTo(0,r);

      mc.curveTo(0,0,r,0);

      mc.endFill();

      }

      }

       

      I wish there was a tutorial of how to use these types of components... I have downloaded others which are similar and looked on lynda... anywhere... and cannot find help.

       

      Thank So Much,

       

      Jayson