3 Replies Latest reply on Dec 26, 2017 3:39 AM by thirumani selvam

    video coponent not working in mask

    thirumani selvam

      I am facing issue with video component. i am using video component is mask layer, . below code contain xfl format of masked video component.

      <DOMSymbolItem xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://ns.adobe.com/xfl/2008/" name="Condition Zoom" itemID="516d7885-0000361a" symbolType="graphic" lastModified="1514264849" lastUniqueIdentifier="1">

        <persistentData>

          <PD n="CreateJSToolkit_timelinedata" v="version&#xA;0.1&#xA;loop&#xA;true"/>

        </persistentData>

        <timeline>

          <DOMTimeline name="Condition Zoom" currentFrame="72" guides='&lt;guidelines&gt;&lt;guideline direction="h"&gt;-124&lt;/guideline&gt;&lt;guideline direction="h"&gt;-139&lt;/guideline&gt;&lt;/guidelines&gt;'>

            <layers>

              <DOMLayer name="Animation Blank" color="#4FFF4F" locked="true" outline="true" useOutlineView="true" autoNamed="false" layerType="mask">

                <frames>

                  <DOMFrame index="0" duration="193" keyMode="9728">

                    <elements>

                      <DOMShape>

                        <fills>

                          <FillStyle index="1">

                            <SolidColor color="#99CC66"/>

                          </FillStyle>

                        </fills>

                        <edges>

                          <Edge fillStyle1="1" edges="!6200 -5033|6200 -1945!6200 -1945[6200 -1856 6134 -1787!6134 -1787[6066 -1716 5973 -1718!5973 -1718|2638 -1718!2638 -1718[2552 -1718 2483 -1784!2483 -1784[2411 -1853 2411 -1945!2411 -1945|2411 -5033!2411 -5033[2411 -5123 2480 -5192!2480

      -5192[2549 -5261 2638 -5260!2638 -5260|5973 -5260!5973 -5260[6057 -5261 6131 -5182!6131 -5182[6200 -5109 6200 -5033"/>

                        </edges>

                      </DOMShape>

                    </elements>

                  </DOMFrame>

                </frames>

              </DOMLayer>

              <DOMLayer name="Animation Blank" color="#9933CC" parentLayerIndex="0" locked="true" current="true" isSelected="true" autoNamed="false">

                <frames>

                  <DOMFrame index="0" duration="193" keyMode="9728">

                    <elements>

                      <DOMComponentInstance libraryItemName="Video" selected="true" uniqueID="1">

                        <matrix>

                          <Matrix a="0.75" tx="58" ty="-319.95"/>

                        </matrix>

                        <transformationPoint>

                          <Point x="200" y="150"/>

                        </transformationPoint>

                        <parametersAsXML><![CDATA[   <property id="src">

            <Inspectable name="source" variable="src" category="" verbose="0" defaultValue="C:\Users\selvamt\Downloads\untitled.mp4" type="Video Content Path"/>

         </property>

         <property id="autoplay">

            <Inspectable name="autoplay" variable="autoplay" category="" verbose="0" defaultValue="true" type="Boolean"/>

         </property>

         <property id="controls">

            <Inspectable name="controls" variable="controls" category="" verbose="0" defaultValue="true" type="Boolean"/>

         </property>

         <property id="muted">

            <Inspectable name="muted" variable="muted" category="" verbose="0" defaultValue="false" type="Boolean"/>

         </property>

         <property id="loop">

            <Inspectable name="loop" variable="loop" category="" verbose="0" defaultValue="true" type="Boolean"/>

         </property>

         <property id="poster">

            <Inspectable name="poster image" variable="poster" category="" verbose="0" defaultValue="" type="Image Path"/>

         </property>

         <property id="preload">

            <Inspectable name="preload" variable="preload" category="" verbose="0" defaultValue="true" type="Boolean"/>

         </property>

         <property id="class">

            <Inspectable name="class" variable="class" category="" verbose="0" defaultValue="video" type="String"/>

         </property>

         <property id="__ComponentType__">

            <Inspectable name="__ComponentType__" variable="__ComponentType__" category="" verbose="0" defaultValue="1" type="Number"/>

         </property>

      ]]></parametersAsXML>

                      </DOMComponentInstance>

                    </elements>

                  </DOMFrame>

                </frames>

              </DOMLayer>

              <DOMLayer name="Layer 2" color="#9933CC" locked="true">

                <frames>

                  <DOMFrame index="0" duration="193" keyMode="9728">

                    <elements>

                      <DOMGroup>

                        <members>

                          <DOMShape>

                            <fills>

                              <FillStyle index="1">

                                <SolidColor color="#FFFFFF"/>

                              </FillStyle>

                            </fills>

                            <edges>

                              <Edge fillStyle1="1" edges="

      !6184 -5234[6255 -5158 6255 -5081!6255 -5081|6255 -1897!6255 -1897[6255 -1805 6187 -1734!6187 -1734[6117 -1661 6021 -1663!6021 -1663|2583 -1663!2583 -1663[2494 -1663 2423 -1731!2423 -1731[2349 -1803 2349 -1897!2349 -1897|2349 -5081!2349

      -5081[2349 -5174 2420 -5245!2420 -5245[2491 -5315 2583 -5315!2583 -5315|6021 -5315!6021 -5315[6108 -5315 6184 -5234"/>

                            </edges>

                          </DOMShape>

                        </members>

                      </DOMGroup>

                    </elements>

                  </DOMFrame>

                </frames>

              </DOMLayer>

              <DOMLayer name="Layer 3" color="#FFFF4F" autoNamed="false">

                <frames>

                  <DOMFrame index="0" duration="193" keyMode="9728">

                    <elements>

                      <DOMShape>

                        <fills>

                          <FillStyle index="1">

                            <LinearGradient>

                              <matrix>

                                <Matrix a="0.0246124267578125" b="-0.0918121337890625" c="0.0215301513671875" d="0.020294189453125" tx="66.5" ty="-45.4"/>

                              </matrix>

                              <GradientEntry color="#FFFFFF" alpha="0" ratio="0"/>

                              <GradientEntry color="#FFFFFF" ratio="1"/>

                            </LinearGradient>

                          </FillStyle>

                        </fills>

                        <edges>

                          <Edge fillStyle0="1" edges="

      !1101 -601/3636 -1663!3636 -1663/2745 -1678!2745 -1678/1101 -601"/>

                          <Edge cubics="!2745 -1678(;2745,-1678 1144,-256 1144,-256q2745 -1678 1144 -256);"/>

                          <Edge cubics="!1144 -256(;1144,-256 3636,-1663 3636,-1663q1144 -256 3636 -1663);"/>

                          <Edge cubics="!3636 -1663(;3636,-1663 2745,-1678 2745,-1678q3636 -1663 2745 -1678);"/>

                        </edges>

                      </DOMShape>

                    </elements>

                  </DOMFrame>

                </frames>

              </DOMLayer>

            </layers>

          </DOMTimeline>

        </timeline>

      </DOMSymbolItem>

      below line is in DOMDOCUMENT.xml

       

      <DOMBitmapItem name="____componentassets____/Video" itemID="5a41d570-0000052c" sourceLastImported="1498768008" externalFileSize="583" allowSmoothing="true" useImportedJPEGData="false" compressionType="lossless" originalCompressionType="lossless" quality="50" href="____componentassets____/Video.png" bitmapDataHRef="M 2 1514263909.dat" frameLeft="6980" frameTop="5720" frameRight="7620" frameBottom="6360"/>

      I can see video.js in the path "components\video\src"

       

      After converting to HTML5 canvas,video component is not masked, i want center of the video should be shown and other portions should be masked . Below script code shows the masked layer and video component.

       

      (lib.ConditionZoom = function(mode,startPosition,loop) {

          this.initialize(mode,startPosition,loop,{});

       

          // Animation Blank (mask)

          var mask = new cjs.Shape();

          mask._off = true;

          mask.graphics.p("ANCN1I6DAAQgrAAgighQgkgiAAguIAA4HQAAgtAigjQAjgiAsAAIaDAAQAqAAAlAnQAiAlAA AmIAAYHQAAAsghAjQghAjgtAAIgCgBg");

          mask.setTransform(215.3,-174.4);

       

          // Animation Blank

          this.instance = new lib.an_Video({'id': '', 'src':'videos/untitled.mp4', 'autoplay':true, 'controls':true, 'muted':false, 'loop':true, 'poster':'images/', 'preload':true, 'class':'video'});

       

          this.instance.setTransform(208,-169.9,0.75,1,0,0,0,200,150);

       

          var maskedShapeInstanceList = [this.instance];

       

          for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {

              maskedShapeInstanceList[shapedInstanceItr].mask = mask;

          }

       

          this.timeline.addTween(cjs.Tween.get(this.instance).wait(193));

       

          // Layer 2

          this.shape = new cjs.Shape();

          this.shape.graphics.f("#FFFFFF").s().p("ANbORI62AAQgsAAgkgiQglgkAAgvIAA43QABgvAjgjQAkgjAt AAIa2AAQAsAAAmAoQAjAmABAnIAAY3QAAAugjAjQgiAkguAAIgDAAg");

          this.shape.setTransform(215.1,-174.4);

       

          this.timeline.addTween(cjs.Tween.get(this.shape).wait(193));

       

          // Layer 3

          this.shape_1 = new cjs.Shape();

          this.shape_1.graphics.lf(["rgba(255,255,255,0)","#FFFFFF"],[0,1],-72,86.8,-31.7,-63.6).s( ).p("AC8kMIG+AHIzzISg");

          this.shape_1.setTransform(118.4,-57);

       

          this.timeline.addTween(cjs.Tween.get(this.shape_1).wait(193));

       

      }).prototype = p = new cjs.MovieClip();

      p.nominalBounds = new cjs.Rectangle(55.1,-265.7,257.7,235.7);